Files
frontend/apps/dm/app/main/page.tsx
T

72 lines
1.8 KiB
TypeScript

/**
* 대민 메인 페이지(첫페이지)
*/
"use client";
import { useEffect, useMemo } from "react";
import TopNav from "@/components/TopNav";
import { removeCookie } from "@/src/shared/lib";
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 CLAIM_NAME = "Authorization";
const AUTH_USER_ID = "token-id";
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);
useEffect(() => {
removeCookie(CLAIM_NAME);
removeCookie(AUTH_USER_ID);
}, []);
return (
<main className="bg-white">
{/* 헤더 */}
<TopNav />
{/* 사이드 인디게이터 */}
<SideIndicator items={LANDING_SECTIONS} activeId={activeId} />
{/* 컨텐츠 영역 */}
<div className="[&>section]:scroll-mt-[83px]">
{/* 물 재이용 */}
<Hero />
{/* 재이용 소개 */}
<IntroCards />
{/* 재이용 사례 */}
<Cases />
{/* 물 재이용 사업 */}
<ProcessFlow />
</div>
</main>
);
}