From 68ed1113e3f914173df18dc2daa67d366922405b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Sun, 11 Aug 2024 20:08:03 +0900
Subject: [PATCH] feat: add useAuthStore

---
 package-lock.json                  | 12 ++++++++-
 package.json                       |  3 ++-
 src/app/routes/auth.kakao.tsx      | 39 ++++++++++++++++++++++++++++++
 src/entities/auth/useAuthStore.ts  | 31 ++++++++++++++++++++++++
 src/pages/main/login/LoginPage.tsx |  2 +-
 5 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 src/app/routes/auth.kakao.tsx
 create mode 100644 src/entities/auth/useAuthStore.ts

diff --git a/package-lock.json b/package-lock.json
index d3acfd3..179d07e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,8 @@
         "react-range-slider-input": "^3.0.7",
         "react-slick": "^0.30.2",
         "slick-carousel": "^1.8.1",
-        "zustand": "^4.5.2"
+        "zustand": "^4.5.2",
+        "zustand-persist": "^0.4.0"
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^1.5.0",
@@ -23965,6 +23966,15 @@
         }
       }
     },
+    "node_modules/zustand-persist": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/zustand-persist/-/zustand-persist-0.4.0.tgz",
+      "integrity": "sha512-u6bBIc4yZRpSKBKuTNhoqvoIb09gGHk2NkiPg4K7MPIWTYZg70PlpBn48QEDnKZwfNurnf58TaW5BuMGIMf5hw==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "zustand": ">=3.6.3"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index b175476..d61537c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "react-range-slider-input": "^3.0.7",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.2",
+    "zustand-persist": "^0.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
diff --git a/src/app/routes/auth.kakao.tsx b/src/app/routes/auth.kakao.tsx
new file mode 100644
index 0000000..2522d07
--- /dev/null
+++ b/src/app/routes/auth.kakao.tsx
@@ -0,0 +1,39 @@
+import { LoaderFunction } from '@remix-run/node';
+import { loginKakao } from 'src/types';
+import { useLoaderData } from '@remix-run/react';
+import { useEffect } from 'react';
+import { useAuthStore } from 'src/entities/auth/useAuthStore';
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const searchParams = new URL(request.url).searchParams;
+  const code = searchParams.get('code');
+
+  if (!code) {
+    throw new Response('', {
+      status: 404,
+      statusText: '',
+    });
+  }
+
+  return { code };
+};
+
+export default function KakaoAuthPage() {
+  const { code } = useLoaderData<typeof loader>();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await loginKakao({
+          code,
+        });
+        const token = response.accessToken;
+        useAuthStore.getState().login(token);
+      } catch (e) {
+        location.replace('/login');
+      }
+    })();
+  }, [code]);
+
+  return <></>;
+}
diff --git a/src/entities/auth/useAuthStore.ts b/src/entities/auth/useAuthStore.ts
new file mode 100644
index 0000000..97bf585
--- /dev/null
+++ b/src/entities/auth/useAuthStore.ts
@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type AuthStore = {
+  isLoggedIn: boolean;
+  login: (token: string) => void;
+  logout: () => void;
+};
+
+const ACCESS_TOKEN_STORAGE_KEY = 'accessToken';
+
+export const useAuthStore = create(
+  persist<AuthStore>(
+    (set) => ({
+      isLoggedIn: false,
+      login: (token: string) => {
+        localStorage.setItem(ACCESS_TOKEN_STORAGE_KEY, token);
+        if (token) {
+          set({ isLoggedIn: true });
+        }
+      },
+      logout: () => {
+        set({ isLoggedIn: false });
+        localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
+      },
+    }),
+    {
+      name: 'authStatus',
+    },
+  ),
+);
diff --git a/src/pages/main/login/LoginPage.tsx b/src/pages/main/login/LoginPage.tsx
index d72bbd4..cb77901 100644
--- a/src/pages/main/login/LoginPage.tsx
+++ b/src/pages/main/login/LoginPage.tsx
@@ -8,7 +8,7 @@ export const LoginPage = () => {
         <h1>내 사랑 구해줄래? 구해줄게!</h1>
       </div>
       <div className={styles.ButtonWrapper}>
-        <Link to={'/?login=true'}>
+        <Link to={import.meta.env.VITE_KAUTH_URL}>
           <button className={`${styles.Button} ${styles.Kakao}`}>
             <span className={styles.Icon}>
               <img src="/images/kakao.png" alt="카카오 로그인" width={29} height={29} />