Header + Side + Content Layout

"use client";

import * as React from "react";

/**
 * Header + Side + Content Layout — 상단 헤더 + 좌측 사이드 + 본문 (바깥 레이아웃 셸).
 *
 * 구조:
 *   ┌──────────────────────┐
 *   │       Header          │  ← 전체 폭 상단
 *   ├──────┬───────────────┤
 *   │ Side │   Content      │  ← 사이드 + 본문
 *   │      │                │
 *   └──────┴───────────────┘
 *
 * 가장 일반적인 앱 셸 — 상단바 고정 + 좌측 네비 + 본문. 모바일에선 사이드가 본문 위로.
 */

function Region({
  label,
  className,
}: {
  label: string;
  className?: string;
}) {
  return (
    <div
      className={
        "relative flex items-center justify-center border border-dashed border-border bg-muted/30 " +
        (className ?? "")
      }
    >
      <span className="absolute left-2 top-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
        {label}
      </span>
    </div>
  );
}

export function HeaderSideContentLayoutTemplate() {
  return (
    <div className="flex h-[520px] w-full flex-col gap-3 p-4">
      <Region label="Header" className="h-16 shrink-0" />
      <div className="flex flex-1 flex-col gap-3 sm:flex-row">
        <Region label="Side" className="h-24 shrink-0 sm:h-auto sm:w-56" />
        <Region label="Content" className="flex-1" />
      </div>
    </div>
  );
}