Two Column Layout

"use client";

import * as React from "react";

/**
 * Two Column Layout — 좌우 2단 레이아웃 (바깥 레이아웃 셸).
 *
 * 구조:
 *   ┌──────┬───────────┐
 *   │ Side │   Main     │
 *   │      │            │
 *   └──────┴───────────┘
 *
 * 좌측 사이드(고정 폭) + 우측 메인(가변). 모바일에선 세로 적층.
 */

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 TwoColumnLayoutTemplate() {
  return (
    <div className="flex h-[520px] w-full flex-col gap-3 p-4 sm:flex-row">
      <Region label="Side" className="h-32 shrink-0 sm:h-auto sm:w-64" />
      <Region label="Main" className="flex-1" />
    </div>
  );
}