feat: 처음으로 목표를 생성하는 경우 처리

Author: rusia9217

src/app/(main)/home/goal-setting/page.tsx

@@ -108,10 +108,15 @@ const GoalSetting = () => {
     setGoalData(resetState);
   };
 
+  // useEffect(() => {
+  //   console.log('goalData', goalData);
+  // }, [goalData]);
+
   return (
     <div className={'min-h-screen'}>
-      {isSettingNewGoalModalOpen ? (
+      {isSettingNewGoalModalOpen && userGoals ? (
         <SettingNewGoalModal
+          isFirstGoalSetting={userGoals.length === 0} //새로 생성된 목표가 없을 경우
           fetchDataAndUpdateState={fetchDataAndUpdateState}
           setIsResetButtonClick={setIsResetButtonClick}
           resetData={resetData}

src/components/home/goal-setting/SettingNewGoalModal.tsx

@@ -1,7 +1,9 @@
+import { useRouter } from 'next/navigation';
 import { type SVGProps } from 'react';
 import * as React from 'react';
 
 interface Props {
+  isFirstGoalSetting: boolean;
   setIsSettingNewModal: React.Dispatch<React.SetStateAction<boolean>>;
   isSettingNewGoalModal: boolean;
   resetData: () => void;
@@ -10,8 +12,15 @@ interface Props {
 }
 
 const SettingNewGoalModal = (props: Props) => {
-  const { setIsSettingNewModal, isSettingNewGoalModal, resetData, setIsResetButtonClick, fetchDataAndUpdateState } =
-    props;
+  const {
+    isFirstGoalSetting = false,
+    setIsSettingNewModal,
+    isSettingNewGoalModal,
+    resetData,
+    setIsResetButtonClick,
+    fetchDataAndUpdateState,
+  } = props;
+  const router = useRouter();
   return (
     <>
       <div
@@ -28,10 +37,14 @@ const SettingNewGoalModal = (props: Props) => {
         </div>
         <div className={'flex flex-col gap-y-4 bg-white rounded-[32px] p-5'}>
           <div className={'flex flex-col gap-y-1'}>
-            <div className={'text-h2 font-semibold text-black'}>이전 목표를 불러올까요?</div>
+            <div className={'text-h2 font-semibold text-black'}>
+              {isFirstGoalSetting ? '이전에 세우신 목표가 없어요!' : '이전 목표를 불러올까요?'}
+            </div>
             <div>
-              <div className={'flex items-center text-h6'}>정보를 불러오면 이전에 설정한 목표를</div>
-              <div className={'text-h6'}>토대로 작성할 수 있어요.</div>
+              <div className={'flex items-center text-h6'}>
+                {isFirstGoalSetting ? '새로운 목표를 세워보시겠어요?' : '정보를 불러오면 이전에 설정한 목표를'}
+              </div>
+              {!isFirstGoalSetting && <div className={'text-h6'}>토대로 작성할 수 있어요.</div>}
             </div>
           </div>
           <div className={'flex justify-end gap-x-2'}>
@@ -44,14 +57,16 @@ const SettingNewGoalModal = (props: Props) => {
               className={'bg-gray1 rounded-full text-gray4 py-[7px] px-4'}>
               새 목표
             </button>
-            <button
-              onClick={() => {
-                fetchDataAndUpdateState();
-                setIsSettingNewModal(!isSettingNewGoalModal);
-              }}
-              className={'bg-black rounded-full text-white py-[7px] px-3'}>
-              불러오기
-            </button>
+            {!isFirstGoalSetting && (
+              <button
+                onClick={() => {
+                  fetchDataAndUpdateState();
+                  setIsSettingNewModal(!isSettingNewGoalModal);
+                }}
+                className={'bg-black rounded-full text-white py-[7px] px-3'}>
+                불러오기
+              </button>
+            )}
           </div>
         </div>
       </div>