Skip to content

Commit 14d688e

Browse files
rammmaarammmaa
committed
refactor: improve awards page layout and use PageHeader
compact table, remove month column, sort by latest, table-fixed columns
1 parent 6106bbb commit 14d688e

File tree

1 file changed

+72
-61
lines changed

1 file changed

+72
-61
lines changed

‎app/(main)/awards/page.tsx‎

Lines changed: 72 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,82 @@
11
import { getAwards } from "@/lib/data";
2+
import { PageHeader } from "@/components/layout/page-header";
23

34
export default async function AwardsPage() {
4-
const awards = await getAwards();
5+
const { data: awards, fetchedAt } = await getAwards();
6+
7+
const grouped = awards.reduce<Record<string, typeof awards>>((acc, award) => {
8+
const year = award.연도;
9+
if (!acc[year]) acc[year] = [];
10+
acc[year].push(award);
11+
return acc;
12+
}, {});
13+
14+
const sortedYears = Object.keys(grouped).sort((a, b) => Number(b) - Number(a));
515

616
return (
7-
<section className="py-32 px-6 md:px-12 bg-surface" id="awards">
8-
<div className="mb-16 flex flex-col md:flex-row justify-between md:items-end gap-4">
9-
<div>
10-
<span className="font-label text-primary tracking-widest uppercase text-xs mb-4 block">
11-
02 // VERIFIED STATS
12-
</span>
13-
<h2 className="font-headline text-4xl md:text-6xl font-bold tracking-tighter">
14-
Achievement Log
15-
</h2>
16-
</div>
17-
<div className="text-right hidden md:block">
18-
<p className="font-label text-xs text-outline tracking-widest">
19-
DATABASE // 2020–2026
20-
</p>
21-
</div>
22-
</div>
17+
<section className="bg-surface" id="awards">
18+
<PageHeader
19+
label="02 // VERIFIED STATS"
20+
title="Awards"
21+
labelColor="tertiary"
22+
fetchedAt={fetchedAt}
23+
/>
24+
<div className="px-6 md:px-12 pb-16">
25+
{sortedYears.map((year) => (
26+
<div key={year} className="mb-8">
27+
<h3 className="font-headline text-4xl md:text-5xl font-extrabold text-primary/10 mb-2">
28+
{year}
29+
</h3>
30+
<div className="overflow-x-auto">
31+
<table className="w-full text-left border-collapse table-fixed">
32+
<colgroup>
33+
<col className="w-[25%]" />
34+
<col className="w-[15%]" />
35+
<col className="w-[30%]" />
36+
<col className="w-[30%]" />
37+
</colgroup>
38+
<thead>
39+
<tr className="border-b border-outline-variant/30">
40+
<th className="py-2 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
41+
Event
42+
</th>
43+
<th className="py-2 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
44+
Award
45+
</th>
46+
<th className="py-2 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
47+
Name
48+
</th>
49+
<th className="py-2 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
50+
Team
51+
</th>
52+
</tr>
53+
</thead>
54+
<tbody>
55+
{grouped[year]
56+
.sort((a, b) => Number(b.월) - Number(a.월))
57+
.map((award) => (
58+
<tr
59+
key={award.순번}
60+
className="border-b border-outline-variant/10 hover:bg-surface-container-low transition-colors"
61+
>
62+
<td className="py-2">{award.내용}</td>
63+
<td className="py-2">{award.상명}</td>
64+
<td className="py-2">{award.이름}</td>
65+
<td className="py-2 text-outline">{award.팀명}</td>
66+
</tr>
67+
))}
68+
</tbody>
69+
</table>
70+
</div>
71+
</div>
72+
))}
2373

24-
<div className="overflow-x-auto">
25-
<table className="w-full text-left border-collapse">
26-
<thead>
27-
<tr className="border-b border-outline-variant/30">
28-
<th className="py-6 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
29-
Year
30-
</th>
31-
<th className="py-6 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
32-
Event
33-
</th>
34-
<th className="py-6 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
35-
Award
36-
</th>
37-
<th className="py-6 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
38-
Name
39-
</th>
40-
<th className="py-6 font-label text-[10px] tracking-[0.2em] uppercase text-outline">
41-
Team
42-
</th>
43-
</tr>
44-
</thead>
45-
<tbody>
46-
{awards.map((award) => (
47-
<tr
48-
key={award.순번}
49-
className="border-b border-outline-variant/10 hover:bg-surface-container-low transition-colors"
50-
>
51-
<td className="py-8 text-primary font-bold">
52-
{award.연도}.{award.월}
53-
</td>
54-
<td className="py-8">{award.내용}</td>
55-
<td className="py-8">{award.상명}</td>
56-
<td className="py-8">{award.이름}</td>
57-
<td className="py-8 text-outline">{award.팀명}</td>
58-
</tr>
59-
))}
60-
</tbody>
61-
</table>
74+
{awards.length === 0 && (
75+
<p className="mt-14 text-center text-outline">
76+
수상 데이터를 불러오는 중입니다...
77+
</p>
78+
)}
6279
</div>
63-
64-
{awards.length === 0 && (
65-
<p className="mt-14 text-center text-outline">
66-
수상 데이터를 불러오는 중입니다...
67-
</p>
68-
)}
6980
</section>
7081
);
7182
}

0 commit comments

Comments
 (0)