Merge remote-tracking branch 'origin/sunwoong'

Author: sojeongP0415

src/App.js

@@ -19,10 +19,8 @@ import ScrollToTop from "./components/common/ScrollToTop";
 
 function App() {
     const [isDark, setIsDark] = useState(false);
-
-    useEffect(() => {
-        document.body.classList.toggle("dark-mode", isDark);
-    }, [isDark]);
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [nickname, setNickname] = useState('');
 
     useEffect(() => {
         const savedTheme = localStorage.getItem("theme");
@@ -36,9 +34,22 @@ function App() {
         localStorage.setItem("theme", isDark ? "dark" : "light");
     }, [isDark]);
 
+    useEffect(() => {
+        const token = localStorage.getItem("token");
+        const name = localStorage.getItem("username"); // ✅ 이름을 불러옴
+
+        if (token && name) {
+            setIsLoggedIn(true);
+            setNickname(name); // ✅ 이름을 nickname으로 사용
+        } else {
+            setIsLoggedIn(false);
+            setNickname('');
+        }
+    }, []);
+
     return (
         <HashRouter>
-            <Header isDark={isDark} setIsDark={setIsDark} />
+            <Header isDark={isDark} setIsDark={setIsDark} isLoggedIn={isLoggedIn} nickname={nickname} />
             <ScrollToTop />
             <Routes>
                 <Route path="/" element={<Main />} />
@@ -61,4 +72,4 @@ function App() {
     );
 }
 
-export default App;
+export default App;

src/components/header/Header.css

@@ -94,7 +94,7 @@
 
 /* 로그인 상태일 때 닉네임 표시 */
 .user-nickname {
-    font-size: 14px;
+    font-size: 17px;
     font-weight: 600;
     color: #6a0dad;
     padding: 6px 12px;

src/components/header/Header.jsx

@@ -1,12 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { NavLink, Link } from "react-router-dom";
+import { Link as ScrollLink } from "react-scroll";
 import { FaMoon, FaSun } from "react-icons/fa";
 import "./Header.css";
 
-const Header = ({ isLoggedIn, nickname, isDark, setIsDark }) => {
-    useEffect(() => {
-        document.body.classList.toggle("dark-mode", isDark);
-    }, [isDark]);
+const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
+    const handleLogout = () => {
+        localStorage.clear();
+        window.location.reload(); // 새로고침으로 상태 초기화
+    };
 
     return (
         <header className="custom-header">
@@ -16,6 +18,14 @@ const Header = ({ isLoggedIn, nickname, isDark, setIsDark }) => {
 
             <nav className="header-nav">
                 <NavLink to="/" end>홈</NavLink>
+                <ScrollLink
+                    to="feature"
+                    smooth
+                    duration={500}
+                    offset={-64}
+                    spy={true}
+                    activeClass="active"
+                ></ScrollLink>
                 <NavLink to="/ide">IDE</NavLink>
                 <NavLink to="/community">커뮤니티</NavLink>
                 <NavLink to="/broadcast">코드 방송</NavLink>
@@ -27,10 +37,14 @@ const Header = ({ isLoggedIn, nickname, isDark, setIsDark }) => {
                     className="theme-toggle-btn"
                     aria-label="Toggle theme"
                 >
-                    {isDark ? <FaSun/> : <FaMoon/>}
+                    {isDark ? <FaSun /> : <FaMoon />}
                 </button>
+
                 {isLoggedIn ? (
-                    <span className="user-nickname">👤 {nickname}</span>
+                    <>
+                        <span className="user-nickname">👤 {nickname} 님</span>
+                        <button onClick={handleLogout} className="btn btn-outline">로그아웃</button>
+                    </>
                 ) : (
                     <>
                         <Link to="/login" className="btn btn-outline">로그인</Link>

src/components/login/Login.jsx

@@ -2,13 +2,16 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import config from '../../config';
 import './Login.css';
+import { useNavigate } from 'react-router-dom';
 
 function Login() {
     const [formData, setFormData] = useState({
         username: '',
         password: '',
     });
 
+    const navigate = useNavigate();
+
     const handleChange = (e) => {
         setFormData({
             ...formData,
@@ -29,13 +32,15 @@ function Login() {
 
             console.log('✅ 로그인 성공:', response.data);
 
+            // 사용자 정보 저장
             localStorage.setItem('token', token);
-            localStorage.setItem('username', name);
+            localStorage.setItem('username', name);  // ✅ 이름 저장
             localStorage.setItem('userId', userId);
             localStorage.setItem('role', role);
 
-            alert('로그인 성공!');
-            // window.location.href = '/'; // 필요한 경우 이동
+            // 메인 페이지 이동 및 상태 반영 위해 새로고침
+            navigate('/', { replace: true });
+            window.location.reload();
         } catch (error) {
             console.error('❌ 로그인 실패:', error.response?.data || error.message);
             alert(error.response?.data?.message || '로그인에 실패했습니다.');
@@ -58,6 +63,7 @@ function Login() {
                         onChange={handleChange}
                         required
                     />
+
                     <div className="password-container">
                         <label htmlFor="password">비밀번호</label>
                         <a href="/forgot-password">비밀번호 찾기</a>
@@ -84,6 +90,7 @@ function Login() {
                     <button disabled>Google</button>
                     <button disabled>Github</button>
                 </div>
+
                 <p className="signup-link">
                     계정이 없으신가요? <a href="/signup">회원가입</a>
                 </p>