Merge pull request #208 from YAPP-Github/feature/divide-result

feat: 코드로 로직 분기, 여성용 UI 만듦
YAPP-Github · Jul 30, 2022 · 46402ca · 46402ca
2 parents aa521bc + be11a31
commit 46402ca
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 26 deletions.
diff --git a/src/components/domain/matching/CompleteBox.tsx b/src/components/domain/matching/CompleteBox.tsx
@@ -3,18 +3,24 @@ import React from 'react';
 import { MatchingImg, StringEle } from './WaitingBox';
 import useDateLabel from '@/hooks/common/useDateLabel';
 
+type CompleteType = 'pay' | 'femaleSuccess';
+
 interface CompleteBoxProps {
   date: string;
+  status?: CompleteType;
 }
 
-function CompleteBox({ date }: CompleteBoxProps) {
+function CompleteBox({ date, status = 'pay' }: CompleteBoxProps) {
   const dateLabel = useDateLabel(date);
 
   return (
     <>
       <MatchingImg src={Complete} alt="매칭 완료 이미지" />
       <StringEle>
-        <strong>결제 확인 후 {dateLabel}에</strong>
+        <strong>
+          {status === 'femaleSuccess' && '상대 '}결제 확인 후 {dateLabel}
+        </strong>
+        에
         <br />
         카톡 아이디가 전달됩니다.
       </StringEle>

diff --git a/src/components/domain/matching/MatchingStateTitle.tsx b/src/components/domain/matching/MatchingStateTitle.tsx
@@ -26,6 +26,13 @@ function MatchingStateTitle(state: string) {
               성사되었습니다!
             </strong>
           ),
+          femaleSuccess: (
+            <strong>
+              매칭이
+              <br />
+              성사되었습니다!
+            </strong>
+          ),
           pay: (
             <strong>
               결제가

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
@@ -7,10 +7,11 @@ import CompleteButton from './buttons/CompleteButton';
 import EndButton from './buttons/EndButton';
 import NoneButton from './buttons/NoneButton';
 import SuccessButton from './buttons/SuccessButton';
+import FemaleSuccessButton from './buttons/FemaleSuccessButton';
 import Path from '@/router/Path';
 import { Status } from '@/pages/MatchingPage';
-import { getMeetingMatching, postMeetingMatching } from '@/lib/api/meeting';
-import { getDatingMatching, postDatingMatching } from '@/lib/api/dating';
+import { getMeetingMatching } from '@/lib/api/meeting';
+import { getDatingMatching } from '@/lib/api/dating';
 import { useToggle } from '@/hooks/common';
 import { MeetingPartnerSurvey } from '@/types/meeting';
 import { DatingPartnerSurvey } from '@/types/dating';
@@ -62,34 +63,52 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
     location.pathname.includes('meeting') ? setType('meeting') : setType('dating');
   }, [location.pathname]);
 
-  const requestRandomMatching = async () => {
-    try {
-      type === 'meeting' ? await postMeetingMatching() : await postDatingMatching();
-      await fetchMatchingResult();
-    } catch (e) {
-      setErrorMessage(() => (e as Error).message.toString());
-      onToggleErrorModal();
-    }
-  };
+  // const requestRandomMatching = async () => {
+  //   try {
+  //     type === 'meeting' ? await postMeetingMatching() : await postDatingMatching();
+  //     await fetchMatchingResult();
+  //   } catch (e) {
+  //     setErrorMessage(() => (e as Error).message.toString());
+  //     onToggleErrorModal();
+  //   }
+  // };
 
   const fetchMatchingResult = async () => {
     try {
       const response = type === 'meeting' ? await getMeetingMatching() : await getDatingMatching();
-      if (!response?.partnerSurvey) {
-        setErrorMessage(() => response.message.toString());
-        onToggleErrorModal();
-      } else {
-        handleStatus('success');
-        type === 'meeting'
-          ? setMeetingMatchingResult(response.partnerSurvey as MeetingPartnerSurvey)
-          : setDatingMatchingResult(response.partnerSurvey as DatingPartnerSurvey);
+
+      const { code } = response;
+      switch (code) {
+        case 7001:
+          handleStatus('waiting');
+          break;
+        case 7002:
+          handleStatus('success');
+          break;
+        case 7003:
+          handleStatus('femaleSuccess');
+          break;
+        case 7004:
+          saveMatchingResult(response.partnerSurvey);
+          handleStatus('end');
+          break;
+        case 7005:
+          handleStatus('fail');
       }
     } catch (e) {
-      setErrorMessage(() => (e as Error).message.toString());
+      setErrorMessage(() => e.response.data.message);
       onToggleErrorModal();
     }
   };
 
+  const saveMatchingResult = (partnerSurvey: MeetingPartnerSurvey | DatingPartnerSurvey) => {
+    'age' in partnerSurvey ? setDatingMatchingResult(partnerSurvey) : setMeetingMatchingResult(partnerSurvey);
+  };
+
+  useEffect(() => {
+    fetchMatchingResult();
+  }, []);
+
   return (
     <>
       <TemplateBlock>
@@ -120,6 +139,7 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
               {
                 none: <NoneButton />,
                 success: <SuccessButton />,
+                femaleSuccess: <FemaleSuccessButton />,
                 pay: <CompleteButton />,
                 end: <EndButton handleStatus={handleStatus} />,
                 fail: <EndButton handleStatus={handleStatus} />,

diff --git a/src/components/domain/matching/buttons/FemaleSuccessButton.tsx b/src/components/domain/matching/buttons/FemaleSuccessButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@/components/base';
+import { palette } from '@/lib/styles/palette';
+import React from 'react';
+import styled from 'styled-components';
+
+function FemaleSuccessButton() {
+  return (
+    <ButtonStyled size="medium" variant="grayBlack">
+      상대 결제 대기중입니다..
+    </ButtonStyled>
+  );
+}
+
+const ButtonStyled = styled(Button)`
+  color: white;
+  font-weight: 700;
+  background-color: ${palette.disableColor};
+`;
+
+export default FemaleSuccessButton;
diff --git a/src/pages/MatchingPage.tsx b/src/pages/MatchingPage.tsx
@@ -12,10 +12,10 @@ import MeetingEndBox from '@/components/domain/matching/MeetingEndBox';
 import DatingEndBox from '@/components/domain/matching/DatingEndBox';
 import FailBox from '@/components/domain/matching/FailBox';
 
-export type Status = 'none' | 'waiting' | 'success' | 'pay' | 'end' | 'fail';
+export type Status = 'none' | 'waiting' | 'success' | 'femaleSuccess' | 'pay' | 'end' | 'fail';
 
 const MatchingPage = () => {
-  const [status, setStatus] = useState<Status>('waiting');
+  const [status, setStatus] = useState<Status>('none');
 
   const handleStatus = (status: Status) => setStatus(status);
 
@@ -32,6 +32,7 @@ const MatchingPage = () => {
                 none: <></>,
                 waiting: <WaitingBox />,
                 success: <SuccessBox payDeadline={matchingResult.payDeadline} />,
+                femaleSuccess: <CompleteBox date={matchingResult.payDeadline} status="femaleSuccess" />,
                 pay: <CompleteBox date={matchingResult.payDeadline} />,
                 end: <MeetingEndBox {...matchingResult} />,
                 fail: <FailBox />,
@@ -46,6 +47,7 @@ const MatchingPage = () => {
                 none: <></>,
                 waiting: <WaitingBox />,
                 success: <SuccessBox payDeadline={matchingResult.payDeadline} />,
+                femaleSuccess: <CompleteBox date={matchingResult.payDeadline} status="femaleSuccess" />,
                 pay: <CompleteBox date={matchingResult.payDeadline} />,
                 end: <DatingEndBox {...matchingResult} />,
                 fail: <FailBox />,

diff --git a/src/types/dating.ts b/src/types/dating.ts
@@ -31,8 +31,19 @@ export interface Dating {
   kakaoId: string;
 }
 
+/*
+code : 7000 - 작성한 설문이 없을 때
+code : 7001 - 매칭 대기중인 상태
+code : 7002 - 매칭 성공 후 자신이 결제해야하는 상황 (남자의 경우만 해당)
+code : 7003 - 매칭 성공 후 상대가 결제해야하는 상황 (여자의 경우만 해당)
+code : 7004 - 모두 결제를 해서 서로의 정보를 확인하는 상황
+code : 7005 - 매칭에 실패한 상태
+*/
+
+type Code = 7000 | 7001 | 7002 | 7003 | 7004 | 7005;
+
 export interface DatingMatchingResultResponse {
-  code: number;
+  code: Code;
   message: string;
   partnerSurvey: DatingPartnerSurvey;
 }

diff --git a/src/types/meeting.ts b/src/types/meeting.ts
@@ -31,8 +31,19 @@ export interface Meeting {
   kakaoId: string;
 }
 
+/*
+code : 7000 - 작성한 설문이 없을 때
+code : 7001 - 매칭 대기중인 상태
+code : 7002 - 매칭 성공 후 자신이 결제해야하는 상황 (남자의 경우만 해당)
+code : 7003 - 매칭 성공 후 상대가 결제해야하는 상황 (여자의 경우만 해당)
+code : 7004 - 모두 결제를 해서 서로의 정보를 확인하는 상황
+code : 7005 - 매칭에 실패한 상태
+*/
+
+type Code = 7000 | 7001 | 7002 | 7003 | 7004 | 7005;
+
 export interface MeetingMatchingResultResponse {
-  code: number;
+  code: Code;
   message: string;
   partnerSurvey: MeetingPartnerSurvey;
 }