버그 수정

src/app/routes/goal/create-goal.tsx

@@ -1,9 +1,18 @@
+import { useMemo } from "react";
+
 import CreateGoal from "@/features/goal/routes/CreateGoal";
-import { useParams } from "react-router";
+import { useLocation } from "react-router";
 
 const CreateGoalView = () => {
-  const { goalId } = useParams<{ goalId?: string }>();
-  const parsedGoalId: number | undefined = goalId ? Number(goalId) : undefined;
+  const { search } = useLocation();
+  const parsedGoalId = useMemo(() => {
+    const queryParams = new URLSearchParams(search);
+    const goalId = queryParams.get("goalId");
+    const numberedGoalId = goalId ? Number(goalId) : -1;
+    localStorage.setItem("goalId", String(numberedGoalId));
+
+    return numberedGoalId;
+  }, [search]);
 
   return <CreateGoal goalId={parsedGoalId} />;
 };

src/components/ui/header/index.const.ts

@@ -17,7 +17,8 @@ export const HEADER_TITLE_MAP = new Map([
   [paths.goal.create.getHref(), "목표추가"],
   [paths.profile.reward.getHref(), "리워드 신청"],
   [paths.auth.agreement.getHref(), "약관동의"],
-  [paths.auth.phoneNumber.getHref(), "정보입력"]
+  [paths.auth.phoneNumber.getHref(), "정보입력"],
+  [paths.user.account.getHref(), "계정관리"]
 ]);
 
 export const backgroundImages = [

src/components/ui/header/profile-header.tsx

@@ -19,7 +19,7 @@ import {
   generateProgressPercent
 } from "./index.const";
 
-function ProfileHeader() {
+function ProfileHeader({ popoverContent }: { popoverContent: string }) {
   const { userName, point } = useUserStore();
   const [bgImage, setBgImage] = useState("");
 
@@ -85,15 +85,15 @@ function ProfileHeader() {
             side="left"
             className="w-50 p-2 text-xs text-green-500"
           >
-            목표는 최대 3개까지 생성 가능합니다.
+            {popoverContent}
           </PopoverContent>
         </Popover>
       </div>
 
       <div>
         <p className="text-xl">
-          안녕하세요!
-          <span className="font-bold text-green-300">{userName}</span>님
+          <span>안녕하세요!</span>
+          <span className="font-bold text-green-300">{` ${userName}`}</span>님
         </p>
         <p className="text-sm">오늘도 일단 가볼까요?</p>
       </div>

src/components/ui/navbar/index.const.ts

@@ -13,7 +13,11 @@ export const NOT_VISIBLE_NAVBAR_PAGES = [
   paths.auth.phoneNumber.getHref(),
   paths.map.search.getHref(),
   paths.map.certification.getHref(),
-  paths.auth.login.getHref()
+  paths.map.certification.sucess.getHref(),
+  paths.auth.login.getHref(),
+  paths.user.account.getHref(),
+  paths.goal.create.getHref(),
+  paths.goal.date.getHref()
 ];
 
 const isEqualPath = (locationPath: string, path: string) => {

src/features/auth/routes/GoogleCallback.tsx

@@ -28,7 +28,7 @@ const GoogleCallback = (): JSX.Element | null => {
           throw new Error("구글 인증에 실패했습니다.");
         }
 
-        const { accessToken, refreshToken, username, id, userId } =
+        const { accessToken, refreshToken, username, id, userId, phoneNumber } =
           response.data;
 
         setTokens(accessToken, refreshToken, id);
@@ -38,7 +38,9 @@ const GoogleCallback = (): JSX.Element | null => {
         const { totalPoints } = await getPoint({ pathParams: { userId } });
         setPoint(totalPoints);
 
-        navigate(paths.home.path);
+        phoneNumber
+          ? navigate(paths.home.path)
+          : navigate(paths.auth.agreement.path);
       } catch (error) {
         console.error(error);
         setIsError(true);

src/features/auth/routes/KakaoCallback.tsx

@@ -30,9 +30,8 @@ const KakaoCallback = (): JSX.Element | null => {
           throw new Error("카카오 인증에 실패했습니다.");
         }
 
-        const { accessToken, refreshToken, username, id } = response.data;
-
-        console.log(response.data);
+        const { accessToken, refreshToken, username, id, phoneNumber } =
+          response.data;
 
         setTokens(accessToken, refreshToken, id);
         setUserName(username);
@@ -41,8 +40,9 @@ const KakaoCallback = (): JSX.Element | null => {
         const { totalPoints } = await getPoint({ pathParams: { userId: id } });
         setPoint(totalPoints);
 
-        navigate(paths.home.path);
-        // navigate(paths.auth.agreement.path);
+        phoneNumber
+          ? navigate(paths.home.path)
+          : navigate(paths.auth.agreement.path);
       } catch (error) {
         console.error(error);
         setIsError(true);

src/features/goal/api/goal.ts

@@ -2,7 +2,7 @@ import { BASE_PATH } from "@/features/goal/api/path";
 import { GoalData } from "@/features/goal/types/goal-create";
 
 import type { R } from "@/types/common.ts";
-import { GET, POST } from "@/lib/axios";
+import { GET, PATCH, POST } from "@/lib/axios";
 import { RoOnlyPathParamsType, RoOnlyQueryType } from "@/lib/axios/utils";
 import type { CompleteGoal, ProgressGoal } from "../types";
 import { GOALS_CHECK, GOALS_COMPLETE } from "./path";
@@ -38,3 +38,16 @@ export function getTempGoal(pathParam: { goalId: number }) {
     url: `${BASE_PATH}/check/${pathParam.goalId}`
   });
 }
+
+export function patchTempGoal({
+  pathParam,
+  data
+}: {
+  pathParam: { goalId: number };
+  data: GoalData;
+}) {
+  return PATCH({
+    url: `${BASE_PATH}/${pathParam.goalId}/draft`,
+    data
+  });
+}

src/features/goal/components/create-goal/SaveButtons.tsx

@@ -1,18 +1,23 @@
+import { GoalStatus } from "../../types/goal-create";
+
 interface SaveButtonsProps {
   onTempSave: () => void;
   onSave: () => void;
   isFormValid: boolean;
+  formStatus: GoalStatus.ACTIVE | GoalStatus.DRAFT;
 }
 
 const SaveButtons: React.FC<SaveButtonsProps> = ({
   onTempSave,
   onSave,
-  isFormValid
+  isFormValid,
+  formStatus
 }) => (
   <div className="mt-[20px] flex h-[56px] w-[335px] justify-between">
     <button
-      className="flex h-[56px] w-[160px] items-center justify-center rounded-[8px] bg-gray-200 px-4 py-[10px] text-[16px] font-medium leading-[18px] tracking-[-2.5%] text-[#9E9E9E]"
+      className={`flex h-[56px] w-[160px] items-center justify-center rounded-[8px] bg-gray-200 px-4 py-[10px] text-[16px] font-medium leading-[18px] tracking-[-2.5%] text-[#9E9E9E] ${formStatus === GoalStatus.DRAFT ? "cursor-not-allowed" : ""}`}
       onClick={onTempSave}
+      disabled={formStatus === GoalStatus.DRAFT}
     >
       임시저장
     </button>

src/features/goal/components/create-goal/date-pick.tsx

@@ -56,17 +56,19 @@ const DatePick = () => {
   };
 
   const handleConfirm = () => {
+    const goalId = Number(localStorage.getItem("goalId"));
+    const url = `${paths.goal.create.path}${goalId !== -1 ? `?goalId=${goalId}` : ""}`;
     if (!dateState.selectedDate) return;
     if (mode === "end") {
-      navigate(paths.goal.create.path, {
+      navigate(url, {
         state: {
           startDate: dateState.startDate,
           endDate: dateState.selectedDate,
           goalName
         }
       });
     } else {
-      navigate(paths.goal.create.path, {
+      navigate(url, {
         state: { startDate: dateState.selectedDate, goalName }
       });
     }

src/features/goal/components/create-goal/goal.constants.ts

@@ -9,3 +9,13 @@ export const DAY_MAPPING: Record<string, string> = {
   금: "FRI",
   토: "SAT"
 };
+
+export const REVERSE_DAY_MAPPING: Record<string, string> = {
+  SUN: "일",
+  MON: "월",
+  TUE: "화",
+  WED: "수",
+  THU: "목",
+  FRI: "금",
+  SAT: "토"
+};

src/features/goal/components/goal/progress-goal.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { DAYS_STRING_MAP } from "@/features/map-certification/components/map-certification.const.ts";
 import { useQuery } from "@tanstack/react-query";
-import { join, map, slice } from "es-toolkit/compat";
+import { filter, join, map, slice } from "es-toolkit/compat";
 
 import { useUserStore } from "@/stores/user";
 import { generate_qo_getGoalsCheck } from "@/lib/react-query/queryOptions/goals";
@@ -23,22 +23,29 @@ function ProgressGoal() {
     generate_qo_getGoalsCheck(userId)
   );
 
+  const activeProgressGoals = useMemo(
+    () => filter(progressGoals, ({ status }) => status === "ACTIVE"),
+    [progressGoals]
+  );
+
   const certificationInfoMaps = useMemo(() => {
     const generateMap = (certificationInfo: CertificationInfo[]) => {
       return new Map(
-        map(certificationInfo, ({ date, verified }) => [date, verified])
+        map(certificationInfo, ({ achievedAt, achievedSuccess }) => [
+          achievedAt,
+          achievedSuccess
+        ])
       );
     };
 
-    return map(progressGoals, ({ dateAuthentication }) =>
+    return map(activeProgressGoals, ({ dateAuthentication }) =>
       generateMap(dateAuthentication)
     );
-  }, [progressGoals]);
+  }, [activeProgressGoals]);
 
   const transformedProgressGoals = useMemo(
     () =>
-      map(progressGoals, (goal, index) => {
-        console.log(progressGoals);
+      map(activeProgressGoals, (goal, index) => {
         const transFormViewDays = map(goal.calender, (viewDay) => {
           const isCertificationInfo = certificationInfoMaps[index].has(viewDay);
 
@@ -59,7 +66,7 @@ function ProgressGoal() {
             : generateNonCertificationItem({ viewDay, day, isToday });
         });
         const dateString = `${generateDateString(goal.startDate)} ~ ${generateDateString(goal.endDate)}`;
-        const daysArr = map(goal.dayOfWeek.split(","), (day) =>
+        const daysArr = map((goal.dayOfWeek || "").split(","), (day) =>
           DAYS_STRING_MAP.get(day)
         );
         const days = daysArr.length === 7 ? "매일" : join(daysArr, ",");
@@ -74,7 +81,7 @@ function ProgressGoal() {
         };
       }),
 
-    [progressGoals, certificationInfoMaps, todayString]
+    [activeProgressGoals, certificationInfoMaps, todayString]
   );
 
   return transformedProgressGoals.length > 0 ? (