65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
|
||
export type Crumb = { label: string; href?: string };
|
||
|
||
type Props = {
|
||
title: string;
|
||
crumbs: Crumb[];
|
||
note?: string;
|
||
underlineWidthClass?: string;
|
||
className?: string;
|
||
wrapClassName?: string;
|
||
hideFooterLine?: boolean;
|
||
hideGuideText?: boolean;
|
||
};
|
||
|
||
export default function SubPageHeader({
|
||
title,
|
||
crumbs,
|
||
note = "* 는 필수 값입니다.",
|
||
// underlineWidthClass = "w-40",
|
||
className = "",
|
||
wrapClassName = "",
|
||
// hideFooterLine = false,
|
||
hideGuideText = false,
|
||
}: Props) {
|
||
return (
|
||
<section className={`text-black ${className}`}>
|
||
<div className={`pb-5 ${wrapClassName}`}>
|
||
<div className="flex items-start justify-between gap-6">
|
||
{/* 좌측 타이틀 */}
|
||
<div className="inline-block">
|
||
<h1 className="relative z-10 px-2 text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
|
||
<div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300" />
|
||
</div>
|
||
|
||
{/* 우측 브레드크럼 */}
|
||
<nav className="pt-2 text-sm text-black/70" aria-label="breadcrumb">
|
||
{crumbs.map((c, i) => (
|
||
<span key={`${c.label}-${i}`}>
|
||
{c.href ? (
|
||
<Link href={c.href} className="hover:text-sky-500">
|
||
{c.label}
|
||
</Link>
|
||
) : (
|
||
<span className="text-black/90">{c.label}</span>
|
||
)}
|
||
{i < crumbs.length - 1 && <span className="mx-2">›</span>}
|
||
</span>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
{/* 하단 라인 + 안내문 */}
|
||
{!hideGuideText && (
|
||
<div className="mt-6 border-t border-black/10 pt-4 text-sm text-black/70">
|
||
<span className="text-red-400">*</span>
|
||
{note.replace("*", "")}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|