[chore/dto-bugfix-feature] 1차 테스팅

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

@@ -27,8 +27,8 @@ export const backgroundImages = [
 ];
 
 export const generateKeyword = (point: number) => {
-  if (point <= 500) return "coffee";
-  else if (point > 500) return "convenienceStore";
+  if (point <= 5000) return "coffee";
+  else if (point > 5000 && point < 10000) return "convenienceStore";
   else return "reward";
 };
 
@@ -41,7 +41,7 @@ export const generateIcon = (
 };
 
 export const generateProgressPercent = (point: number) => {
-  if (point <= 500) return (point / 500) * 100;
-  else if (point > 500) return (point / 1000) * 100;
+  if (point <= 5000) return (point / 5000) * 100;
+  else if (point > 5000 && point < 10000) return (point / 10000) * 100;
   else return 100;
 };

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

@@ -8,45 +8,61 @@ import { Progress } from "@/components/ui/progress";
 import { useEffect, useMemo, useState } from "react";
 
 import InfoIcon from "@/asset/common/info.svg?react";
+import { Link } from "react-router";
 
+import { useUserStore } from "@/stores/user";
+import { paths } from "@/config/paths";
 import {
   backgroundImages,
   generateIcon,
   generateKeyword,
   generateProgressPercent
 } from "./index.const";
 
-/** @todo 전역 값 사용, 관련 데이터 전역 값으로 수정 */
-const fakePoint1 = 550;
-
 function ProfileHeader() {
-  /** @todo 전역 상태 정의(사용자명, 포인트) **/
+  const { userName, point } = useUserStore();
   const [bgImage, setBgImage] = useState("");
 
-  /** @todo 전역 상태 사용(포인트) **/
   const rewarndInfo = useMemo(() => {
-    const keyword = generateKeyword(fakePoint1);
+    const keyword = generateKeyword(point);
 
     const Icon = generateIcon(keyword);
-    const progressPercent = generateProgressPercent(fakePoint1);
+    const progressPercent = generateProgressPercent(point);
     const currentPointText = (
       <>
-        현재 포인트 <span className="text-green-300">{fakePoint1}p</span>
-      </>
-    );
-    const targetPointText = (
-      <>
-        커피쿠폰까지 <span className="text-green-300">{fakePoint1}p</span>
+        현재 포인트 <span className="text-green-300">{point}p</span>
       </>
     );
+    const generateTagetPointText = () => {
+      if (keyword === "coffee") {
+        return (
+          <>
+            커피쿠폰까지 <span className="text-green-300">{5000 - point}p</span>
+          </>
+        );
+      } else if (keyword === "convenienceStore") {
+        return (
+          <>
+            편의점쿠폰까지{" "}
+            <span className="text-green-300">{10000 - point}p</span>
+          </>
+        );
+      } else {
+        return (
+          <Link to={paths.profile.reward.getHref()}>
+            <span className="text-green-300">리워드를 수령해주세요.</span>
+          </Link>
+        );
+      }
+    };
 
     return {
       icon: <Icon />,
       progressPercent,
       currentPointText,
-      targetPointText
+      targetPointText: generateTagetPointText()
     };
-  }, []);
+  }, [point]);
 
   useEffect(() => {
     const randomBg =
@@ -76,8 +92,8 @@ function ProfileHeader() {
 
       <div>
         <p className="text-xl">
-          {/* @todo 전역 Username 사용 */}
-          안녕하세요! <span className="font-bold text-green-300">홍길동</span>님
+          안녕하세요!
+          <span className="font-bold text-green-300">{userName}</span>님
         </p>
         <p className="text-sm">오늘도 일단 가볼까요?</p>
       </div>

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

@@ -12,7 +12,8 @@ export const NOT_VISIBLE_NAVBAR_PAGES = [
   paths.auth.agreement.getHref(),
   paths.auth.phoneNumber.getHref(),
   paths.map.search.getHref(),
-  paths.map.certification.getHref()
+  paths.map.certification.getHref(),
+  paths.auth.login.getHref()
 ];
 
 const isEqualPath = (locationPath: string, path: string) => {
@@ -38,7 +39,7 @@ export const generateNavbarInfo = (locationPath: string) => [
     label: "내정보",
     activeIcon: User,
     notActiveIcon: UserDisable,
-    to: "/profile",
-    isActvie: isEqualPath(locationPath, "/profile")
+    to: "/user/my-page",
+    isActvie: isEqualPath(locationPath, "/user/my-page")
   }
 ];

src/features/auth/api/auth.ts

@@ -22,6 +22,6 @@ export function postPhoneNumber({ data }: { data: { phoneNumber: string } }) {
   return POST({ url: `${BASE_PATH}/user/phone`, data });
 }
 
-export function postTermsAgree({ data }: { data: { userId: number } }) {
-  return POST({ url: `/terms/agree`, data });
+export function postTermsAgree(pathParam: { userId: number }) {
+  return POST({ url: `/api/v1/terms/agree/${pathParam.userId}` });
 }

src/features/auth/components/Agreement.tsx

@@ -5,6 +5,7 @@ import CheckedItemIcon from "@/asset/agreement/checked-item.svg?url";
 import UncheckedAllIcon from "@/asset/agreement/unchecked-all.svg?url";
 import UncheckedItemIcon from "@/asset/agreement/unchecked-item.svg?url";
 import { postTermsAgree } from "@/features/auth/api/auth";
+import { getUserInfo } from "@/features/user/api/user";
 import { useNavigate } from "react-router";
 
 import { useAuthStore } from "@/stores/auth-store";
@@ -68,11 +69,11 @@ const Agreement = () => {
     if (!userId) return;
 
     try {
-      const response = await postTermsAgree({
-        data: { userId }
-      });
+      await postTermsAgree({ userId });
 
-      if (response.data.success) {
+      const { phoneNumber } = await getUserInfo({ pathParam: userId });
+
+      if (!phoneNumber) {
         navigate(paths.auth.phoneNumber.path);
       } else {
         throw new Error("약관 동의에 실패했습니다.");
@@ -159,7 +160,7 @@ const Agreement = () => {
         disabled={!checkState.all}
         onClick={handleSubmit}
         className={`fixed bottom-6 ml-[20px] flex h-[56px] w-[335px] items-center justify-center rounded-[8px] py-[10px] text-[16px] font-semibold leading-[20px] ${
-          !checkState.all
+          checkState.all
             ? "cursor-pointer bg-[#3CC360] text-white"
             : "cursor-not-allowed bg-gray-300 text-gray-500"
         }`}

src/features/auth/components/PhoneNumber.tsx

@@ -22,8 +22,7 @@ const PhoneNumber = () => {
       const response = await postPhoneNumber({
         data: { phoneNumber }
       });
-
-      if (response.data.success) {
+      if (response.message === "전화번호가 성공적으로 저장됨") {
         navigate(paths.home.path);
       } else {
         throw new Error("약관 동의에 실패했습니다.");

src/features/auth/routes/GoogleCallback.tsx

@@ -12,7 +12,7 @@ import { useUserStore } from "@/stores/user";
 import { paths } from "@/config/paths";
 
 const GoogleCallback = (): JSX.Element | null => {
-  const { setUserName, setPoint } = useUserStore();
+  const { setUserName, setPoint, setUserId } = useUserStore();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const setTokens = useAuthStore((state) => state.setTokens);
@@ -28,10 +28,12 @@ const GoogleCallback = (): JSX.Element | null => {
           throw new Error("구글 인증에 실패했습니다.");
         }
 
-        const { accessToken, refreshToken, username, userId } = response.data;
+        const { accessToken, refreshToken, username, id, userId } =
+          response.data;
 
-        setTokens(accessToken, refreshToken, userId);
+        setTokens(accessToken, refreshToken, id);
         setUserName(username);
+        setUserId(userId);
 
         const { totalPoints } = await getPoint({ pathParams: { userId } });
         setPoint(totalPoints);
@@ -44,7 +46,7 @@ const GoogleCallback = (): JSX.Element | null => {
         setIsLoading(false);
       }
     },
-    [navigate, setTokens, setUserName, setPoint]
+    [navigate, setTokens, setUserName, setPoint, setUserId]
   );
 
   useEffect(() => {

src/features/auth/routes/KakaoCallback.tsx

@@ -12,7 +12,7 @@ import { useUserStore } from "@/stores/user";
 import { paths } from "@/config/paths";
 
 const KakaoCallback = (): JSX.Element | null => {
-  const { setUserName, setPoint } = useUserStore();
+  const { setUserName, setPoint, setUserId } = useUserStore();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const setTokens = useAuthStore((state) => state.setTokens);
@@ -30,23 +30,27 @@ const KakaoCallback = (): JSX.Element | null => {
           throw new Error("카카오 인증에 실패했습니다.");
         }
 
-        const { accessToken, refreshToken, username, userId } = response.data;
+        const { accessToken, refreshToken, username, id } = response.data;
 
-        setTokens(accessToken, refreshToken, userId);
+        console.log(response.data);
+
+        setTokens(accessToken, refreshToken, id);
         setUserName(username);
+        setUserId(id);
 
-        const { totalPoints } = await getPoint({ pathParams: { userId } });
+        const { totalPoints } = await getPoint({ pathParams: { userId: id } });
         setPoint(totalPoints);
 
         navigate(paths.home.path);
+        // navigate(paths.auth.agreement.path);
       } catch (error) {
         console.error(error);
         setIsError(true);
       } finally {
         setIsLoading(false);
       }
     },
-    [navigate, setTokens, setUserName, setPoint]
+    [navigate, setTokens, setUserName, setPoint, setUserId]
   );
 
   useEffect(() => {

src/features/goal/api/goal.ts

@@ -3,27 +3,32 @@ import { GoalData } from "@/features/goal/types/goal-create";
 
 import type { R } from "@/types/common.ts";
 import { GET, POST } from "@/lib/axios";
+import { RoOnlyPathParamsType, RoOnlyQueryType } from "@/lib/axios/utils";
 import type { CompleteGoal, ProgressGoal } from "../types";
 import { GOALS_CHECK, GOALS_COMPLETE } from "./path";
 
-export function getGoalsCheck(): R<ProgressGoal[]> {
-  return GET({ url: GOALS_CHECK });
+export function getGoalsCheck({
+  query
+}: RoOnlyQueryType<{ userId: number }>): R<ProgressGoal[]> {
+  return GET({ url: GOALS_CHECK, params: query });
 }
 
-export function getGoalsComplete(): R<CompleteGoal[]> {
-  return GET({ url: GOALS_COMPLETE });
+export function getGoalsComplete({
+  pathParams: { userId }
+}: RoOnlyPathParamsType<{ userId: number }>): R<CompleteGoal[]> {
+  return GET({ url: GOALS_COMPLETE(userId) });
 }
 
 export function postCreateGoal({ data }: { data: GoalData }) {
   return POST({
-    url: `${BASE_PATH}`,
+    url: `${BASE_PATH}/create`,
     data
   });
 }
 
 export function postCreateTempSaveGoal({ data }: { data: GoalData }) {
   return POST({
-    url: `${BASE_PATH}`,
+    url: `${BASE_PATH}/create`,
     data
   });
 }

src/features/goal/api/path.ts

@@ -3,4 +3,5 @@ import { generatePathByBase, genreateBasePath } from "@/lib/axios/utils";
 export const BASE_PATH = genreateBasePath("goals", "v1");
 
 export const GOALS_CHECK = generatePathByBase(BASE_PATH, "check");
-export const GOALS_COMPLETE = generatePathByBase(BASE_PATH, "complete");
+export const GOALS_COMPLETE = (userId: number) =>
+  generatePathByBase(GOALS_CHECK, "complete", String(userId));

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

@@ -15,13 +15,13 @@ const BalanceInfo: React.FC<BalanceInfoProps> = ({ balancePoint }) => (
         </span>
       </span>
     </div>
-    <div className="ml-auto mt-0 flex items-center text-gray-400">
+    <div className="ml-auto mt-0 flex items-center gap-5 text-gray-400">
       <span className="text-[12px] font-normal leading-[14px] tracking-[-2.5%]">
         보유 포인트
       </span>
-      <div className="flex items-end gap-1">
+      <div className="flex items-end gap-5">
         <span className="w-[30px] text-right text-[12px] font-semibold leading-[14px] tracking-[-2.5%]">
-          {balancePoint}
+          {balancePoint.toLocaleString()}
         </span>
         <span className="w-[6px] text-right text-[10px] font-normal leading-[12px] tracking-[-2.5%]">
           p

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

@@ -3,20 +3,26 @@ import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { join, map } from "es-toolkit/compat";
 
+import { useUserStore } from "@/stores/user";
 import { generate_qo_getGoalsComplete } from "@/lib/react-query/queryOptions/goals";
 import { generateDateString } from "./index.const";
 
 function CompleteGoal() {
+  const { userId } = useUserStore();
   const { data: completedGoals = [] } = useQuery(
-    generate_qo_getGoalsComplete()
+    generate_qo_getGoalsComplete(userId)
   );
 
   const transformedCompletedGoals = useMemo(
     () =>
       map(completedGoals, (goal) => {
         const dateString = `${generateDateString(goal.startDate)} ~ ${generateDateString(goal.endDate)}`;
-        const days = goal.days.length === 7 ? "매일" : join(goal.days, ",");
-        const achivePercentString = `${goal.achivePercent}% 달성`;
+        const daysArr = goal.dayOfWeek.split(",");
+        const days = daysArr.length === 7 ? "매일" : join(daysArr, ",");
+        const achivePercent = Math.floor(
+          (goal.achievedCount / goal.targetCount) * 100
+        );
+        const achivePercentString = `${achivePercent}% 달성`;
 
         return { ...goal, dateString, days, achivePercentString };
       }),