[Feat] 서류 합불 여부에 따른 my page 지원상태 조건부 렌더링 (#268)

* feat: 서류 합격 시에만 최종 결과 확인 보여주기 * refactor: 공통된 부분 component로 분리 * fix: my page 조건부 렌더링 로직 수정 * refactor: hook 사용되는 곳으로 이동
sopt-makers · Jul 29, 2024 · 7651acd · 7651acd
1 parent 34f3fc3
commit 7651acd
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 59 deletions.
diff --git a/src/views/ApplyPage/apis.ts b/src/views/ApplyPage/apis.ts
@@ -22,3 +22,9 @@ export const sendData = async (api: string, formValues: ApplyRequest) => {
 
   return res;
 };
+
+export const getDraft = async () => {
+  const res = await tokenInstance.get('/recruiting-answer/store');
+
+  return res;
+};
diff --git a/src/views/SignedInPage/hooks/useGetDraft.tsx → src/views/ApplyPage/hooks/useGetDraft.tsx b/src/views/SignedInPage/hooks/useGetDraft.tsx → src/views/ApplyPage/hooks/useGetDraft.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getDraft } from '../apis';
 
-import type { ApplyResponse } from '../../ApplyPage/types';
+import type { ApplyResponse } from '../types';
 import type { ErrorResponse } from '@type/errorResponse';
 import type { AxiosError, AxiosResponse } from 'axios';
 

diff --git a/src/views/ApplyPage/index.tsx b/src/views/ApplyPage/index.tsx
@@ -9,7 +9,6 @@ import useScrollToHash from '@hooks/useScrollToHash';
 import { DraftDialog, SubmitDialog } from 'views/dialogs';
 import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
-import useGetDraft from 'views/SignedInPage/hooks/useGetDraft';
 
 import ApplyCategory from './components/ApplyCategory';
 import ApplyHeader from './components/ApplyHeader';
@@ -19,6 +18,7 @@ import CommonSection from './components/CommonSection';
 import DefaultSection from './components/DefaultSection';
 import PartSection from './components/PartSection';
 import { SELECT_OPTIONS } from './constant';
+import useGetDraft from './hooks/useGetDraft';
 import useGetQuestions from './hooks/useGetQuestions';
 import useMutateDraft from './hooks/useMutateDraft';
 import useMutateSubmit from './hooks/useMutateSubmit';

diff --git a/src/views/MyPage/apis.ts b/src/views/MyPage/apis.ts
diff --git a/src/views/MyPage/index.tsx b/src/views/MyPage/index.tsx
@@ -20,11 +20,21 @@ const MyInfoItem = ({ label, value }: { label: string; value?: string | number |
   );
 };
 
+const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string; trackingEvent: string }) => (
+  <li className={buttonValue}>
+    <span className={infoLabel}>{label}</span>
+    <Button isLink to={to} className={buttonWidth} onClick={() => track(trackingEvent)} padding="15x25">
+      {label === '지원서' ? '지원서 확인' : '결과 확인'}
+    </Button>
+  </li>
+);
+
 interface MyPageProps {
   part?: string;
+  applicationPass?: boolean;
 }
 
-const MyPage = ({ part }: MyPageProps) => {
+const MyPage = ({ part, applicationPass }: MyPageProps) => {
   const {
     recruitingInfo: { name, season },
   } = useContext(RecruitingInfoContext);
@@ -41,34 +51,24 @@ const MyPage = ({ part }: MyPageProps) => {
         <MyInfoItem label="기수" value={season} />
         <MyInfoItem label="이름" value={name} />
         <MyInfoItem label="지원파트" value={part} />
-        {NoMoreScreeningResult && NoMoreFinalResult && <MyInfoItem label="지원상태" value="지원 완료" />}
-        {(!NoMoreScreeningResult || !NoMoreFinalResult) && (
-          <li className={buttonValue}>
-            <span className={infoLabel}>지원상태</span>
-            <Button
-              isLink
-              to="/result"
-              className={buttonWidth}
-              onClick={() => track('click-my-result')}
-              padding="15x25">
-              결과 확인
-            </Button>
-          </li>
+        {NoMoreScreeningResult && NoMoreFinalResult && (
+          <MyInfoItem
+            label="지원상태"
+            value={applicationPass == null ? '제출 완료' : applicationPass ? '서류 합격' : '서류 불합격'}
+          />
         )}
-        {!NoMoreReview && (
-          <li className={buttonValue}>
-            <span className={infoLabel}>지원서</span>
-            <Button
-              isLink
-              to="/review"
-              className={buttonWidth}
-              onClick={() => track('click-my-review')}
-              padding="15x25">
-              지원서 확인
-            </Button>
-          </li>
+        {!NoMoreScreeningResult && <StatusButton label="지원상태" to="/result" trackingEvent="click-my-result" />}
+        {!NoMoreFinalResult &&
+          (applicationPass ? (
+            <StatusButton label="지원상태" to="/result" trackingEvent="click-my-result" />
+          ) : (
+            <MyInfoItem label="지원상태" value="서류 불합격" />
+          ))}
+        {NoMoreReview ? (
+          <MyInfoItem label="지원서" value="제출 완료" />
+        ) : (
+          <StatusButton label="지원서" to="/review" trackingEvent="click-my-review" />
         )}
-        {NoMoreReview && <MyInfoItem label="지원서" value="제출 완료" />}
       </ol>
     </section>
   );

diff --git a/src/views/ResultPage/hooks/useGetFinalResult.tsx b/src/views/ResultPage/hooks/useGetFinalResult.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getFinalResult } from '../apis';
 
-import type { FinalResultResponse } from '../../MyPage/types';
+import type { FinalResultResponse } from '../types';
 import type { ErrorResponse } from '@type/errorResponse';
 import type { AxiosError, AxiosResponse } from 'axios';
 

diff --git a/src/views/ResultPage/hooks/useGetScreeningResult.tsx b/src/views/ResultPage/hooks/useGetScreeningResult.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getScreeningResult } from '../apis';
 
-import type { ScreeningResultResponse } from '../../MyPage/types';
+import type { ScreeningResultResponse } from '../types';
 import type { ErrorResponse } from '@type/errorResponse';
 import type { AxiosError, AxiosResponse } from 'axios';
 

diff --git a/src/views/MyPage/types.ts → src/views/ResultPage/types.ts b/src/views/MyPage/types.ts → src/views/ResultPage/types.ts
@@ -1,18 +1,3 @@
-export interface MyRequest {
-  email: string;
-  season: number;
-  group: string;
-  password: string;
-}
-
-export interface MyResponse {
-  err: boolean;
-  season: number;
-  name: string;
-  part: string;
-  submit: boolean;
-}
-
 export interface ScreeningResultResponse {
   err: boolean;
   season: number;

diff --git a/src/views/ReviewPage/index.tsx b/src/views/ReviewPage/index.tsx
@@ -11,12 +11,12 @@ import BottomSection from 'views/ApplyPage/components/BottomSection';
 import CommonSection from 'views/ApplyPage/components/CommonSection';
 import DefaultSection from 'views/ApplyPage/components/DefaultSection';
 import PartSection from 'views/ApplyPage/components/PartSection';
+import useGetDraft from 'views/ApplyPage/hooks/useGetDraft';
 import useGetQuestions from 'views/ApplyPage/hooks/useGetQuestions';
 import { container, formContainer } from 'views/ApplyPage/style.css';
 import PreventReviewDialog from 'views/dialogs/PreventReviewDialog';
 import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
-import useGetDraft from 'views/SignedInPage/hooks/useGetDraft';
 
 const ReviewPage = () => {
   const preventReviewDialog = useRef<HTMLDialogElement>(null);

diff --git a/src/views/SignedInPage/apis.ts b/src/views/SignedInPage/apis.ts
@@ -1,7 +1,7 @@
 import tokenInstance from '@apis/tokenInstance';
 
-export const getDraft = async () => {
-  const res = await tokenInstance.get('/recruiting-answer/store');
+export const getMyInfo = async () => {
+  const res = await tokenInstance.get('/recruiting-auth/my');
 
   return res;
 };
diff --git a/src/views/MyPage/hooks/useGetMyInfo.tsx → ...views/SignedInPage/hooks/useGetMyInfo.tsx b/src/views/MyPage/hooks/useGetMyInfo.tsx → ...views/SignedInPage/hooks/useGetMyInfo.tsx
diff --git a/src/views/SignedInPage/index.tsx b/src/views/SignedInPage/index.tsx
@@ -5,13 +5,14 @@ import ApplyPage from 'views/ApplyPage';
 import CompletePage from 'views/CompletePage';
 import BigLoading from 'views/loadings/BigLoding';
 import MyPage from 'views/MyPage';
-import useGetMyInfo from 'views/MyPage/hooks/useGetMyInfo';
+
+import useGetMyInfo from './hooks/useGetMyInfo';
 
 const SignedInPage = () => {
   const [isComplete, setIsComplete] = useState(false);
 
   const { myInfoData, myInfoIsLoading } = useGetMyInfo();
-  const { name, season, part, submit } = myInfoData?.data || {};
+  const { name, season, part, submit, applicationPass } = myInfoData?.data || {};
 
   const { handleSaveRecruitingInfo } = useContext(RecruitingInfoContext);
 
@@ -31,7 +32,7 @@ const SignedInPage = () => {
   return (
     <>
       {isComplete && <CompletePage />}
-      {!isComplete && submit && <MyPage part={part} />}
+      {!isComplete && submit && <MyPage part={part} applicationPass={applicationPass} />}
       {!isComplete && !submit && <ApplyPage onSetComplete={handleSetComplete} />}
     </>
   );

diff --git a/src/views/SignedInPage/types.ts b/src/views/SignedInPage/types.ts
@@ -0,0 +1,16 @@
+export interface MyRequest {
+  email: string;
+  season: number;
+  group: string;
+  password: string;
+}
+
+export interface MyResponse {
+  err: boolean;
+  season: number;
+  name: string;
+  part: string;
+  submit: boolean;
+  applicationPass: boolean;
+  finalPass: boolean;
+}