Skip to content

Commit d334e73

Browse files
peterabcdpeterabcd
authored
Polish DESIGN.md visual depth (#58)
* Polish DESIGN.md visual depth * Fix duplicate session edit link
1 parent 817bc3f commit d334e73

7 files changed

Lines changed: 224 additions & 67 deletions

File tree

‎app/login/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { redirect } from "next/navigation";
33
import { auth, signIn } from "@/lib/auth";
44
import { Button } from "@/components/ui/button";
55
import {
6-
PageHeader,
6+
HeroBand,
77
PageShell,
88
UtilityCard,
99
} from "@/components/layout/AppChrome";
@@ -44,9 +44,8 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
4444
}
4545

4646
return (
47-
<PageShell width="narrow" surface="parchment">
48-
<PageHeader
49-
align="center"
47+
<>
48+
<HeroBand
5049
eyebrow="SNU Google only"
5150
title="뮤런"
5251
description={
@@ -57,6 +56,8 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
5756
}
5857
/>
5958

59+
<PageShell width="narrow" surface="parchment">
60+
6061
<UtilityCard className="flex flex-col gap-5">
6162
{errorMessage ? (
6263
<div
@@ -77,6 +78,7 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
7778
<p className="mt-6 text-center font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
7879
첫 로그인 후 관리자 승인이 필요합니다.
7980
</p>
80-
</PageShell>
81+
</PageShell>
82+
</>
8183
);
8284
}

‎app/page.tsx‎

Lines changed: 67 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { redirect } from "next/navigation";
44
import { auth, signOut } from "@/lib/auth";
55
import { Button } from "@/components/ui/button";
66
import {
7-
PageHeader,
7+
HeroBand,
88
PageShell,
99
UtilityCard,
1010
} from "@/components/layout/AppChrome";
@@ -22,25 +22,60 @@ export default async function HomePage() {
2222
}
2323

2424
return (
25-
<PageShell width="narrow" surface="parchment">
26-
<PageHeader
27-
align="center"
25+
<>
26+
<HeroBand
2827
eyebrow="Animu Running Archive"
2928
title="뮤런"
3029
description={<>안녕하세요, {session.user.name}. 오늘의 러닝 기록을 남겨요.</>}
31-
/>
32-
33-
<UtilityCard className="flex flex-col gap-3">
34-
<Button asChild size="lg" className="w-full">
35-
<Link href="/sessions/new">새 세션 만들기</Link>
36-
</Button>
37-
<Button asChild variant="outline" size="lg" className="w-full">
38-
<Link href="/sessions">전체 아카이브</Link>
39-
</Button>
40-
<Button asChild variant="secondary" size="lg" className="w-full">
41-
<Link href="/me">내 기록</Link>
42-
</Button>
43-
</UtilityCard>
30+
actions={
31+
<>
32+
<Button asChild size="lg">
33+
<Link href="/sessions/new">새 세션 만들기</Link>
34+
</Button>
35+
<Button asChild variant="outline" size="lg" className="border-white bg-transparent text-white">
36+
<Link href="/sessions">아카이브 보기</Link>
37+
</Button>
38+
</>
39+
}
40+
>
41+
<div className="grid gap-px overflow-hidden rounded-[18px] border border-white/10 bg-white/10 sm:grid-cols-3">
42+
<HeroStat label="Surface" value="Parchment" />
43+
<HeroStat label="Accent" value="Action Blue" />
44+
<HeroStat label="Rhythm" value="Run log" />
45+
</div>
46+
</HeroBand>
47+
48+
<PageShell width="content" surface="parchment">
49+
50+
<div className="grid gap-4 md:grid-cols-3">
51+
<UtilityCard className="flex flex-col gap-4">
52+
<span className="font-display text-[28px] font-semibold leading-[1.14] tracking-[0.196px]">Create</span>
53+
<p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
54+
오늘의 세션을 만들고 사진과 기록을 이어 붙입니다.
55+
</p>
56+
<Button asChild className="mt-auto w-full">
57+
<Link href="/sessions/new">새 세션</Link>
58+
</Button>
59+
</UtilityCard>
60+
<UtilityCard className="flex flex-col gap-4">
61+
<span className="font-display text-[28px] font-semibold leading-[1.14] tracking-[0.196px]">Archive</span>
62+
<p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
63+
날짜, 장소, 멤버로 지난 러닝의 맥락을 다시 찾습니다.
64+
</p>
65+
<Button asChild variant="outline" className="mt-auto w-full">
66+
<Link href="/sessions">전체 아카이브</Link>
67+
</Button>
68+
</UtilityCard>
69+
<UtilityCard className="flex flex-col gap-4">
70+
<span className="font-display text-[28px] font-semibold leading-[1.14] tracking-[0.196px]">Me</span>
71+
<p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
72+
누적 거리와 페이스 흐름을 한 화면에서 확인합니다.
73+
</p>
74+
<Button asChild variant="secondary" className="mt-auto w-full">
75+
<Link href="/me">내 기록</Link>
76+
</Button>
77+
</UtilityCard>
78+
</div>
4479

4580
<div className="mt-8 flex items-center justify-center gap-5 font-text text-sm leading-[1.29] tracking-[-0.224px]">
4681
{session.user.role === "ADMIN" && (
@@ -54,6 +89,20 @@ export default async function HomePage() {
5489
</Button>
5590
</form>
5691
</div>
57-
</PageShell>
92+
</PageShell>
93+
</>
94+
);
95+
}
96+
97+
function HeroStat({ label, value }: { label: string; value: string }) {
98+
return (
99+
<div className="bg-white/[0.03] p-5">
100+
<span className="block font-text text-xs uppercase leading-none tracking-[-0.12px] text-apple-body-muted">
101+
{label}
102+
</span>
103+
<span className="mt-2 block font-display text-[21px] font-semibold leading-[1.19] tracking-[0.231px] text-white">
104+
{value}
105+
</span>
106+
</div>
58107
);
59108
}

‎app/pending/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { requireUser } from "@/lib/guard";
44
import { signOut } from "@/lib/auth";
55
import { Button } from "@/components/ui/button";
66
import {
7-
PageHeader,
7+
HeroBand,
88
PageShell,
99
UtilityCard,
1010
} from "@/components/layout/AppChrome";
@@ -19,9 +19,8 @@ export default async function PendingPage() {
1919
}
2020

2121
return (
22-
<PageShell width="narrow" surface="parchment">
23-
<PageHeader
24-
align="center"
22+
<>
23+
<HeroBand
2524
eyebrow="Approval required"
2625
title="승인 대기 중"
2726
description={
@@ -32,6 +31,8 @@ export default async function PendingPage() {
3231
}
3332
/>
3433

34+
<PageShell width="narrow" surface="parchment">
35+
3536
<UtilityCard className="flex flex-col gap-5 text-center">
3637
<p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
3738
단톡방에 운영진에게 가입 요청을 보냈다고 알려주세요.
@@ -42,6 +43,7 @@ export default async function PendingPage() {
4243
</Button>
4344
</form>
4445
</UtilityCard>
45-
</PageShell>
46+
</PageShell>
47+
</>
4648
);
4749
}

‎app/runners/_components/MemberView.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import type { MemberStats } from "@/lib/members";
99
import {
1010
BackLink,
11-
PageHeader,
11+
HeroBand,
1212
PageShell,
1313
SectionLabel,
1414
SubNav,
@@ -29,25 +29,26 @@ export function MemberView({ stats, isSelf }: Props) {
2929
<SubNav title={isSelf ? "내 기록" : "러너 기록"}>
3030
<BackLink href="/sessions">아카이브</BackLink>
3131
</SubNav>
32+
<HeroBand
33+
eyebrow={
34+
<>
35+
{isSelf ? "My running" : "Runner"} · 가입 {formatDate(stats.joinedAt)}
36+
</>
37+
}
38+
title={
39+
<>
40+
{stats.name}
41+
{stats.role === "ADMIN" && (
42+
<span className="ml-3 align-middle rounded-full border border-white/20 px-3 py-1 font-text text-xs font-normal leading-none tracking-[-0.12px] text-white/80">
43+
ADMIN
44+
</span>
45+
)}
46+
</>
47+
}
48+
description="거리, 페이스, 최근 참여 기록을 한 화면에서 확인합니다."
49+
/>
50+
3251
<PageShell width="content" surface="parchment">
33-
<PageHeader
34-
eyebrow={
35-
<>
36-
{isSelf ? "My running" : "Runner"} · 가입 {formatDate(stats.joinedAt)}
37-
</>
38-
}
39-
title={
40-
<>
41-
{stats.name}
42-
{stats.role === "ADMIN" && (
43-
<span className="ml-3 align-middle rounded-full bg-apple-canvas px-3 py-1 font-text text-xs font-normal leading-none tracking-[-0.12px] text-apple-primary">
44-
ADMIN
45-
</span>
46-
)}
47-
</>
48-
}
49-
description="거리, 페이스, 최근 참여 기록을 한 화면에서 확인합니다."
50-
/>
5152

5253
<section className="mb-8 grid gap-4 sm:grid-cols-3">
5354
<Kpi

‎app/sessions/[id]/page.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
77
import { requireApproved } from "@/lib/guard";
88
import {
99
BackLink,
10-
PageHeader,
10+
HeroBand,
1111
PageShell,
1212
SectionLabel,
1313
SubNav,
@@ -98,19 +98,27 @@ export default async function SessionDetailPage({ params }: PageProps) {
9898
<>
9999
<SubNav title="세션">
100100
<BackLink href="/sessions">아카이브</BackLink>
101-
{isHostOrAdmin && (
102-
<Button asChild variant="outline" size="sm">
103-
<Link href={`/sessions/${sessionRow.id}/edit`}>세션 수정</Link>
104-
</Button>
105-
)}
106101
</SubNav>
107102

103+
<HeroBand
104+
eyebrow={formatDateHeader(sessionRow.date)}
105+
title={sessionRow.location}
106+
description={metaLine}
107+
actions={
108+
isHostOrAdmin ? (
109+
<Button
110+
asChild
111+
variant="outline"
112+
size="lg"
113+
className="border-white bg-transparent text-white"
114+
>
115+
<Link href={`/sessions/${sessionRow.id}/edit`}>세션 수정</Link>
116+
</Button>
117+
) : null
118+
}
119+
/>
120+
108121
<PageShell width="content" surface="parchment">
109-
<PageHeader
110-
eyebrow={formatDateHeader(sessionRow.date)}
111-
title={sessionRow.location}
112-
description={metaLine}
113-
/>
114122

115123
<PhotoSection
116124
sessionId={sessionRow.id}

‎app/sessions/page.tsx‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
type SessionArchiveSearchParams,
1010
} from "@/lib/session-filters";
1111
import {
12-
PageHeader,
12+
HeroBand,
1313
PageShell,
1414
SubNav,
1515
UtilityCard,
@@ -51,12 +51,20 @@ export default async function SessionsArchivePage({ searchParams }: PageProps) {
5151
</Button>
5252
</SubNav>
5353

54+
<HeroBand
55+
eyebrow="Sessions"
56+
title="러닝 아카이브"
57+
description="날짜, 장소, 참여 멤버로 세션을 찾아보세요."
58+
actions={
59+
<Button asChild size="lg">
60+
<Link href="/sessions/new">새 세션 만들기</Link>
61+
</Button>
62+
}
63+
>
64+
<ArchiveSummary />
65+
</HeroBand>
66+
5467
<PageShell width="content" surface="parchment">
55-
<PageHeader
56-
eyebrow="Sessions"
57-
title="러닝 아카이브"
58-
description="날짜, 장소, 참여 멤버로 애니뮤 러닝 세션을 찾아보세요."
59-
/>
6068

6169
<FilterBar
6270
q={filters.q ?? ""}
@@ -113,3 +121,26 @@ function EmptyFilterResult() {
113121
</UtilityCard>
114122
);
115123
}
124+
125+
function ArchiveSummary() {
126+
return (
127+
<div className="grid gap-px overflow-hidden rounded-[18px] border border-white/10 bg-white/10 sm:grid-cols-3">
128+
<SummaryCell label="Surface" value="Dark tile" />
129+
<SummaryCell label="Flow" value="Filter first" />
130+
<SummaryCell label="Focus" value="Action Blue" />
131+
</div>
132+
);
133+
}
134+
135+
function SummaryCell({ label, value }: { label: string; value: string }) {
136+
return (
137+
<div className="bg-white/[0.03] p-5">
138+
<span className="block font-text text-xs uppercase leading-none tracking-[-0.12px] text-apple-body-muted">
139+
{label}
140+
</span>
141+
<span className="mt-2 block font-display text-[21px] font-semibold leading-[1.19] tracking-[0.231px] text-white">
142+
{value}
143+
</span>
144+
</div>
145+
);
146+
}

0 commit comments

Comments
 (0)