Skip to content

Commit 4b6ef14

Browse files
Danto7632Danto7632
committed
마이페이지, 로그아웃 ui 개선
1 parent 15b8994 commit 4b6ef14

File tree

2 files changed

+153
-20
lines changed

2 files changed

+153
-20
lines changed

‎src/components/header/Header.css‎

Lines changed: 105 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -203,29 +203,25 @@
203203
margin-top: 8px;
204204
background-color: var(--surface-popover);
205205
border: 1px solid var(--border-subtle);
206-
border-radius: 6px;
207-
min-width: 120px;
206+
border-radius: 12px;
207+
min-width: 220px;
208208
box-shadow: 0 12px 24px rgba(24, 20, 56, 0.12);
209209
z-index: 100;
210210
display: flex;
211211
flex-direction: column;
212-
align-items: center;
212+
align-items: stretch;
213+
gap: 12px;
214+
padding: 16px;
213215
color: var(--text-primary);
214216
}
215217

216218
.user-dropdown button {
217-
padding: 0.5rem 0.75rem;
218-
text-align: center;
219-
background: none;
220219
border: none;
221-
font-size: 1rem;
222-
cursor: pointer;
223-
transition: background-color 0.2s ease, color 0.2s ease;
220+
background: none;
224221
color: inherit;
225-
}
226-
227-
.user-dropdown button:hover {
228-
background-color: var(--surface-hover);
222+
font: inherit;
223+
padding: 0;
224+
cursor: pointer;
229225
}
230226

231227
.dark-mode .user-dropdown {
@@ -237,8 +233,102 @@
237233
color: var(--text-primary);
238234
}
239235

240-
.dark-mode .user-dropdown button:hover {
241-
background-color: var(--surface-hover);
236+
.user-dropdown__header {
237+
display: flex;
238+
align-items: center;
239+
gap: 12px;
240+
padding-bottom: 12px;
241+
border-bottom: 1px solid var(--border-subtle);
242+
}
243+
244+
.user-dropdown__avatar {
245+
color: var(--accent-primary);
246+
}
247+
248+
.user-dropdown__meta {
249+
display: flex;
250+
flex-direction: column;
251+
gap: 4px;
252+
min-width: 0;
253+
}
254+
255+
.user-dropdown__name {
256+
font-size: 15px;
257+
font-weight: 700;
258+
color: var(--text-primary);
259+
}
260+
261+
.user-dropdown__handle {
262+
font-size: 12px;
263+
color: var(--text-muted);
264+
}
265+
266+
.user-dropdown__actions {
267+
display: flex;
268+
flex-direction: column;
269+
gap: 8px;
270+
}
271+
272+
.user-dropdown__action {
273+
width: 100%;
274+
display: inline-flex;
275+
align-items: center;
276+
justify-content: flex-start;
277+
gap: 10px;
278+
padding: 10px 12px;
279+
border-radius: 10px;
280+
background-color: rgba(139, 112, 255, 0.08);
281+
color: var(--text-primary);
282+
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
283+
}
284+
285+
.user-dropdown__action:hover {
286+
background-color: rgba(139, 112, 255, 0.16);
287+
transform: translateY(-1px);
288+
box-shadow: 0 12px 20px -18px rgba(139, 112, 255, 0.6);
289+
}
290+
291+
.user-dropdown__action--logout {
292+
background-color: rgba(239, 68, 68, 0.1);
293+
color: #e53935;
294+
}
295+
296+
.user-dropdown__action--logout:hover {
297+
background-color: rgba(239, 68, 68, 0.18);
298+
box-shadow: 0 12px 20px -18px rgba(239, 68, 68, 0.5);
299+
}
300+
301+
.user-dropdown__icon {
302+
display: flex;
303+
align-items: center;
304+
justify-content: center;
305+
font-size: 16px;
306+
color: var(--accent-primary);
307+
}
308+
309+
.user-dropdown__action--logout .user-dropdown__icon {
310+
color: #e53935;
311+
}
312+
313+
.dark-mode .user-dropdown__handle {
314+
color: var(--text-muted);
315+
}
316+
317+
.dark-mode .user-dropdown__action {
318+
background-color: rgba(139, 112, 255, 0.14);
319+
}
320+
321+
.dark-mode .user-dropdown__action:hover {
322+
background-color: rgba(139, 112, 255, 0.24);
323+
}
324+
325+
.dark-mode .user-dropdown__action--logout {
326+
background-color: rgba(239, 68, 68, 0.2);
327+
color: #f87171;
328+
}
329+
330+
.dark-mode .user-dropdown__action--logout .user-dropdown__icon {
331+
color: #f87171;
242332
}
243333

244334
/* 알림 관련 스타일 */

‎src/components/header/Header.jsx‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useState, useEffect, useCallback } from "react";
1+
import React, { useState, useEffect, useCallback, useMemo } from "react";
22
import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
3-
import { FaMoon, FaSun, FaUserCircle, FaBell, FaArrowRight } from "react-icons/fa";
3+
import { FaMoon, FaSun, FaUserCircle, FaBell, FaArrowRight, FaRegAddressCard, FaSignOutAlt } from "react-icons/fa";
44
import "./Header.css";
55
import logoImage from '../../assets/logo3.png';
66
import config from '../../config';
@@ -17,6 +17,24 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname, onLoginModalOpen }) =
1717
const navigate = useNavigate();
1818
const location = useLocation();
1919

20+
const storedHandle = useMemo(() => {
21+
if (typeof window === "undefined") {
22+
return "";
23+
}
24+
try {
25+
return window.localStorage.getItem("username") || "";
26+
} catch (err) {
27+
console.error("Failed to read username from storage", err);
28+
return "";
29+
}
30+
}, []);
31+
32+
const normalizedHandle = storedHandle.replace(/^@/, "");
33+
const displayNickname = nickname || normalizedHandle || "사용자";
34+
const displayHandle = (normalizedHandle || nickname)
35+
? `@${(normalizedHandle || nickname).replace(/^@/, "")}`
36+
: "";
37+
2038
const fetchNotifications = useCallback(async () => {
2139
if (!isLoggedIn) return;
2240
try {
@@ -287,9 +305,34 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname, onLoginModalOpen }) =
287305
{nickname} 님 ▾
288306
</span>
289307
{isUserMenuOpen && (
290-
<div className="user-dropdown">
291-
<button onClick={goToMyPage}>마이페이지</button>
292-
<button onClick={handleLogout}>로그아웃</button>
308+
<div className="user-dropdown" role="menu">
309+
<div className="user-dropdown__header">
310+
<FaUserCircle size={40} className="user-dropdown__avatar" aria-hidden="true" />
311+
<div className="user-dropdown__meta">
312+
<span className="user-dropdown__name">{displayNickname}</span>
313+
{displayHandle && (
314+
<span className="user-dropdown__handle">{displayHandle}</span>
315+
)}
316+
</div>
317+
</div>
318+
<div className="user-dropdown__actions">
319+
<button
320+
type="button"
321+
className="user-dropdown__action"
322+
onClick={goToMyPage}
323+
>
324+
<span className="user-dropdown__icon" aria-hidden="true"><FaRegAddressCard /></span>
325+
<span>마이페이지</span>
326+
</button>
327+
<button
328+
type="button"
329+
className="user-dropdown__action user-dropdown__action--logout"
330+
onClick={handleLogout}
331+
>
332+
<span className="user-dropdown__icon" aria-hidden="true"><FaSignOutAlt /></span>
333+
<span>로그아웃</span>
334+
</button>
335+
</div>
293336
</div>
294337
)}
295338
</div>

0 commit comments

Comments
 (0)