Merge pull request #255 from YAPP-Github/dev

Release 1.2.2
YAPP-Github · Aug 2, 2022 · 8a10bc8 · 8a10bc8
2 parents a5fdd18 + 21c9e51
commit 8a10bc8
Show file tree

Hide file tree

Showing 19 changed files with 144 additions and 89 deletions.
diff --git a/src/components/authMail/EmailForm.tsx b/src/components/authMail/EmailForm.tsx
@@ -33,7 +33,7 @@ const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => {
         newErrors.email = '이메일을 입력해주세요';
         return newErrors;
       }
-      if (email && !checkForm({ value: email, type: 'email' })) newErrors.email = '올바른 이메일 형식이 아닙니다';
+      if (email && !checkForm({ value: email, type: 'email' })) newErrors.email = '올바른 이메일이 아닙니다.';
       return newErrors;
     },
   });

diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx
@@ -8,6 +8,7 @@ import { useLoginState } from '@/atoms/userState';
 import { goKakaoLogin } from '@/utils/goKakaoLogin';
 import Cookies from 'js-cookie';
 import { HeaderWrapper } from '@/components/domain/survey/SurveyTemplate';
+import Path from '@/router/Path';
 
 function LandingContainer() {
   const navigate = useNavigate();
@@ -24,7 +25,7 @@ function LandingContainer() {
   };
 
   const checkAuthRedirect = ({ startSurvey = true }: { startSurvey?: boolean }) => {
-    isAuth ? (startSurvey ? navigate('/type-of-meeting') : navigate('/matching/meeting')) : navigate('/auth-mail');
+    isAuth ? (startSurvey ? navigate(Path.TypeOfMeeting) : navigate(Path.MatchingMeeting)) : navigate('/auth-mail');
   };
 
   return (
@@ -55,7 +56,7 @@ function LandingContainer() {
             variant={'default'}
             onClick={() => {
               const authenticated = Cookies.get('authenticated') === 'true';
-              authenticated ? navigate('/type-of-meeting') : navigate('/auth-mail');
+              authenticated ? navigate(Path.TypeOfMeeting) : navigate(Path.AuthMail);
             }}
           >
             시작하기

diff --git a/src/components/domain/landing/LandingFooter.tsx b/src/components/domain/landing/LandingFooter.tsx
@@ -32,7 +32,7 @@ function LandingFooter() {
           <IconStyled
             src={KakaoIcon}
             onClick={() => {
-              window.open('http://pf.kakao.com/_XUkxkb', '_blank');
+              window.open('http://pf.kakao.com/_XyXIxj/chat', '_blank');
             }}
           />
           <IconStyled

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
@@ -9,41 +9,41 @@ import { Status } from '@/pages/MatchingPage';
 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';
+import { MatchingResultResponse } from '@/types/meeting';
 
 interface MatchingTemplateProps {
-  meeting: (matchingResult: MeetingPartnerSurvey) => ReactNode;
-  dating: (matchingResult: DatingPartnerSurvey) => ReactNode;
+  meeting: (matchingResult: MatchingResultResponse) => ReactNode;
+  dating: (matchingResult: MatchingResultResponse) => ReactNode;
   title: ReactNode;
   btnName: string;
   handleStatus: (status: Status) => void;
 }
 
-const initMeetingSurvey: MeetingPartnerSurvey = {
-  areas: [],
-  averageAge: 0,
-  averageHeight: 0,
-  departments: [],
-  kakaoId: '',
-  mindset: '',
-  play: '',
-  universities: '',
-  payDeadline: '',
+const initMeetingSurvey: MatchingResultResponse = {
+  code: 7000,
+  message: '',
+  partnerSurvey: { areas: [], averageAge: 0, averageHeight: 0, departments: [], kakaoId: '', mindset: '', play: '', universities: '' },
+  payDeadLine: '',
+  payName: '',
 };
 
-const initDatingSurvey: DatingPartnerSurvey = {
-  age: 0,
-  areas: [],
-  body: '',
-  characteristic: '',
-  dateCount: '',
-  department: '',
-  height: 0,
-  isSmoke: false,
-  kakaoId: '',
-  university: '',
-  payDeadline: '',
+const initDatingSurvey: MatchingResultResponse = {
+  code: 7000,
+  message: '',
+  partnerSurvey: {
+    age: 0,
+    areas: [],
+    body: '',
+    characteristic: '',
+    dateCount: '',
+    department: '',
+    height: 0,
+    isSmoke: false,
+    kakaoId: '',
+    university: '',
+  },
+  payDeadLine: '',
+  payName: '',
 };
 
 const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: MatchingTemplateProps) => {
@@ -52,8 +52,8 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
   const navigate = useNavigate();
   const [isErrorModal, onToggleErrorModal] = useToggle();
   const [errorMessage, setErrorMessage] = useState('');
-  const [meetingMatchingResult, setMeetingMatchingResult] = useState<MeetingPartnerSurvey>(initMeetingSurvey);
-  const [datingMatchingResult, setDatingMatchingResult] = useState<DatingPartnerSurvey>(initDatingSurvey);
+  const [meetingMatchingResult, setMeetingMatchingResult] = useState<MatchingResultResponse>(initMeetingSurvey);
+  const [datingMatchingResult, setDatingMatchingResult] = useState<MatchingResultResponse>(initDatingSurvey);
 
   useEffect(() => {
     location.pathname.includes('meeting') ? setType('meeting') : setType('dating');
@@ -72,7 +72,6 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
   const fetchMatchingResult = async () => {
     try {
       const response = type === 'meeting' ? await getMeetingMatching() : await getDatingMatching();
-
       const { code } = response;
       switch (code) {
         case 7000:
@@ -88,7 +87,7 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
           handleStatus('femaleSuccess');
           break;
         case 7004:
-          saveMatchingResult(response.partnerSurvey);
+          saveMatchingResult(response);
           handleStatus('end');
           break;
         case 7005:
@@ -98,12 +97,12 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
           handleStatus('cancel');
       }
     } catch (e) {
-      setErrorMessage(() => e.response.data.message);
+      setErrorMessage(() => (e as any).response.data.message);
       onToggleErrorModal();
     }
   };
 
-  const saveMatchingResult = (partnerSurvey: MeetingPartnerSurvey | DatingPartnerSurvey) => {
+  const saveMatchingResult = (partnerSurvey: MatchingResultResponse) => {
     'age' in partnerSurvey ? setDatingMatchingResult(partnerSurvey) : setMeetingMatchingResult(partnerSurvey);
   };
 
@@ -140,7 +139,7 @@ const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: Mat
             {
               {
                 none: <NoneButton />,
-                success: <SuccessButton />,
+                success: <SuccessButton payName={type === 'meeting' ? meetingMatchingResult.payName : datingMatchingResult.payName} />,
                 femaleSuccess: <FemaleSuccessButton />,
                 pay: <CompleteButton />,
                 end: <EndButton handleStatus={handleStatus} />,

diff --git a/src/components/domain/matching/buttons/SuccessButton.tsx b/src/components/domain/matching/buttons/SuccessButton.tsx
@@ -5,7 +5,11 @@ import styled from 'styled-components';
 import { Modal } from '@/components/base';
 import { useToggle } from '@/hooks/common';
 
-function SuccessButton() {
+interface SuccessButtonProps {
+  payName: string;
+}
+
+function SuccessButton({ payName }: SuccessButtonProps) {
   const [isModal, onToggleModal] = useToggle();
   const [isErrorModal, onToggleErrorModal] = useToggle();
 
@@ -23,8 +27,7 @@ function SuccessButton() {
         <img src={CopyWhiteIcon} alt="복사" width={17} height={17} /> <Text>농협 301-0312-2534-81</Text>
       </Button>
       <Warning>
-        받는 분 통장 표시는 <span>카톡 아이디 첫 7자리</span>로 해주세요! <br />
-        (ex: minsu30)
+        ⚠️ 받는 분 통장 표시를 ‘<span>{payName}</span>’ 로 바꿔주셔야 확인이 가능합니다 ⚠️
       </Warning>
       {isModal && (
         <Modal

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, 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, postWithdraw } from '@/lib/api/user';
-import { useDatingSessionState, useToggle } from '@/hooks/common';
+import { 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';
+import useMyInfoLoad from '@/hooks/user/useMyInfoLoad';
 
 interface MenuBlockProps {
   isMenu: boolean;
@@ -18,16 +18,11 @@ interface MenuBlockProps {
 
 function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
   const [errorMessage, setErrorMessage] = useState('에러가 발생했습니다😭 다시한번 시도해 주세요!');
+  const { info } = useMyInfoLoad();
   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 {
@@ -70,8 +65,8 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
           <UserInfo>
             <SiteLogo src={Logo} alt="사이트 로고" />
             <UserBox>
-              <div>{initDatingState.kakaoId}</div>
-              <div className="univ">{myUnivLabel}</div>
+              <div>{info?.email}</div>
+              <div className="univ">{info?.university}</div>
             </UserBox>
           </UserInfo>
           <LogoutButton onClick={handleLogout}>

diff --git a/src/hooks/user/useMyInfoLoad.ts b/src/hooks/user/useMyInfoLoad.ts
@@ -0,0 +1,20 @@
+import { getMyInfo } from '@/lib/api/user';
+import { useEffect, useState } from 'react';
+
+const useMyInfoLoad = () => {
+  const [info, setInfo] = useState<{ email: 'string'; university: string }>();
+  useEffect(() => {
+    const GetInfo = async () => {
+      try {
+        const response = await getMyInfo();
+        setInfo(response);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    GetInfo();
+  }, []);
+  return { info };
+};
+
+export default useMyInfoLoad;
diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts
@@ -1,9 +1,10 @@
 import apiClient from './index';
-import { Dating, DatingMatchingResultResponse } from '@/types/dating';
+import { Dating } from '@/types/dating';
 import { AxiosResponse } from 'axios';
+import { MatchingResultResponse } from '@/types/meeting';
 
 export const getDatingMatching = async () => {
-  const res = await apiClient.get<DatingMatchingResultResponse>('/dating/matching');
+  const res = await apiClient.get<MatchingResultResponse>('/dating/matching');
   return res.data;
 };
 

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
@@ -20,4 +20,23 @@ apiClient.interceptors.request.use(
     return Promise.reject(error);
   },
 );
+
+apiClient.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const { response } = error;
+    console.log(response.data.code);
+    switch (response.data.code) {
+      case 'INVALID_JWT':
+        alert('로그인 시간이 만료되었습니다. 다시 로그인 해주세요');
+        Cookies.remove('AccessToken');
+        window.location.href = `${(top as Window).location.href}/`;
+        break;
+      default:
+        break;
+    }
+  },
+);
 export default apiClient;
diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts
@@ -1,5 +1,5 @@
 import apiClient from './index';
-import { Meeting, MeetingMatchingResultResponse } from '@/types/meeting';
+import { Meeting, MatchingResultResponse } from '@/types/meeting';
 import { AxiosResponse } from 'axios';
 
 export const postMeetingSurvey = async (payload: Meeting) => {
@@ -28,6 +28,6 @@ export const postMeetingMatching = async () => {
 };
 
 export const getMeetingMatching = async () => {
-  const res = await apiClient.get<MeetingMatchingResultResponse>('/meeting/matching');
+  const res = await apiClient.get<MatchingResultResponse>('/meeting/matching');
   return res.data;
 };
diff --git a/src/lib/api/user.ts b/src/lib/api/user.ts
@@ -26,3 +26,8 @@ export const postWithdraw = async () => {
   const res = await apiClient.delete('/withdraw');
   return res.data;
 };
+
+export const getMyInfo = async () => {
+  const res = await apiClient.get('/myInfo');
+  return res.data;
+};
diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx
@@ -9,9 +9,9 @@ import { useNavigate } from 'react-router-dom';
 import { useToggle } from '@/hooks/common';
 import { postEmail, putEmail } from '@/lib/api/email';
 import Cookies from 'js-cookie';
+import Path from '@/router/Path';
 
 const AuthMail = () => {
-  const [cantMoveNext] = useState(true);
   const [email, setEmail] = useState('');
   const [isModal, onToggleModal] = useToggle();
   const [isErrorModal, onToggleErrorModal] = useToggle();
@@ -21,7 +21,7 @@ const AuthMail = () => {
 
   useEffect(() => {
     const authenticated = Cookies.get('authenticated') === 'true';
-    authenticated && navigate('/type-of-meeting');
+    authenticated && navigate(Path.LandingPage);
   }, []);
 
   const onSubmitAuthCode = async (email: string) => {
@@ -56,9 +56,13 @@ const AuthMail = () => {
     }
   };
 
+  const handlePrevNextClick = () => {
+    navigate('/');
+  };
+
   return (
     <>
-      <SurveyTemplate disableNext={cantMoveNext} hasProgressBar={false}>
+      <SurveyTemplate disableNext={!isNextModal} hasProgressBar={false} handlePrevClick={handlePrevNextClick} handleNextClick={handlePrevNextClick}>
         <Title>
           <strong>
             신원 확인을 위해 <br />

diff --git a/src/pages/IsAbroadSurvey.tsx b/src/pages/IsAbroadSurvey.tsx
@@ -59,8 +59,10 @@ const IsAbroadSurvey = () => {
       handleNextClick={handleNextClick}
     >
       <Title>
-        지금 한국이신가요? <br />
-        해외이신가요?
+        <strong>
+          지금 한국이신가요? <br />
+          해외이신가요?
+        </strong>
       </Title>
       <BtnWrapper>
         <ChooseTwoBox height={100} items={COUNTRY_ITEMS} selectedOption={matchMeeting ? isAbroad : isAbroadDating} onChangeOption={onChangeOption} />
@@ -71,7 +73,7 @@ const IsAbroadSurvey = () => {
 
 const BtnWrapper = styled(FormWrapper)`
   display: flex;
-  margin-top: 0px;
+  margin-top: 71px;
 `;
 
 export default IsAbroadSurvey;