[혜수] - 네비게이션바에 계획 생성 가능 여부 전역상태관리 추가

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

@@ -1,15 +1,14 @@
 'use client';
 
 import { Dropdown } from '@/components';
+import { maxPlan } from '@/constants/plan';
 import { planIcons } from '@/constants/planIcons';
 import { useScroll } from '@/hooks/useScroll';
-import { canMakeNewPlanStore } from '@/stores/canMakeNewPlanStore';
 import { GetMyPlansResponse } from '@/types/apis/plan/GetMyPlans';
 import { checkThisYear } from '@/utils/checkThisYear';
 import classNames from 'classnames';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
 import NewPlan from './NewPlan/NewPlan';
 import Plan from './Plan/Plan';
 import ProgressBar from './ProgressBar/ProgressBar';
@@ -19,7 +18,6 @@ type MyPlanProps = {
 };
 
 export default function MyPlan({ myPlans }: MyPlanProps) {
-  const maxLength = 4;
   const { handleScroll, scrollableRef } = useScroll();
   const { data: myPlansData } = myPlans;
   const yearList = myPlansData.map((x) => x.year);
@@ -28,7 +26,7 @@ export default function MyPlan({ myPlans }: MyPlanProps) {
   const [yearDataLength, setYearDataLength] = useState(
     myPlansData[0].getPlanList.length,
   );
-  const setCanMakeNewPlan = useSetRecoilState(canMakeNewPlanStore);
+
   const PERIOD_OPTIONS = yearList.map((x) => {
     return { value: x, name: `${x}년 계획` };
   });
@@ -37,8 +35,7 @@ export default function MyPlan({ myPlans }: MyPlanProps) {
     const chosenYearData = myPlansData.find((x) => x.year === year)!;
     setYearData(chosenYearData);
     setYearDataLength(chosenYearData.getPlanList.length);
-    setCanMakeNewPlan(!!(maxLength - chosenYearData.getPlanList.length));
-  }, [year, myPlansData, setCanMakeNewPlan, setYearDataLength]);
+  }, [year, myPlansData, setYearDataLength]);
   return (
     <>
       <div className={classNames('home__header')}>
@@ -95,7 +92,7 @@ export default function MyPlan({ myPlans }: MyPlanProps) {
         )}
         <NewPlan />
         <p className={classNames('home__number', 'color-origin-text-300')}>
-          ({yearDataLength}/{maxLength})
+          ({yearDataLength}/{maxPlan})
         </p>
       </div>
     </>

src/app/_components/Navigation/Navigation.tsx

@@ -1,22 +1,25 @@
 'use client';
 
+import { getMyPlans } from '@/apis/client/getMyPlans';
 import { Icon } from '@/components';
 import { ajajaToast } from '@/components/Toaster/customToast';
+import { maxPlan } from '@/constants/plan';
 import { canMakeNewPlanStore } from '@/stores/canMakeNewPlanStore';
 import { checkIsSeason } from '@/utils/checkIsSeason';
+import { checkThisYear } from '@/utils/checkThisYear';
 import classNames from 'classnames';
 import { hasCookie } from 'cookies-next';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useEffect, useState } from 'react';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import './index.scss';
 
 export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
   const pathName = usePathname();
   const [isLogin, setIsLogin] = useState(hasAuth);
   const [canMakeNewPlan] = useRecoilState(canMakeNewPlanStore);
-
+  const setCanMakeNewPlan = useSetRecoilState(canMakeNewPlanStore);
   if (!hasCookie('auth')) {
     setTimeout(() => {
       setIsLogin(hasCookie('auth'));
@@ -29,6 +32,16 @@ export default function Navigation({ hasAuth }: { hasAuth: boolean }) {
     }
   };
 
+  useEffect(() => {
+    async function isMaxPlan() {
+      const data = await getMyPlans();
+      if (data.data[0]?.year === checkThisYear()) {
+        setCanMakeNewPlan(!!(maxPlan - data.data[0].getPlanList.length));
+      }
+    }
+    isMaxPlan();
+  }, [setCanMakeNewPlan]);
+
   return (
     <div className={classNames('navigation')}>
       <Link

src/constants/plan.ts

@@ -0,0 +1 @@
+export const maxPlan = 4;