Merge pull request #203 from YAPP-Github/feature/text-revise

Feat, Style: 문구수정, UI 수정
YAPP-Github · Jul 30, 2022 · aa521bc · aa521bc
2 parents 5c49e24 + 01170a2
commit aa521bc
Show file tree

Hide file tree

Showing 32 changed files with 133 additions and 44 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/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,7 +119,6 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
             {
               {
                 none: <NoneButton />,
-                waiting: <WaitingButton handleClick={requestRandomMatching} />,
                 success: <SuccessButton />,
                 pay: <CompleteButton />,
                 end: <EndButton handleStatus={handleStatus} />,

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/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/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}
     >

diff --git a/src/pages/DomesticAreasSurvey.tsx b/src/pages/DomesticAreasSurvey.tsx
@@ -10,6 +10,7 @@ import { useMeetingNavigate, useDatingNavigate } from '@/hooks/common/useNavigat
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { type DomesticAreas } from '@/types/meeting';
 import { useMatch } from 'react-router-dom';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const DomesticAreasSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -46,12 +47,12 @@ const DomesticAreasSurvey = () => {
     <SurveyTemplate
       disableNext={!isChecked}
       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>을
+        <strong>만남이 가능한 지역</strong>을
         <br />
         모두 알려주세요.
       </Title>

diff --git a/src/pages/GenderAverageAgeSurvey.tsx b/src/pages/GenderAverageAgeSurvey.tsx
@@ -12,6 +12,7 @@ import { type Gender } from '@/types/meeting';
 import { useRecoilValue } from 'recoil';
 import { meetingState } from '@/atoms/meetingState';
 import { conversionTypeOfMeeting } from '@/utils/converson';
+import { LAST_MEETING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const GenderAverageAgeSurvey = () => {
   const navigate = useNavigate();
@@ -37,7 +38,7 @@ const GenderAverageAgeSurvey = () => {
     <SurveyTemplate
       disableNext={!ageOption || !genderOption}
       currStep={2}
-      totalStep={14}
+      totalStep={LAST_MEETING_STEP}
       handlePrevClick={() => navigate(Path.TypeOfMeetingSurvey)}
       handleNextClick={handleNextClick}
     >

diff --git a/src/pages/IsAbroadSurvey.tsx b/src/pages/IsAbroadSurvey.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable react/no-children-prop */
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import { ChooseTwoBox, SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import styled from 'styled-components';
@@ -10,6 +9,7 @@ import { COUNTRY_ITEMS } from '@/types/constants/area';
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { useMatch } from 'react-router-dom';
 import { type Location } from '@/types/meeting';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const IsAbroadSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -44,7 +44,7 @@ const IsAbroadSurvey = () => {
       disableNext={false}
       hasProgressBar={true}
       currStep={matchMeeting ? 11 : 12}
-      totalStep={matchMeeting ? 14 : 16}
+      totalStep={matchMeeting ? LAST_MEETING_STEP : LAST_DATING_STEP}
       handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}
     >

diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
@@ -12,6 +12,7 @@ import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigat
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { postMeetingSurvey } from '@/lib/api/meeting';
 import { postDatingSurvey } from '@/lib/api/dating';
+import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const KakaoIdSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -50,8 +51,8 @@ const KakaoIdSurvey = () => {
       <SurveyTemplate
         disableNext={!isConfirm}
         hasProgressBar={true}
-        currStep={14}
-        totalStep={14}
+        currStep={matchMeeting ? 15 : 16}
+        totalStep={matchMeeting ? LAST_MEETING_STEP : LAST_DATING_STEP}
         handlePrevClick={() => meetingNavigate(Path.AgreementSurvey)}
         handleNextClick={handleNextClick}
       >

diff --git a/src/pages/MindsetSurvey.tsx b/src/pages/MindsetSurvey.tsx
@@ -8,6 +8,7 @@ import Path from '@/router/Path';
 import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type MindSet } from '@/types/meeting';
+import { LAST_MEETING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const MindsetSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
@@ -31,7 +32,7 @@ const MindsetSurvey = () => {
     <SurveyTemplate
       disableNext={!checkedOption}
       currStep={9}
-      totalStep={14}
+      totalStep={LAST_MEETING_STEP}
       handlePrevClick={() => meetingNavigate(Path.PreferDepartmentsSurvey)}
       handleNextClick={handleNextClick}
     >

diff --git a/src/pages/MyBodySmoke.tsx b/src/pages/MyBodySmoke.tsx
@@ -7,6 +7,7 @@ import { MYBODY_ITEMS } from '@/types/constants/body';
 import { useDatingSessionState } from '@/hooks/common';
 import { type Body } from '@/types/dating';
 import styled from 'styled-components';
+import { LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const MyBodySmoke = () => {
   const datingNavigate = useDatingNavigate();
@@ -31,7 +32,7 @@ const MyBodySmoke = () => {
     <SurveyTemplate
       disableNext={!myBody}
       hasProgressBar={true}
-      totalStep={16}
+      totalStep={LAST_DATING_STEP}
       currStep={5}
       handlePrevClick={() => datingNavigate(Path.MyMbtiHeight)}
       handleNextClick={handleNextClick}

diff --git a/src/pages/MyDateCount.tsx b/src/pages/MyDateCount.tsx
@@ -7,6 +7,7 @@ import { SMOKEOK_ITEMS } from '@/types/constants/smoke';
 import { useDatingSessionState } from '@/hooks/common';
 import { type DateCount } from '@/types/dating';
 import styled from 'styled-components';
+import { LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const MyDateCount = () => {
   const datingNavigate = useDatingNavigate();
@@ -31,7 +32,7 @@ const MyDateCount = () => {
     <SurveyTemplate
       disableNext={!myDateCount}
       hasProgressBar={true}
-      totalStep={16}
+      totalStep={LAST_DATING_STEP}
       currStep={6}
       handlePrevClick={() => datingNavigate(Path.MyBodySmoke)}
       handleNextClick={handleNextClick}

diff --git a/src/pages/MyDepartmentCharacter.tsx b/src/pages/MyDepartmentCharacter.tsx
@@ -9,6 +9,7 @@ import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import { useDatingSessionState } from '@/hooks/common';
 import { type Departments } from '@/types/meeting';
 import { type Characteristic } from '@/types/dating';
+import { LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
 
 const MyDepartmentCharacter = () => {
   const datingNavigate = useDatingNavigate();
@@ -28,7 +29,7 @@ const MyDepartmentCharacter = () => {
     <SurveyTemplate
       disableNext={!myDepartment && !characteristic}
       currStep={3}
-      totalStep={16}
+      totalStep={LAST_DATING_STEP}
       handlePrevClick={() => datingNavigate(Path.MyGenderAge)}
       handleNextClick={handleNextClick}
     >