Merge pull request #1370 from 42organization/fix/bug-공고-페이지-버그-수정

[Feat/Fix] 유저 공고 페이지 버그 수정, 헤더에 메인 이동 버튼 추가
42organization · Apr 8, 2024 · 5689ef3 · 5689ef3
2 parents 46490ad + 6bb15a6
commit 5689ef3
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 81 deletions.
diff --git a/components/recruit/Application/applicationLayout/ApplicationFormHeader.tsx b/components/recruit/Application/applicationLayout/ApplicationFormHeader.tsx
diff --git a/components/recruit/Main/MyRecruitStatus.tsx b/components/recruit/Main/MyRecruitStatus.tsx
@@ -1,8 +1,8 @@
 import { Stack } from '@mui/material';
 import { resultType } from 'types/recruit/recruitments';
 import { dateToKRFullString } from 'utils/handleTime';
+import RecruitStepper from 'components/recruit/Main/RecruitStepper';
 import style from 'styles/recruit/Main/myRecruitment.module.scss';
-import RecruitStepper from './RecruitStepper';
 
 const MyRecruitStatus = ({
   status,
@@ -34,7 +34,7 @@ const MyRecruitStatus = ({
 };
 
 const statusMessage = (status: resultType, interviewDate?: Date) => {
-  if (status === 'PROGRESS') return '지원서를 확인하고 있습니다.';
+  if (status === 'PROGRESS_DOCS') return '지원서를 확인하고 있습니다.';
   if (status === 'INTERVIEW' && interviewDate)
     return dateToKRFullString(new Date(interviewDate));
   if (status === 'PASS') return '합격';

diff --git a/components/recruit/Main/MyRecruitment.tsx b/components/recruit/Main/MyRecruitment.tsx
@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router';
 import { List } from '@mui/material';
+import CollapseListItem from 'components/recruit/Main/CollapseListItem';
+import MyApplicationInfo from 'components/recruit/Main/MyApplicationInfo';
+import MyRecruitStatus from 'components/recruit/Main/MyRecruitStatus';
 import useGetRecruitResult from 'hooks/recruit/useGetRecruitResult';
 import style from 'styles/recruit/Main/myRecruitment.module.scss';
 import textStyle from 'styles/recruit/text.module.scss';
-import CollapseListItem from './CollapseListItem';
-import MyApplicationInfo from './MyApplicationInfo';
-import MyRecruitStatus from './MyRecruitStatus';
 
 const MyRecruitment = ({ applicationId }: { applicationId?: number }) => {
   const router = useRouter();

diff --git a/components/recruit/Main/RecruitStepper.tsx b/components/recruit/Main/RecruitStepper.tsx
@@ -39,7 +39,7 @@ const RecruitStepper = ({ status }: { status: resultType }) => {
 const stepMessage = ['지원서 확인', '면접', '결과 발표'];
 
 const statusToStep = (status: resultType) => {
-  if (status === 'PROGRESS') return 0;
+  if (status === 'PROGRESS_DOCS') return 0;
   if (status === 'INTERVIEW' || status === 'APPLICATION_FAIL') return 1; // 면접 전 상태
   if (status === 'PASS' || status === 'INTERVIEW_FAIL') return 2; // 면접 후 상태
   return 0;

diff --git a/components/recruit/StickyHeader.tsx b/components/recruit/StickyHeader.tsx
@@ -1,12 +1,28 @@
+import { usePathname, useRouter } from 'next/navigation';
+import { HomeOutlined } from '@mui/icons-material';
+import { Button } from '@mui/material';
 import commonStyle from 'styles/recruit/common.module.scss';
 import textStyle from 'styles/recruit/text.module.scss';
 
 const StickyHeader = ({ headerTitle }: { headerTitle: string }) => {
+  const router = useRouter();
+  const pathName = usePathname();
+  const goHome = () => {
+    router.push('/recruit');
+  };
   return (
     <div className={commonStyle.stickyHeader}>
-      <div className={commonStyle.stickyContainer}>
-        <span className={textStyle.pageTitle}>{headerTitle}</span>
-      </div>
+      <span className={textStyle.headerTitle}>{headerTitle}</span>
+      {pathName !== '/recruit' && (
+        <Button
+          className={commonStyle.homeBtn}
+          variant='text'
+          startIcon={<HomeOutlined />}
+          onClick={goHome}
+        >
+          모집 메인
+        </Button>
+      )}
     </div>
   );
 };

diff --git a/pages/api/pingpong/recruitments/[id]/applications/[applicationId]/result.ts b/pages/api/pingpong/recruitments/[id]/applications/[applicationId]/result.ts
@@ -8,7 +8,7 @@ const before = {
 
 const beforeInterview = {
   title: '면접 시간 발표 전입니다~',
-  status: 'PROGRESS',
+  status: 'PROGRESS_DOCS',
   interviewDate: null,
 };
 

diff --git a/pages/recruit/[id]/apply.tsx b/pages/recruit/[id]/apply.tsx
@@ -3,8 +3,8 @@ import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { applicationAlertState } from 'utils/recoil/application';
 import ApplicationForm from 'components/recruit/Application/ApplicationForm';
-import ApplicationFormHeader from 'components/recruit/Application/applicationLayout/ApplicationFormHeader';
 import ApplicationLoadingNoData from 'components/recruit/Application/ApplicationLoadingNoData';
+import StickyHeader from 'components/recruit/StickyHeader';
 import useRecruitDetail from 'hooks/recruit/useRecruitDetail';
 
 function Apply() {
@@ -31,7 +31,7 @@ function Apply() {
 
   return (
     <>
-      <ApplicationFormHeader title={'지원서 작성'} />
+      <StickyHeader headerTitle={'지원서 작성'} />
       <ApplicationForm
         recuitId={recruitId}
         applicationId={null}

diff --git a/pages/recruit/[id]/my-application.tsx b/pages/recruit/[id]/my-application.tsx
@@ -5,8 +5,8 @@ import { ApplicationFormType } from 'types/recruit/recruitments';
 import { applicationAlertState } from 'utils/recoil/application';
 import ApplicationForm from 'components/recruit/Application/ApplicationForm';
 import ApplicatoinFormFooter from 'components/recruit/Application/applicationLayout/ApplicationFormFooter';
-import ApplicationFormHeader from 'components/recruit/Application/applicationLayout/ApplicationFormHeader';
 import ApplicationLoadingNoData from 'components/recruit/Application/ApplicationLoadingNoData';
+import StickyHeader from 'components/recruit/StickyHeader';
 import useRecruitDetail from 'hooks/recruit/useRecruitDetail';
 import useRecruitDetailUser from 'hooks/recruit/useRecruitDetailUser';
 
@@ -63,8 +63,8 @@ function MyApplication() {
 
   return (
     <>
-      <ApplicationFormHeader
-        title={mode === 'VIEW' ? '지원서 확인' : '지원서 수정'}
+      <StickyHeader
+        headerTitle={mode === 'VIEW' ? '지원서 확인' : '지원서 수정'}
       />
       <ApplicationForm
         recuitId={recruitId}

diff --git a/styles/recruit/application.module.scss b/styles/recruit/application.module.scss
@@ -81,30 +81,6 @@
   }
 }
 
-.stickyHeader {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-  background-color: rgba(246, 246, 246, 0.7);
-  backdrop-filter: blur(5px);
-
-  .stickyContainer {
-    display: flex;
-    height: 5rem;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-    justify-content: space-around;
-    .pageTitle {
-      font-size: 2rem;
-    }
-    .homeBtn {
-      height: 3rem;
-      font-size: $medium-font;
-    }
-  }
-}
-
 .stickyFooter {
   position: sticky;
   bottom: 0;

diff --git a/styles/recruit/common.module.scss b/styles/recruit/common.module.scss
@@ -1,3 +1,5 @@
+@import 'styles/common.scss';
+
 .pingpongAnimation {
   margin: 1rem 0;
 }
@@ -6,13 +8,16 @@
   position: sticky;
   top: 0;
   z-index: 1;
+  box-sizing: border-box;
+  display: flex;
   width: 100%;
+  height: fit-content;
+  padding: 1rem 1.5rem;
   background-color: rgba(246, 246, 246, 0.9);
   backdrop-filter: blur(5px);
-  .stickyContainer {
-    height: 4rem;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-    padding-left: 2rem;
+  align-items: center;
+  justify-content: space-between;
+  .homeBtn {
+    font-size: $medium-font;
   }
 }
diff --git a/styles/recruit/layout.module.scss b/styles/recruit/layout.module.scss
@@ -23,7 +23,7 @@
 .noRecruit {
   display: flex;
   width: 100%;
-  height: 100%;
+  flex-grow: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;

diff --git a/styles/recruit/text.module.scss b/styles/recruit/text.module.scss
@@ -10,3 +10,7 @@
   @include pageSubTitle;
   text-align: center;
 }
+
+.headerTitle {
+  @include pageTitle;
+}
diff --git a/types/recruit/recruitments.d.ts b/types/recruit/recruitments.d.ts
@@ -18,7 +18,7 @@ export type recruitmentListData = {
 
 export type resultType =
   | null
-  | 'PROGRESS'
+  | 'PROGRESS_DOCS'
   | 'APPLICATION_FAIL'
   | 'INTERVIEW'
   | 'PASS'