[fix] 홈 진입 시 사용자 정보 조회로 로딩 버그 수정(#68)

app/routes/home/index.tsx

@@ -6,13 +6,59 @@ import {
   MatchingTestRequiredError,
 } from "../matching/api/matching";
 import { useAuthStore } from "../../stores/auth-store";
+import { getMyPage } from "../mypage/api/mypage";
+import { tokenStorage } from "../../lib/token";
 
 export default function Home() {
   const [hasMatch, setHasMatch] = useState<boolean | null>(null);
-  const hasMatchingTest = useAuthStore((s) => s.me?.matchingTestDone);
+  const me = useAuthStore((s) => s.me);
+  const setMe = useAuthStore((s) => s.setMe);
+  const hasTokens = tokenStorage.hasTokens();
+  const resolvedHasMatchingTest =
+    me?.matchingTestDone !== undefined
+      ? Boolean(me.matchingTestDone)
+      : hasTokens
+        ? null
+        : false;
 
   useEffect(() => {
-    if (hasMatchingTest !== true) return;
+    if (me?.matchingTestDone !== undefined) return;
+    if (!hasTokens) return;
+
+    let isMounted = true;
+
+    const fetchMe = async () => {
+      try {
+        const result = await getMyPage();
+        if (!isMounted) return;
+
+        const name = result.name ?? result.nickname ?? "";
+        const roleText = result.nickname ?? result.name ?? "";
+
+        setMe({
+          name,
+          roleText,
+          email: result.email,
+          avatarUrl: result.profileImageUrl ?? undefined,
+          matchingTestDone: Boolean(result.hasMatchingTest),
+        });
+      } catch (error) {
+        console.error("Failed to load my page info:", error);
+        if (isMounted) {
+          setMe({ matchingTestDone: false });
+        }
+      }
+    };
+
+    fetchMe();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [hasTokens, me?.matchingTestDone, setMe]);
+
+  useEffect(() => {
+    if (resolvedHasMatchingTest !== true) return;
 
     const checkMatchStatus = async () => {
       try {
@@ -29,13 +75,13 @@ export default function Home() {
     };
 
     checkMatchStatus();
-  }, [hasMatchingTest]);
+  }, [resolvedHasMatchingTest]);
 
-  if (hasMatchingTest === false) {
+  if (resolvedHasMatchingTest === false) {
     return <PreHome />;
   }
 
-  if (hasMatch === null) {
+  if (resolvedHasMatchingTest === null || hasMatch === null) {
     return (
       <div className="flex items-center justify-center w-full h-full min-h-[50vh]">
         <div className="flex flex-col items-center gap-2">

app/routes/mypage/likes/likes-content.tsx

@@ -63,6 +63,15 @@ type CampaignLike = {
   logoUrl?: string | null;
 };
 
+const SORT_PARAM_MAP: Record<string, string> = {
+  "정렬 필터": "matchingRate",
+  "매칭률 순": "matchingRate",
+  "인기 순": "popularity",
+  "신규 순": "latest",
+  "금액 순": "reward",
+  "마감 순": "dDay",
+};
+
 export default function MyPageLikes() {
   useHideHeader(true);
   const navigate = useNavigate();
@@ -108,15 +117,6 @@ export default function MyPageLikes() {
     return list;
   }, [sortOption, campaignLikesApi]);
 
-  const sortParamMap: Record<string, string> = {
-    "정렬 필터": "matchingRate",
-    "매칭률 순": "matchingRate",
-    "인기 순": "popularity",
-    "신규 순": "latest",
-    "금액 순": "reward",
-    "마감 순": "dDay",
-  };
-
   useEffect(() => {
     let isMounted = true;
     const fetchScrap = async () => {
@@ -127,7 +127,7 @@ export default function MyPageLikes() {
           {
             params: {
               type: activeTab === "brand" ? "brand" : "campaign",
-              sort: sortParamMap[sortOption] ?? "matchingRate",
+              sort: SORT_PARAM_MAP[sortOption] ?? "matchingRate",
             },
           },
         );