Merge remote-tracking branch 'origin/sunwoong'

Author: sojeongP0415

src/components/header/Header.css

@@ -24,6 +24,7 @@
     font-size: 20px;
     font-weight: 600;
     color: #333;
+    text-decoration: none;  /* ✅ 추가: 밑줄 제거 */
 }
 
 /* 오른쪽: 로그인/회원가입 */
@@ -92,14 +93,26 @@
     background-color: #5a0099;
 }
 
-/* 로그인 상태일 때 닉네임 표시 */
 .user-nickname {
-    font-size: 17px;
+    display: flex;
+    align-items: center;
     font-weight: 600;
-    color: #6a0dad;
-    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 1.05rem;
+}
+
+.user-icon {
+    margin-right: 8px;
+    vertical-align: middle;
+    color: #6a1b9a; /* 다크 퍼플 */
+}
+
+/* 🌙 다크 모드에서도 잘 보이게 */
+.dark-mode .user-icon {
+    color: #f0f0f0;
 }
 
+
 .theme-toggle-btn {
     background: none;
     border: none;
@@ -166,3 +179,49 @@
 .dark-mode .theme-toggle-btn {
     color: #b88eff;
 }
+
+.user-dropdown {
+    position: absolute;
+    right: 30px;
+    top: 100%;
+    background-color: white;
+    border: 1px solid #ddd;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    border-radius: 6px;
+    z-index: 1001;
+    min-width: 100px;
+    width: 120px;             /* ✅ 자동 너비로 조정 */
+    padding: 4px 0;
+}
+
+.user-dropdown button {
+    padding: 9px 1px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+    text-align: center;
+    width: 100%;             /* ✅ 여기 유지해도 드롭다운 너비만 좁히면 괜찮음 */
+    white-space: nowrap;     /* ✅ 줄바꿈 방지 */
+    font-weight: 600;
+}
+
+
+.user-dropdown button:hover {
+    background-color: #f5f0ff;
+}
+
+.dark-mode .user-dropdown {
+    background-color: #2a2a2a;
+    border-color: #444;
+}
+
+.dark-mode .user-dropdown button {
+    color: #ccc;
+    font-weight: 600;
+}
+
+.dark-mode .user-dropdown button:hover {
+    background-color: #333;
+}

src/components/header/Header.jsx

@@ -1,31 +1,37 @@
-import React from "react";
-import { NavLink, Link } from "react-router-dom";
+import React, { useState } from "react";
+import { NavLink, Link, useNavigate } from "react-router-dom";
 import { Link as ScrollLink } from "react-scroll";
-import { FaMoon, FaSun } from "react-icons/fa";
+import { FaMoon, FaSun, FaUserCircle } from "react-icons/fa"; // ✅ FaUserCircle 가져옴
 import "./Header.css";
 
 const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const navigate = useNavigate();
+
     const handleLogout = () => {
         localStorage.clear();
-        window.location.reload(); // 새로고침으로 상태 초기화
+        navigate("/");
+        window.location.reload();
+    };
+
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+
+    const goToMyPage = () => {
+        navigate("/mypage");
+        setIsMenuOpen(false);
     };
 
     return (
         <header className="custom-header">
             <div className="header-left">
-                <span className="site-name">Zivorp</span>
+                <Link to="/" className="site-name">Zivorp</Link>
             </div>
 
             <nav className="header-nav">
                 <NavLink to="/" end>홈</NavLink>
-                <ScrollLink
-                    to="feature"
-                    smooth
-                    duration={500}
-                    offset={-64}
-                    spy={true}
-                    activeClass="active"
-                ></ScrollLink>
+                <ScrollLink to="feature" smooth duration={500} offset={-64} spy={true} activeClass="active" />
                 <NavLink to="/ide">IDE</NavLink>
                 <NavLink to="/community">커뮤니티</NavLink>
                 <NavLink to="/broadcast">코드 방송</NavLink>
@@ -41,10 +47,21 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
                 </button>
 
                 {isLoggedIn ? (
-                    <>
-                        <span className="user-nickname">👤 {nickname} 님</span>
-                        <button onClick={handleLogout} className="btn btn-outline">로그아웃</button>
-                    </>
+                    <div className="user-menu-container">
+                        <span className="user-nickname" onClick={toggleMenu}>
+                            <FaUserCircle
+                                size={24}
+                                className={"user-icon"}
+                            />
+                            {nickname} 님 ▾
+                        </span>
+                        {isMenuOpen && (
+                            <div className="user-dropdown">
+                                <button onClick={goToMyPage}>마이페이지</button>
+                                <button onClick={handleLogout}>로그아웃</button>
+                            </div>
+                        )}
+                    </div>
                 ) : (
                     <>
                         <Link to="/login" className="btn btn-outline">로그인</Link>

src/components/login/Login.css

@@ -40,7 +40,7 @@ body {
 .login-form {
     display: flex;
     flex-direction: column;
-    gap: 1.2rem;
+    gap: 0.8rem;
 }
 
 .login-form label {
@@ -204,3 +204,22 @@ small {
     border: 1px solid #555;
     color: #aaa;
 }
+.forgot-password-link {
+    text-align: right;
+    margin-top: 0.2rem;
+}
+
+.forgot-password-link a {
+    color: #6a1b9a;
+    font-size: 1rem;
+    text-decoration: none;
+}
+
+.forgot-password-link a:hover {
+    text-decoration: underline;
+}
+
+/* 🌙 다크 모드 링크 색상 */
+.dark-mode .forgot-password-link a {
+    color: #b88eff;
+}

src/components/login/Login.jsx

@@ -3,6 +3,8 @@ import axios from 'axios';
 import config from '../../config';
 import './Login.css';
 import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
 
 function Login() {
     const [formData, setFormData] = useState({
@@ -66,7 +68,6 @@ function Login() {
 
                     <div className="password-container">
                         <label htmlFor="password">비밀번호</label>
-                        <a href="/forgot-password">비밀번호 찾기</a>
                     </div>
                     <input
                         id="password"
@@ -76,6 +77,9 @@ function Login() {
                         onChange={handleChange}
                         required
                     />
+                    <div className="forgot-password-link">
+                        <a href="#" onClick={(e) => e.preventDefault()}>비밀번호 찾기</a>
+                    </div>
 
                     <div className="remember-me">
                         <input type="checkbox" id="remember" />
@@ -92,8 +96,9 @@ function Login() {
                 </div>
 
                 <p className="signup-link">
-                    계정이 없으신가요? <a href="/signup">회원가입</a>
+                    계정이 없으신가요? <Link to="/signup">회원가입</Link>
                 </p>
+
             </div>
         </div>
     );