fix: 선배 카드 조회 - 후배약속신청 뷰일 경우에만 선배 데이터 조회 쿼리 동작하도록 로직 변경

src/pages/juniorPromiseRequest/hooks/queries.ts

@@ -24,9 +24,10 @@ export const usePostAppointment = (onSuccess?: () => void, onError?: (error: str
   });
 };
 
-export const useSeniorTimeQuery = (seniorId: number) => {
+export const useSeniorTimeQuery = (seniorId: number, isJuniorRequest: boolean) => {
   return useQuery({
     queryKey: [QUERY_KEYS.getSeniorTime, seniorId],
     queryFn: () => getSeniorTimeAxios(seniorId),
+    enabled: !!isJuniorRequest,
   });
 };

src/pages/seniorProfile/SeniorProfilePage.tsx

@@ -14,19 +14,20 @@ import { SENIOR_PROFILE_STEPS } from './constants';
 import { Header } from '../../components/commons/Header';
 import ProgressBar from '../../components/commons/ProgressBar';
 import theme from '../../styles/theme';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { getSeniorNickname } from '@utils/storage';
 
 const SeniorProfilePage = () => {
   const [step, setStep] = useState(0);
   const [profile, setProfile] = useState<seniorProfileRegisterType>(seniorProfileInitial);
-  const location = useLocation();
+
   const navigate = useNavigate();
-  const { seniorId, nickname } = location.state || {};
+  const nickname = getSeniorNickname();
   const userName = step >= 2 && step <= 4 ? nickname : '';
 
   useEffect(() => {
-    if (!seniorId || !nickname) navigate('/');
-  }, [seniorId, nickname, navigate]);
+    if (!nickname) navigate('/');
+  }, [nickname]);
 
   const getComponent = () => {
     switch (step) {
@@ -43,7 +44,7 @@ const SeniorProfilePage = () => {
       case 5:
         return <TimeSelect profile={profile} setProfile={setProfile} setStep={setStep} />;
       case 6:
-        return <PreView setStep={setStep} profile={profile} seniorId={seniorId} />;
+        return <PreView setStep={setStep} profile={profile} seniorId="" />;
       case 7:
         return <Complete />;
       default:

src/pages/seniorProfile/components/Example.tsx

@@ -15,9 +15,9 @@ import { useNavigate } from 'react-router-dom';
 const Example = ({ setStep }: { setStep: React.Dispatch<React.SetStateAction<number>> }) => {
   const navigate = useNavigate();
   const [seniorId, setSeniorId] = useState(0);
-  const { data: data1, isLoading: isLoading1, isError: isError1 } = useSeniorCardQuery('1');
-  const { data: data2, isLoading: isLoading2, isError: isError2 } = useSeniorCardQuery('2');
-  const { data: data3, isLoading: isLoading3, isError: isError3 } = useSeniorCardQuery('3');
+  const { data: data1, isLoading: isLoading1, isError: isError1 } = useSeniorCardQuery('1', true);
+  const { data: data2, isLoading: isLoading2, isError: isError2 } = useSeniorCardQuery('2', true);
+  const { data: data3, isLoading: isLoading3, isError: isError3 } = useSeniorCardQuery('3', true);
 
   const dummayData = [data1, data2, data3];
 

src/pages/seniorProfile/components/preView/index.tsx

@@ -14,6 +14,7 @@ import { dayOfWeekTimeList, seniorProfileRegisterType } from '@pages/seniorProfi
 import { deleteProfileField } from '@pages/seniorProfile/utils/deleteProfileField';
 import { weekToDay } from '@pages/seniorProfile/utils/weekToDay';
 import { useNavigate } from 'react-router-dom';
+import { setRole } from '@utils/storage';
 
 interface preViewPropType {
   seniorId: string;
@@ -25,20 +26,30 @@ interface preViewPropType {
 }
 
 const PreView = ({ seniorId, profile, setStep, variant = 'default' }: preViewPropType) => {
-  const { data: cardData, error: cardDataError, isLoading: isCardDataLoading } = useSeniorCardQuery(seniorId);
+  // 선배 카드 정보 조회 (온보딩 정보)
+  const {
+    data: cardData,
+    error: cardDataError,
+    isLoading: isCardDataLoading,
+  } = useSeniorCardQuery(seniorId, variant === 'secondary');
+  // 선배 상세 프로필 조회 (프로필 정보)
   const {
     data: profileData,
     error: profileDataError,
     isLoading: isProfileDataLoading,
-  } = useGetSeniorProfileQuery(seniorId);
+  } = useGetSeniorProfileQuery(seniorId, variant === 'secondary');
+  // 선배 선호 시간대 조회
   const {
     data: secondaryPreferredTimeList,
     isError: secondTimeListError,
     isLoading: isSecondTimeListLoading,
-  } = useSeniorTimeQuery(+seniorId);
+  } = useSeniorTimeQuery(+seniorId, variant === 'secondary');
+
   const navigate = useNavigate();
   const isRegister = variant === 'default';
 
+  // profile : 선배가 프로필 등록할 때 넘어온 값
+  // profileData : 이미 가입된 선배의 서버값 (후배가 카드 클릭시 받아오는 값)
   const career = (isRegister ? profile?.career : profileData?.career) + '';
   const award = (isRegister ? profile?.award : profileData?.award) + '';
   const catchphrase = (isRegister ? profile?.catchphrase : profileData?.catchphrase) + '';
@@ -47,6 +58,7 @@ const PreView = ({ seniorId, profile, setStep, variant = 'default' }: preViewPro
     isRegister ? profile && weekToDay(profile.isDayOfWeek, profile.preferredTimeList) : secondaryPreferredTimeList
   ) as dayOfWeekTimeList;
 
+  // 선배 프로필 등록
   const mutation = useSeniorProfileHook();
   const handleRegisterClick = () => {
     mutation.mutate(
@@ -60,6 +72,11 @@ const PreView = ({ seniorId, profile, setStep, variant = 'default' }: preViewPro
       {
         onSuccess: () => {
           setStep && setStep((prev) => prev + 1);
+          // 온보딩 + 프로필 등록 완료
+          // 선배 role SENIOR_PENDING -> SENIOR로 변경
+          // 선배 닉네임 local storage에서 제거
+          setRole('SENIOR');
+          localStorage.removeItem('seniorNickname');
         },
       }
     );
@@ -69,7 +86,7 @@ const PreView = ({ seniorId, profile, setStep, variant = 'default' }: preViewPro
     cardDataError ||
     (!isRegister && profileDataError) ||
     (!isRegister && secondTimeListError) ||
-    (!isCardDataLoading && !cardData) ||
+    (!isRegister && !isCardDataLoading && !cardData) ||
     (!isRegister && !isProfileDataLoading && !profileData) ||
     (!isRegister && !isSecondTimeListLoading && !secondaryPreferredTimeList)
   ) {

src/pages/seniorProfile/hooks/useGetSeniorProfileQuery.ts

@@ -1,11 +1,11 @@
-import { getSeniorProfileAxios } from "@pages/seniorProfile/apis/getSeniorProfileAxios";
-import { SeniorProfileAPIResType } from "@pages/seniorProfile/types";
-import { useQuery } from "@tanstack/react-query";
+import { getSeniorProfileAxios } from '@pages/seniorProfile/apis/getSeniorProfileAxios';
+import { SeniorProfileAPIResType } from '@pages/seniorProfile/types';
+import { useQuery } from '@tanstack/react-query';
 
-export const useGetSeniorProfileQuery = (seniorId: string) => {
+export const useGetSeniorProfileQuery = (seniorId: string, isJuniorRequest: boolean) => {
   return useQuery<SeniorProfileAPIResType, Error>({
     queryKey: ['seniorProfile', seniorId],
-    queryFn: () => getSeniorProfileAxios(seniorId).then(response => response.data.data),
-  })
+    queryFn: () => getSeniorProfileAxios(seniorId).then((response) => response.data.data),
+    enabled: !!isJuniorRequest,
+  });
 };
-

src/pages/seniorProfile/hooks/useSeniorCardQuery.ts

@@ -1,10 +1,11 @@
-import { seniorCardAxios } from "@pages/seniorProfile/apis/seniorCardAxios"
-import { SeniorCardAPIResType } from "@pages/seniorProfile/types";
-import { useQuery } from "@tanstack/react-query"
+import { seniorCardAxios } from '@pages/seniorProfile/apis/seniorCardAxios';
+import { SeniorCardAPIResType } from '@pages/seniorProfile/types';
+import { useQuery } from '@tanstack/react-query';
 
-export const useSeniorCardQuery = (seniorId: string) => {
+export const useSeniorCardQuery = (seniorId: string, isJuniorRequest: boolean) => {
   return useQuery<SeniorCardAPIResType, Error>({
     queryKey: ['seniorCard', seniorId],
-    queryFn: () => seniorCardAxios(seniorId).then(response => response.data.data),
-  })
+    queryFn: () => seniorCardAxios(seniorId).then((response) => response.data.data),
+    enabled: !!isJuniorRequest,
+  });
 };