refactor:#5 페이지 라우팅 방식 변경

src/components/SignUp/BirthdayGenderStep.tsx

@@ -18,8 +18,10 @@ import {
   validateMonth,
   validateYear,
 } from '@/utils/validate-input';
+import { useNavigate } from 'react-router-dom';
 
-const BirthdayGenderStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
+const BirthdayGenderStep: React.FC = () => {
+  const nav = useNavigate();
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [touched, setTouched] = useState({
@@ -76,6 +78,12 @@ const BirthdayGenderStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     );
   };
 
+  const handleNext = () => {
+    if (isFormValid()) {
+      nav('/signup/phone-number');
+    }
+  };
+
   useEffect(() => {
     console.log('signupState updated:', signupState);
   }, [signupState]);
@@ -131,7 +139,7 @@ const BirthdayGenderStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
 
       <ButtonContainer>
         <Button
-          onClick={onNext}
+          onClick={handleNext}
           variant="primary"
           size="lg"
           rounded="sm"

src/components/SignUp/MbtiStep.tsx

@@ -14,8 +14,11 @@ import {
   isAllMbtiInputsValid,
   validateMbtiInput,
 } from '@/utils/validate-input';
+import { useNavigate } from 'react-router-dom';
+
+const MbtiStep: React.FC = () => {
+  const nav = useNavigate();
 
-const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [errors, setErrors] = useState([false, false, false, false]);
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -43,6 +46,12 @@ const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     .split('')
     .some((char) => char !== '');
 
+  const handleNext = () => {
+    if (allInputsValid) {
+      nav('/signup/nickname');
+    }
+  };
+
   useEffect(() => {
     console.log('signupState updated:', signupState);
   }, [signupState]);
@@ -69,7 +78,7 @@ const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
 
       <ButtonContainer>
         <Button
-          onClick={onNext}
+          onClick={handleNext}
           variant="primary"
           size="lg"
           rounded="sm"

src/components/SignUp/NicknameStep.tsx

@@ -11,8 +11,11 @@ import { signupAtom } from '@/recoil/atoms/userAtom';
 import { useState } from 'react';
 import InputErrorMessage from '../common/Error/InputErrorMessage';
 import { isNicknameValid, validateNickname } from '@/utils/validate-input';
+import { useNavigate } from 'react-router-dom';
+
+const NicknameStep: React.FC = () => {
+  const nav = useNavigate();
 
-const NicknameStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
@@ -23,6 +26,12 @@ const NicknameStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     setErrorMessage(validationError || '');
   };
 
+  const handleNext = () => {
+    if (isFormValid) {
+      nav('/signup/student-id');
+    }
+  };
+
   const isFormValid = isNicknameValid(signupState.nickname);
 
   return (
@@ -42,7 +51,7 @@ const NicknameStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
 
       <ButtonContainer>
         <Button
-          onClick={onNext}
+          onClick={handleNext}
           variant="primary"
           size="lg"
           rounded="sm"

src/components/SignUp/PhoneNumStep.tsx

@@ -11,8 +11,11 @@ import { signupAtom } from '@/recoil/atoms/userAtom';
 import { useState, useEffect } from 'react';
 import InputErrorMessage from '../common/Error/InputErrorMessage';
 import { formatPhoneNumber, validatePhoneNumber } from '@/utils/validate-input';
+import { useNavigate } from 'react-router-dom';
+
+const PhoneNumStep: React.FC = () => {
+  const nav = useNavigate();
 
-const PhoneNumStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
@@ -29,6 +32,12 @@ const PhoneNumStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     }
   };
 
+  const handleNext = () => {
+    if (isFormValid()) {
+      nav('/signup/mbti'); // 다음 단계로 이동
+    }
+  };
+
   useEffect(() => {
     console.log('signupState updated:', signupState);
   }, [signupState]);
@@ -59,7 +68,7 @@ const PhoneNumStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
       {errorMessage && <InputErrorMessage message={errorMessage} />}
       <ButtonContainer>
         <Button
-          onClick={onNext}
+          onClick={handleNext}
           variant="primary"
           size="lg"
           rounded="sm"

src/components/SignUp/ProfileImgStep.tsx

@@ -1,58 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import ActionModal from '../common/Modal/ActionModal';
-import defaultprofileImage from '@/assets/images/defaultprofile.svg';
-import Button from '../common/Button/Button';
 import {
   ButtonContainer,
   Description,
   MainTitle,
+  Container,
+  MainContent,
+  ProfileImageContainer,
+  ProfileImage,
+  HiddenFileInput,
 } from '@/styles/SignUp/SignUp.styled';
+import ActionModal from '../common/Modal/ActionModal';
+import defaultprofileImage from '@/assets/images/defaultprofile.svg';
+import Button from '../common/Button/Button';
 import { useRecoilState } from 'recoil';
 import { signupAtom } from '@/recoil/atoms/userAtom';
 
-export const Container = styled.div`
-  position: relative;
-  min-height: 780px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`;
-
-export const MainContent = styled.div`
-  flex: 1;
-  padding-bottom: 80px;
-`;
-
-export const ProfileImageContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 2rem 0;
-`;
-
-export const ProfileImage = styled.div<{ imageUrl: string }>`
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: ${({ theme }) => theme.COLORS.gray[200]};
-  background-image: ${({ imageUrl }) =>
-    imageUrl ? `url(${imageUrl})` : 'none'};
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: ${({ theme }) => theme.FONT_SIZE.xl};
-  color: ${({ theme }) => theme.COLORS.gray[100]};
-  cursor: pointer;
-`;
-
-export const HiddenFileInput = styled.input`
-  display: none;
-`;
-
-const ProfileImgStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
+const ProfileImgStep: React.FC = () => {
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -73,23 +36,23 @@ const ProfileImgStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
   };
 
   const handleOpenModal = () => {
-    setIsModalOpen(true); // 모달 열기
+    setIsModalOpen(true);
   };
 
   const handleCloseModal = () => {
-    setIsModalOpen(false); // 모달 닫기
+    setIsModalOpen(false);
   };
 
   const handleSelectPhoto = () => {
-    document.getElementById('fileInput')?.click(); // 파일 선택 트리거
+    document.getElementById('fileInput')?.click();
     handleCloseModal();
   };
 
   const handleDeletePhoto = () => {
     setSignupState((prev) => ({
       ...prev,
       profilePhoto: undefined,
-    })); // 프로필 이미지 삭제
+    }));
     handleCloseModal();
   };
 

src/components/SignUp/StudentIdStep.tsx

@@ -11,8 +11,11 @@ import { useState } from 'react';
 import { signupAtom } from '@/recoil/atoms/userAtom';
 import InputErrorMessage from '../common/Error/InputErrorMessage';
 import { isStudentIdValid, validateStudentId } from '@/utils/validate-input';
+import { useNavigate } from 'react-router-dom';
+
+const StudentIdStep: React.FC = () => {
+  const nav = useNavigate();
 
-const StudentIdStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
@@ -23,6 +26,12 @@ const StudentIdStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     setErrorMessage(validationError || '');
   };
 
+  const handleNext = () => {
+    if (isFormValid) {
+      nav('/signup/profile-img'); // 다음 단계로 이동
+    }
+  };
+
   const isFormValid = isStudentIdValid(signupState.studentId);
   return (
     <div>
@@ -46,7 +55,7 @@ const StudentIdStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
 
       <ButtonContainer>
         <Button
-          onClick={onNext}
+          onClick={handleNext}
           variant="primary"
           size="lg"
           rounded="sm"

src/pages/SignUpPage/SignUpLayout.tsx

@@ -0,0 +1,34 @@
+import Header from '@/components/common/Header/Header';
+import ProgressBar from '@/components/SignUp/ProgressBar';
+import { Outlet, useLocation } from 'react-router-dom';
+
+const SignupLayout: React.FC = () => {
+  const location = useLocation();
+
+  const stepPaths = [
+    '/signup/birthday-gender',
+    '/signup/phone-number',
+    '/signup/mbti',
+    '/signup/nickname',
+    '/signup/student-id',
+    '/signup/profile-image',
+  ];
+
+  const currentStepIndex = stepPaths.indexOf(location.pathname);
+  const progress = ((currentStepIndex + 1) / stepPaths.length) * 100;
+
+  return (
+    <div>
+      <Header
+        showBackButton={currentStepIndex > 0}
+        onBackClick={() => window.history.back()}
+      />
+
+      <ProgressBar progress={progress} />
+
+      <Outlet />
+    </div>
+  );
+};
+
+export default SignupLayout;