diff --git a/src/pages/juniorPromiseRequest/hooks/queries.ts b/src/pages/juniorPromiseRequest/hooks/queries.ts index 4ea3c170..9521e5fc 100644 --- a/src/pages/juniorPromiseRequest/hooks/queries.ts +++ b/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, }); }; diff --git a/src/pages/seniorProfile/SeniorProfilePage.tsx b/src/pages/seniorProfile/SeniorProfilePage.tsx index e5fdf1bb..ae855118 100644 --- a/src/pages/seniorProfile/SeniorProfilePage.tsx +++ b/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(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 ; case 6: - return ; + return ; case 7: return ; default: diff --git a/src/pages/seniorProfile/components/Example.tsx b/src/pages/seniorProfile/components/Example.tsx index 9c185da3..6c9d2adc 100644 --- a/src/pages/seniorProfile/components/Example.tsx +++ b/src/pages/seniorProfile/components/Example.tsx @@ -15,9 +15,9 @@ import { useNavigate } from 'react-router-dom'; const Example = ({ setStep }: { setStep: React.Dispatch> }) => { 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]; diff --git a/src/pages/seniorProfile/components/preView/index.tsx b/src/pages/seniorProfile/components/preView/index.tsx index 0474ceeb..2ffb6cbb 100644 --- a/src/pages/seniorProfile/components/preView/index.tsx +++ b/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) ) { diff --git a/src/pages/seniorProfile/hooks/useGetSeniorProfileQuery.ts b/src/pages/seniorProfile/hooks/useGetSeniorProfileQuery.ts index e522edf7..8ff48857 100644 --- a/src/pages/seniorProfile/hooks/useGetSeniorProfileQuery.ts +++ b/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({ queryKey: ['seniorProfile', seniorId], - queryFn: () => getSeniorProfileAxios(seniorId).then(response => response.data.data), - }) + queryFn: () => getSeniorProfileAxios(seniorId).then((response) => response.data.data), + enabled: !!isJuniorRequest, + }); }; - diff --git a/src/pages/seniorProfile/hooks/useSeniorCardQuery.ts b/src/pages/seniorProfile/hooks/useSeniorCardQuery.ts index 1895cbbf..fb5b3a03 100644 --- a/src/pages/seniorProfile/hooks/useSeniorCardQuery.ts +++ b/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({ queryKey: ['seniorCard', seniorId], - queryFn: () => seniorCardAxios(seniorId).then(response => response.data.data), - }) + queryFn: () => seniorCardAxios(seniorId).then((response) => response.data.data), + enabled: !!isJuniorRequest, + }); };