♻️ : #52 - 내 계획 페이지 client component로 변경

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

@@ -0,0 +1,75 @@
+'use client';
+
+import { Dropdown } from '@/components';
+import { GetMyPlansResponse } from '@/types/apis/plan/GetMyPlans';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import NewPlan from './NewPlan/NewPlan';
+import Plan from './Plan/Plan';
+import ProgressBar from './ProgressBar/ProgressBar';
+
+type MyPlanProps = {
+  myPlans: GetMyPlansResponse;
+};
+
+export default function MyPlan({ myPlans }: MyPlanProps) {
+  const maxLength = 4;
+  const { data: myPlansData } = myPlans;
+  const yearList = myPlansData.map((x) => x.year);
+  const [period, setPeriod] = useState(yearList[0]);
+  const [yearData, setYearData] = useState(myPlansData[0]);
+  const PERIOD_OPTIONS = yearList.map((x) => {
+    return { value: x, name: `${x}년 계획` };
+  });
+
+  useEffect(() => {
+    setYearData(myPlansData.find((x) => x.year === period)!);
+  }, [period, myPlansData]);
+
+  return (
+    <>
+      <div className={classNames(`home__wrapper-dropdown`)}>
+        <Dropdown
+          options={PERIOD_OPTIONS}
+          selectedValue={period}
+          setSelectedValue={setPeriod}
+        />
+      </div>
+      <div
+        className={classNames(
+          `home__wrapper--year`,
+          `font-size-3xl`,
+          `color-origin-gray-300`,
+        )}>
+        {period}년 나의 계획은?
+      </div>
+      <ProgressBar percent={50} />
+      <div
+        className={classNames(
+          `home__wrapper--year`,
+          `font-size-base`,
+          `color-origin-gray-200`,
+        )}>
+        전체 달성률 : {50}%
+      </div>
+      <div className={classNames('home__plans')}>
+        {yearData.getPlanList.map((plan, index) => {
+          return (
+            <Plan
+              key={index}
+              title={plan.title}
+              achieveRate={plan.achieveRate}
+              icon={plan.icon}
+            />
+          );
+        })}
+        {Array.from(
+          { length: maxLength - yearData.getPlanList.length },
+          (_, i) => {
+            return <NewPlan key={i} />;
+          },
+        )}
+      </div>
+    </>
+  );
+}

src/app/(header)/home/page.tsx

@@ -1,53 +1,73 @@
 // import { getMyPlans } from '@/hooks/apis/plans/useMyPlansQuery';
 import classNames from 'classnames';
-import NewPlan from './_components/NewPlan/NewPlan';
-import Plan from './_components/Plan/Plan';
-import ProgressBar from './_components/ProgressBar/ProgressBar';
-import YearDropdown from './_components/YearDropdown';
+// import NewPlan from './_components/NewPlan/NewPlan';
+// import Plan from './_components/Plan/Plan';
+// import ProgressBar from './_components/ProgressBar/ProgressBar';
+import MyPlan from './_components/MyPlan';
 import './_components/index.scss';
 
 export default async function HomePage() {
   // const { data } = await getMyPlans('1');
   // console.log(data.getPlanList);
-  const maxLength = 4;
-  const getPlanList = [
-    { title: '매일 운동하기', isRemindable: true, achieveRate: 90, icon: 1 },
-    { title: '매일 코딩하기', isRemindable: true, achieveRate: 60, icon: 2 },
-    {
-      title: '매일 아침 9시에 일어나기',
-      isRemindable: false,
-      achieveRate: 20,
-      icon: 3,
-    },
-  ];
+
+  const myPlans = {
+    success: true,
+    data: [
+      {
+        year: 2023,
+        totalAchieveRate: 50,
+        getPlanList: [
+          {
+            title: '매일 운동하기',
+            isRemindable: true,
+            achieveRate: 90,
+            icon: 5,
+          },
+          {
+            title: '매일 코딩하기',
+            isRemindable: true,
+            achieveRate: 90,
+            icon: 8,
+          },
+          {
+            title: '매일 아침 9시에 일어나기',
+            isRemindable: false,
+            achieveRate: 20,
+            icon: 3,
+          },
+        ],
+      },
+      {
+        year: 2022,
+        totalAchieveRate: 80,
+        getPlanList: [
+          {
+            title: '졸업 작품 끝내기',
+            isRemindable: true,
+            achieveRate: 90,
+            icon: 7,
+          },
+          {
+            title: '매일 아침 먹기',
+            isRemindable: true,
+            achieveRate: 70,
+            icon: 2,
+          },
+          {
+            title: '총 학점 4.0 이상 나오기',
+            isRemindable: false,
+            achieveRate: 50,
+            icon: 3,
+          },
+        ],
+      },
+    ],
+  };
+
   return (
     <>
       <div className={classNames(`home__wrapper`)}>
-        <YearDropdown />
-        <ProgressBar percent={50} />
-        <div
-          className={classNames(
-            `home__wrapper--year`,
-            `font-size-base`,
-            `color-origin-gray-200`,
-          )}>
-          전체 달성률 : {50}%
-        </div>
-        <div className={classNames('home__plans')}>
-          {getPlanList.map((plan, index) => {
-            return (
-              <Plan
-                key={index}
-                title={plan.title}
-                achieveRate={plan.achieveRate}
-                icon={plan.icon}
-              />
-            );
-          })}
-          {Array.from({ length: maxLength - getPlanList.length }, (_, i) => {
-            return <NewPlan key={i} />;
-          })}
-        </div>
+        <MyPlan myPlans={myPlans} />
       </div>
     </>
   );