Merge pull request #436 from SejongPeer/feature/56

feat: [56] 커스텀 경로 설정
SejongPeer · Sep 3, 2024 · 3245d69 · 3245d69
2 parents ff0b135 + a3c4cf0
commit 3245d69
Show file tree

Hide file tree

Showing 28 changed files with 178 additions and 167 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,10 +3,6 @@ import { useState, createContext, useEffect } from 'react';
 import './App.css';
 import { jwtDecode } from 'jwt-decode';
 import { toast, Toaster } from 'sonner';
-import { useLocation } from 'react-router-dom';
-
-import { MainHeader } from './components/headerRefactor/MainHeader';
-import { SubHeader } from './components/headerRefactor/SubHeader';
 
 // 메인 컴포넌트
 import StartLoading from './pages/main/landing/StartLoading.js';

diff --git a/src/components/headerRefactor/SubHeader.js b/src/components/headerRefactor/SubHeader.js
@@ -1,25 +1,35 @@
 import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import COLORS from 'theme';
 
 import backArrow from '../../assets/image/backArrow.png';
 import user from '../../assets/image/user.png';
 import searchWhite from 'assets/image/searchWhite.png';
 
-export const SubHeader = ({ text }) => {
+export const SubHeader = ({ text, customBackLink }) => {
   const token = localStorage.getItem('accessToken');
   const navigate = useNavigate();
+  const location = useLocation();
 
   const handleUserClick = () => {
     if (token) {
-      navigate('/mypage'); // 유저 아이콘 클릭 시 /my-page로 이동
+      navigate('/mypage'); // 유저 아이콘 클릭 시 /mypage로 이동
     } else {
-      navigate('/login'); // 로그인 텍스트 클릭 시 /login-page로 이동
+      navigate('/login'); // 로그인 텍스트 클릭 시 /login으로 이동
     }
   };
 
   const handleGoBack = () => {
-    navigate(-1); // 뒤로 가기
+    // 커스텀 링크가 제공된 경우 해당 링크로 이동
+    if (customBackLink) {
+      navigate(customBackLink);
+    } else if (location.state?.from) {
+      // location.state에 이전 페이지 정보가 있는 경우 해당 경로로 이동
+      navigate(-1);
+    } else {
+      // 기본적으로 홈으로 이동하거나 다른 기본 경로 설정 가능
+      navigate('/');
+    }
   };
 
   return (
@@ -29,8 +39,7 @@ export const SubHeader = ({ text }) => {
         <Text>{text}</Text>
       </Container2>
       <RightContainer>
-        <Search src={searchWhite} />
-        {/* <Login src={user} onClick={handleUserClick} alt="User Icon" /> */}
+        <Login src={user} onClick={handleUserClick} alt="User Icon" />
       </RightContainer>
     </Container>
   );

diff --git a/src/pages/buddy/accept/BuddyAccept.js b/src/pages/buddy/accept/BuddyAccept.js
@@ -62,7 +62,6 @@ const BuddyAccept = () => {
       isAccept: accept,
     };
 
-
     fetch(process.env.REACT_APP_BACK_SERVER + '/buddy/matching/status', {
       method: 'POST',
       body: JSON.stringify(acceptInfo),
@@ -74,7 +73,7 @@ const BuddyAccept = () => {
     })
       .then(response => response.json())
       .then(data => {
-        console.log(data)
+        console.log(data);
         if (accept) {
           toast.success(
             '매칭이 수락되었습니다! \n상대방이 매칭을 수락할 때까지 기다려주세요.'
@@ -109,7 +108,7 @@ const BuddyAccept = () => {
 
   return (
     <div className={style.container}>
-      <SubHeader text="세종버디" />
+      <SubHeader text="세종버디" customBackLink="/main" />
       <p className={style.title}>버디를 찾았습니다!</p>
       <img className={style.find_buddy} src={findBuddy} alt="findBuddy" />
 

diff --git a/src/pages/buddy/info/BuddyStart1.js b/src/pages/buddy/info/BuddyStart1.js
@@ -42,7 +42,7 @@ const BuddyStart1 = () => {
 
   return (
     <>
-      <SubHeader text="세종버디" />
+      <SubHeader text="세종버디" customBackLink="/main" />
       <div className={style.container}>
         {/* <SubHeader /> */}
         <div className={style.top}>

diff --git a/src/pages/buddy/info/BuddyStart2.js b/src/pages/buddy/info/BuddyStart2.js
@@ -16,7 +16,7 @@ const BuddyStart2 = () => {
 
   return (
     <div className={style.container}>
-      <SubHeader text="세종버디" />
+      <SubHeader text="세종버디" customBackLink="/buddy/start1" />
       <div className={style.top}>
         {/* <div className={style.imgBack}> */}
         <img className={style.buddyImg2} src={BuddyStart} alt="BuddyStart" />

diff --git a/src/pages/buddy/matching/js/Buddy_Matching.js b/src/pages/buddy/matching/js/Buddy_Matching.js
@@ -96,7 +96,7 @@ const Buddy_Matching = () => {
 
   return (
     <div className={style.wrapper} style={mediaWidth}>
-      <SubHeader text="세종버디" />
+      <SubHeader text="세종버디" customBackLink="/buddy/start2" />
       <div className={style.formWrapper} style={Slide}>
         <ChoiceGender sendChoiceGenderData={GenderChoiceData} />
         <Major sendMajorData={MajorData} sendSubMajorData={subMajorData} />

diff --git a/src/pages/buddy/success/BuddySuccess.js b/src/pages/buddy/success/BuddySuccess.js
@@ -8,6 +8,7 @@ import buddySucces from '../../../assets/image/buddySuccess.png';
 import prev from '../../../assets/image/back_gray.png';
 import next from '../../../assets/image/next_gray.png';
 import style from './BuddySuccess.module.css';
+import { SubHeader } from 'components/headerRefactor/SubHeader';
 
 const BuddySuccess = () => {
   const [major, setMajor] = useState('');
@@ -105,6 +106,7 @@ const BuddySuccess = () => {
 
   return (
     <div className={style.container}>
+      <SubHeader text="세종버디" customBackLink="/main" />
       <p className={style.title}>버디를 찾았습니다!</p>
       <img className={style.buddy_succes} src={buddySucces} alt="buddySucces" />
 

diff --git a/src/pages/buddy/success/BuddySuccess.module.css b/src/pages/buddy/success/BuddySuccess.module.css
@@ -1,11 +1,10 @@
 .container {
-  margin-top: 8vh;
   display: flex;
   flex-direction: column;
   height: 90%;
   background-color: #fafafa;
   align-items: center;
-  justify-content: space-evenly;
+  gap: 10px;
   /* overflow: hidden; */
 }
 .title {
@@ -21,13 +20,13 @@
   max-height: 320px;
 }
 
-.info_container{
+.info_container {
   width: 90%;
   height: 23vh;
   position: relative;
   overflow: hidden;
 }
-.prev{
+.prev {
   position: fixed;
   width: 5%;
   height: 7%;
@@ -37,7 +36,7 @@
   z-index: 2;
   cursor: pointer;
 }
-.next{
+.next {
   position: fixed;
   width: 5%;
   height: 7%;
@@ -47,8 +46,8 @@
   z-index: 2;
   cursor: pointer;
 }
-@media (min-width: 450px){
-  .prev{
+@media (min-width: 450px) {
+  .prev {
     position: fixed;
     width: 3%;
     height: 7%;
@@ -57,7 +56,7 @@
     z-index: 2;
     cursor: pointer;
   }
-  .next{
+  .next {
     position: fixed;
     width: 3%;
     height: 7%;
@@ -66,28 +65,27 @@
     z-index: 2;
     cursor: pointer;
   }
-  .info_container{
+  .info_container {
     width: 62%;
     height: 23vh;
     position: relative;
     overflow: hidden;
   }
-  .go_home{
+  .go_home {
     width: 40vw;
     height: 8.5vh;
     max-height: 56px;
     max-width: 380px;
-    background-color: #FF4B4B;
+    background-color: #ff4b4b;
     border-radius: 28px;
-    color: #FFFFFF;
+    color: #ffffff;
     font-size: 1.3rem;
     font-weight: 700;
     margin-top: 4%;
     cursor: pointer;
+  }
 }
-
-}
-.inner_container{
+.inner_container {
   width: 300%;
   height: 100%;
   display: flex;
@@ -135,31 +133,30 @@
   padding: 0 5%;
 }
 .kakao_title {
-    font-weight: 700;
-    color: #111111;
+  font-weight: 700;
+  color: #111111;
 }
 .kakao_id {
-    color: #777777;
+  color: #777777;
 }
 
-
-.tip{
+.tip {
   color: #111111;
   margin: 1% 0;
   font-weight: 700;
 }
-.go_home{
-    width: 90%;
-    height: 8.5vh;
-    max-height: 56px;
-    max-width: 380px;
-    background-color: #FF4B4B;
-    border-radius: 28px;
-    color: #FFFFFF;
-    font-size: 1.3rem;
-    font-weight: 700;
-    margin: 1% 0;
-    cursor: pointer;
+.go_home {
+  width: 90%;
+  height: 8.5vh;
+  max-height: 56px;
+  max-width: 380px;
+  background-color: #ff4b4b;
+  border-radius: 28px;
+  color: #ffffff;
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin: 1% 0;
+  cursor: pointer;
 }
 .cancelBtn {
   font-size: 1.1rem;

diff --git a/src/pages/buddy/waiting/BuddyWaiting.js b/src/pages/buddy/waiting/BuddyWaiting.js
@@ -111,7 +111,7 @@ const BuddyWaiting = () => {
 
   return (
     <div className={style.container}>
-      <SubHeader text="세종버디" />
+      <SubHeader text="세종버디" customBackLink="/buddy/matching" />
       <div className={style.TextBox}>
         <p className={style.title}>세종버디</p>
         <p className={style.text1}>

diff --git a/src/pages/honbob/info/HonbobStart1.js b/src/pages/honbob/info/HonbobStart1.js
@@ -47,7 +47,7 @@ const HonbobStart1 = () => {
 
   return (
     <div className={style.Container}>
-      <SubHeader text="혼밥탈출" />
+      <SubHeader text="혼밥탈출" customBackLink="/main" />
       <div className={style.InnerContainer}>
         <div className={style.top}>
           <button onClick={infoHandler} className={style.informBtn}>

diff --git a/src/pages/honbob/matching/js/Honbob_Matching.js b/src/pages/honbob/matching/js/Honbob_Matching.js
@@ -147,7 +147,7 @@ const Honbob_Matching = () => {
 
   return (
     <div className={style.wrapper} style={mediaWidth}>
-      <SubHeader text="혼밥탈출" />
+      <SubHeader text="혼밥탈출" customBackLink="/honbob/start1" />
       <div className={style.formWrapper} style={Slide}>
         <H_Gender
           sendChoiceGenderData={GenderChoiceData}

diff --git a/src/pages/honbob/success/HonbobSuccess.js b/src/pages/honbob/success/HonbobSuccess.js
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { SubHeader } from 'components/headerRefactor/SubHeader';
 import style from './HonbobSuccess.module.css';
 
 const HonbobSuccess = () => {
@@ -53,6 +53,7 @@ const HonbobSuccess = () => {
 
   return (
     <div className={style.container}>
+      <SubHeader text="혼밥탈출" customBackLink="/main" />
       <div className={style.Text}>밥짝꿍 매칭 성공!</div>
       <div className={style.imgBox} />
       <div className={style.informBox}>

diff --git a/src/pages/honbob/success/HonbobSuccess.module.css b/src/pages/honbob/success/HonbobSuccess.module.css
@@ -1,6 +1,5 @@
 @media (min-width: 768px) {
   .container {
-    margin-top: 8vh;
     display: flex;
     flex-direction: column;
     height: 85%;
@@ -93,7 +92,6 @@
 /* 모바일 */
 @media (max-width: 768px) {
   .container {
-    margin-top: 10vh;
     display: flex;
     flex-direction: column;
     height: 85%;

diff --git a/src/pages/honbob/waiting/HonbobWaiting.js b/src/pages/honbob/waiting/HonbobWaiting.js
@@ -96,7 +96,7 @@ const HonbobWaiting = () => {
 
   return (
     <div className={style.container}>
-      <SubHeader text="혼밥탈출" />
+      <SubHeader text="혼밥탈출" customBackLink="/main" />
       <div className={style.TextBox}>
         <img src={honbobWaitingLogo} className={style.honbobWaitingImg} />
         <p className={style.Text1}>밥짝꿍 찾는 중{dots}</p>

diff --git a/src/pages/login/find/findId/FindId.js b/src/pages/login/find/findId/FindId.js
@@ -94,7 +94,7 @@ const FindId = () => {
 
   return (
     <div className={style.entire_Container}>
-      <SubHeader text="아이디/비밀번호 찾기" />
+      <SubHeader text="아이디/비밀번호 찾기" customBackLink="/login" />
       <div className={style.container}>
         <div className={style.explain_box2}>
           <p className={style.explain_title}>아이디/비밀번호 찾기</p>

diff --git a/src/pages/login/find/resetPwd/ResetPwd.js b/src/pages/login/find/resetPwd/ResetPwd.js
@@ -6,6 +6,7 @@ import SignInBox from '../../signIn/SignInBox.js';
 import style from '../../signIn/SignIn.module.css';
 import css from './ResetPwd.module.css';
 import { toast } from 'sonner';
+import { SubHeader } from 'components/headerRefactor/SubHeader.js';
 
 const ResetPwd = () => {
   const [inputPwd, setInputPwd] = useState('');
@@ -49,6 +50,7 @@ const ResetPwd = () => {
 
   return (
     <div className={style.entire_Container}>
+      <SubHeader text="마이페이지" customBackLink="/mypage" />
       <div className={style.container}>
         <div className={css.explain_box}>
           <p className={css.explain}>회원님의 ID는</p>

diff --git a/src/pages/login/signIn/SignIn.js b/src/pages/login/signIn/SignIn.js
@@ -80,7 +80,7 @@ const SignIn = () => {
 
   return (
     <div className={style.entire_Container}>
-      <SubHeader text="로그인" />
+      <SubHeader text="로그인" customBackLink="/login" />
       <div className={style.container}>
         <SignInBox inputID={inputID} name="아이디" />
         <SignInBox inputPwd={inputPwd} name="비밀번호" id="pwd" />

diff --git a/src/pages/login/signUp/Agree.js b/src/pages/login/signUp/Agree.js
@@ -80,7 +80,7 @@ const Agree = () => {
 
   return (
     <div className={box.entire_Container}>
-      <SubHeader text="회원가입" />
+      <SubHeader text="회원가입" customBackLink="/main" />
       <div className={box.container}>
         <div className={box.auto}>
           <div className={box.inputText}>

diff --git a/src/pages/login/signUp/SignUp.js b/src/pages/login/signUp/SignUp.js
@@ -225,7 +225,7 @@ const SignUp = props => {
 
   return (
     <div className={style.entire_Container}>
-      <SubHeader text="회원가입" />
+      <SubHeader text="회원가입" customBackLink="/login/auth" />
       <div className={style.container}>
         <h2 className={style.h2}>기본정보</h2>
         <div className={`${style.form} ${fadeEffect}`}>

diff --git a/src/pages/login/signUp/auth/Auth.js b/src/pages/login/signUp/auth/Auth.js
@@ -61,7 +61,7 @@ const Auth = () => {
   };
   return (
     <div className={style.entire_Container}>
-      <SubHeader text="회원가입" />
+      <SubHeader text="회원가입" customBackLink="/login/agree" />
       <div className={style.container}>
         <div className={style.innerBox}>
           <div className={style.auto}>