서포터, 러너 프로필 수정 페이지 분할 (#688)

* feat: 서포터, 러너 페이지 프로필 수정페이지 분리 * fix: 서포터 프로필 정보 조회 시 러너 프로필 정보를 불러오는 오류 수정 --------- Co-authored-by: 상규 <[email protected]>
woowacourse-teams · Nov 14, 2023 · 0e1cd1d · 0e1cd1d
1 parent 595a2fd
commit 0e1cd1d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 57 deletions.
diff --git a/frontend/src/hooks/usePageRouter.ts b/frontend/src/hooks/usePageRouter.ts
@@ -49,8 +49,12 @@ export const usePageRouter = () => {
     );
   };
 
-  const goToProfileEditPage = () => {
-    navigate(ROUTER_PATH.PROFILE_EDIT);
+  const goToRunnerProfileEditPage = () => {
+    navigate(ROUTER_PATH.RUNNER_PROFILE_EDIT);
+  };
+
+  const goToSupporterProfileEditPage = () => {
+    navigate(ROUTER_PATH.SUPPORTER_PROFILE_EDIT);
   };
 
   const goToNoticePage = () => {
@@ -74,9 +78,10 @@ export const usePageRouter = () => {
     goToSupporterMyPage,
     goToSupporterProfilePage,
     goToRunnerProfilePage,
+    goToRunnerProfileEditPage,
     goToSupportSelectPage,
     goToSupporterFeedbackPage,
-    goToProfileEditPage,
+    goToSupporterProfileEditPage,
     goToNoticePage,
     goToResultPage,
     goBack,

diff --git a/frontend/src/pages/ProfileEditPage.tsx b/frontend/src/pages/ProfileEditPage.tsx
@@ -4,7 +4,7 @@ import TechTagSelectModal from '@/components/TechTagSelectModal/TechTagSelectMod
 import TextArea from '@/components/Textarea/Textarea';
 import Avatar from '@/components/common/Avatar/Avatar';
 import Button from '@/components/common/Button/Button';
-import { ERROR_DESCRIPTION, ERROR_TITLE, TOAST_ERROR_MESSAGE } from '@/constants/message';
+import { ERROR_DESCRIPTION, ERROR_TITLE } from '@/constants/message';
 import { ModalContext } from '@/contexts/ModalContext';
 import { ToastContext } from '@/contexts/ToastContext';
 import { useMyRunnerProfile } from '@/hooks/query/useMyRunnerProfile';
@@ -19,7 +19,11 @@ import { validateCompany, validateIntroduction, validateName } from '@/utils/val
 import React, { useContext, useState } from 'react';
 import styled from 'styled-components';
 
-const ProfileEditPage = () => {
+interface Props {
+  isRunner: boolean;
+}
+
+const ProfileEditPage = ({ isRunner = true }: Props) => {
   const { data: runnerProfileBefore } = useMyRunnerProfile();
   const { data: supporterProfileBefore } = useMySupporterProfile();
   const { mutate: editRunnerProfile } = useRunnerProfileEdit();
@@ -29,9 +33,7 @@ const ProfileEditPage = () => {
   const { openModal, closeModal } = useContext(ModalContext);
   const { goBack } = usePageRouter();
 
-  const [isRunner, setIsRunner] = useState(true);
-
-  const [runnerProfile, setRunnerProfile] = useState(runnerProfileBefore);
+  const [runnerProfile, setRunnerProfile] = useState(isRunner ? runnerProfileBefore : supporterProfileBefore);
   const [supporterProfile, setSupporterProfile] = useState(supporterProfileBefore);
 
   const [name, setName] = useState(runnerProfile.name);
@@ -141,36 +143,6 @@ const ProfileEditPage = () => {
     closeModal();
   };
 
-  const handleClickRunnerButton = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-
-    if (isRunner) return;
-
-    if (!runnerProfile) return showErrorToast(TOAST_ERROR_MESSAGE.NO_PROFILE);
-
-    if (isModified) {
-      if (!confirm('저장하지 않고 러너 프로필로 이동할까요?')) return;
-    }
-
-    setIsRunner(true);
-    updateProfileInputValue(runnerProfile);
-  };
-
-  const handleClickSupporterButton = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-
-    if (!isRunner) return;
-
-    if (!supporterProfile) return showErrorToast(TOAST_ERROR_MESSAGE.NO_PROFILE);
-
-    if (isModified) {
-      if (!confirm('저장하지 않고 서포터 프로필로 이동할까요?')) return;
-    }
-
-    setIsRunner(false);
-    updateProfileInputValue(supporterProfile);
-  };
-
   const openTechTagSelectModal = () => {
     openModal(
       <TechTagSelectModal
@@ -197,7 +169,7 @@ const ProfileEditPage = () => {
     <Layout>
       <S.TitleWrapper>
         <S.BackButton onClick={handleGoBack}>{'<'}</S.BackButton>
-        <S.Title>프로필 수정</S.Title>
+        <S.Title>{`${isRunner ? '러너' : '서포터'} 프로필 수정`}</S.Title>
       </S.TitleWrapper>
       <S.ProfileContainer>
         <S.Form>
@@ -209,15 +181,6 @@ const ProfileEditPage = () => {
             />
           </S.AvatarWrapper>
           <S.ButtonContainer>
-            <S.RunnerSupporterButton $isSelected={isRunner} onClick={isRunner ? undefined : handleClickRunnerButton}>
-              러너
-            </S.RunnerSupporterButton>
-            <S.RunnerSupporterButton
-              $isSelected={!isRunner}
-              onClick={isRunner ? handleClickSupporterButton : undefined}
-            >
-              서포터
-            </S.RunnerSupporterButton>
             <S.WithdrawalButtonWrapper>
               <S.WithdrawalAnchor>회원탈퇴</S.WithdrawalAnchor>
             </S.WithdrawalButtonWrapper>
@@ -383,7 +346,7 @@ const S = {
   ButtonContainer: styled.div`
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: end;
     gap: 15px;
 
     width: 600px;
@@ -392,7 +355,6 @@ const S = {
   `,
 
   WithdrawalButtonWrapper: styled.div`
-    position: absolute;
     display: flex;
     justify-content: flex-end;
     margin: 20px 0;

diff --git a/frontend/src/pages/RunnerMyPage.tsx b/frontend/src/pages/RunnerMyPage.tsx
@@ -22,7 +22,7 @@ const RunnerMyPage = () => {
 
   const { isMobile } = useViewport();
   const { showErrorToast } = useContext(ToastContext);
-  const { goToProfileEditPage, goToLoginPage } = usePageRouter();
+  const { goToRunnerProfileEditPage, goToLoginPage } = usePageRouter();
   const { data: myPostList, hasNextPage, fetchNextPage } = useMyPostList(true, reviewStatus);
   const { data: myRunnerProfile } = useMyRunnerProfile();
 
@@ -60,7 +60,7 @@ const RunnerMyPage = () => {
           colorTheme="WHITE"
           fontSize={isMobile ? '12px' : '16px'}
           fontWeight={400}
-          onClick={goToProfileEditPage}
+          onClick={goToRunnerProfileEditPage}
         >
           수정하기
         </Button>

diff --git a/frontend/src/pages/SupporterMyPage.tsx b/frontend/src/pages/SupporterMyPage.tsx
@@ -22,7 +22,7 @@ const SupporterMyPage = () => {
 
   const { isMobile } = useViewport();
   const { showErrorToast } = useContext(ToastContext);
-  const { goToProfileEditPage, goToLoginPage } = usePageRouter();
+  const { goToSupporterProfileEditPage, goToLoginPage } = usePageRouter();
   const { data: myPostList, hasNextPage, fetchNextPage } = useMyPostList(false, reviewStatus);
   const { data: mySupporterProfile } = useMySupporterProfile();
 
@@ -60,7 +60,7 @@ const SupporterMyPage = () => {
           colorTheme="WHITE"
           fontSize={isMobile ? '12px' : '16px'}
           fontWeight={400}
-          onClick={goToProfileEditPage}
+          onClick={goToSupporterProfileEditPage}
         >
           수정하기
         </Button>

diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -28,7 +28,8 @@ export const ROUTER_PATH = {
   NOT_FOUND: '/*',
   RUNNER_PROFILE: '/runner-profile/:runnerId',
   SUPPORTER_PROFILE: '/supporter-profile/:supporterId',
-  PROFILE_EDIT: '/profile-edit',
+  RUNNER_PROFILE_EDIT: '/runner-profile-edit',
+  SUPPORTER_PROFILE_EDIT: '/supporter-profile-edit',
   SUPPORTER_FEEDBACK: '/supporter-feedback/:runnerPostId/:supporterId',
   GITHUB_CALLBACK: '/oauth/github/callback',
   NOTICE: '/notice',
@@ -65,8 +66,12 @@ export const router = createBrowserRouter(
           element: <SupporterMyPage />,
         },
         {
-          path: ROUTER_PATH.PROFILE_EDIT,
-          element: <ProfileEditPage />,
+          path: ROUTER_PATH.RUNNER_PROFILE_EDIT,
+          element: <ProfileEditPage isRunner={true} />,
+        },
+        {
+          path: ROUTER_PATH.SUPPORTER_PROFILE_EDIT,
+          element: <ProfileEditPage isRunner={false} />,
         },
         { path: ROUTER_PATH.GITHUB_CALLBACK, element: <GithubCallbackPage /> },
         {