Merge pull request #204 from YAPP-Github/feature/#150

카카오 추가인증 - 에러 수정, 응답 알럿 추가
YAPP-Github · Jul 30, 2022 · 260b629 · 260b629
2 parents d21d820 + 4cbe151
commit 260b629
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 24 deletions.
diff --git a/src/lib/api/oauth.ts b/src/lib/api/oauth.ts
@@ -1,6 +1,6 @@
 import apiClient from '@/lib/api/index';
 
 export const getOauthKakaoAge = async (params: { code: string; type: 'dating' | 'meeting' }) => {
-  const res = await apiClient.get(`/oauth/kakao/age&code=${params.code}?type=${params.type}`);
+  const res = await apiClient.get(`/oauth/kakao/age?code=${params.code}&type=${params.type}`);
   return res.data;
 };
diff --git a/src/pages/AgreementSurvey.tsx b/src/pages/AgreementSurvey.tsx
@@ -3,7 +3,7 @@ import { SurveyTemplate } from '@/components/domain/survey';
 import useAgreementCheck from '@/hooks/agreement/useAgreementCheck';
 import { palette } from '@/lib/styles/palette';
 import { Title } from '@/lib/styles/styledComponents';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
@@ -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 { Modal } from '@/components/base';
 
 const AgreementSurvey = () => {
   const location = useLocation();
@@ -20,17 +21,30 @@ const AgreementSurvey = () => {
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const { initDatingState, setDatingData } = useDatingSessionState();
   const { checkedList, checkedChoiceList, onChangeCheck, onChangeChoiceCheck, onCheckAll, isEssentialChecked, isAllchecked } = useAgreementCheck();
+  const [modal, setModal] = useState({ open: false, title: '알림', message: '에러가 발생했습니다😭 다시한번 시도해 주세요!' });
 
   useEffect(() => {
     const searchParams = new URLSearchParams(location.search);
     const code = searchParams.get('code') ?? '';
 
+    if (!code) return;
+
     getOauthKakaoAge({ code, type: matchMeeting ? 'meeting' : 'dating' })
       .then((response) => {
         console.log(response);
-        meetingNavigate(Path.KakaoIdSurvey);
+        if (response) {
+          meetingNavigate(Path.KakaoIdSurvey);
+          return;
+        }
+        setModal({
+          open: true,
+          title: '성인 인증 필요',
+          message:
+            "설정 > 개인/ 보안> 카카오계정> 내 정보 관리> '생일을 알려주세요' 선택> '프로필 정보 추가 수집 동의' 선택> 생일 설정> 확인 후 연령대 정보 제공 동의를 눌러주세요.",
+        });
       })
       .catch((e) => {
+        setModal((prev) => ({ ...prev, open: true }));
         console.error(e);
       });
   }, [location]);
@@ -46,27 +60,42 @@ const AgreementSurvey = () => {
   };
 
   return (
-    <SurveyTemplate
-      disableNext={!isEssentialChecked}
-      hasProgressBar={false}
-      handlePrevClick={() => meetingNavigate(Path.ChannelSurvey)}
-      handleNextClick={handleNextClick}
-    >
-      <Title>
-        약관동의를 <br />
-        진행해주세요.
-      </Title>
-      <FormWrapper>
-        <CheckBox text="전체동의" impotrant checked={isAllchecked} onChange={onCheckAll} />
-        <DivisionLineStyled />
-        {checkedList.map(({ checked, name, text }) => (
-          <CheckBox key={text} text={text} name={name} checked={checked} onChange={onChangeCheck} />
-        ))}
-        {checkedChoiceList.map(({ checked, name, text }) => (
-          <CheckBox key={text} text={text} name={name} checked={checked} onChange={onChangeChoiceCheck} />
-        ))}
-      </FormWrapper>
-    </SurveyTemplate>
+    <>
+      <SurveyTemplate
+        disableNext={!isEssentialChecked}
+        hasProgressBar={false}
+        handlePrevClick={() => meetingNavigate(Path.ChannelSurvey)}
+        handleNextClick={handleNextClick}
+      >
+        <Title>
+          약관동의를 <br />
+          진행해주세요.
+        </Title>
+        <FormWrapper>
+          <CheckBox text="전체동의" impotrant checked={isAllchecked} onChange={onCheckAll} />
+          <DivisionLineStyled />
+          {checkedList.map(({ checked, name, text }) => (
+            <CheckBox key={text} text={text} name={name} checked={checked} onChange={onChangeCheck} />
+          ))}
+          {checkedChoiceList.map(({ checked, name, text }) => (
+            <CheckBox key={text} text={text} name={name} checked={checked} onChange={onChangeChoiceCheck} />
+          ))}
+        </FormWrapper>
+      </SurveyTemplate>
+      {modal.open && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title={modal.title}
+          text={modal.message}
+          onToggleModal={() => setModal((prev) => ({ ...prev, open: false }))}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+    </>
   );
 };