[혜수] 피드백 페이지 생성

src/apis/client/getFeedbacks.ts

@@ -0,0 +1,15 @@
+import { DOMAIN } from '@/constants/api';
+import { GetFeedbacksResponse } from '@/types/apis/feedback/GetFeedbacks';
+import { axiosInstanceClient } from '../axiosInstanceClient';
+
+export const getFeedbacks = async (planId: number) => {
+  const { data } = await axiosInstanceClient.get<GetFeedbacksResponse>(
+    DOMAIN.GET_FEEDBACKS(planId),
+    {
+      params: {
+        planId,
+      },
+    },
+  );
+  return data;
+};

src/apis/client/postFeedbacks.ts

@@ -0,0 +1,13 @@
+import { DOMAIN } from '@/constants';
+import { PostFeedbacksRequest } from '@/types/apis/feedback/PostFeedbaks';
+import { axiosInstanceClient } from '../axiosInstanceClient';
+
+export const postFeedbacks = async ({ planId, body }: PostFeedbacksRequest) => {
+  const { data } = await axiosInstanceClient.post(
+    DOMAIN.POST_FEEDBACKS(planId),
+    {
+      ...body,
+    },
+  );
+  return data;
+};

src/app/(header)/home/_components/Plan/Plan.tsx

@@ -36,15 +36,15 @@ export default function Plan({
         <p className={classNames(`plan__title`, 'font-size-md')}>{title}</p>
         <p className={classNames('font-size-base')}>달성률: {achieveRate}%</p>
         <Link
-          href={''}
+          href={`/feedback/${planId}`}
           className={classNames(
             'plan__feedback',
             'font-size-sm',
-            'color-origin-secondary',
-            'border-origin-secondary',
+            'color-origin-primary',
+            'border-origin-primary',
             'border-round',
           )}>
-          피드백 보기 (업데이트 중!)
+          피드백 보기
         </Link>
       </div>
     </Link>

src/app/feedback/[planId]/_components/index.scss

@@ -0,0 +1,65 @@
+.feedback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: scroll;
+  margin-left: var(--scroll-margin-left);
+  padding: 2rem 0;
+  &__breadcrumb {
+    display: flex;
+    align-self: flex-start;
+    gap: 0.5rem;
+    a {
+      text-decoration: none;
+      color: var(--origin-text-100);
+    }
+  }
+  &__title {
+    margin-top: 2rem;
+    margin-bottom: 0rem;
+  }
+  &__circular-progressbar {
+    width: 4rem;
+    height: 4rem;
+    .CircularProgressbar-text {
+      font-size: 2rem;
+      fill: var(--origin-text-100);
+    }
+    .CircularProgressbar-path {
+      stroke: var(--origin-primary);
+      stroke-linecap: round;
+    }
+    .CircularProgressbar-trail {
+      stroke: var(--origin-secondary);
+    }
+    .CircularProgressbar-path {
+      stroke: var(--origin-primary);
+    }
+  }
+  &__evaluate {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem 0;
+    &-item {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 100%;
+      max-height: calc(100% - 14rem);
+      overflow-y: scroll;
+      margin-left: var(--scroll-margin-left);
+      padding-bottom: 1rem;
+    }
+  }
+  &__back-to-plans {
+    width: 100%;
+    text-decoration: none;
+    position: absolute;
+    bottom: 6rem;
+    max-width: calc(100% - 3rem);
+  }
+}

src/app/feedback/[planId]/page.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '@/components';
+import FeedbackItem from '@/components/FeedbackItem/FeedbackItem';
+import { useGetFeedbacksQuery } from '@/hooks/apis/useGetFeedbacksQuery';
+import { useScroll } from '@/hooks/useScroll';
+import classNames from 'classnames';
+import Link from 'next/link';
+import { CircularProgressbar } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+import './_components/index.scss';
+
+export default function FeedbackPage({
+  params,
+}: {
+  params: { planId: string };
+}) {
+  const { planId } = params;
+  const { feedback } = useGetFeedbacksQuery(parseInt(planId, 10));
+  const { achieveRate, title, feedbacks } = feedback;
+  const { handleScroll, scrollableRef } = useScroll();
+  let plan_evaluate_text = '';
+
+  if (achieveRate >= 80) {
+    plan_evaluate_text = '매우 잘 지키고 있어요!';
+  } else if (achieveRate >= 50) {
+    plan_evaluate_text = '잘 지키고 있어요!';
+  } else {
+    plan_evaluate_text = '잘 지켜주세요!';
+  }
+
+  return (
+    <div className={classNames('feedback')}>
+      <div className="feedback__breadcrumb font-size-base color-origin-text-100">
+        <Link href="/home">홈</Link>
+        &gt;
+        <Link href={`/plans/${planId}`}>내 계획</Link>
+        &gt;
+        <span>피드백</span>
+      </div>
+      <div className={classNames('font-size-xl', 'feedback__title')}>
+        피드백
+      </div>
+      <div className={classNames('feedback__evaluate')}>
+        <CircularProgressbar
+          value={achieveRate}
+          text={`${achieveRate}%`}
+          className={classNames('feedback__circular-progressbar')}
+        />
+        <div className={classNames('feedback__evaluate-text', 'font-size-md')}>
+          <p
+            className={classNames(
+              'feedback__evaluate-title',
+              'color-origin-primary',
+            )}>
+            {title}
+          </p>
+          <span>계획을 </span>
+          <span className={classNames('color-origin-primary')}>
+            {plan_evaluate_text}
+          </span>
+        </div>
+      </div>
+      <div
+        ref={scrollableRef}
+        onScroll={handleScroll}
+        className={classNames('feedback__evaluate-item')}>
+        {feedbacks.map((item) => {
+          return (
+            <FeedbackItem
+              data={item}
+              title={title}
+              planId={parseInt(planId, 10)}
+              remindTime={feedback.remindTime}
+              createdYear={feedback.createdYear}
+              key={item.remindMonth}
+            />
+          );
+        })}
+      </div>
+      <Link
+        href={`/plans/${planId}`}
+        className={classNames('feedback__back-to-plans')}>
+        <Button background="primary" color="white-100" border={false}>
+          계획으로 돌아가기
+        </Button>
+      </Link>
+    </div>
+  );
+}

src/app/feedback/evaluate/_components/EvaluateRadio.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import { ChangeEvent } from 'react';
+
+type EvaluateRadioProps = {
+  evaluateOption: number;
+  setEvaluateOption: React.Dispatch<React.SetStateAction<number>>;
+};
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+export default function EvaluateRadio({
+  evaluateOption,
+  setEvaluateOption,
+}: EvaluateRadioProps) {
+  const options: Option[] = [
+    { value: '100', label: '매우 잘함 (100%)' },
+    { value: '75', label: '잘 함 (75%)' },
+    { value: '50', label: '보통 (50%)' },
+    { value: '25', label: '대체로 못함 (25%)' },
+    { value: '0', label: '전혀 못함 (0%)' },
+  ];
+
+  const handleOptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setEvaluateOption(parseInt(event.target.value, 10));
+  };
+
+  return (
+    <div className={classNames('evaluate-radio')}>
+      {options.map((option) => (
+        <>
+          <label key={option.value}>
+            <input
+              type="radio"
+              value={option.value}
+              checked={evaluateOption === parseInt(option.value, 10)}
+              onChange={handleOptionChange}
+            />
+            {option.label}
+          </label>
+          <br></br>
+        </>
+      ))}
+    </div>
+  );
+}

src/app/feedback/evaluate/_components/index.scss

@@ -0,0 +1,54 @@
+.feedback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow-y: scroll;
+  margin-left: var(--scroll-margin-left);
+  padding: 2rem 0;
+  gap: 2rem;
+  &__breadcrumb {
+    display: flex;
+    gap: 0.5rem;
+    a {
+      text-decoration: none;
+      color: var(--origin-text-100);
+    }
+  }
+  &__send {
+    width: 100%;
+    text-decoration: none;
+    position: absolute;
+    bottom: 6rem;
+    max-width: calc(100% - 3rem);
+  }
+  &__content {
+    width: 100%;
+  }
+}
+.evaluate-radio {
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  margin: 1.5rem 0;
+  label {
+    display: flex;
+    align-items: center;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  input[type='radio'] {
+    appearance: none;
+    width: 0.9rem;
+    height: 0.9rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+    border: 1px solid var(--origin-primary);
+
+    &:checked {
+      background-color: var(--origin-primary);
+    }
+  }
+}