로그인/회원가입 UI 개선

Author: chaesunwoong

src/App.js

@@ -1,5 +1,5 @@
-import { HashRouter, Route, Routes } from "react-router-dom";
-import { useState, useEffect } from "react";
+import { HashRouter, Routes, Route, useLocation } from "react-router-dom";
+import { useEffect, useState } from "react";
 
 import Header from "./components/header/Header";
 import Footer from "./components/footer/Footer";
@@ -19,65 +19,30 @@ import MyCommunity from "./components/mypage/MyCommunity";
 import ScrollToTop from "./components/common/ScrollToTop";
 import CommunityWrite from "./components/community/CommunityWrite";
 
-
-function App() {
+function AppContent() {
+    const location = useLocation();
     const [isDark, setIsDark] = useState(false);
-
-    // 로그인 상태 관리 추가
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [nickname, setNickname] = useState('');
+    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+
+    const isSignupPage = location.pathname === "/signup";
 
-    // 로그인 상태 확인
     useEffect(() => {
         const token = localStorage.getItem('token');
         const storedUsername = localStorage.getItem('username');
-
-        console.log('🔍 App.js 로그인 상태 확인:', { token: !!token, username: storedUsername });
-
         if (token && storedUsername) {
             setIsLoggedIn(true);
             setNickname(storedUsername);
-            console.log('✅ App.js에서 로그인 상태로 설정됨');
         } else {
             setIsLoggedIn(false);
             setNickname('');
-            console.log('❌ App.js에서 비로그인 상태로 설정됨');
         }
     }, []);
 
-    // 로그인 상태 변경을 감지하기 위한 이벤트 리스너 (선택사항)
-    useEffect(() => {
-        const handleStorageChange = () => {
-            const token = localStorage.getItem('token');
-            const storedUsername = localStorage.getItem('username');
-
-            if (token && storedUsername) {
-                setIsLoggedIn(true);
-                setNickname(storedUsername);
-            } else {
-                setIsLoggedIn(false);
-                setNickname('');
-            }
-        };
-
-        // storage 이벤트 리스너 추가
-        window.addEventListener('storage', handleStorageChange);
-
-        // 클린업
-        return () => {
-            window.removeEventListener('storage', handleStorageChange);
-        };
-    }, []);
-
-    useEffect(() => {
-        document.body.classList.toggle("dark-mode", isDark);
-    }, [isDark]);
-
     useEffect(() => {
         const savedTheme = localStorage.getItem("theme");
-        if (savedTheme === "dark") {
-            setIsDark(true);
-        }
+        if (savedTheme === "dark") setIsDark(true);
     }, []);
 
     useEffect(() => {
@@ -86,29 +51,29 @@ function App() {
     }, [isDark]);
 
     return (
-        <HashRouter>
-            <Header
-                isDark={isDark}
-                setIsDark={setIsDark}
-                isLoggedIn={isLoggedIn}
-                nickname={nickname}
-            />
+        <>
+            {!isSignupPage && (
+                <Header
+                    isDark={isDark}
+                    setIsDark={setIsDark}
+                    isLoggedIn={isLoggedIn}
+                    nickname={nickname}
+                    onLoginModalOpen={() => setIsLoginModalOpen(true)}
+                />
+            )}
+
             <ScrollToTop />
+
             <Routes>
                 <Route path="/" element={<Main />} />
-                <Route path="/login" element={<Login />} />
                 <Route path="/signup" element={<SignUp />} />
-
                 <Route path="/ide" element={<IDE />} />
                 <Route path="/ide/:param" element={<IDE />} />
                 <Route path="/ide/:language/:filename" element={<IDE />} />
-
                 <Route path="/community" element={<Community />} />
-                <Route path="/community/write" element={<CommunityWrite />} />  {/* ✅ 추가 */}
-
+                <Route path="/community/write" element={<CommunityWrite />} />
                 <Route path="/broadcast" element={<Codecast />} />
                 <Route path="/startbroadcast" element={<StartCodecast />} />
-
                 <Route path="/mypage" element={<MyPageLayout nickname={nickname} />}>
                     <Route index element={<Mypage nickname={nickname} />} />
                     <Route path="project" element={<MyProject />} />
@@ -118,9 +83,25 @@ function App() {
                 </Route>
             </Routes>
 
-            <Footer />
-        </HashRouter>
+            {!isSignupPage && <Footer />}
+
+            {isLoginModalOpen && (
+                <Login
+                    onClose={() => setIsLoginModalOpen(false)}
+                    onLoginSuccess={() => {
+                        setIsLoggedIn(true);
+                        setNickname(localStorage.getItem('username') || '');
+                    }}
+                />
+            )}
+        </>
     );
 }
 
-export default App;
+export default function App() {
+    return (
+        <HashRouter>
+            <AppContent />
+        </HashRouter>
+    );
+}

src/components/header/Header.css

@@ -73,34 +73,43 @@
 }
 
 /* 로그인/회원가입 버튼 */
+/* 공통 버튼 스타일 */
 .btn {
-    padding: 6px 12px;
-    font-size: 14px;
-    border-radius: 4px;
+    display: inline-block;
+    padding: 0.5rem 1.2rem;
+    font-size: 1rem;
+    font-weight: 500;
+    border-radius: 6px;
     text-decoration: none;
     transition: all 0.2s ease;
+    cursor: pointer;
 }
 
+/* 테두리형 (로그인) */
 .btn-outline {
-    border: 1px solid #6a0dad;
-    color: #6a0dad;
+    color: #6a1b9a;
+    border: 1px solid #6a1b9a;
     background-color: transparent;
 }
 
 .btn-outline:hover {
-    background-color: #f5f0ff;
+    background-color: #f3e5f5;
 }
 
+/* 채움형 (회원가입) */
 .btn-filled {
-    background-color: #6a0dad;
+    background-color: #6a1b9a;
     color: white;
-    border: none;
+    border: 1px solid #6a1b9a;
 }
 
 .btn-filled:hover {
-    background-color: #5a0099;
+    background-color: #8e24aa;
+    border-color: #8e24aa;
 }
 
+
+
 .user-menu-container {
     position: relative; /* 드롭다운 위치 기준 */
 }
@@ -194,48 +203,45 @@
 
 .user-dropdown {
     position: absolute;
-    right: 30px;
+    right: 0;
     top: 100%;
+    margin-top: 8px;
     background-color: white;
-    border: 1px solid #ddd;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    border: 1px solid #ccc;
     border-radius: 6px;
-    z-index: 1001;
-    min-width: 100px;
-    width: 120px;             /* ✅ 자동 너비로 조정 */
-    padding: 4px 0;
+    min-width: 120px; /* ✅ 너비 고정 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* 버튼 너비가 줄었을 때 가운데 정렬 효과 보강 */
 }
 
 .user-dropdown button {
-    padding: 9px 1px;
+    padding: 0.5rem 0.75rem;
+    text-align: center;
     background: none;
     border: none;
-    font-size: 14px;
-    color: #333;
+    font-size: 1rem;
     cursor: pointer;
-    text-align: center;
-    width: 100%;             /* ✅ 여기 유지해도 드롭다운 너비만 좁히면 괜찮음 */
-    white-space: nowrap;     /* ✅ 줄바꿈 방지 */
-    font-weight: 600;
+    transition: background-color 0.2s ease;
 }
 
-
+/* ✅ Hover 효과 추가 */
 .user-dropdown button:hover {
-    background-color: #f5f0ff;
+    background-color: #f5f5f5;
 }
 
-
-
+/* 🌙 다크모드 대응 */
 .dark-mode .user-dropdown {
     background-color: #2a2a2a;
     border-color: #444;
 }
 
 .dark-mode .user-dropdown button {
-    color: #ccc;
-    font-weight: 600;
+    color: #f0f0f0;
 }
 
 .dark-mode .user-dropdown button:hover {
-    background-color: #333;
-}
+    background-color: #3a3a3a;
+}

src/components/header/Header.jsx

@@ -3,7 +3,7 @@ import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
 import { FaMoon, FaSun, FaUserCircle } from "react-icons/fa";
 import "./Header.css";
 
-const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
+const Header = ({ isDark, setIsDark, isLoggedIn, nickname, onLoginModalOpen }) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const navigate = useNavigate();
     const location = useLocation(); // ✅ 현재 경로 확인
@@ -20,7 +20,6 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
         window.location.reload(); // 상태 강제 반영
     };
 
-
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
     };
@@ -67,13 +66,9 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
                     </div>
                 ) : (
                     <>
-                        <Link
-                            to="/login"
-                            state={{ from: location.pathname }} // ✅ 현재 경로 전달
-                            className="btn btn-outline"
-                        >
+                        <button onClick={onLoginModalOpen} className="btn btn-outline">
                             로그인
-                        </Link>
+                        </button>
                         <Link to="/signup" className="btn btn-filled">
                             회원가입
                         </Link>