fix: SP2 마이페이지 화면 수정

src/pages/profile/profile.tsx

@@ -17,7 +17,7 @@ const Profile = () => {
   if (!data) return null;
 
   return (
-    <div className="h-full flex-col-between">
+    <div className="h-full flex-col-between bg-gray-black">
       <div className="w-full flex-col-center gap-[3.2rem] px-[1.6rem] pt-[1.6rem] pb-[5.6rem]">
         <ProfileCard
           nickname={data.nickname ?? ''}
@@ -34,7 +34,7 @@ const Profile = () => {
             target="_blank"
             rel="noopener noreferrer"
             aria-label="문의하기"
-            className="cap_14_m py-[0.8rem] text-gray-800"
+            className="cap_14_m py-[0.8rem] text-gray-300"
           >
             문의하기
           </a>
@@ -43,16 +43,16 @@ const Profile = () => {
             target="_blank"
             rel="noopener noreferrer"
             aria-label="의견 보내기"
-            className="cap_14_m py-[0.8rem] text-gray-800"
+            className="cap_14_m py-[0.8rem] text-gray-300"
           >
             의견 보내기
           </a>
-          <Divider color="bg-gray-300" margin="my-[1.6rem]" />
+          <Divider color="bg-gray-600" margin="my-[1.6rem]" />
           <button
             type="button"
             onClick={() => logout()}
             aria-label="로그아웃"
-            className="cap_14_m cursor-pointer py-[0.8rem] text-gray-800"
+            className="cap_14_m cursor-pointer py-[0.8rem] text-gray-300"
           >
             <p>로그아웃</p>
           </button>

src/shared/apis/user/user-queries.ts

@@ -2,6 +2,7 @@ import { get } from '@apis/base/http';
 import { END_POINT } from '@constants/api';
 import { USER_KEY } from '@constants/query-key';
 import { queryOptions } from '@tanstack/react-query';
+import type { ApiResponse } from '@/shared/types/base-types';
 import type { getMatchConditionResponse, getUserInfoResponse } from '@/shared/types/user-types';
 
 export const userQueries = {
@@ -16,12 +17,52 @@ export const userQueries = {
   USER_INFO: () =>
     queryOptions<getUserInfoResponse>({
       queryKey: USER_KEY.INFO(),
-      queryFn: () => get(END_POINT.GET_USER_INFO),
+      queryFn: async () => {
+        const res = await get<getUserInfoResponse | ApiResponse<getUserInfoResponse>>(
+          END_POINT.GET_USER_INFO,
+        );
+
+        if (
+          typeof res === 'object' &&
+          res !== null &&
+          'status' in res &&
+          'message' in res &&
+          'data' in res
+        ) {
+          if (!res.data) {
+            throw new Error('유저 정보 응답 데이터가 없습니다.');
+          }
+
+          return res.data;
+        }
+
+        return res as getUserInfoResponse;
+      },
     }),
 
   MATCH_CONDITION: () =>
     queryOptions<getMatchConditionResponse>({
       queryKey: USER_KEY.MATCH_CONDITION(),
-      queryFn: () => get<getMatchConditionResponse>(END_POINT.MATCH_CONDITION),
+      queryFn: async () => {
+        const res = await get<getMatchConditionResponse | ApiResponse<getMatchConditionResponse>>(
+          END_POINT.MATCH_CONDITION,
+        );
+
+        if (
+          typeof res === 'object' &&
+          res !== null &&
+          'status' in res &&
+          'message' in res &&
+          'data' in res
+        ) {
+          if (!res.data) {
+            throw new Error('매칭 조건 응답 데이터가 없습니다.');
+          }
+
+          return res.data;
+        }
+
+        return res as getMatchConditionResponse;
+      },
     }),
 };

src/shared/components/bottom-navigation/bottom-navigation.tsx

@@ -8,7 +8,7 @@ import { ROUTES } from '@routes/routes-config';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-const DARK_NAV_PATHS = [ROUTES.HOME, ROUTES.MATCH, ROUTES.CHAT];
+const DARK_NAV_PATHS = [ROUTES.HOME, ROUTES.MATCH, ROUTES.CHAT, ROUTES.PROFILE];
 
 const BottomNavigation = () => {
   const { pathname } = useLocation();

src/shared/components/footer/footer.tsx

@@ -17,27 +17,27 @@ const Footer = () => {
       })}
     >
       <div className="flex-col gap-[0.8rem]">
-        <Icon name="logo-gray" width={9.2} height={2.5} className="text-gray-700" />
-        <div className="flex-col gap-[0.4rem] text-gray-700">
+        <Icon name="logo-gray" width={9.2} height={2.5} className="text-gray-500" />
+        <div className="flex-col gap-[0.4rem] text-gray-500">
           <p>대표 정윤지</p>
           <p>이메일 mateball0615@gmail.com</p>
         </div>
       </div>
-      <div className="flex-col gap-[0.8rem] text-gray-600">
+      <div className="flex-col gap-[0.8rem] text-gray-500">
         <div className="flex-row gap-[0.8rem] py-[0.4rem]">
           <a
             href={EXTERNAL_LINKS.PRIVACY_POLICY}
             target="_blank"
             rel="noopener noreferrer"
-            className="cap_12_m text-gray-800"
+            className="cap_12_m text-gray-500"
           >
             개인정보처리방침
           </a>
           <a
             href={EXTERNAL_LINKS.TERMS_OF_SERVICE}
             target="_blank"
             rel="noopener noreferrer"
-            className="cap_12_m text-gray-800"
+            className="cap_12_m text-gray-500"
           >
             이용약관
           </a>

src/shared/components/header/header.tsx

@@ -22,11 +22,12 @@ const Header = ({ headerTitle }: HeaderProps) => {
   const isEditProfile = pathname === ROUTES.PROFILE_EDIT;
   const isGame = Boolean(matchPath('/game/:date/:gameId', pathname));
   const isMemberDetail = Boolean(matchPath(ROUTES.MATCH_MEMBER_DETAIL(), pathname));
+  const isProfile = pathname === ROUTES.PROFILE;
 
   return (
     <header
       className={clsx('header-layout', {
-        'bg-gray-black': isFail || isHome || isMatch,
+        'bg-gray-black': isFail || isHome || isMatch || isProfile,
         'bg-gray-white':
           isSignUp ||
           isChatRoom ||

src/shared/components/header/utils/get-header.tsx

@@ -68,7 +68,7 @@ export const getHeaderContent = (
   }
 
   if (pathname === ROUTES.PROFILE) {
-    return <h1 className="head_20_sb text-gray-black">마이페이지</h1>;
+    return <h1 className="head_20_sb text-gray-white">마이페이지</h1>;
   }
 
   if (pathname === ROUTES.CHAT) {