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-10-24 21:24:51 +09:00
parent 2668ade05f
commit 3d850188fd
14 changed files with 497 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/app/page.tsx
View File

@@ -1,4 +1,6 @@
import { HeroBanner } from "@/app/components/HeroBanner";
import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";
import CategoryBoardBrowser from "@/app/components/CategoryBoardBrowser";
export default async function Home({ searchParams }: { searchParams: Promise<{ sort?: "recent" | "popular" } | undefined> }) {
const sp = await searchParams;
@@ -10,32 +12,69 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
<HeroBanner />
</section>
{/* 메인 그리드: 좌 대형 카드, 우 2열 카드 등 타깃 사이트 구조를 단순화한 12그리드 */}
<section className="grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="md:col-span-8 grid grid-cols-1 gap-4">
<div className="aspect-[16/9] rounded-xl bg-neutral-100 overflow-hidden" />
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="h-40 rounded-xl bg-neutral-100" />
<div className="h-40 rounded-xl bg-neutral-100" />
{/* 1행: 커스텀 중앙 50vw 주황 스크롤바 */}
{(() => {
const items = [
{ id: 1, region: "경기도", name: "라온마사지샾", address: "수원시 팔달구 매산로 45", image: "/sample.jpg" },
{ id: 2, region: "강원도", name: "휴앤힐링마사지샾", address: "춘천시 중앙로 112", image: "/sample.jpg" },
{ id: 3, region: "충청북도", name: "소담마사지샾", address: "청주시 상당구 상당로 88", image: "/sample.jpg" },
{ id: 4, region: "충청남도", name: "아늑마사지샾", address: "천안시 동남구 시민로 21", image: "/sample.jpg" },
{ id: 5, region: "전라북도", name: "편안한마사지샾", address: "전주시 완산구 풍남문로 77", image: "/sample.jpg" },
{ id: 6, region: "전라남도", name: "바른마사지샾", address: "여수시 중앙로 9", image: "/sample.jpg" },
{ id: 7, region: "경상북도", name: "늘봄마사지샾", address: "대구시 중구 동성로3길 12", image: "/sample.jpg" },
{ id: 8, region: "경상남도", name: "편히쉬다마사지샾", address: "창원시 성산구 중앙대로 150", image: "/sample.jpg" },
{ id: 9, region: "제주특별자치도", name: "제주소풍마사지샾", address: "제주시 중앙로 230", image: "/sample.jpg" },
{ id: 10, region: "서울특별시", name: "도심휴식마사지샾", address: "강남구 테헤란로 427", image: "/sample.jpg" },
];
return <HorizontalCardScroller items={items} />;
})()}
{/* 2행: 최소 높이(모바일), md+에서 고정 높이 620px로 내부 스크롤 */}
<section className="min-h-[514px] md:h-[620px] overflow-hidden">
<div className="grid grid-cols-1 md:[grid-template-columns:1fr_2fr] xl:[grid-template-columns:1fr_2fr_2fr] gap-4 h-full min-h-0">
<div className="rounded-xl bg-white p-4 md:p-6 flex flex-col h-full w-full md:min-w-[350px] space-y-6">
{/* 1행: 프로필 사진 영역 */}
<div className="flex items-center justify-center">
<img
src="https://picsum.photos/seed/profile/200/200"
alt="프로필"
className="w-40 h-40 rounded-full object-cover"
/>
</div>
{/* 2행: 정보 영역 (4행 그리드) */}
<div className="grid grid-rows-4 gap-1">
<div className="text-lg md:text-xl font-bold truncate">홍길동</div>
<div className="text-sm text-neutral-700">레벨 : Lv. 79</div>
<div className="text-sm text-neutral-700">등급 : Iron</div>
<div className="text-sm text-neutral-700 mb-[20px]">포인트 : 1,600,000</div>
</div>
{/* 3행: 버튼들 영역 (4개 버튼, 세로) */}
<div className="grid grid-cols-1 gap-2">
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내정보페이지</button>
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">포인트히스토리</button>
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내가 쓴 게시글</button>
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내가 쓴 댓글</button>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
<CategoryBoardBrowser />
</div>
<div className="hidden xl:flex xl:flex-col rounded-xl overflow-hidden h-full min-h-0">
<CategoryBoardBrowser categoryName="명예의 전당" categorySlug="hall-of-fame" />
</div>
</div>
<aside className="md:col-span-4 space-y-4">
<div className="h-40 rounded-xl bg-neutral-100" />
<div className="h-40 rounded-xl bg-neutral-100" />
<div className="h-40 rounded-xl bg-neutral-100" />
</aside>
</section>
{/* 하단 롤링 배너/뉴스 영역 유사 섹션 */}
<section className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
{/* 3행: 최소/최대 높이 + 내부 스크롤 가능 */}
<section className="min-h-[514px] md:h-[620px] overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full min-h-0">
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
<CategoryBoardBrowser categoryName="소통방" categorySlug="community" />
</div>
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
<CategoryBoardBrowser categoryName="제휴업소 정보" categorySlug="partner-info" />
</div>
</div>
</section>
</div>
);