diff --git a/.env.development b/.env.development index a1c87cf..e88ffc9 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779 -VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login +VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code VITE_SERVER_URL=https://lonessum.com/api \ No newline at end of file diff --git a/.env.production b/.env.production index 658cb1b..9207a9f 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779 -VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login +VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code VITE_SERVER_URL=https://lonessum.com/api diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx index f4debaf..f0b60f9 100644 --- a/src/components/domain/landing/LandingContainer.tsx +++ b/src/components/domain/landing/LandingContainer.tsx @@ -5,16 +5,14 @@ import { palette } from '@/lib/styles/palette'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; import { useLoginState } from '@/atoms/userState'; +import { goKakaoLogin } from '@/utils/goKakaoLogin'; function LandingContainer() { const navigate = useNavigate(); const { isLogin } = useLoginState(); const handleKakaoLoginClick = () => { - const clientId = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY; - const redirectUri = encodeURI(`${window.location.origin}/oauth/kakao`); - const loginUrl = import.meta.env.VITE_KAKAO_OPEN_URL.replace('{clientId}', clientId).replace('{redirectUri}', redirectUri); - window.location.href = loginUrl; + goKakaoLogin('LOGIN'); }; return ( diff --git a/src/lib/api/oauth.ts b/src/lib/api/oauth.ts new file mode 100644 index 0000000..9fee00b --- /dev/null +++ b/src/lib/api/oauth.ts @@ -0,0 +1,6 @@ +import apiClient from '@/lib/api/index'; + +export const getOauthKakaoAge = async (params: { code: string }) => { + const res = await apiClient.get(`/oauth/kakao/age&code=${params.code}`); + return res.data; +}; diff --git a/src/pages/AgreementSurvey.tsx b/src/pages/AgreementSurvey.tsx index 006f3ef..7066a2a 100644 --- a/src/pages/AgreementSurvey.tsx +++ b/src/pages/AgreementSurvey.tsx @@ -3,21 +3,38 @@ 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 from 'react'; +import React, { useEffect } from 'react'; import styled from 'styled-components'; import { FormWrapper } from './AuthMail'; import Path from '@/router/Path'; -import { useMatch } from 'react-router-dom'; +import { useLocation, useMatch } from 'react-router-dom'; import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate'; import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common'; +import { goKakaoLogin } from '@/utils/goKakaoLogin'; +import { getOauthKakaoAge } from '@/lib/api/oauth'; const AgreementSurvey = () => { + const location = useLocation(); const matchMeeting = useMatch('/meeting/*'); const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate(); const { initMeetingState, setMeetingData } = useMeetingSessionState(); const { initDatingState, setDatingData } = useDatingSessionState(); const { checkedList, checkedChoiceList, onChangeCheck, onChangeChoiceCheck, onCheckAll, isEssentialChecked, isAllchecked } = useAgreementCheck(); + useEffect(() => { + const searchParams = new URLSearchParams(location.search); + const code = searchParams.get('code') ?? ''; + + getOauthKakaoAge({ code }) + .then((response) => { + console.log(response); + meetingNavigate(Path.KakaoIdSurvey); + }) + .catch((e) => { + console.error(e); + }); + }, [location]); + const handleNextClick = () => { if (initMeetingState) { matchMeeting @@ -25,7 +42,7 @@ const AgreementSurvey = () => { : setDatingData({ ...initDatingState, agreement: isAllchecked }); } - meetingNavigate(Path.KakaoIdSurvey); + goKakaoLogin('ADDITIONAL'); }; return ( diff --git a/src/utils/goKakaoLogin.ts b/src/utils/goKakaoLogin.ts new file mode 100644 index 0000000..8576ef1 --- /dev/null +++ b/src/utils/goKakaoLogin.ts @@ -0,0 +1,8 @@ +export const goKakaoLogin = (type: 'LOGIN' | 'ADDITIONAL') => { + const clientId = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY; + const path = type === 'LOGIN' ? '/oauth/kakao' : '/dating/agreement'; + const query = type === 'LOGIN' ? '&prompt=login' : '&scope=age_range'; + const redirectUri = encodeURI(`${window.location.origin}${path}`); + + window.location.href = import.meta.env.VITE_KAKAO_OPEN_URL.replace('{clientId}', clientId).replace('{redirectUri}', redirectUri) + query; +};