Merge pull request #213 from YAPP-Github/dev

Release 0.1.17
YAPP-Github · Jul 30, 2022 · 1573715 · 1573715
2 parents 0874044 + df73704
commit 1573715
Show file tree

Hide file tree

Showing 17 changed files with 166 additions and 41 deletions.
diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx
@@ -6,13 +6,14 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { useLoginState } from '@/atoms/userState';
 import { goKakaoLogin } from '@/utils/goKakaoLogin';
+import Cookies from 'js-cookie';
 
 function LandingContainer() {
   const navigate = useNavigate();
   const { isLogin } = useLoginState();
 
   const handleKakaoLoginClick = () => {
-    goKakaoLogin('LOGIN');
+    goKakaoLogin('login');
   };
 
   return (
@@ -40,7 +41,8 @@ function LandingContainer() {
             fullWidth
             variant={'default'}
             onClick={() => {
-              navigate('/type-of-meeting');
+              const authenticated = Cookies.get('authenticated') === 'true';
+              authenticated ? navigate('/type-of-meeting') : navigate('/auth-mail');
             }}
           >
             시작하기

diff --git a/src/components/domain/matching/CancelBox.tsx b/src/components/domain/matching/CancelBox.tsx
@@ -0,0 +1,74 @@
+import { MatchingFail } from '@/assets/img';
+import styled from 'styled-components';
+
+function CancelBox() {
+  return (
+    <>
+      <>
+        <MatchingImg src={MatchingFail} alt="매칭 실패 이미지" />
+        <StringEle>
+          매칭이 성사되었으나
+          <br />
+          상대방이 서비스를 탈퇴하여
+          <br />
+          매칭이 취소되었습니다.
+          <br />
+          지불하신 금액은 <strong>1영업일</strong> 이내 환불됩니다.
+        </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 CancelBox;
diff --git a/src/components/domain/matching/MatchingStateTitle.tsx b/src/components/domain/matching/MatchingStateTitle.tsx
@@ -54,6 +54,13 @@ function MatchingStateTitle(state: string) {
               실패하였습니다.
             </strong>
           ),
+          cancel: (
+            <strong>
+              매칭이
+              <br />
+              취소되었습니다.
+            </strong>
+          ),
         }[state]
       }
     </>

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
@@ -3,11 +3,7 @@ import styled from 'styled-components';
 import { Button, Modal } from '@/components/base';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Title } from '@/lib/styles/styledComponents';
-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 { CompleteButton, EndButton, NoneButton, SuccessButton, FemaleSuccessButton } from './buttons';
 import Path from '@/router/Path';
 import { Status } from '@/pages/MatchingPage';
 import { getMeetingMatching } from '@/lib/api/meeting';
@@ -79,6 +75,9 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
 
       const { code } = response;
       switch (code) {
+        case 7000:
+          handleStatus('none');
+          break;
         case 7001:
           handleStatus('waiting');
           break;
@@ -94,6 +93,9 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
           break;
         case 7005:
           handleStatus('fail');
+          break;
+        case 7006:
+          handleStatus('cancel');
       }
     } catch (e) {
       setErrorMessage(() => e.response.data.message);
@@ -107,7 +109,7 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
 
   useEffect(() => {
     fetchMatchingResult();
-  }, []);
+  }, [type]);
 
   return (
     <>
@@ -143,6 +145,7 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
                 pay: <CompleteButton />,
                 end: <EndButton handleStatus={handleStatus} />,
                 fail: <EndButton handleStatus={handleStatus} />,
+                cancel: <EndButton handleStatus={handleStatus} />,
               }[btnName]
             }
           </ButtonWrapper>

diff --git a/src/components/domain/matching/buttons/index.ts b/src/components/domain/matching/buttons/index.ts
@@ -0,0 +1,6 @@
+export { default as CompleteButton } from './CompleteButton';
+export { default as EndButton } from './EndButton';
+export { default as NoneButton } from './NoneButton';
+export { default as SuccessButton } from './SuccessButton';
+export { default as FemaleSuccessButton } from './FemaleSuccessButton';
+export { default as WaitingButton } from './WaitingButton';
diff --git a/src/components/domain/matching/index.ts b/src/components/domain/matching/index.ts
@@ -0,0 +1,10 @@
+export { default as CompleteBox } from './CompleteBox';
+export { default as DatingEndBox } from './DatingEndBox';
+export { default as FailBox } from './FailBox';
+export { default as KakaoCopyBox } from './KakaoCopyBox';
+export { default as MatchingStateTitle } from './MatchingStateTitle';
+export { default as MatchingTemplete } from './MatchingTemplete';
+export { default as MeetingEndBox } from './MeetingEndBox';
+export { default as SuccessBox } from './SuccessBox';
+export { default as WaitingBox } from './WaitingBox';
+export { default as CancelBox } from './CancelBox';
diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
@@ -1,33 +1,42 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Logo, Logout } from '@/assets/img';
 import { palette } from '@/lib/styles/palette';
 import styled from 'styled-components';
 import DatingInfoBox from './DatingInfoBox';
 import MeetingInfoBox from './MeetingInfoBox';
 import { postLogout, postWithdrawal } from '@/lib/api/user';
-import { useToggle } from '@/hooks/common';
+import { useDatingSessionState, useToggle } from '@/hooks/common';
 import { Modal } from '../base';
+import Cookies from 'js-cookie';
+import { useNavigate } from 'react-router-dom';
+import useUnivLoad from '@/hooks/survey/useUnivLoad';
+
 interface MenuBlockProps {
   isMenu: boolean;
   onToggleMenu: () => void;
 }
-/**
- * 임시 유저 데이터
- */
-const TempUserData = {
-  email: '[email protected]',
-  univ: 'Boston University',
-};
 
 function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
-  const [isModal, onToggleModal] = useToggle();
+  const [errorMessage, setErrorMessage] = useState('에러가 발생했습니다😭 다시한번 시도해 주세요!');
   const [isConfirm, setConfirm] = useState(false);
+  const [isModal, onToggleModal] = useToggle();
   const [isErrorModal, onToggleErrorModal] = useToggle();
+  const navigate = useNavigate();
+  const { initDatingState } = useDatingSessionState();
+  const { univs } = useUnivLoad();
+
+  const myUnivLabel = useMemo(() => {
+    return univs.find(({ id }) => id === initDatingState.myUniversity)?.name;
+  }, [univs]);
 
   const handleLogout = async () => {
     try {
       await postLogout();
+      Cookies.remove('AccessToken');
+      navigate('/');
     } catch (e) {
+      const message = (e as Error).message;
+      setErrorMessage(message);
       onToggleErrorModal();
     }
   };
@@ -55,8 +64,8 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
           <UserInfo>
             <SiteLogo src={Logo} alt="사이트 로고" />
             <UserBox>
-              <div>{TempUserData.email}</div>
-              <div className="univ">{TempUserData.univ}</div>
+              <div>{initDatingState.kakaoId}</div>
+              <div className="univ">{myUnivLabel}</div>
             </UserBox>
           </UserInfo>
           <LogoutButton onClick={handleLogout}>
@@ -86,7 +95,7 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
           height={140}
           bottonName="확인"
           title="알림"
-          text="에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          text={errorMessage}
           onToggleModal={onToggleErrorModal}
           onClick={() => {
             void 0;

diff --git a/src/lib/api/email.ts b/src/lib/api/email.ts
@@ -6,7 +6,7 @@ export const postEmail = async (email: string) => {
 
 export const putEmail = async (authCode: string) => {
   const response = await client.put(`/email`, { authCode });
-  return response;
+  return response.data;
 };
 
 export const postEmailDomain = async (body: { domain: string; name: string }) => {

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
@@ -2,7 +2,6 @@ import axios from 'axios';
 import { SERVER_URL } from '@/lib/constants';
 import Cookies from 'js-cookie';
 
-console.log(Cookies.get('AccessToken') || '');
 const apiClient = axios.create({
   baseURL: SERVER_URL,
   withCredentials: false,

diff --git a/src/lib/api/user.ts b/src/lib/api/user.ts
@@ -18,7 +18,7 @@ export const getKakaoId = async () => {
 };
 
 export const postLogout = async () => {
-  const res = await apiClient.post('/logout');
+  const res = await apiClient.get('/logout');
   return res.data;
 };
 

diff --git a/src/pages/AgreementSurvey.tsx b/src/pages/AgreementSurvey.tsx
@@ -57,7 +57,7 @@ const AgreementSurvey = () => {
         : setDatingData({ ...initDatingState, agreement: isAllchecked });
     }
 
-    goKakaoLogin('ADDITIONAL');
+    goKakaoLogin(matchMeeting ? 'meeting' : 'dating');
   };
 
   return (

diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Button, Modal } from '@/components/base';
@@ -8,28 +8,40 @@ import { EmailForm, AuthCodeForm } from '@/components/authMail';
 import { Link, useNavigate } from 'react-router-dom';
 import { useToggle } from '@/hooks/common';
 import { postEmail, putEmail } from '@/lib/api/email';
+import Cookies from 'js-cookie';
 
 const AuthMail = () => {
   const [cantMoveNext, setCantMoveNext] = useState(true);
   const [email, setEmail] = useState('');
   const [isErrorModal, onToggleErrorModal] = useToggle();
+  const [modalMessage, setModalMessage] = useState('');
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const authenticated = Cookies.get('authenticated') === 'true';
+    authenticated && navigate('/type-of-meeting');
+  }, []);
+
   const onSubmitAuthCode = async (email: string) => {
     try {
       await postEmail(email);
       setEmail(email);
+      onToggleErrorModal();
+      setModalMessage('이메일로 인증번호를 전송하였습니다. 인증번호를 입력해 주세요.');
     } catch (e) {
       onToggleErrorModal();
+      setModalMessage('에러가 발생했습니다😭 다시한번 시도해 주세요!');
     }
   };
 
   const onCheckAuthCode = async (authCode: string) => {
     try {
-      await putEmail(authCode);
+      const result = await putEmail(authCode);
+      Cookies.set('authenticated', result);
       navigate('/type-of-meeting');
     } catch (e) {
       onToggleErrorModal();
+      setModalMessage('에러가 발생했습니다😭 다시한번 시도해 주세요!');
     }
   };
 
@@ -57,7 +69,7 @@ const AuthMail = () => {
           height={140}
           bottonName="확인"
           title="알림"
-          text="에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          text={modalMessage}
           onToggleModal={onToggleErrorModal}
           onClick={() => {
             void 0;
@@ -110,4 +122,5 @@ const StyledLink = styled(Link)`
   font-weight: 700;
   text-decoration: underline;
 `;
+
 export default AuthMail;
diff --git a/src/pages/MatchingPage.tsx b/src/pages/MatchingPage.tsx
@@ -1,18 +1,13 @@
 import CompleteBox from '@/components/domain/matching/CompleteBox';
 import MatchingStateTitle from '@/components/domain/matching/MatchingStateTitle';
-import MatchingTemplete from '@/components/domain/matching/MatchingTemplete';
-import SuccessBox from '@/components/domain/matching/SuccessBox';
-import WaitingBox from '@/components/domain/matching/WaitingBox';
+import { MatchingTemplete, SuccessBox, WaitingBox, MeetingEndBox, DatingEndBox, FailBox, CancelBox } from '@/components/domain/matching';
 import { Contents } from '@/lib/styles/styledComponents';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { MeetingPartnerSurvey } from '@/types/meeting';
 import { DatingPartnerSurvey } from '@/types/dating';
-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' | 'femaleSuccess' | 'pay' | 'end' | 'fail';
+export type Status = 'none' | 'waiting' | 'success' | 'femaleSuccess' | 'pay' | 'end' | 'fail' | 'cancel';
 
 const MatchingPage = () => {
   const [status, setStatus] = useState<Status>('none');
@@ -36,6 +31,7 @@ const MatchingPage = () => {
                 pay: <CompleteBox date={matchingResult.payDeadline} />,
                 end: <MeetingEndBox {...matchingResult} />,
                 fail: <FailBox />,
+                cancel: <CancelBox />,
               }[status]
             }
           </MatchingContents>
@@ -51,6 +47,7 @@ const MatchingPage = () => {
                 pay: <CompleteBox date={matchingResult.payDeadline} />,
                 end: <DatingEndBox {...matchingResult} />,
                 fail: <FailBox />,
+                cancel: <CancelBox />,
               }[status]
             }
           </MatchingContents>