merge develop

src/Router.tsx

@@ -24,6 +24,7 @@ import ErrorPage from '@pages/errorPage/ErrorPage';
 import StepComplete from '@pages/onboarding/components/juniorOnboarding/StepComplete';
 import LoginCallback from '@pages/login/LoginCallback';
 import JuniorPromiseRequestPage from '@pages/juniorPromiseRequest/JuniorPromiseRequestPage';
+import HomePage from '@pages/home/HomePage';
 
 const router = createBrowserRouter([
   {
@@ -32,6 +33,10 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'join',
         element: <JoinPage />,
       },
       {

src/components/commons/ToggleButton.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 interface toggleButtonPropType {
   left: string;
   right: string;
-  activeButton: string;
+  activeButton: string | null;
   onSetActiveButtonHandler: (button: string) => void;
 }
 

src/pages/errorPage/ErrorPage.tsx

@@ -1,10 +1,11 @@
 import { WarningImg } from '@assets/svgs';
 import styled from '@emotion/styled';
+import { getRole } from '@utils/storage';
 import { useNavigate } from 'react-router-dom';
 
 const ErrorPage = () => {
   const navigate = useNavigate();
-  const role = localStorage.getItem('role');
+  const role = getRole();
   const navPath = role === 'SENIOR' ? '/promiseList' : '/juniorPromise';
   return (
     <Wrapper>

src/pages/home/HomePage.tsx

@@ -1,11 +1,21 @@
+import { getRole, getToken } from '@utils/storage';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
 const HomePage = () => {
-  return (
-    <div>
-      <h1>GUEST일 경우</h1>
-      <h1>SENIOR일 경우</h1>
-      <h1>JUNIOR일 경우</h1>
-    </div>
-  );
+  const navigate = useNavigate();
+  const token = getToken();
+  const role = getRole();
+
+  useEffect(() => {
+    if (token && role) {
+      navigate(role === 'SENIOR' ? '/promiseList' : '/juniorPromise');
+    } else {
+      navigate('/join');
+    }
+  }, [token, role]);
+
+  return null;
 };
 
 export default HomePage;

src/pages/juniorPromise/JuniorPromisePage.tsx

@@ -20,9 +20,8 @@ const JuniorPromisePage = () => {
   const navigate = useNavigate();
 
   // 바텀 시트 내 버튼& 내용 필터 버튼
-  const [filterActiveBtn, setFilterActiveBtn] = useState('계열');
-  // 바텀 시트 여는 동작
-  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+  const [filterActiveBtn, setFilterActiveBtn] = useState<string | null>(null);
+
   // 칩으로 나갈 선택된 계열 이름 리스트
   const [chipFieldName, setChipFieldName] = useState<string[]>([]);
   // 칩으로 나갈 선택된 직무 리스트
@@ -37,14 +36,14 @@ const JuniorPromisePage = () => {
   // 필터 버튼에 정보 넣기, 바텀시트 열기
   const handleFilterActiveBtn = (btnText: string) => {
     setFilterActiveBtn(btnText);
-    setIsBottomSheetOpen(true);
   };
   // 초기화 함수
   const handleReset = () => {
     setChipFieldName([]);
     setChipPositionName([]);
   };
-  // 선택 계열 리스트 배열로
+
+  // 선택 계열 리스트
   const isFieldSelected = (fieldName: string) => chipFieldName.includes(fieldName);
 
   const handleChipField = (fieldName: string) => {
@@ -75,31 +74,9 @@ const JuniorPromisePage = () => {
     setChipPositionName((prev) => prev.filter((name) => name !== chipName));
   };
 
-  // B- 계열리스트에 이름넣는 함수
-  const pushFieldList = (chipName: string) => {
-    setChipFieldName((prev) => {
-      if (prev.indexOf(chipName) === -1) {
-        return [...prev, chipName];
-      } else {
-        return prev.filter((name) => name !== chipName);
-      }
-    });
-  };
-
-  // B- 직무리스트에 이름 넣는 함수
-  const pushPositionList = (chipName: string) => {
-    setChipPositionName((prev) => {
-      if (prev.indexOf(chipName) === -1) {
-        return [...prev, chipName];
-      } else {
-        return prev.filter((name) => name !== chipName);
-      }
-    });
-  };
-
   // B- 바텀시트 닫기
   const handleCloseBottomSheet = () => {
-    setIsBottomSheetOpen(false);
+    setFilterActiveBtn(null);
   };
   const handleSeniorCardClicked = (type: boolean, id: number, name: string) => {
     setIsSeniorCardClicked(type);
@@ -145,7 +122,7 @@ const JuniorPromisePage = () => {
           <FullBtn text="약속 신청하기" onClick={handlePromiseClicked} />
         </>
       ) : (
-        <PreventScroll $isBottomSheetOpen={isBottomSheetOpen}>
+        <PreventScroll $filterActiveBtn={filterActiveBtn}>
           <Banner myNickname={myNickname} />
           <ContentWrapper>
             <SeniorSearch
@@ -158,9 +135,6 @@ const JuniorPromisePage = () => {
                 {...SeniorSearchCommonProps}
                 filterActiveBtn={filterActiveBtn}
                 handleCloseBottomSheet={handleCloseBottomSheet}
-                isBottomSheetOpen={isBottomSheetOpen}
-                pushFieldList={pushFieldList}
-                pushPositionList={pushPositionList}
               />
             </SeniorSearch>
             <SeniorCardListLayout>
@@ -183,8 +157,8 @@ const JuniorPromisePage = () => {
 
 export default JuniorPromisePage;
 
-const PreventScroll = styled.div<{ $isBottomSheetOpen: boolean }>`
-  position: ${({ $isBottomSheetOpen }) => ($isBottomSheetOpen ? 'fixed' : 'relative')};
+const PreventScroll = styled.div<{ $filterActiveBtn: string | null }>`
+  position: ${({ $filterActiveBtn }) => ($filterActiveBtn !== null ? 'fixed' : 'relative')};
 
   width: 100%;
   height: 100vh;

src/pages/juniorPromise/components/BottomSheet.tsx

@@ -7,18 +7,15 @@ import { FIELD_LIST } from '../constants/fieldList';
 import { POSITION_LIST } from '../constants/positionList';
 
 interface BottomSheetPropTypes {
-  filterActiveBtn: string;
+  filterActiveBtn: string | null;
   handleFilterActiveBtn: (btnText: string) => void;
-  isBottomSheetOpen: boolean;
   handleCloseBottomSheet: () => void;
   handleChipPosition: (positionName: string) => void;
   handleChipField: (fieldName: string) => void;
 
   handleReset: () => void;
   chipFieldName: string[];
-  pushFieldList: (chipName: string) => void;
   chipPositionName: string[];
-  pushPositionList: (chipName: string) => void;
 }
 
 interface SelectedChipListProps {
@@ -32,7 +29,6 @@ export const BottomSheet = (props: BottomSheetPropTypes) => {
     chipPositionName,
     filterActiveBtn,
     handleFilterActiveBtn,
-    isBottomSheetOpen,
     handleCloseBottomSheet,
     handleChipPosition,
     handleChipField,
@@ -41,8 +37,8 @@ export const BottomSheet = (props: BottomSheetPropTypes) => {
 
   return (
     <>
-      <Background $isBottomSheetOpen={isBottomSheetOpen} onClick={handleCloseBottomSheet} />
-      <BottomSheetWrapper $isBottomSheetOpen={isBottomSheetOpen}>
+      <Background $filterActiveBtn={filterActiveBtn} onClick={handleCloseBottomSheet} />
+      <BottomSheetWrapper $filterActiveBtn={filterActiveBtn}>
         <LineBox>
           <Line />
         </LineBox>
@@ -101,8 +97,8 @@ export const BottomSheet = (props: BottomSheetPropTypes) => {
   );
 };
 
-const Background = styled.div<{ $isBottomSheetOpen: boolean }>`
-  display: ${({ $isBottomSheetOpen }) => ($isBottomSheetOpen ? 'flex' : 'none')};
+const Background = styled.div<{ $filterActiveBtn: string | null }>`
+  display: ${({ $filterActiveBtn }) => ($filterActiveBtn === null ? 'none' : 'flex')};
   position: fixed;
   top: 0;
   z-index: 2;
@@ -113,7 +109,7 @@ const Background = styled.div<{ $isBottomSheetOpen: boolean }>`
   background: ${({ theme }) => theme.colors.transparentBlack_65};
 `;
 
-const BottomSheetWrapper = styled.form<{ $isBottomSheetOpen: boolean }>`
+const BottomSheetWrapper = styled.form<{ $filterActiveBtn: string | null }>`
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -126,8 +122,8 @@ const BottomSheetWrapper = styled.form<{ $isBottomSheetOpen: boolean }>`
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};
 
-  opacity: ${({ $isBottomSheetOpen }) => ($isBottomSheetOpen ? 1 : 0)};
-  transform: translateY(${({ $isBottomSheetOpen }) => ($isBottomSheetOpen ? '0' : '100%')});
+  opacity: ${({ $filterActiveBtn }) => ($filterActiveBtn === null ? 0 : 1)};
+  transform: translateY(${({ $filterActiveBtn }) => ($filterActiveBtn === null ? '100%' : '0')});
 
   transition:
     transform 250ms ease-in-out,

src/pages/juniorPromiseRequest/components/WorryTextarea.tsx

@@ -28,6 +28,7 @@ const WorryTextarea = ({ setIsTextareaFilled, inputVal, setInputVal }: SelectJun
         height={22}
         inputVal={inputVal}
         handleInputVal={handleInputVal}
+        variant="secondary"
       />
     </Wrapper>
   );

src/pages/login/hooks/useGoogleLoginMutation.ts

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { loginAxios } from '../apis/loginAxios';
 import { useNavigate } from 'react-router-dom';
+import { setRole, setToken } from '@utils/storage';
 
 interface useGoogleLoginPropType {
   role?: string;
@@ -10,12 +11,12 @@ const useGoogleLoginMutation = ({ role }: useGoogleLoginPropType) => {
   return useMutation({
     mutationFn: (authorizationCode: string) => loginAxios(authorizationCode),
     onSuccess: (data) => {
-      localStorage.setItem('accessToken', data.data.data.accessToken);
+      setToken(data.data.data.accessToken);
 
       const responseRole = data.data.data.role;
       if (responseRole) {
         // 로그인 (이미 가입된 회원)
-        localStorage.setItem('role', responseRole);
+        setRole(responseRole);
         navigate(responseRole === 'SENIOR' ? '/promiseList' : '/juniorPromise');
       } else if (role) {
         // 회원가입

src/pages/onboarding/components/commonOnboarding/Step개인정보입력.tsx

@@ -22,7 +22,7 @@ const Step개인정보입력 = () => {
 
   type nicknameErrorType = 'INVALID' | 'CONFLICT';
   type nicknameStatusType = 'EMPTY' | 'VALID' | nicknameErrorType;
-  const [isNicknameStatus, setIsNicknameStatus] = useState<nicknameStatusType>('EMPTY');
+  const [nicknameStatus, setNicknameStatus] = useState<nicknameStatusType>('EMPTY');
 
   const [imageFile, setImageFile] = useState<File | null>(data.imageFile || null);
 
@@ -41,18 +41,18 @@ const Step개인정보입력 = () => {
     setNickname(e.target.value);
 
     if (e.target.value.length == 0) {
-      setIsNicknameStatus('EMPTY');
+      setNicknameStatus('EMPTY');
     }
   };
 
   const handleCheckNickname = () => {
     mutation.mutate(nickname, {
       onSuccess: () => {
-        setIsNicknameStatus('VALID');
+        setNicknameStatus('VALID');
       },
       onError: (err) => {
         if (isAxiosError(err)) {
-          setIsNicknameStatus(err.response?.status === 409 ? 'CONFLICT' : 'INVALID');
+          setNicknameStatus(err.response?.status === 409 ? 'CONFLICT' : 'INVALID');
         }
       },
     });
@@ -89,25 +89,25 @@ const Step개인정보입력 = () => {
           <InputBox
             label="닉네임"
             placeholder="닉네임을 입력해 주세요"
-            isError={isNicknameStatus === 'INVALID' || isNicknameStatus === 'CONFLICT'}
+            isError={nicknameStatus === 'INVALID' || nicknameStatus === 'CONFLICT'}
             value={nickname}
             onChange={handleChangeInput}>
             <InnerButton text="중복확인" onClick={handleCheckNickname} />
           </InputBox>
-          {isNicknameStatus === 'CONFLICT' ? (
+          {nicknameStatus === 'CONFLICT' ? (
             <WarnDescription isShown warnText="이미 사용 중인 닉네임이에요." />
-          ) : isNicknameStatus === 'INVALID' ? (
+          ) : nicknameStatus === 'INVALID' ? (
             <WarnDescription isShown warnText="닉네임이 조건을 충족하지 않아요." />
           ) : (
-            <Caption isValid={isNicknameStatus === 'VALID'}>
-              {isNicknameStatus === 'VALID'
+            <Caption isValid={nicknameStatus === 'VALID'}>
+              {nicknameStatus === 'VALID'
                 ? '사용 가능한 닉네임이에요'
                 : '8자리 이내, 문자/숫자 가능, 특수문자/기호 입력 불가'}
             </Caption>
           )}
         </TextBox>
       </div>
-      <FullBtn onClick={handleClickLink} isActive={isNicknameStatus === 'VALID'} />
+      <FullBtn onClick={handleClickLink} isActive={nicknameStatus === 'VALID'} />
     </>
   );
 };

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

@@ -15,6 +15,7 @@ import { 이미_사용중인_전화번호_에러코드 } from '@pages/onboarding
 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';
 
 const Step번호입력 = () => {
   const { data, setData } = useOutletContext<JoinContextType>();
@@ -156,7 +157,7 @@ const Step번호입력 = () => {
             setValidCodeError(true);
           }
         },
-      },
+      }
     );
   };
 
@@ -210,9 +211,7 @@ const Step번호입력 = () => {
         isModalOpen={isAlreadyModalOpen}
         handleModalOpen={handleShowAlreadyModal}
         btnText="로그인 하러 가기"
-        handleBtnClick={() => {
-          navigate('/login');
-        }}>
+        handleBtnClick={googleLogin}>
         <AlreadyModalView />
       </BtnCloseModal>
     </Wrapper>

src/pages/onboarding/components/commonOnboarding/Step학과선택.tsx

@@ -47,14 +47,13 @@ const Step학과선택 = () => {
         },
         {
           onSuccess: () => {
-            navigate('/juniorOnboardingComplete');
+            navigate('/juniorOnboarding/complete');
           },
           onError: (err) => {
             console.log(err);
           },
-        },
+        }
       );
-      alert('온보딩 끝!');
     }
   };
 

src/pages/onboarding/components/seniorOnboarding/Step명함인증.tsx

@@ -9,6 +9,7 @@ import { useNavigate, useOutletContext } from 'react-router-dom';
 import { InputBox, TextBox } from '../TextBox';
 import { useBusinessCardQuery } from '@pages/onboarding/hooks/useBusinessCardQuery';
 import { BizInfoType, JoinContextType } from '@pages/onboarding/type';
+import { getToken } from '@utils/storage';
 
 const Step명함인증 = () => {
   const { setData } = useOutletContext<JoinContextType>();
@@ -27,7 +28,7 @@ const Step명함인증 = () => {
   const handleChangeFile = async (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     const file = e.target.files[0];
-    const token = localStorage.getItem('accessToken');
+    const token = getToken();
 
     if (!token) {
       console.error('액세스 토큰이 없습니다.');