msgapp/src/app/page.tsx

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;
  const sort = sp?.sort ?? "recent";
  return (
    <div className="space-y-8">
      {/* 히어로 섹션: 상단 대형 비주얼 영역 */}
      <section>
        <HeroBanner />
      </section>

      {/* 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행: 고정 높이 610px */}
      <section className="min-h-[514px] 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 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="h-[120px] flex items-center justify-center">
              <div className="flex items-center justify-center gap-[8px]">
                <img src="https://picsum.photos/seed/profile/200/200" alt="프로필" className="w-[120px] h-[120px] rounded-full object-cover" />
                <div className="w-[62px] h-[62px] rounded-full bg-neutral-200 flex items-center justify-center text-[11px] text-neutral-700">
                  Lv
                </div>
              </div>
            </div>
            <div className="h-[120px] overflow-hidden flex flex-col items-center">
              <div className="text-[18px] text-[#5c5c5c] truncate text-center">홍길동</div>
              <div className="mt-[20px] w-[300px] mx-auto flex flex-col gap-[12px]">
                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
                  <div className="w-[64px] flex items-center">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
                    <span className="ml-[8px] text-[12px] text-[#8c8c8c]">레벨</span>
                  </div>
                  <div className="text-[16px] text-[#5c5c5c]">Lv. 79</div>
                </div>
                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
                  <div className="w-[64px] flex items-center">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
                    <span className="ml-[8px] text-[12px] text-[#8c8c8c]">등급</span>
                  </div>
                  <div className="text-[16px] text-[#5c5c5c]">Iron</div>
                </div>
                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
                  <div className="w-[64px] flex items-center">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
                    <span className="ml-[8px] text-[12px] text-[#8c8c8c]">포인트</span>
                  </div>
                  <div className="text-[16px] text-[#5c5c5c]">1,600,000</div>
                </div>
              </div>
            </div>
            <div className="flex flex-col gap-[12px]">
              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
                <span className="absolute left-[12px] inline-flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
                </span>
                내 정보 페이지
              </button>
              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
                <span className="absolute left-[12px] inline-flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
                </span>
                포인트 히스토리
              </button>
              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
                <span className="absolute left-[12px] inline-flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
                </span>
                내가 쓴 게시글
                <span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] flex items-center justify-center">12</span>
              </button>
              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
                <span className="absolute left-[12px] inline-flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
                </span>
                내가 쓴 댓글
                <span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] flex items-center justify-center">7</span>
              </button>
            </div>
          </div>
          <div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
            <CategoryBoardBrowser />
          </div>
          <div className="flex flex-col rounded-xl overflow-hidden h-full min-h-0">
            <CategoryBoardBrowser categoryName="명예의 전당" categorySlug="hall-of-fame" />
          </div>
        </div>
      </section>

      {/* 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>
  );
}