61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
// apps/dm/app/(landing)/reuse/page.tsx
|
|
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import TopNav from "@/components/TopNav";
|
|
import SideIndicator from "./SideIndicator";
|
|
import { useScrollSpy } from "./_hooks/useScrollSpy";
|
|
|
|
import Hero from "./_sections/Hero";
|
|
import IntroCards from "./_sections/IntroCards";
|
|
import Cases from "./_sections/Cases";
|
|
import ProcessFlow from "./_sections/ProcessFlow";
|
|
|
|
const LANDING_SECTIONS = [
|
|
{ id: "main", label: "Main" },
|
|
{
|
|
id: "intro",
|
|
label: "물 재이용 소개", // ✅ 상단 메뉴용
|
|
sideLabel: "소개", // ✅ 사이드 인디게이터용
|
|
},
|
|
{
|
|
id: "cases",
|
|
label: "물 재이용 현황", // ✅ 상단 메뉴용
|
|
sideLabel: "현황", // ✅ 사이드 인디게이터용
|
|
},
|
|
{
|
|
id: "processflow",
|
|
label: "물 재이용 사례", // ✅ 상단 메뉴용
|
|
sideLabel: "재이용사례", // ✅ 사이드 인디게이터용
|
|
},
|
|
];
|
|
|
|
export default function ReuseLandingPage() {
|
|
const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
|
|
const activeId = useScrollSpy(sectionIds);
|
|
|
|
return (
|
|
<main className="bg-white">
|
|
|
|
{/* 헤더 */}
|
|
<TopNav />
|
|
|
|
{/* 사이드 인디게이터 */}
|
|
<SideIndicator items={LANDING_SECTIONS} activeId={activeId} />
|
|
|
|
{/* 컨텐츠 영역 */}
|
|
<div className="[&>section]:scroll-mt-[83px]">
|
|
{/* 물 재이용 */}
|
|
<Hero />
|
|
{/* 재이용 소개 */}
|
|
<IntroCards />
|
|
{/* 재이용 사례 */}
|
|
<Cases />
|
|
{/* 물 재이용 사업 */}
|
|
<ProcessFlow />
|
|
</div>
|
|
|
|
</main>
|
|
);
|
|
}
|