motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main

Browse Source
This commit is contained in:
mota
2025-11-02 11:34:47 +09:00
parent 9ff08d3e58
commit 1ced95f218
4 changed files with 172 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/page.tsx
View File

@@ -4,6 +4,9 @@ import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";
import { PostList } from "@/app/components/PostList";
import ProfileLabelIcon from "@/app/svgs/profilelableicon";
import SearchIcon from "@/app/svgs/SearchIcon";
import { RankIcon1st } from "@/app/components/RankIcon1st";
import { RankIcon2nd } from "@/app/components/RankIcon2nd";
import { RankIcon3rd } from "@/app/components/RankIcon3rd";
import prisma from "@/lib/prisma";
export default async function Home({ searchParams }: { searchParams: Promise<{ sort?: "recent" | "popular" } | undefined> }) {
@@ -80,14 +83,33 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
return (
<div key={board.id} className="h-full min-h-0 flex flex-col">
<div className="flex-1 min-h-0 overflow-hidden p-0">
<div className="px-[24px] pt-[8px] pb-[16px]">
<div className="flex flex-col gap-[16px]">
<div className="content-stretch flex gap-[30px] items-start w-full mb-2">
<div className="flex items-center gap-[8px]">
<div className="text-[30px] text-[#5c5c5c] leading-[30px]">{board.categoryName || board.name}</div>
</div>
<div className="flex items-center gap-[8px]">
{siblingBoards.map((sb) => (
<Link
key={sb.id}
href={`/boards/${sb.slug}`}
className={`px-[16px] py-[8px] rounded-[14px] text-[14px] ${
sb.id === board.id ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5]"
}`}
>
{sb.name}
</Link>
))}
</div>
</div>
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
<div className="flex-1 min-h-0 overflow-hidden p-0">
<div className="px-[24px] pt-[8px] pb-[16px]">
<div className="flex flex-col gap-[16px]">
{topUsers.map((user, idx) => {
const rank = idx + 1;
return (
<div key={user.userId} className="flex h-[140px] items-center rounded-[16px] overflow-hidden">
<div className="h-[140px] w-[160px] relative shrink-0 bg-[#d5d5d5] overflow-hidden">
return (
<div key={user.userId} className="flex h-[150px] items-center rounded-[16px] overflow-hidden bg-white">
<div className="h-[150px] w-[160px] relative shrink-0 bg-[#d5d5d5] overflow-hidden">
<img
src={user.profileImage || "https://picsum.photos/seed/profile/200/200"}
alt={user.nickname || "프로필"}
@@ -103,10 +125,9 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
<div className="flex flex-col gap-[12px] min-w-0 flex-1">
<div className="flex items-center gap-[12px]">
<div className="relative w-[20px] h-[20px] shrink-0">
{/* 순위 배지 아이콘 자리 - 피그마 디자인에 맞게 이미지로 대체 필요 */}
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-[12px]">⭐</span>
</div>
{rank === 1 && <RankIcon1st />}
{rank === 2 && <RankIcon2nd />}
{rank === 3 && <RankIcon3rd />}
</div>
<div className="bg-white border border-[#d5d5d5] px-[16px] py-[5px] rounded-[12px] text-[14px] text-[#5c5c5c] shrink-0">
{rank}위
@@ -130,6 +151,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
</div>
</div>
</div>
</div>
);
}
@@ -343,7 +365,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
{Array.from({ length: Math.ceil(restBoards.length / 2) }).map(async (_, i) => {
const pair = restBoards.slice(i * 2, i * 2 + 2);
return (
<section key={`rest-${i}`} className="min-h-[395px] md:h-[495px] overflow-hidden">
<section key={`rest-${i}`} className="min-h-[395px] md:h-[540px] overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full min-h-0">
{(await Promise.all(pair.map((b) => renderBoardPanel(b)))).map((panel, idx) => (
<div key={pair[idx].id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">