Skip to content

Style : 로그인 페이지, 헤더 변경 #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hyeonda02 merged 1 commit into from
Nov 27, 2025
Merged

Style : 로그인 페이지, 헤더 변경 #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/assets/login/step1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/login/step2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/login/step3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 45 additions & 32 deletions src/pages/AdminDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,41 +186,54 @@ export default function AdminDashboard() {
------------------------------- */
return (
<div className="min-h-screen bg-[#F9F7F4] flex flex-col">
{/* HEADER */}
<header className="bg-[#E8E4D9] border-b border-[#D5D0C4] sticky top-0 z-10 shadow-sm">
<div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<div className="space-y-1">
<h1 className="text-xl font-semibold text-[#67594C]">
EvenTee <span className="text-sm text-[#FFAB5D]">관리자</span>
</h1>
<header className="bg-white/80 backdrop-blur-md border-b border-[#E6E0D8] sticky top-0 z-10 shadow-sm">
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">

{/* 왼쪽: 로고 + 관리자 타이틀 */}
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<img
src="/ticket.png"
alt="Eventee Logo"
className="w-8 h-8 rounded-xl shadow-sm"
/>
<span className="font-semibold text-[14px] tracking-tight text-[#5A4A3B]">
Eventee 관리자
</span>
</div>

<h2 className="text-2xl font-bold text-[#67594C] leading-tight">
{event.title}
</h2>
{/* 이벤트 정보 */}
<div className="flex flex-col ml-4">
<h2 className="text-[20px] font-bold text-[#67594C] leading-none">
{event.title}
</h2>
<p className="text-xs text-gray-600 leading-snug">
{format(event.startDate, "yyyy.MM.dd")} ~ {format(event.endDate, "yyyy.MM.dd")}
</p>
</div>
</div>

<p className="text-sm text-gray-600">
{format(event.startDate, "yyyy.MM.dd")} ~{" "}
{format(event.endDate, "yyyy.MM.dd")}
</p>
</div>
{/* 오른쪽: 돌아가기 버튼 */}
<Button
variant="outline"
onClick={() =>
navigate("/event-main", {
state: {
eventId: event.id,
eventTitle: event.title,
eventCode: event.inviteCode,
nickname: user.nickname,
},
})
}
className="border-[#D5D0C4] text-[#67594C] hover:bg-[#F3EFE9]"
>
이벤트 화면으로 돌아가기
</Button>

</div>
</header>

<Button
variant="outline"
onClick={() =>
navigate("/event-main", {
state: {
eventId: event.id,
eventTitle: event.title,
eventCode: event.inviteCode,
nickname: user.nickname,
},
})
}
>
이벤트 화면으로 돌아가기
</Button>
</div>
</header>

{/* MAIN */}
<main className="flex-1 max-w-7xl mx-auto w-full px-6 py-8">
Expand Down
54 changes: 31 additions & 23 deletions src/pages/EventMainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -767,35 +767,43 @@ useEffect(() => {

return (
<div className="h-screen flex flex-col overflow-hidden">
{/* 헤더 */}
<div className="bg-white border-b px-8 py-6 flex items-start justify-between sticky top-0 z-10">
{/* 왼쪽: 제목 + 설명 */}
<div className="flex flex-col">
{/* 로고 + 이벤트 타이틀 */}
<div className="flex items-center gap-4 mb-1">
<h1 className="text-[30px] font-bold leading-none">
Event<span style={{ color: "#67594C" }}>ee</span>
</h1>

<div className="flex flex-col">
<p className="text-[20px] font-bold leading-none text-[#8C7A67]">

{headerTitleText}
{eventPeriod && (
<span className="ml-2 text-[14px] text-gray-500 font-normal">
({eventPeriod})
</span>
)}
</p>
</div>
</div>
{/* 헤더 */}
<div className="bg-white/70 backdrop-blur-md border-b border-[#E6E0D8] px-8 py-4 flex items-center justify-between sticky top-0 z-20">

{/* 왼쪽: 로고 + 이벤트 제목 */}
<div className="flex items-center gap-4">

{/* 공통 로고 */}
<div className="flex items-center gap-2">
<img
src="/ticket.png"
alt="Eventee Logo"
className="w-8 h-8 rounded-xl shadow-sm"
/>
<span className="font-semibold text-sm tracking-tight text-[#5A4A3B]">
Eventee
</span>
</div>

{/* 이벤트 타이틀 + 기간 */}
<div className="flex flex-col ml-4">
<p className="text-[20px] font-bold text-[#8C7A67] leading-none">
{headerTitleText}
{eventPeriod && (
<span className="ml-2 text-[14px] text-gray-500 font-normal">
({eventPeriod})
</span>
)}
</p>

{headerSubtitleText && (
<p className="text-sm text-gray-600 leading-snug max-w-[780px] mt-1">
<p className="text-xs text-gray-600 leading-snug">
{headerSubtitleText}
</p>
)}
</div>
</div>


{/* 오른쪽: 운영자 버튼 + 프로필 */}
<div className="flex items-center gap-4">
Expand Down
23 changes: 16 additions & 7 deletions src/pages/EventPasswordPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,23 @@ export default function EventPasswordPage() {
return (
<div className="min-h-screen bg-[#FAF9F6] flex items-center justify-center px-4 relative">

{/* 로고 */}
<div className="absolute left-10 top-10">
<h1 className="text-[30px] font-bold tracking-tight">
Even<span className="text-[#67594C]">Tee</span>
</h1>
</div>
{/* HEADER (LoginPage 동일 디자인) */}
<header className="fixed top-0 left-0 right-0 z-40 bg-white/70 backdrop-blur-md border-b border-[#E6E0D8]">
<div className="max-w-5xl mx-auto flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-2">
<img
src="/ticket.png"
alt="Eventee Logo"
className="w-8 h-8 rounded-xl shadow-sm"
/>
<span className="font-semibold text-sm tracking-tight text-[#5A4A3B]">
Eventee
</span>
</div>
</div>
</header>

<div className="w-full max-w-md pt-16">
<div className="w-full max-w-md pt-28">

{/* 헤더 */}
<div className="text-center mb-10">
Expand Down
25 changes: 18 additions & 7 deletions src/pages/JoinEventPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,24 @@ export default function JoinEventPage() {
return (
<div className="min-h-screen bg-[#FAF9F6] flex items-center justify-center px-4 relative">

{/* 로고 */}
<div className="absolute left-10 top-10">
<h1 className="text-[30px] font-bold tracking-tight">
Even<span className="text-[#67594C]">Tee</span>
</h1>
</div>
{/* ===== 공통 헤더 (로그인 / 패스워드 / 닉네임 입력과 동일) ===== */}
<header className="fixed top-0 left-0 right-0 z-40 bg-white/70 backdrop-blur-md border-b border-[#E6E0D8]">
<div className="max-w-5xl mx-auto flex items-center px-4 py-3">
<div className="flex items-center gap-2">
<img
src="/ticket.png"
alt="Eventee Logo"
className="w-8 h-8 rounded-xl shadow-sm"
/>
<span className="font-semibold text-sm tracking-tight text-[#5A4A3B]">
Eventee
</span>
</div>
</div>
</header>
{/* ========================================================== */}

<div className="w-full max-w-md pt-16">
<div className="w-full max-w-md pt-28">

{/* 타이틀 */}
<div className="text-center mb-12">
Expand Down Expand Up @@ -104,6 +114,7 @@ export default function JoinEventPage() {
className="mt-2 uppercase h-[56px] text-center text-[20px] tracking-[0.2em]"
maxLength={6}
/>

{error && (
<p className="text-red-500 text-sm mt-2">{error}</p>
)}
Expand Down
Loading