feat: 네비게이션 bar 수정

Author: yechan-kim

src/components/NavBar.jsx

@@ -32,11 +32,11 @@ const NavBar = () => {
                         {username ? (
                             <div style={{display: 'flex', alignItems: 'center'}}>
                                 <span className={styles.username}>{username}님</span>
-                                &nbsp;
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                 <LogoutButton onClick={handleLogout}/>
                             </div>
                         ) : (
-                            <GoogleButton onClick={login} name="Google"/>
+                            <GoogleButton onClick={() => login()} name="Google"/>
                         )}
                     </li>
                 </ul>

src/hooks/useAuth.js

@@ -1,40 +1,48 @@
-import { useState } from 'react';
+import {useState, useEffect} from 'react';
 import axios from 'axios';
 
 export const useAuth = () => {
-  const [username, setUsername] = useState(localStorage.getItem('username'));
-
-  const handleLogin = (newUsername) => {
-    setUsername(newUsername);
-  };
-
-  const handleLogout = () => {
-    localStorage.removeItem('accessToken');
-    localStorage.removeItem('refreshToken');
-    localStorage.removeItem('username');
-    localStorage.removeItem('session');
-    setUsername(null);
-  };
-
-  const handleCallback = async (code) => {
-    try {
-      const backendResponse = await axios.get(`${import.meta.env.VITE_DEFAULT_API_URI}/login?code=${code}`);
-      const { accessToken, refreshToken, username, session } = backendResponse.data;
-
-      localStorage.setItem('accessToken', accessToken);
-      localStorage.setItem('refreshToken', refreshToken);
-      localStorage.setItem('session', session);
-
-      setUsername(username);
-    } catch (error) {
-      console.error('Error sending code to backend:', error);
-    }
-  };
-
-  return {
-    username,
-    handleLogin,
-    handleLogout,
-    handleCallback,
-  };
+    const [username, setUsername] = useState(localStorage.getItem('username'));
+
+    useEffect(() => {
+        const storedUsername = localStorage.getItem('username');
+        if (storedUsername) {
+            setUsername(storedUsername);
+        }
+    }, []);
+
+    const handleLogin = (newUsername) => {
+        setUsername(newUsername);
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        localStorage.removeItem('username');
+        localStorage.removeItem('session');
+        setUsername(null);
+    };
+
+    const handleCallback = async (code) => {
+        try {
+            const backendResponse = await axios.get(`${import.meta.env.VITE_DEFAULT_API_URI}/login?code=${code}`);
+            const {accessToken, refreshToken, username, session} = backendResponse.data;
+
+            localStorage.setItem('accessToken', accessToken);
+            localStorage.setItem('refreshToken', refreshToken);
+            localStorage.setItem('username', username);
+            localStorage.setItem('session', session);
+
+            setUsername(username);
+        } catch (error) {
+            console.error('Error sending code to backend:', error);
+        }
+    };
+
+    return {
+        username,
+        handleLogin,
+        handleLogout,
+        handleCallback,
+    };
 };

src/styles/NavBar.module.css

@@ -1,11 +1,18 @@
 .username {
     color: rgba(0, 0, 0, 0.54); /* text-black-54 */
     font-weight: 600; /* font-semibold */
-    font-size: 0.875rem; /* text-sm */
+    font-size: 1.3rem; /* text-sm */
 }
 
 .logo {
     width: 100%;
     height: auto;
     max-width: 200px;
 }
+
+ul {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+