Merge pull request #206 from YAPP-Github/dev

Release 0.1.14
YAPP-Github · Jul 30, 2022 · 4e9539b · 4e9539b
2 parents 985cd3e + aa521bc
commit 4e9539b
Show file tree

Hide file tree

Showing 37 changed files with 227 additions and 55 deletions.
diff --git a/src/assets/img/CopyWhiteIcon.png b/src/assets/img/CopyWhiteIcon.png
diff --git a/src/assets/img/index.ts b/src/assets/img/index.ts
@@ -10,5 +10,6 @@ export { default as MatchingSuccess } from './MatchingSuccess.png';
 export { default as Waiting } from './Waiting.png';
 export { default as Complete } from './Complete.png';
 export { default as CopyIcon } from './CopyIcon.png';
+export { default as CopyWhiteIcon } from './CopyWhiteIcon.png';
 export { default as TripleLineMenu } from './TripleLineMenu.png';
 export { default as Logout } from './Logout.png';
diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx
@@ -46,7 +46,7 @@ function LandingContainer() {
             시작하기
           </LandingBtn>
           <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => navigate('/matching/meeting')}>
-            매칭 결과 확인
+            매칭 결과 확인하기
           </LandingBtn>
         </BtnBox>
       )}

diff --git a/src/components/domain/matching/FailBox.tsx b/src/components/domain/matching/FailBox.tsx
@@ -0,0 +1,70 @@
+import { MatchingFail } from '@/assets/img';
+import styled from 'styled-components';
+
+function FailBox() {
+  return (
+    <>
+      <>
+        <MatchingImg src={MatchingFail} alt="매칭 실패 이미지" />
+        <StringEle>
+          매칭에 실패하였습니다.
+          <br />
+          다시 매칭할까요?
+        </StringEle>
+        <Actions>
+          <ReviewLink
+            href="https://docs.google.com/forms/d/e/1FAIpQLSeSnI-tB9acPtCepl-FM8cCTF-uezGOJ5SjwFOdQ6DT92xjmQ/viewform?usp=sf_link"
+            target="_blank"
+          >
+            후기작성
+          </ReviewLink>
+          <ReportLink
+            href="https://docs.google.com/forms/d/e/1FAIpQLSfTSBwk6bb0ywTBoHu4cZM1gV8DN0OjMB4jVFvdzbYDrjnJdg/viewform?usp=sf_link"
+            target="_blank"
+          >
+            신고하기
+          </ReportLink>
+        </Actions>
+      </>
+    </>
+  );
+}
+
+export const MatchingImg = styled.img`
+  width: 140px;
+  margin-bottom: 20px;
+`;
+export const StringEle = styled.p`
+  line-height: 26px;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  margin-top: 18px;
+
+  & > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    height: 28px;
+  }
+`;
+
+const ReviewLink = styled.a`
+  position: relative;
+  &:after {
+    position: absolute;
+    right: 0;
+    content: '';
+    width: 1px;
+    height: 15px;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+`;
+
+const ReportLink = styled.a``;
+
+export default FailBox;
diff --git a/src/components/domain/matching/MatchingStateTitle.tsx b/src/components/domain/matching/MatchingStateTitle.tsx
@@ -40,6 +40,13 @@ function MatchingStateTitle(state: string) {
               완료되었습니다!
             </strong>
           ),
+          fail: (
+            <strong>
+              매칭에
+              <br />
+              실패하였습니다.
+            </strong>
+          ),
         }[state]
       }
     </>

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
@@ -6,7 +6,6 @@ import { Title } from '@/lib/styles/styledComponents';
 import CompleteButton from './buttons/CompleteButton';
 import EndButton from './buttons/EndButton';
 import NoneButton from './buttons/NoneButton';
-import WaitingButton from './buttons/WaitingButton';
 import SuccessButton from './buttons/SuccessButton';
 import Path from '@/router/Path';
 import { Status } from '@/pages/MatchingPage';
@@ -120,10 +119,10 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
             {
               {
                 none: <NoneButton />,
-                waiting: <WaitingButton handleClick={requestRandomMatching} />,
                 success: <SuccessButton />,
                 pay: <CompleteButton />,
                 end: <EndButton handleStatus={handleStatus} />,
+                fail: <EndButton handleStatus={handleStatus} />,
               }[btnName]
             }
           </ButtonWrapper>

diff --git a/src/components/domain/matching/SuccessBox.tsx b/src/components/domain/matching/SuccessBox.tsx
@@ -15,7 +15,8 @@ function SuccessBox({ payDeadline }: SuccessBoxProps) {
     <>
       <MatchingImg src={MatchingSuccess} alt="매칭 성공 이미지" />
       <StringEle>
-        <strong>{dateLabel}</strong>까지 <strong>10,000</strong>원을 결제해주시면
+        <strong>{dateLabel}</strong>까지 아래 계좌로
+        <br /> <strong>1000</strong>원을 결제해주시면
         <br />
         카톡 아이디가 전달됩니다.
       </StringEle>

diff --git a/src/components/domain/matching/WaitingBox.tsx b/src/components/domain/matching/WaitingBox.tsx
@@ -11,9 +11,6 @@ function WaitingBox() {
         <br />
         매칭이 되면 카톡과 이메일로 링크를 보내드릴게요.
       </StringEle>
-      <MarginTopEle>
-        랜덤매칭으로 이상형 반영없이 <br /> 바로 매칭받을 수 있어요
-      </MarginTopEle>
     </>
   );
 }

diff --git a/src/components/domain/matching/buttons/EndButton.tsx b/src/components/domain/matching/buttons/EndButton.tsx
@@ -1,26 +1,28 @@
 import { Button, Modal } from '@/components/base';
 import { useToggle } from '@/hooks/common';
-import { postReMatchMettingSurvey } from '@/lib/api/meeting';
+import { postReMatchMeetingSurvey } from '@/lib/api/meeting';
 import { postReMatchDatingSurvey } from '@/lib/api/dating';
-import { useMatch } from 'react-router-dom';
-import React from 'react';
+import { useLocation } from 'react-router-dom';
+import React, { useState } from 'react';
 import { Status } from '@/pages/MatchingPage';
 
 interface EndButtonProps {
   handleStatus: (status: Status) => void;
 }
 
 function EndButton({ handleStatus }: EndButtonProps) {
+  const location = useLocation();
   const [isErrorModal, onToggleErrorModal] = useToggle();
-  const matchMeeting = useMatch('/meeting/*');
+  const [errorMessage, setErrorMessage] = useState('에러가 발생했습니다😭 다시한번 시도해 주세요!');
 
   const handleClick = async () => {
+    const matchMeeting = location.pathname.includes('meeting');
     try {
-      const res = matchMeeting ? await postReMatchMettingSurvey() : await postReMatchDatingSurvey();
-      if (typeof res === 'number') {
-        handleStatus('waiting');
-      }
+      matchMeeting ? await postReMatchMeetingSurvey() : await postReMatchDatingSurvey();
+      handleStatus('waiting');
     } catch (e) {
+      const { message } = e.response.data;
+      setErrorMessage(message);
       onToggleErrorModal();
     }
   };
@@ -35,7 +37,7 @@ function EndButton({ handleStatus }: EndButtonProps) {
           height={140}
           bottonName="확인"
           title="알림"
-          text="에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          text={errorMessage}
           onToggleModal={onToggleErrorModal}
           onClick={() => {
             void 0;

diff --git a/src/components/domain/matching/buttons/SuccessButton.tsx b/src/components/domain/matching/buttons/SuccessButton.tsx
@@ -1,15 +1,80 @@
-import { Button } from '@/components/base';
 import React from 'react';
+import { Button } from '@/components/base';
+import { CopyWhiteIcon } from '@/assets/img';
+import styled from 'styled-components';
+import { Modal } from '@/components/base';
+import { useToggle } from '@/hooks/common';
 
 function SuccessButton() {
-  const handleClick = () => {
-    console.log('asd');
+  const [isModal, onToggleModal] = useToggle();
+  const [isErrorModal, onToggleErrorModal] = useToggle();
+
+  const handleCopy = async (text: string) => {
+    try {
+      onToggleModal();
+      await navigator.clipboard.writeText(text);
+    } catch (e) {
+      onToggleErrorModal();
+    }
   };
   return (
-    <Button onClick={handleClick} size="medium" variant={'kakao'}>
-      <strong>카카오페이</strong>로 간편하고 안전하게 결제
-    </Button>
+    <SuccessButtonBlock>
+      <Button onClick={() => handleCopy('농협 301-0312-2534-81')} size="medium">
+        <img src={CopyWhiteIcon} alt="복사" width={17} height={17} /> <Text>농협 301-0312-2534-81</Text>
+      </Button>
+      <Warning>
+        받는 분 통장 표시는 <span>카톡 아이디 첫 7자리</span>로 해주세요! <br />
+        (ex: minsu30)
+      </Warning>
+      {isModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="복사완료!"
+          onToggleModal={onToggleModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+      {isErrorModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="복사중 에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          onToggleModal={onToggleErrorModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+    </SuccessButtonBlock>
   );
 }
 
+const SuccessButtonBlock = styled.section`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const Text = styled.span`
+  margin-left: 5px;
+`;
+
+const Warning = styled.strong`
+  text-align: center;
+  font-size: 12px;
+  margin-top: 7px;
+  line-height: 1.2;
+
+  span {
+    color: #ff0000;
+  }
+`;
+
 export default SuccessButton;
diff --git a/src/components/domain/survey/SurveyTemplate.tsx b/src/components/domain/survey/SurveyTemplate.tsx
@@ -44,7 +44,7 @@ const SurveyTemplate = ({
               variant={disableNext ? 'gray' : 'default'}
               fontWeight={disableNext ? 400 : 700}
             >
-              다음
+              {currStep === totalStep ? '제출' : '다음'}
             </Button>
           </ButtonWrapper>
         )}
@@ -53,6 +53,9 @@ const SurveyTemplate = ({
   );
 };
 
+export const LAST_MEETING_STEP = 15;
+export const LAST_DATING_STEP = 16;
+
 const SurveyTemplateBlock = styled.div`
   position: relative;
   height: 100%;

diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts
@@ -17,7 +17,7 @@ export const patchMeetingSurvey = async (payload: Partial<Meeting>) => {
   return res.data;
 };
 
-export const postReMatchMettingSurvey = async () => {
+export const postReMatchMeetingSurvey = async () => {
   const res = await apiClient.post('/meeting/survey/rematch');
   return res.data;
 };

diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx
@@ -7,6 +7,7 @@ import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import useAboardAreaLoad from '@/hooks/survey/useAboardAreaLoad';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const AbroadAreasSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -32,12 +33,12 @@ const AbroadAreasSurvey = () => {
       disableNext={checkDisabled}
       hasProgressBar={true}
       currStep={matchMeeting ? 12 : 13}
-      totalStep={matchMeeting ? 14 : 16}
+      totalStep={matchMeeting ? LAST_MEETING_STEP : LAST_DATING_STEP}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
       handleNextClick={handleNextClick}
     >
       <Title>
-        <strong>미팅이 가능한 지역(도시명)</strong>을<br />
+        <strong>만남이 가능한 지역(도시명)</strong>을<br />
         모두 알려주세요.
       </Title>
       <SearchSelector

diff --git a/src/pages/AgreementSurvey.tsx b/src/pages/AgreementSurvey.tsx
@@ -12,6 +12,7 @@ import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigat
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { goKakaoLogin } from '@/utils/goKakaoLogin';
 import { getOauthKakaoAge } from '@/lib/api/oauth';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 import { Modal } from '@/components/base';
 
 const AgreementSurvey = () => {
@@ -63,7 +64,8 @@ const AgreementSurvey = () => {
     <>
       <SurveyTemplate
         disableNext={!isEssentialChecked}
-        hasProgressBar={false}
+        currStep={matchMeeting ? 14 : 15}
+        totalStep={matchMeeting ? LAST_MEETING_STEP : LAST_DATING_STEP}
         handlePrevClick={() => meetingNavigate(Path.ChannelSurvey)}
         handleNextClick={handleNextClick}
       >

diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx
@@ -42,7 +42,7 @@ const AuthMail = () => {
             학교 메일로 인증해주세요.
           </strong>
         </Title>
-        <Description>예시: 1234@bu.du</Description>
+        <Description>예시: 1234@bu.edu</Description>
         <FormWrapper>
           <EmailForm onSubmitAuthCode={onSubmitAuthCode} />
           <AuthCodeForm email={email} onCheckAuthCode={onCheckAuthCode} />

diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx
@@ -8,6 +8,7 @@ import Path from '@/router/Path';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import useUnivLoad from '@/hooks/survey/useUnivLoad';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const AvoidUniversitiesSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -36,7 +37,7 @@ const AvoidUniversitiesSurvey = () => {
     <SurveyTemplate
       disableNext={false}
       hasProgressBar={true}
-      totalStep={matchMeeting ? 14 : 16}
+      totalStep={matchMeeting ? LAST_MEETING_STEP : LAST_DATING_STEP}
       currStep={matchMeeting ? 5 : 7}
       handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}

diff --git a/src/pages/ChannelSurvey.tsx b/src/pages/ChannelSurvey.tsx
@@ -9,6 +9,7 @@ import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigat
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { CHANNEL_ITEMS } from '@/types/constants/channel';
 import { Channel } from '@/types/meeting';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const ChannelSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -39,7 +40,7 @@ const ChannelSurvey = () => {
       disableNext={matchMeeting ? !isChecked : !isCheckedDating}
       hasProgressBar={true}
       currStep={matchMeeting ? 13 : 14}
-      totalStep={matchMeeting ? 14 : 16}
+      totalStep={matchMeeting ? LAST_MEETING_STEP : LAST_DATING_STEP}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
       handleNextClick={handleNextClick}
     >