Skip to content

Commit 11f8908

Browse files
hyo-4hyo-4
committed
♻️refactor(#163):kakao를 auth로 변경
1 parent fbf49ca commit 11f8908

4 files changed

Lines changed: 73 additions & 102 deletions

File tree

src/app/login/kakao/page.tsx renamed to src/app/login/auth/page.tsx

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
1-
"use client";
1+
'use client';
22

3-
import { login } from "@/api/login/user";
4-
import Loader from "@/components/common/Loader";
5-
import { signupState } from "@/recoil/signupStore";
6-
import {
7-
clearLetterUrl,
8-
getLetterUrl,
9-
setOnboarding,
10-
setTokens,
11-
} from "@/utils/storage";
12-
import axios from "axios";
13-
import { useRouter } from "next/navigation";
14-
import { useEffect, useState } from "react";
15-
import { useRecoilState } from "recoil";
16-
import styled from "styled-components";
3+
import { login } from '@/api/login/user';
4+
import Loader from '@/components/common/Loader';
5+
import { signupState } from '@/recoil/signupStore';
6+
import { clearLetterUrl, setOnboarding, setTokens } from '@/utils/storage';
7+
import axios from 'axios';
8+
import { useRouter } from 'next/navigation';
9+
import { useEffect, useState } from 'react';
10+
import { useRecoilState } from 'recoil';
11+
import styled from 'styled-components';
1712

1813
const Auth = () => {
1914
const [registerToken, setRegisterToken] = useRecoilState(signupState);
2015
const router = useRouter();
2116
const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
22-
const [absoluteUrl, setAbsoluteUrl] = useState("");
23-
const [storeUrl, setstoreUrl] = useState("");
17+
const [absoluteUrl, setAbsoluteUrl] = useState('');
18+
const [storeUrl, setstoreUrl] = useState('');
19+
const [type, setType] = useState('');
2420

2521
useEffect(() => {
26-
if (typeof window !== "undefined") {
27-
const url = `${window.location.protocol}//${window.location.host}/login/kakao`;
28-
const letterId = localStorage.getItem("letter_url");
22+
if (typeof window !== 'undefined') {
23+
const params = new URL(window.location.href).searchParams;
24+
const typeParam = params.get('type');
25+
setType(typeParam);
26+
const url = `${window.location.protocol}//${window.location.host}/login/auth?type=${typeParam}`;
27+
const letterId = localStorage.getItem('letter_url');
2928
setAbsoluteUrl(url);
3029
if (letterId) setstoreUrl(letterId);
3130
}
@@ -37,47 +36,62 @@ const Auth = () => {
3736
}
3837
const getToken = async () => {
3938
const AUTHORIZATION_CODE = new URL(window.location.href).searchParams.get(
40-
"code"
39+
'code'
4140
);
41+
const TYPE = new URL(window.location.href).searchParams.get('type');
4242

43-
if (!AUTHORIZATION_CODE) {
44-
console.error("Authorization Code is missing");
43+
let tokenUrl = '';
44+
let provider: 'KAKAO' | 'GOOGLE' | 'NAVER';
45+
46+
if (!AUTHORIZATION_CODE || !TYPE) {
47+
console.error('Authorization Code or Type is missing');
4548
return;
4649
}
4750

51+
switch (TYPE) {
52+
case 'kakao':
53+
tokenUrl = `https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${absoluteUrl}&code=${AUTHORIZATION_CODE}`;
54+
provider = 'KAKAO';
55+
break;
56+
case 'google':
57+
break;
58+
case 'naver':
59+
break;
60+
default:
61+
console.error('Unknown OAuth type:', TYPE);
62+
return;
63+
}
64+
4865
try {
49-
const response = await axios.post(
50-
`https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${absoluteUrl}&code=${AUTHORIZATION_CODE}`,
51-
{
52-
headers: { "Content-Type": "application/json" },
53-
}
54-
);
66+
const response = await axios.post(tokenUrl, {
67+
headers: { 'Content-Type': 'application/json' }
68+
});
69+
70+
const oauthAccessToken = response.data.access_token;
5571

56-
const kakao_accessToken = response.data.access_token;
57-
console.log(kakao_accessToken);
58-
if (kakao_accessToken) {
59-
login("KAKAO", kakao_accessToken)
72+
if (oauthAccessToken) {
73+
login(provider, oauthAccessToken)
6074
.then((res) => {
61-
console.log("accessToken", res.data.accessToken);
75+
console.log('accessToken', res.data.accessToken);
6276
setTokens(res.data.accessToken, res.data.refreshToken);
6377
/* 온보딩 여부 저장 */
6478
setOnboarding(res.data.isProcessedOnboarding);
6579
if (storeUrl) {
6680
router.push(`/verify/letter?url=${storeUrl}`);
6781
clearLetterUrl();
6882
} else {
69-
router.push("/planet");
83+
router.push('/planet');
7084
}
7185
})
7286
.catch((error) => {
7387
if (error.response && error.response.status === 401) {
74-
console.log("registerToken", error.response.data.registerToken);
88+
console.log('registerToken', error.response.data.registerToken);
7589
setRegisterToken(error.response.data.registerToken);
7690
if (storeUrl) {
7791
router.push(`/signup/step1?url=${storeUrl}`);
7892
clearLetterUrl();
7993
} else {
80-
router.push("/signup/step1");
94+
router.push('/signup/step1');
8195
}
8296
}
8397
});

‎src/app/login/google/page.tsx‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎src/components/signup/SocialGoogle.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React, { Suspense, useEffect, useState } from 'react';
22
import Image from 'next/image';
33
import styled from 'styled-components';
4-
import { useRouter, useSearchParams } from 'next/navigation';
5-
import { useRecoilState } from 'recoil';
6-
import { accessState } from '@/recoil/accessStore';
7-
import { getAccessToken, setLetterUrl } from '@/utils/storage';
4+
import { useSearchParams } from 'next/navigation';
5+
import { setLetterUrl } from '@/utils/storage';
86
import Loader, { LoaderContainer } from '../common/Loader';
97

108
const SocialGoogle = () => {

‎src/components/signup/SocialKakao.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
import React, { Suspense, useEffect, useState } from 'react';
22
import Image from 'next/image';
33
import styled from 'styled-components';
4-
import { useRouter, useSearchParams } from 'next/navigation';
5-
import { useRecoilState } from 'recoil';
6-
import { accessState } from '@/recoil/accessStore';
7-
import { getAccessToken, setLetterUrl } from '@/utils/storage';
4+
import { useSearchParams } from 'next/navigation';
5+
import { setLetterUrl } from '@/utils/storage';
86
import Loader, { LoaderContainer } from '../common/Loader';
97

108
const SocialKakao = () => {
11-
const router = useRouter();
129
const searchParams = useSearchParams();
1310
const url = searchParams.get('url');
1411
const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
15-
const accessToken = getAccessToken();
16-
const [absoluteUrl, setabsoluteUrl] = useState('');
17-
const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${absoluteUrl}&response_type=code&url=${url}`;
18-
const [localAccessToken, setAccessToken] = useRecoilState(accessState);
12+
const [redirectUrl, setRedirectUrl] = useState('');
13+
const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${redirectUrl}&response_type=code&url=${url}`;
1914

2015
useEffect(() => {
2116
if (typeof window !== 'undefined') {
22-
setabsoluteUrl(
23-
window.location.protocol + '//' + window.location.host + '/login/kakao'
17+
setRedirectUrl(
18+
window.location.protocol +
19+
'//' +
20+
window.location.host +
21+
'/login/auth?type=kakao'
2422
);
2523
}
2624
}, []);
@@ -39,6 +37,17 @@ const SocialKakao = () => {
3937
if (url) {
4038
setLetterUrl(url);
4139
}
40+
// redirectUri가 준비된 뒤에 인가 URL 생성
41+
const params = new URLSearchParams({
42+
client_id: REST_API_KEY,
43+
redirect_uri: redirectUrl,
44+
response_type: 'code'
45+
});
46+
if (url) {
47+
params.set('url', url);
48+
}
49+
50+
window.location.href = `https://kauth.kakao.com/oauth/authorize?${params.toString()}`;
4251
window.location.href = KAKAO_URL;
4352
};
4453

0 commit comments

Comments
 (0)