[ Fix ] 온보딩 완료 후 이탈한 선배 대비 SENIOR_PENDING 추가 반영

src/Router.tsx

@@ -95,7 +95,7 @@ const router = createBrowserRouter([
       },
       {
         path: 'seniorOnboarding',
-        element: <Layout userRole="SENIOR" />,
+        element: <Layout userRole="SENIOR_PENDING" />,
         children: [
           {
             index: true,

src/pages/home/HomePage.tsx

@@ -9,7 +9,12 @@ const HomePage = () => {
 
   useEffect(() => {
     if (token && role) {
-      navigate(role === 'SENIOR' ? '/promiseList' : '/juniorPromise');
+      // 온보딩 완료 후 이탈한 선배 (프로필 등록 안 한 선배)
+      if (role === 'SENIOR_PENDING') {
+        navigate('/seniorProfile');
+      } else {
+        navigate(role === 'SENIOR' ? '/promiseList' : '/juniorPromise');
+      }
     } else {
       navigate('/join');
     }

src/pages/join/components/Button.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 const JoinButton = () => {
   const navigate = useNavigate();
   const handleSeniorClick = () => {
-    navigate('/signup', { state: { role: 'SENIOR' } });
+    navigate('/signup', { state: { role: 'SENIOR_PENDING' } });
   };
 
   const handleJuniorClick = () => {

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/login/SignupPage.tsx

@@ -9,11 +9,11 @@ import { JoinHbBgSvg, JoinSbBgSvg } from '@assets/svgs';
 
 const SignupPage = () => {
   const role = useLocation().state.role;
-  const isSenior = role === 'SENIOR';
+  const isSenior = role === 'SENIOR_PENDING';
 
   return (
     <>
-      {role === 'SENIOR' ? <JoinSbBgSvgIcon /> : <JoinHbBgSvgIcon />}
+      {isSenior ? <JoinSbBgSvgIcon /> : <JoinHbBgSvgIcon />}
       <SignUpContainer>
         <DescTextWrapper>
           <MetaText>반가워요!</MetaText>
@@ -35,7 +35,7 @@ const SignupPage = () => {
             </>
           )}
         </DescTextWrapper>
-        {role === 'SENIOR' ? <OnboardingSBImg src={img_onboardingSB} /> : <OnboardingHBImg src={img_onboardingHB} />}
+        {isSenior ? <OnboardingSBImg src={img_onboardingSB} /> : <OnboardingHBImg src={img_onboardingHB} />}
         <BtnContainer onClick={() => googleLogin(role)}>
           <GoogleLogoImg src={ic_google_logo} />
           <Text>구글로 시작하기</Text>

src/pages/login/hooks/useGoogleLoginMutation.ts

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { loginAxios } from '../apis/loginAxios';
 import { useNavigate } from 'react-router-dom';
-import { clearStorage, setRole, setToken } from '@utils/storage';
+import { clearStorage, setRole, setToken, setSeniorNickname } from '@utils/storage';
 
 interface useGoogleLoginPropType {
   role?: string;
@@ -14,15 +14,27 @@ const useGoogleLoginMutation = ({ role }: useGoogleLoginPropType) => {
       setToken(data.data.data.accessToken);
 
       const responseRole = data.data.data.role;
+
+      // 로그인 (이미 가입된 회원)
+      // 서버에서 받아오는 role
       if (responseRole) {
-        // 로그인 (이미 가입된 회원)
         setRole(responseRole);
-        navigate(responseRole === 'SENIOR' ? '/promiseList' : '/juniorPromise');
-      } else if (role) {
+        // 온보딩 완료 후 이탈한 선배 경우
+        if (responseRole === 'SENIOR_PENDING') {
+          setSeniorNickname(data.data.data.nickname);
+          navigate('/seniorProfile');
+        // 가입 완료된 경우
+        } else {
+          navigate(responseRole === 'SENIOR' ? '/promiseList' : '/juniorPromise');
+        }
+
         // 회원가입
-        navigate(role === 'SENIOR' ? '/seniorOnboarding' : '/juniorOnboarding');
-      } else {
+        // join 페이지에서 navigation state로 받아온 role
+      } else if (role) {
+        navigate(role === 'SENIOR_PENDING' ? '/seniorOnboarding' : '/juniorOnboarding');
+
         // 존재하지 않는 계정으로 로그인을 시도했을 경우
+      } else {
         console.error('🔴 존재하지 않는 계정');
         alert('존재하지 않는 계정이예요. 회원가입을 진행해주세요.');
         navigate('/');

src/pages/login/utils/googleLogin.ts

@@ -1,4 +1,4 @@
-const googleLogin = (role?: 'SENIOR' | 'JUNIOR') => {
+const googleLogin = (role?: 'SENIOR' | 'JUNIOR' | 'SENIOR_PENDING') => {
   window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?${role ? `state=${role}&` : ''}client_id=${import.meta.env.VITE_APP_GOOGLE_CLIENT_ID}&redirect_uri=${import.meta.env.VITE_APP_GOOGLE_AUTH_REDIRECT_URI}&response_type=code&scope=email`;
 };
 

src/pages/onboarding/components/Layout.tsx

@@ -9,11 +9,11 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { JoinPropType } from '../type';
 
-const Layout = ({ userRole }: { userRole: 'SENIOR' | 'JUNIOR' }) => {
+const Layout = ({ userRole }: { userRole: 'JUNIOR' | 'SENIOR_PENDING' }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const step = +location.pathname.slice(18);
-  const onboardingStep = userRole === 'SENIOR' ? SENIOR_ONBOARDING_STEPS : JUNIOR_ONBOARDING_STEPS;
+  const onboardingStep = userRole === 'SENIOR_PENDING' ? SENIOR_ONBOARDING_STEPS : JUNIOR_ONBOARDING_STEPS;
   const { title, description } = onboardingStep[step ? step - 1 : 0];
   const GROUP_STEP = convertToGroupStep(userRole, step);
 
@@ -31,7 +31,7 @@ const Layout = ({ userRole }: { userRole: 'SENIOR' | 'JUNIOR' }) => {
   useEffect(() => {
     // 리로드 시 1단계로 back
     if (location.pathname.slice(-1) !== '1') {
-      userRole === 'SENIOR' ? navigate('/seniorOnboarding/1') : navigate('/juniorOnboarding/1');
+      userRole === 'SENIOR_PENDING' ? navigate('/seniorOnboarding/1') : navigate('/juniorOnboarding/1');
     }
   }, []);
 
@@ -45,7 +45,7 @@ const Layout = ({ userRole }: { userRole: 'SENIOR' | 'JUNIOR' }) => {
           step === 1 ? navigate('/') : navigate(-1);
         }}
       />
-      <ProgressBar max={userRole === 'SENIOR' ? 4 : 3} current={GROUP_STEP} />
+      <ProgressBar max={userRole === 'SENIOR_PENDING' ? 4 : 3} current={GROUP_STEP} />
       <MetaContainer>
         <TitleBox title={title} description={description} />
       </MetaContainer>

src/pages/onboarding/components/commonOnboarding/Step번호입력.tsx

@@ -16,10 +16,11 @@ import { SuccessImg } from '@assets/images';
 import { JoinContextType } from '@pages/onboarding/type';
 import useJoinQuery from '@pages/onboarding/hooks/useJoinQuery';
 import googleLogin from '@pages/login/utils/googleLogin';
+import { setSeniorNickname } from '@utils/storage';
 
 const Step번호입력 = () => {
-  const { data, setData } = useOutletContext<JoinContextType>();
-  const mutate = useJoinQuery();
+  const { data: contextData, setData } = useOutletContext<JoinContextType>();
+  const joinMutate = useJoinQuery();
 
   const { pathname } = useLocation();
   const navigate = useNavigate();
@@ -43,7 +44,7 @@ const Step번호입력 = () => {
     }));
   };
 
-  const [phoneNumber, setPhoneNumber] = useState(data.phoneNumber);
+  const [phoneNumber, setPhoneNumber] = useState(contextData.phoneNumber);
   const [verificationCode, setVerificationCode] = useState('');
 
   const [isDoneModalOpen, setIsDoneModalOpen] = useState(false);
@@ -70,6 +71,7 @@ const Step번호입력 = () => {
     return () => clearInterval(id);
   }, [isActive, timeLeft]);
 
+  // 인증번호 전송
   const handleClickSend = () => {
     if (isActive) {
       setValidCodeError(false);
@@ -114,16 +116,14 @@ const Step번호입력 = () => {
     setIsAlreadyModalOpen(type);
   };
 
+  // SENIOR_PENDING - 프로필 등록 이동
+  // JUNIOR - 온보딩 다음 단계로 이동
   const handleClickLink = () => {
     if (pathname.includes('senior')) {
-      mutate.mutate(data, {
-        onSuccess: (res) => {
-          navigate('/seniorProfile', {
-            state: {
-              seniorId: res.data.data.seniorId,
-              nickname: data.nickname,
-            },
-          });
+      joinMutate.mutate(contextData, {
+        onSuccess: () => {
+          setSeniorNickname(contextData.nickname);
+          navigate('/seniorProfile');
         },
         onError: (err) => {
           console.log(err);
@@ -132,7 +132,8 @@ const Step번호입력 = () => {
     } else navigate('/juniorOnboarding/4');
   };
 
-  const handleClickButton = () => {
+  // 인증확인 버튼
+  const handleClickVerifyButton = () => {
     verifycodeMutation.mutate(
       { phoneNumber: phoneNumber, verificationCode },
       {
@@ -200,7 +201,7 @@ const Step번호입력 = () => {
       <FullBtn
         text="인증 확인"
         isActive={timeLeft > 0 && verificationCode.length == 4 && !isError.isValidCodeError}
-        onClick={handleClickButton}
+        onClick={handleClickVerifyButton}
       />
       <AutoCloseModal text="인증에 성공했어요" showModal={isDoneModalOpen} handleShowModal={handleShowDoneModal}>
         <Img src={SuccessImg} alt="" />

src/pages/onboarding/hooks/useJoinQuery.ts

@@ -7,7 +7,7 @@ const useJoinQuery = () => {
   const mutation = useMutation({
     mutationFn: (requestBody: JoinPropType) => joinAxios(requestBody),
     onSuccess: (data) => {
-      setRole(data.data.data.userType);
+      setRole(data.data.data.role);
     },
     onError: (error) => {
       console.log('🔴 join patch Error: ', error);

src/pages/onboarding/type.ts

@@ -9,7 +9,7 @@ export interface BizInfoType {
 }
 
 export interface JoinPropType {
-  role: 'SENIOR' | 'JUNIOR';
+  role: 'SENIOR' | 'JUNIOR' | 'SENIOR_PENDING';
   isSubscribed: boolean[];
   nickname: string;
   isNicknameValid?: boolean;

src/pages/onboarding/utils/convertToGroupStep.ts

@@ -1,5 +1,5 @@
-const convertToGroupStep = (role: 'SENIOR' | 'JUNIOR', step: number): number => {
-  if (role === 'SENIOR') {
+const convertToGroupStep = (role: 'JUNIOR' | 'SENIOR_PENDING', step: number): number => {
+  if (role === 'SENIOR_PENDING') {
     if (step === 1) return 1;
     if (step === 2) return 2;
     if (step <= 6 && step >= 1) return 3;

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/Init.tsx

@@ -44,6 +44,7 @@ const SeniorRefreshImg = styled.img`
   position: absolute;
   top: 50%;
   left: 50%;
+
   width: 25rem;
   height: 34rem;
   transform: translate(-40%, -40%);

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,
+  });
 };
-