feat: api-instance 수정 및 로그아웃 api 연결

src/api/service/UserService.ts

@@ -1,12 +1,11 @@
 import apiV1Instance from '../api-instance';
-import baseInstance from '../baseInstance';
 
 export class UserService {
   public static login = async (
     email: string,
     password: string
   ): Promise<void> => {
-    const response = await baseInstance.post('/auth/login', {
+    const response = await apiV1Instance.post('/auth/login', {
       email,
       password,
     });
@@ -18,7 +17,7 @@ export class UserService {
     password: string,
     username: string
   ): Promise<void> => {
-    await baseInstance.post('/auth/signup', { email, password, username });
+    await apiV1Instance.post('/auth/signup', { email, password, username });
   };
 
   public static logout = async (): Promise<void> => {

src/assets/data/token.ts

@@ -1,2 +1,3 @@
-export const token =
-  'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJrYW5nQGdtYWlsLmNvbSIsImF1dGgiOiJVU0VSIiwiaWF0IjoxNjk3NjM1OTIzLCJleHAiOjE2OTc2MzY1MjN9.ciSIhzjz4hv0MlVclVkIwvEs9ZzH7_RhcLpCr6fv1LK7EOEBDdN-Bs1nQKDMzNBVVhWkOG8ERCVzOR4aJDGqhA';
+import useUserTokenStore from 'src/utils/zustand/user/UserTokenStore';
+
+export const token = useUserTokenStore.getState().userToken;

src/components/User/LoginBox.tsx

@@ -4,6 +4,7 @@ import router from 'next/router';
 import { useState } from 'react';
 import useCheckAuth from 'src/api/hook/CheckAuthHook';
 import { useLogin } from 'src/api/hook/UserHook';
+import useUserTokenStore from 'src/utils/zustand/user/UserTokenStore';
 
 import logoUrl from '../../../public/title-logo.png';
 import InputBox from './InputBox';
@@ -14,6 +15,7 @@ import UserLabel from './UserLabel';
 export default function LoginBox() {
   const [email, setEmail] = useState<string>('');
   const [pw, setPw] = useState<string>('');
+  const { setUserToken } = useUserTokenStore();
 
   useCheckAuth();
 
@@ -25,9 +27,9 @@ export default function LoginBox() {
   }
 
   const { mutate: login } = useLogin(email, pw, (response) => {
-    // document.cookie = `token = ${response.data.accessToken}`;
     setCookie('token', response.data.accessToken, 1);
     router.push('/');
+    setUserToken(response.data.accessToken);
   });
 
   const handleSubmit = async () => {

src/components/common/AvatarModal.tsx

@@ -1,5 +1,7 @@
 import { Button, Dialog, DialogContent, Divider } from '@mui/material';
 import React, { useState } from 'react';
+import { useLogout } from 'src/api/hook/UserHook';
+import useUserTokenStore from 'src/utils/zustand/user/UserTokenStore';
 
 interface AvatarModalProps {
   open: boolean;
@@ -9,9 +11,13 @@ interface AvatarModalProps {
 function AvatarModal({ open, onClose }: AvatarModalProps) {
   const [logoutOpen, setLogoutOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const { setUserToken } = useUserTokenStore();
+
+  const { mutate: logout } = useLogout();
 
   const handleLogoutOpen = () => {
-    setLogoutOpen(true);
+    setUserToken('');
+    logout();
   };
 
   const handleSettingsOpen = () => {

src/utils/zustand/user/UserTokenStore.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface UserTokenState {
+  userToken: string;
+  setUserToken: (token: string) => void;
+}
+
+const useUserTokenStore = create<UserTokenState>()(
+  persist(
+    (set) => ({
+      userToken: '',
+      setUserToken: (token: string) => set(() => ({ userToken: token })),
+    }),
+    {
+      name: 'userTokenStore',
+    }
+  )
+);
+
+export default useUserTokenStore;