From 12ba0274395946e38c1e0f2534af6090e097b8fd Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Sat, 18 May 2024 11:34:19 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=86=8C=EC=85=9C=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20post=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 3 +- src/apis/api.ts | 5 ++- src/apis/kakao.ts | 6 ++-- src/components/KakaoButton.tsx | 2 +- src/hooks/queries/usePostKakao.tsx | 37 +++++++++++++++++++++++ src/hooks/{queries => }/useKakaoLogin.tsx | 2 +- src/pages/KakaoLoginPage.tsx | 33 +++++++++++++++++--- src/router/Router.tsx | 28 ++++++++--------- src/types/common.ts | 5 +++ src/types/kakao.ts | 21 +++++++------ 10 files changed, 107 insertions(+), 35 deletions(-) create mode 100644 src/hooks/queries/usePostKakao.tsx rename src/hooks/{queries => }/useKakaoLogin.tsx (72%) create mode 100644 src/types/common.ts diff --git a/.prettierrc b/.prettierrc index b0f5884..deca069 100644 --- a/.prettierrc +++ b/.prettierrc @@ -7,5 +7,6 @@ "arrowParens": "always", "bracketSpacing": true, "bracketSameLine": false, - "endOfLine": "auto" + "endOfLine": "auto", + "singleQuote": true } diff --git a/src/apis/api.ts b/src/apis/api.ts index 9c52c1d..7736d03 100644 --- a/src/apis/api.ts +++ b/src/apis/api.ts @@ -1,5 +1,8 @@ -import axios, { AxiosInstance } from "axios"; +import axios, { AxiosInstance } from 'axios'; export const api: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_URL, + headers: { + 'Content-Type': 'application/json', + }, }); diff --git a/src/apis/kakao.ts b/src/apis/kakao.ts index 0659c55..9e083d7 100644 --- a/src/apis/kakao.ts +++ b/src/apis/kakao.ts @@ -1,7 +1,7 @@ -import { KakaoLoginRequestType } from "../types/kakao"; -import { api } from "./api"; +import { KakaoLoginRequestType } from '../types/kakao'; +import { api } from './api'; -const BASE_PATH = "/auth/login"; +const BASE_PATH = '/auth/login'; const kakao = { postKakaoLogin: ({ kakaoToken, fcmToken }: KakaoLoginRequestType) => diff --git a/src/components/KakaoButton.tsx b/src/components/KakaoButton.tsx index ace1468..5f41b32 100644 --- a/src/components/KakaoButton.tsx +++ b/src/components/KakaoButton.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import { IcKakao } from "../assets/svg"; -import useKakaoLogin from "../hooks/queries/useKakaoLogin"; +import useKakaoLogin from "../hooks/useKakaoLogin"; const KakaoButton = () => { return ( diff --git a/src/hooks/queries/usePostKakao.tsx b/src/hooks/queries/usePostKakao.tsx new file mode 100644 index 0000000..da93629 --- /dev/null +++ b/src/hooks/queries/usePostKakao.tsx @@ -0,0 +1,37 @@ +import { useCallback, useState } from "react"; +import kakao from "../../apis/kakao"; +import { AxiosError } from "axios"; +import { KakaoLoginInfoType, KakaoLoginResponseType } from "../../types/kakao"; + +const usePostKakao = () => { + const [kakaoResponse, setKakaoResponse] = useState(null); + const [kakaoError, setKakaoError] = useState(null); + const [kakaoLoading, setKakaoLoading] = useState(false); + + const postKakao = useCallback(async (accessToken: string) => { + if (!accessToken) return; + setKakaoLoading(true); + setKakaoError(null); + try { + const res = await kakao.postKakaoLogin({ kakaoToken: accessToken, fcmToken: "0" }); + const data: KakaoLoginResponseType = res.data.data; + setKakaoResponse({ + userId: data.data.userId, + accessToken: data.data.accessToken, + isAlreadyUser: data.data.isAlreadyUser, + refreshToken: data.data.refreshToken, + nickname: data.data.nickname, + }); + console.log("응답이 왔나요?", kakaoResponse); + localStorage.setItem("accessToken", data.data.accessToken); + } catch (err) { + setKakaoError(err as AxiosError); + } finally { + setKakaoLoading(false); + } + }, []); + + return { kakaoResponse, kakaoError, kakaoLoading, postKakao }; +}; + +export default usePostKakao; diff --git a/src/hooks/queries/useKakaoLogin.tsx b/src/hooks/useKakaoLogin.tsx similarity index 72% rename from src/hooks/queries/useKakaoLogin.tsx rename to src/hooks/useKakaoLogin.tsx index 2d5c555..f13c494 100644 --- a/src/hooks/queries/useKakaoLogin.tsx +++ b/src/hooks/useKakaoLogin.tsx @@ -1,4 +1,4 @@ -import { kakaoURL } from "../../utils/login"; +import { kakaoURL } from '../utils/login'; const useKakaoLogin = () => { window.location.replace(kakaoURL); diff --git a/src/pages/KakaoLoginPage.tsx b/src/pages/KakaoLoginPage.tsx index 895833d..603a41a 100644 --- a/src/pages/KakaoLoginPage.tsx +++ b/src/pages/KakaoLoginPage.tsx @@ -1,11 +1,34 @@ -// import { useState } from "react"; +// import { useEffect, useState } from "react"; +import { useEffect } from "react"; +import usePostKakao from "../hooks/queries/usePostKakao"; +import { useNavigate } from "react-router-dom"; const KakaoLoginPage = () => { - const code = new URL(window.location.href).searchParams.get("code"); + const navigate = useNavigate(); + + let code = new URL(window.location.href).searchParams.get("code"); console.log("CODE", code); - // const [accessToken, setAccessToken] = useState(localStorage.getItem("accessToken")); - // console.log("ACCESS_TOKEN", accessToken); - // if (accessToken) return; + if (!code) code = ""; + const { kakaoResponse, kakaoError, kakaoLoading, postKakao } = usePostKakao(); + + const handlePostKakao = async (code: string) => { + try { + await postKakao(code); + if (!kakaoError && !kakaoLoading && kakaoResponse) { + navigate("/delete"); + } + } catch (error) { + navigate("/unregistered"); + console.log("ERROR", error); + } + }; + + useEffect(() => { + if (code) { + handlePostKakao(code); + } + }, [code]); + return <>; }; diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 2d2995a..81c3d7e 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -1,30 +1,30 @@ -import { createBrowserRouter } from "react-router-dom"; -import Layout from "../layouts/Layout"; -import LoginPage from "../pages/LoginPage"; -import RecordreamLayout from "../pages/RecordreamLayout"; -import DeletePage from "../pages/DeletePage"; -import CompletePage from "../pages/CompletePage"; -import UnregisteredPage from "../pages/UnregisteredPage"; -import KakaoLoginPage from "../pages/KakaoLoginPage"; +import { createBrowserRouter } from 'react-router-dom'; +import Layout from '../layouts/Layout'; +import LoginPage from '../pages/LoginPage'; +import RecordreamLayout from '../pages/RecordreamLayout'; +import DeletePage from '../pages/DeletePage'; +import CompletePage from '../pages/CompletePage'; +import UnregisteredPage from '../pages/UnregisteredPage'; +import KakaoLoginPage from '../pages/KakaoLoginPage'; const router = createBrowserRouter([ { - path: "/", + path: '/', element: , children: [ { - path: "/", + path: '/', element: , }, { - path: "/auth/login", + path: '/auth/login', element: , }, { element: , children: [ { - path: "/delete", + path: '/delete', element: , }, ], @@ -32,8 +32,8 @@ const router = createBrowserRouter([ { element: , children: [ - { path: "/complete", element: }, - { path: "/unregistered", element: }, + { path: '/complete', element: }, + { path: '/unregistered', element: }, ], }, ], diff --git a/src/types/common.ts b/src/types/common.ts new file mode 100644 index 0000000..6dbaa34 --- /dev/null +++ b/src/types/common.ts @@ -0,0 +1,5 @@ +export interface CommonResponse { + success: boolean; + status: number; + message: string; +} diff --git a/src/types/kakao.ts b/src/types/kakao.ts index c2e975c..c259edf 100644 --- a/src/types/kakao.ts +++ b/src/types/kakao.ts @@ -1,13 +1,16 @@ export interface KakaoLoginResponseType extends Response { - data: { - data: { - userId: string; - isAlreadyUser: boolean; - accessToken: string; - refreshToken: string; - nickname: string; - }; - }; + status: number; + success: boolean; + message: string; + data: KakaoLoginInfoType; +} + +export interface KakaoLoginInfoType { + userId: string; + isAlreadyUser: boolean; + accessToken: string; + refreshToken: string; + nickname: string; } export interface KakaoLoginRequestType {