From ff68b098ae0daf04576cd67cf8eb73dddbae777d Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Wed, 27 Sep 2023 21:41:56 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat=20:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/apis.ts      | 2 ++
 src/apis/mutations.ts | 5 +++++
 2 files changed, 7 insertions(+)
 create mode 100644 src/apis/mutations.ts

diff --git a/src/apis/apis.ts b/src/apis/apis.ts
index 33e39c8e..5829d7ad 100644
--- a/src/apis/apis.ts
+++ b/src/apis/apis.ts
@@ -31,3 +31,5 @@ export const getPoseFeed = async (
   });
 
 export const getFilterTag = () => publicApi.get<FilterTagsResponse>('/pose/tags');
+
+export const postRegister = () => publicApi.post('/users/register');
diff --git a/src/apis/mutations.ts b/src/apis/mutations.ts
new file mode 100644
index 00000000..41e13b45
--- /dev/null
+++ b/src/apis/mutations.ts
@@ -0,0 +1,5 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postRegister } from '.';
+
+export const useRegisterMutation = () => useMutation(postRegister);

From 6dce04459bf5a71df638fc523dc9ccfa6ffcd9be Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Wed, 27 Sep 2023 21:42:04 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat=20:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(Sub)/kakao/page.tsx                   |  9 +++++++++
 src/app/(Sub)/menu/components/LoginSection.tsx | 17 ++++++++---------
 src/utils/kakaoLogin.ts                        |  8 ++++++++
 3 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/app/(Sub)/kakao/page.tsx
 create mode 100644 src/utils/kakaoLogin.ts

diff --git a/src/app/(Sub)/kakao/page.tsx b/src/app/(Sub)/kakao/page.tsx
new file mode 100644
index 00000000..c0e14166
--- /dev/null
+++ b/src/app/(Sub)/kakao/page.tsx
@@ -0,0 +1,9 @@
+'use client';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
+
+export default function Page() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  return <div>로그인 중입니다 ..</div>;
+}
diff --git a/src/app/(Sub)/menu/components/LoginSection.tsx b/src/app/(Sub)/menu/components/LoginSection.tsx
index 34decd74..f6be7ba3 100644
--- a/src/app/(Sub)/menu/components/LoginSection.tsx
+++ b/src/app/(Sub)/menu/components/LoginSection.tsx
@@ -1,9 +1,10 @@
 'use client';
 
+import Script from 'next/script';
+
 import { Icon } from '@/components/Icon';
-import { PreparingModal } from '@/components/Modal';
-import { useOverlay } from '@/components/Overlay/useOverlay';
 import { Spacing } from '@/components/Spacing';
+import { kakaoInit, kakaoLogin } from '@/utils/kakaoLogin';
 
 function DefaultProfile() {
   return (
@@ -14,17 +15,15 @@ function DefaultProfile() {
 }
 
 export default function LoginSection() {
-  const { open } = useOverlay();
-
   return (
     <section className="py-12">
-      <div
-        className="bg-violet flex items-center rounded-16 bg-main-violet-bright px-20 py-24"
-        onClick={() => open(({ exit }) => <PreparingModal onClose={exit} />)}
-      >
+      <Script src="https://developers.kakao.com/sdk/js/kakao.js" onLoad={kakaoInit} />
+      <div className="bg-violet flex items-center rounded-16 bg-main-violet-bright px-20 py-24">
         <DefaultProfile />
         <Spacing size={16} direction="horizontal" />
-        <div id="subtitle-1">로그인하기</div>
+        <div id="subtitle-1" onClick={kakaoLogin}>
+          로그인하기
+        </div>
       </div>
     </section>
   );
diff --git a/src/utils/kakaoLogin.ts b/src/utils/kakaoLogin.ts
new file mode 100644
index 00000000..0a9c1cd6
--- /dev/null
+++ b/src/utils/kakaoLogin.ts
@@ -0,0 +1,8 @@
+export function kakaoLogin() {
+  window.Kakao.Auth.authorize({
+    redirectUri: `${process.env.NEXT_PUBLIC_SITE_URL}/kakao`,
+  });
+}
+export function kakaoInit() {
+  window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_KEY);
+}

From ae9b1610f68e81c04cd0e4777ddd91d1394b73ca Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Wed, 27 Sep 2023 22:15:02 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat=20:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20Modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/kakao-login.png                 | Bin 0 -> 1779 bytes
 src/apis/apis.ts                              |   4 +-
 src/apis/type.ts                              |   4 ++
 src/app/(Sub)/kakao/page.tsx                  |  10 ++++-
 src/app/(Sub)/menu/components/LoginModal.tsx  |  35 ++++++++++++++++++
 .../(Sub)/menu/components/LoginSection.tsx    |  10 ++---
 .../(Sub)/menu/components/MakerSection.tsx    |   1 -
 7 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 public/images/kakao-login.png
 create mode 100644 src/app/(Sub)/menu/components/LoginModal.tsx

diff --git a/public/images/kakao-login.png b/public/images/kakao-login.png
new file mode 100644
index 0000000000000000000000000000000000000000..898db9032110f437ba44beb02cda4cebcb13de63
GIT binary patch
literal 1779
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

literal 0
HcmV?d00001

diff --git a/src/apis/apis.ts b/src/apis/apis.ts
index 5829d7ad..563260d8 100644
--- a/src/apis/apis.ts
+++ b/src/apis/apis.ts
@@ -4,6 +4,7 @@ import {
   PoseFeedResponse,
   PosePickResponse,
   PoseTalkResponse,
+  ResgisterRequest,
 } from '.';
 import publicApi from './config/publicApi';
 
@@ -32,4 +33,5 @@ export const getPoseFeed = async (
 
 export const getFilterTag = () => publicApi.get<FilterTagsResponse>('/pose/tags');
 
-export const postRegister = () => publicApi.post('/users/register');
+export const postRegister = ({ access_token }: ResgisterRequest) =>
+  publicApi.post('/users/register', { access_token });
diff --git a/src/apis/type.ts b/src/apis/type.ts
index c3818218..a2911973 100644
--- a/src/apis/type.ts
+++ b/src/apis/type.ts
@@ -78,3 +78,7 @@ export interface PoseTalkResponse {
     wordId: number;
   };
 }
+
+export interface ResgisterRequest {
+  access_token: string;
+}
diff --git a/src/app/(Sub)/kakao/page.tsx b/src/app/(Sub)/kakao/page.tsx
index c0e14166..5a810a8a 100644
--- a/src/app/(Sub)/kakao/page.tsx
+++ b/src/app/(Sub)/kakao/page.tsx
@@ -1,9 +1,15 @@
 'use client';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+import { useRegisterMutation } from '@/apis/mutations';
 
 export default function Page() {
-  const router = useRouter();
   const searchParams = useSearchParams();
+  const { mutate } = useRegisterMutation();
+  useEffect(() => {
+    mutate({ access_token: searchParams.get('code') || '' });
+  }, [mutate, searchParams]);
 
   return <div>로그인 중입니다 ..</div>;
 }
diff --git a/src/app/(Sub)/menu/components/LoginModal.tsx b/src/app/(Sub)/menu/components/LoginModal.tsx
new file mode 100644
index 00000000..b4987249
--- /dev/null
+++ b/src/app/(Sub)/menu/components/LoginModal.tsx
@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import Script from 'next/script';
+
+import { Modal } from '@/components/Modal';
+import { Spacing } from '@/components/Spacing';
+import { kakaoInit, kakaoLogin } from '@/utils/kakaoLogin';
+
+interface LoginModalProps {
+  onClose: () => void;
+}
+export default function LoginModal({ onClose }: LoginModalProps) {
+  return (
+    <Modal onCloseOutside={onClose}>
+      <Script src="https://developers.kakao.com/sdk/js/kakao.js" onLoad={kakaoInit} />
+      <Spacing size={32} />
+      <h4>간편 로그인</h4>
+      <Spacing size={8} />
+      <p>
+        로그인해야 북마크를 쓸 수 있어요.
+        <br />
+        카카오로 3초만에 가입할 수 있어요!
+      </p>
+      <Spacing size={16} />
+      <Image
+        src="/images/kakao-login.png"
+        width={268}
+        height={54}
+        alt="kakao-login"
+        className="cursor-pointer"
+        onClick={kakaoLogin}
+      />
+      <Spacing size={32} />
+    </Modal>
+  );
+}
diff --git a/src/app/(Sub)/menu/components/LoginSection.tsx b/src/app/(Sub)/menu/components/LoginSection.tsx
index f6be7ba3..49113dfe 100644
--- a/src/app/(Sub)/menu/components/LoginSection.tsx
+++ b/src/app/(Sub)/menu/components/LoginSection.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import Script from 'next/script';
-
+import LoginModal from './LoginModal';
 import { Icon } from '@/components/Icon';
+import { useOverlay } from '@/components/Overlay/useOverlay';
 import { Spacing } from '@/components/Spacing';
-import { kakaoInit, kakaoLogin } from '@/utils/kakaoLogin';
 
 function DefaultProfile() {
   return (
@@ -15,13 +14,14 @@ function DefaultProfile() {
 }
 
 export default function LoginSection() {
+  const { open, exit } = useOverlay();
+
   return (
     <section className="py-12">
-      <Script src="https://developers.kakao.com/sdk/js/kakao.js" onLoad={kakaoInit} />
       <div className="bg-violet flex items-center rounded-16 bg-main-violet-bright px-20 py-24">
         <DefaultProfile />
         <Spacing size={16} direction="horizontal" />
-        <div id="subtitle-1" onClick={kakaoLogin}>
+        <div id="subtitle-1" onClick={() => open(() => <LoginModal onClose={exit} />)}>
           로그인하기
         </div>
       </div>
diff --git a/src/app/(Sub)/menu/components/MakerSection.tsx b/src/app/(Sub)/menu/components/MakerSection.tsx
index cc70fae3..2fab67ab 100644
--- a/src/app/(Sub)/menu/components/MakerSection.tsx
+++ b/src/app/(Sub)/menu/components/MakerSection.tsx
@@ -1,5 +1,4 @@
 'use client';
-import Image from 'next/image';
 
 import BottomFixedDiv from '@/components/BottomFixedDiv';
 import { Icon } from '@/components/Icon';

From fb94a37cd62996b8e4cd1cd6522edb3688559734 Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Tue, 3 Oct 2023 14:24:18 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat=20:=20=ED=86=A0=ED=81=B0=20=EC=BF=A0?=
 =?UTF-8?q?=ED=82=A4=EC=97=90=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/apis.ts                              |  6 +--
 src/apis/mutations.ts                         |  5 ---
 src/apis/queries.ts                           |  5 +++
 src/apis/type.ts                              | 14 +++++-
 .../oauth/kakao/components/LoginSection.tsx   | 21 +++++++++
 .../api/users/login/oauth/kakao/page.tsx      | 29 +++++++++++++
 src/app/(Sub)/kakao/page.tsx                  | 15 -------
 src/app/(Sub)/menu/components/LoginModal.tsx  | 11 +++--
 src/utils/cookieController.ts                 | 43 +++++++++++++++++++
 src/utils/tokenController.ts                  |  0
 10 files changed, 120 insertions(+), 29 deletions(-)
 delete mode 100644 src/apis/mutations.ts
 create mode 100644 src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
 create mode 100644 src/app/(Sub)/api/users/login/oauth/kakao/page.tsx
 delete mode 100644 src/app/(Sub)/kakao/page.tsx
 create mode 100644 src/utils/cookieController.ts
 create mode 100644 src/utils/tokenController.ts

diff --git a/src/apis/apis.ts b/src/apis/apis.ts
index 563260d8..327c9445 100644
--- a/src/apis/apis.ts
+++ b/src/apis/apis.ts
@@ -4,7 +4,7 @@ import {
   PoseFeedResponse,
   PosePickResponse,
   PoseTalkResponse,
-  ResgisterRequest,
+  RegisterResponse,
 } from '.';
 import publicApi from './config/publicApi';
 
@@ -33,5 +33,5 @@ export const getPoseFeed = async (
 
 export const getFilterTag = () => publicApi.get<FilterTagsResponse>('/pose/tags');
 
-export const postRegister = ({ access_token }: ResgisterRequest) =>
-  publicApi.post('/users/register', { access_token });
+export const getRegister = (code: string) =>
+  publicApi.get<RegisterResponse>(`/users/login/oauth/kakao?code=${code}`);
diff --git a/src/apis/mutations.ts b/src/apis/mutations.ts
deleted file mode 100644
index 41e13b45..00000000
--- a/src/apis/mutations.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { postRegister } from '.';
-
-export const useRegisterMutation = () => useMutation(postRegister);
diff --git a/src/apis/queries.ts b/src/apis/queries.ts
index 34102ceb..45bb5a32 100644
--- a/src/apis/queries.ts
+++ b/src/apis/queries.ts
@@ -5,11 +5,13 @@ import {
   PoseFeedResponse,
   PosePickResponse,
   PoseTalkResponse,
+  RegisterResponse,
   getFilterTag,
   getPoseDetail,
   getPoseFeed,
   getPosePick,
   getPoseTalk,
+  getRegister,
 } from '.';
 import { FilterState } from '@/hooks/useFilterState';
 
@@ -50,3 +52,6 @@ export const usePoseFeedQuery = (
 
 export const useFilterTagQuery = (options?: UseQueryOptions<FilterTagsResponse>) =>
   useSuspenseQuery<FilterTagsResponse>(['filterTag'], getFilterTag, { ...options });
+
+export const useRegisterQuery = (code: string) =>
+  useSuspenseQuery<RegisterResponse>(['register'], () => getRegister(code), {});
diff --git a/src/apis/type.ts b/src/apis/type.ts
index a2911973..c15ed499 100644
--- a/src/apis/type.ts
+++ b/src/apis/type.ts
@@ -79,6 +79,16 @@ export interface PoseTalkResponse {
   };
 }
 
-export interface ResgisterRequest {
-  access_token: string;
+export interface Token {
+  accessToken: string;
+  refreshToken: string;
+  grantType: string;
+  expiresIn: number;
+}
+
+export interface RegisterResponse {
+  id: number;
+  nickname: string;
+  email: string;
+  token: Token;
 }
diff --git a/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx b/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
new file mode 100644
index 00000000..e9fe6555
--- /dev/null
+++ b/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { useRegisterQuery } from '@/apis';
+import { setCookie } from '@/utils/cookieController';
+
+interface LoginSectionProps {
+  code: string;
+}
+export default function LoginSection({ code }: LoginSectionProps) {
+  const router = useRouter();
+  const { data } = useRegisterQuery(code);
+  const { token, email, nickname } = data;
+  const { accessToken, refreshToken, expiresIn } = token;
+  setCookie('accessToken', accessToken);
+  setCookie('refreshToken', refreshToken);
+  router.replace('/menu');
+
+  return <div></div>;
+}
diff --git a/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx b/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx
new file mode 100644
index 00000000..2e1f7ad0
--- /dev/null
+++ b/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx
@@ -0,0 +1,29 @@
+import { QueryAsyncBoundary } from '@suspensive/react-query';
+import { useSearchParams } from 'next/navigation';
+
+import LoginSection from './components/LoginSection';
+import { getRegister } from '@/apis';
+import { RejectedFallback } from '@/components/ErrorBoundary';
+import { Loading } from '@/components/Loading';
+import { HydrationProvider } from '@/components/Provider/HydrationProvider';
+
+interface PageProps {
+  searchParams: {
+    code: string;
+  };
+}
+
+export default function Page({ searchParams }: PageProps) {
+  const { code } = searchParams;
+
+  return (
+    <QueryAsyncBoundary
+      rejectedFallback={RejectedFallback}
+      pendingFallback={<Loading className="h-[calc(100dvh-400px)]" />}
+    >
+      <HydrationProvider queryKey={['register']} queryFn={() => getRegister(code)}>
+        <LoginSection code={code} />
+      </HydrationProvider>
+    </QueryAsyncBoundary>
+  );
+}
diff --git a/src/app/(Sub)/kakao/page.tsx b/src/app/(Sub)/kakao/page.tsx
deleted file mode 100644
index 5a810a8a..00000000
--- a/src/app/(Sub)/kakao/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client';
-import { useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
-
-import { useRegisterMutation } from '@/apis/mutations';
-
-export default function Page() {
-  const searchParams = useSearchParams();
-  const { mutate } = useRegisterMutation();
-  useEffect(() => {
-    mutate({ access_token: searchParams.get('code') || '' });
-  }, [mutate, searchParams]);
-
-  return <div>로그인 중입니다 ..</div>;
-}
diff --git a/src/app/(Sub)/menu/components/LoginModal.tsx b/src/app/(Sub)/menu/components/LoginModal.tsx
index b4987249..27527522 100644
--- a/src/app/(Sub)/menu/components/LoginModal.tsx
+++ b/src/app/(Sub)/menu/components/LoginModal.tsx
@@ -1,17 +1,20 @@
 import Image from 'next/image';
-import Script from 'next/script';
 
 import { Modal } from '@/components/Modal';
 import { Spacing } from '@/components/Spacing';
-import { kakaoInit, kakaoLogin } from '@/utils/kakaoLogin';
 
 interface LoginModalProps {
   onClose: () => void;
 }
 export default function LoginModal({ onClose }: LoginModalProps) {
+  const link = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_SERVER_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_SITE_URL}/api/users/login/oauth/kakao&response_type=code`;
+
+  const handleLogin = () => {
+    window.location.href = link;
+  };
+
   return (
     <Modal onCloseOutside={onClose}>
-      <Script src="https://developers.kakao.com/sdk/js/kakao.js" onLoad={kakaoInit} />
       <Spacing size={32} />
       <h4>간편 로그인</h4>
       <Spacing size={8} />
@@ -27,7 +30,7 @@ export default function LoginModal({ onClose }: LoginModalProps) {
         height={54}
         alt="kakao-login"
         className="cursor-pointer"
-        onClick={kakaoLogin}
+        onClick={handleLogin}
       />
       <Spacing size={32} />
     </Modal>
diff --git a/src/utils/cookieController.ts b/src/utils/cookieController.ts
new file mode 100644
index 00000000..335275bd
--- /dev/null
+++ b/src/utils/cookieController.ts
@@ -0,0 +1,43 @@
+const isServer = typeof window === 'undefined';
+
+export const setCookie = async (key: string, value: string, options?: { expires?: Date }) => {
+  // 서버 측 쿠키
+  if (isServer) {
+    const { cookies } = await import('next/headers');
+    cookies().set(key, value, {
+      expires: options?.expires,
+    });
+    return;
+  }
+
+  // 클라이언트 측 쿠키
+  document.cookie = `${key}=${value}; path=/; ${
+    options?.expires ? `expires=${options.expires.toUTCString()}` : ''
+  }`;
+};
+
+export const getCookie = async (key: string) => {
+  // 서버측 쿠키
+  if (isServer) {
+    const { cookies } = await import('next/headers');
+    return cookies().get(key);
+  }
+
+  // 클라이언트 측 쿠키
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${key}=`);
+
+  return parts.pop()?.split(';').shift();
+};
+
+export const removeCookie = async (key: string) => {
+  // 서버측 쿠키
+  if (isServer) {
+    const { cookies } = await import('next/headers');
+    cookies().set(key, '');
+    return;
+  }
+
+  // 클라이언트 측 쿠키
+  document.cookie = `${key}=; expires=Thu, 01 Jan 1999 00:00:10 GMT;`;
+};
diff --git a/src/utils/tokenController.ts b/src/utils/tokenController.ts
new file mode 100644
index 00000000..e69de29b

From a76db33906b6d893a37747c98d58c2b5312afbfb Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Tue, 3 Oct 2023 14:34:13 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat=20:=20=ED=86=A0=ED=81=B0=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/config/privateApi.ts                 | 30 +++++++++++++++++++
 .../oauth/kakao/components/LoginSection.tsx   |  1 +
 .../api/users/login/oauth/kakao/page.tsx      |  6 +---
 src/utils/kakaoLogin.ts                       |  8 -----
 src/utils/tokenController.ts                  |  0
 5 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 src/apis/config/privateApi.ts
 delete mode 100644 src/utils/kakaoLogin.ts
 delete mode 100644 src/utils/tokenController.ts

diff --git a/src/apis/config/privateApi.ts b/src/apis/config/privateApi.ts
new file mode 100644
index 00000000..f78f092a
--- /dev/null
+++ b/src/apis/config/privateApi.ts
@@ -0,0 +1,30 @@
+import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
+
+import { BASE_API_URL } from '@/constants';
+import { getCookie } from '@/utils/cookieController';
+
+import type { CustomInstance } from './type';
+
+const privateApi: CustomInstance = axios.create({
+  baseURL: `${BASE_API_URL}/api`,
+  withCredentials: true,
+});
+
+privateApi.interceptors.request.use(
+  async (config: InternalAxiosRequestConfig) => {
+    try {
+      const accessToken = getCookie('accessToken');
+      config.headers.Authorization = `Bearer ${accessToken}`;
+      return config;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  },
+  (error: AxiosError) => {
+    Promise.reject(error);
+  }
+);
+
+privateApi.interceptors.response.use((response) => response.data);
+
+export default privateApi;
diff --git a/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx b/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
index e9fe6555..382e098f 100644
--- a/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
+++ b/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
@@ -11,6 +11,7 @@ interface LoginSectionProps {
 export default function LoginSection({ code }: LoginSectionProps) {
   const router = useRouter();
   const { data } = useRegisterQuery(code);
+  console.log(data);
   const { token, email, nickname } = data;
   const { accessToken, refreshToken, expiresIn } = token;
   setCookie('accessToken', accessToken);
diff --git a/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx b/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx
index 2e1f7ad0..a4d9c886 100644
--- a/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx
+++ b/src/app/(Sub)/api/users/login/oauth/kakao/page.tsx
@@ -1,5 +1,4 @@
 import { QueryAsyncBoundary } from '@suspensive/react-query';
-import { useSearchParams } from 'next/navigation';
 
 import LoginSection from './components/LoginSection';
 import { getRegister } from '@/apis';
@@ -17,10 +16,7 @@ export default function Page({ searchParams }: PageProps) {
   const { code } = searchParams;
 
   return (
-    <QueryAsyncBoundary
-      rejectedFallback={RejectedFallback}
-      pendingFallback={<Loading className="h-[calc(100dvh-400px)]" />}
-    >
+    <QueryAsyncBoundary rejectedFallback={RejectedFallback} pendingFallback={<Loading />}>
       <HydrationProvider queryKey={['register']} queryFn={() => getRegister(code)}>
         <LoginSection code={code} />
       </HydrationProvider>
diff --git a/src/utils/kakaoLogin.ts b/src/utils/kakaoLogin.ts
deleted file mode 100644
index 0a9c1cd6..00000000
--- a/src/utils/kakaoLogin.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function kakaoLogin() {
-  window.Kakao.Auth.authorize({
-    redirectUri: `${process.env.NEXT_PUBLIC_SITE_URL}/kakao`,
-  });
-}
-export function kakaoInit() {
-  window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_KEY);
-}
diff --git a/src/utils/tokenController.ts b/src/utils/tokenController.ts
deleted file mode 100644
index e69de29b..00000000

From 238f345ec26dde66fd6f5156be2638012599001b Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Tue, 3 Oct 2023 14:38:26 +0900
Subject: [PATCH 6/6] =?UTF-8?q?refactor=20:=20=ED=86=A0=ED=81=B0=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=98=EB=8A=94=EB=8F=99=EC=95=88=20Loadin?=
 =?UTF-8?q?g=ED=99=94=EB=A9=B4=20=EB=9D=84=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/users/login/oauth/kakao/components/LoginSection.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx b/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
index 382e098f..07df1cd3 100644
--- a/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
+++ b/src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 
 import { useRegisterQuery } from '@/apis';
+import { Loading } from '@/components/Loading';
 import { setCookie } from '@/utils/cookieController';
 
 interface LoginSectionProps {
@@ -18,5 +19,5 @@ export default function LoginSection({ code }: LoginSectionProps) {
   setCookie('refreshToken', refreshToken);
   router.replace('/menu');
 
-  return <div></div>;
+  return <Loading />;
 }