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

ㅇㅇ

Browse Source
This commit is contained in:
koreacomp5
2025-11-02 07:01:42 +09:00
parent d54ad82095
commit 58af463585
3 changed files with 174 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/app/page.tsx
View File

@@ -18,28 +18,146 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
const showPartnerShops: boolean = parsed.showPartnerShops ?? true;
const visibleBoardIds: string[] = Array.isArray(parsed.visibleBoardIds) ? parsed.visibleBoardIds : [];
// 보드 메타데이터 (이름 표시용)
// 보드 메타데이터 (메인뷰 타입 포함)
const boardsMeta = visibleBoardIds.length
? await prisma.board.findMany({ where: { id: { in: visibleBoardIds } }, select: { id: true, name: true } })
? await prisma.board.findMany({
where: { id: { in: visibleBoardIds } },
select: {
id: true,
name: true,
slug: true,
category: { select: { id: true, name: true } },
mainPageViewType: { select: { key: true } },
},
})
: [];
const idToMeta = new Map(boardsMeta.map((b) => [b.id, b] as const));
const idToMeta = new Map(
boardsMeta.map((b) => [
b.id,
{
id: b.id,
name: b.name,
slug: b.slug,
categoryId: b.category?.id ?? null,
categoryName: b.category?.name ?? "",
mainTypeKey: b.mainPageViewType?.key,
},
] as const)
);
const orderedBoards = visibleBoardIds
.map((id) => idToMeta.get(id))
.filter((v): v is { id: string; name: string } => Boolean(v));
.filter((v): v is any => Boolean(v));
const firstTwo = orderedBoards.slice(0, 2);
const restBoards = orderedBoards.slice(2);
const renderBoardPanel = (board: { id: string; name: string }) => (
<div key={board.id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col bg-white">
<div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between">
<Link href={`/boards/${board.id}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>
<Link href={`/boards/${board.id}`} className="text-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link>
function formatDateYmd(d: Date) {
const yyyy = d.getFullYear();
const mm = String(d.getMonth() + 1).padStart(2, "0");
const dd = String(d.getDate()).padStart(2, "0");
return `${yyyy}.${mm}.${dd}`;
}
const renderBoardPanel = async (board: { id: string; name: string; slug: string; categoryId: string | null; categoryName: string; mainTypeKey?: string }) => {
// 같은 카테고리의 소분류(게시판) 탭 목록
const siblingBoards = board.categoryId
? await prisma.board.findMany({
where: { categoryId: board.categoryId },
select: { id: true, name: true, slug: true },
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
})
: [];
const isTextMain = board.mainTypeKey === "main_text";
if (!isTextMain) {
return (
<div key={board.id} className="h-full min-h-0 flex flex-col">
<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 bg-white">
<div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between">
<Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>
<Link href={`/boards/${board.slug}`} className="text-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link>
</div>
<div className="flex-1 min-h-0 overflow-hidden p-0">
<PostList boardId={board.id} sort={sort} />
</div>
</div>
</div>
);
}
const posts = await prisma.post.findMany({
where: { boardId: board.id, status: "published" },
select: { id: true, title: true, createdAt: true, stat: { select: { recommendCount: true } } },
orderBy: { createdAt: "desc" },
take: 8,
});
return (
<div key={board.id} className="h-full min-h-0 flex flex-col">
<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 bg-white">
<div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between">
<Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>
<Link href={`/boards/${board.slug}`} className="text-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link>
</div>
<div className="flex-1 min-h-0 overflow-hidden p-0">
<div className="bg-white px-[24px] pt-[8px] pb-[16px]">
<ul className="min-h-[326px]">
{posts.map((p) => (
<li key={p.id} className="border-b border-[#ededed] h-[56px] pl-0 pr-[24px] pt-[16px] pb-[16px]">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-[4px] h-[24px] overflow-hidden">
<div className="relative w-[16px] h-[16px] shrink-0">
<div className="absolute inset-0 rounded-full bg-[#f45f00] opacity-0" />
<div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
</div>
<span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate max-w-[calc(100vw-280px)]">{p.title}</span>
<span className="text-[16px] text-[#f45f00] font-bold">+{p.stat?.recommendCount ?? 0}</span>
</div>
<span className="text-[12px] leading-[12px] tracking-[-0.24px] text-[#8c8c8c]">{formatDateYmd(new Date(p.createdAt))}</span>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="flex-1 min-h-0 overflow-hidden p-0">
<PostList boardId={board.id} sort={sort} />
</div>
</div>
);
);
};
return (
<div className="space-y-8">
@@ -77,7 +195,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
{/* 1행: 프로필 + 선택된 보드 2개 (최대 2개) */}
{(firstTwo.length > 0) && (
<section className="min-h-[514px] overflow-hidden">
<section className="min-h-[410px] overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2 xl:[grid-template-columns:1fr_2fr_2fr] gap-4 h-full min-h-0">
<div className="hidden xl:grid relative overflow-hidden rounded-xl bg-white px-[25px] py-[34px] grid-rows-[120px_120px_1fr] gap-y-[32px] h-full w-full md:min-w-[350px]">
<div className="absolute inset-x-0 top-0 h-[56px] bg-[#d5d5d5] z-0" />
@@ -144,9 +262,9 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
</button>
</div>
</div>
{firstTwo.map((b) => (
<div key={b.id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
{renderBoardPanel(b)}
{(await Promise.all(firstTwo.map((b) => renderBoardPanel(b)))).map((panel, idx) => (
<div key={firstTwo[idx].id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
{panel}
</div>
))}
</div>
@@ -156,14 +274,14 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
{/* 나머지 보드: 2개씩 다음 열로 렌더링 */}
{restBoards.length > 0 && (
<>
{Array.from({ length: Math.ceil(restBoards.length / 2) }).map((_, i) => {
{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-[514px] md:h-[620px] overflow-hidden">
<section key={`rest-${i}`} className="min-h-[410px] md:h-[510px] overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full min-h-0">
{pair.map((b) => (
<div key={b.id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
{renderBoardPanel(b)}
{(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">
{panel}
</div>
))}
</div>