\n
\n );\n}\n\nexport interface AdminPageProps extends AdminPageHeaderProps {\n children: ReactNode;\n /** 헤더와 본문을 감싸는 바깥 컨테이너 클래스 */\n className?: string;\n /** 본문 영역 클래스 */\n contentClassName?: string;\n}\n\nexport function AdminPage({\n title,\n description,\n actions,\n breadcrumb,\n className,\n contentClassName,\n children,\n}: AdminPageProps) {\n return (\n \n {breadcrumb}\n
\n {actions && (\n {title}
\n {description && (\n{description}
\n )}\n{actions}
\n )}\n \n
\n );\n}\n","/**\n * 공통 포맷 유틸리티\n *\n * 표 컬럼의 type 으로도 쓰이지만, 독립 함수라 어디서든 import 해서 재사용할 수 있다.\n *\n * @example\n * import { comma, tel, bizNum } from \"@linkup/admin-ui\";\n * comma(1234567) // \"1,234,567\"\n * tel(\"01012345678\") // \"010-1234-5678\"\n * bizNum(\"1234567890\") // \"123-45-67890\"\n */\n\ntype Numeric = number | string | null | undefined;\n\n/** 숫자에 천 단위 콤마를 넣는다. (소수점은 유지) */\nexport function comma(value: Numeric): string {\n if (value === null || value === undefined || value === \"\") return \"\";\n const num =\n typeof value === \"number\"\n ? value\n : Number(String(value).replace(/,/g, \"\"));\n if (!Number.isFinite(num)) return String(value);\n return num.toLocaleString(\"en-US\", { maximumFractionDigits: 20 });\n}\n\n/** 전화번호에 하이픈을 넣는다. (휴대폰 · 서울(02) · 지역번호 · 대표번호 대응) */\nexport function tel(value: Numeric): string {\n if (value === null || value === undefined || value === \"\") return \"\";\n const d = String(value).replace(/\\D/g, \"\");\n\n // 서울 지역번호 02\n if (d.startsWith(\"02\")) {\n if (d.length === 9) return d.replace(/(\\d{2})(\\d{3})(\\d{4})/, \"$1-$2-$3\");\n if (d.length === 10) return d.replace(/(\\d{2})(\\d{4})(\\d{4})/, \"$1-$2-$3\");\n }\n // 대표번호 등 8자리 (1588-1234)\n if (d.length === 8) return d.replace(/(\\d{4})(\\d{4})/, \"$1-$2\");\n // 10자리: 0XX-XXX-XXXX\n if (d.length === 10) return d.replace(/(\\d{3})(\\d{3})(\\d{4})/, \"$1-$2-$3\");\n // 11자리: 0XX-XXXX-XXXX (휴대폰 등)\n if (d.length === 11) return d.replace(/(\\d{3})(\\d{4})(\\d{4})/, \"$1-$2-$3\");\n\n // 형식을 모르면 원본 그대로 반환\n return String(value);\n}\n\n/** 사업자등록번호에 하이픈을 넣는다. (10자리 → XXX-XX-XXXXX) */\nexport function bizNum(value: Numeric): string {\n if (value === null || value === undefined || value === \"\") return \"\";\n const d = String(value).replace(/\\D/g, \"\");\n if (d.length === 10) return d.replace(/(\\d{3})(\\d{2})(\\d{5})/, \"$1-$2-$3\");\n return String(value);\n}\n\n/** DB에서 온 값(Date 객체 · \"YYYY-MM-DD HH:mm:ss\" 문자열 등)을 Date로 정규화한다. 파싱 실패 시 null. */\nfunction toDate(value: unknown): Date | null {\n if (value == null || value === \"\") return null;\n const d = value instanceof Date ? value : new Date(String(value));\n return Number.isNaN(d.getTime()) ? null : d;\n}\n\nfunction pad(n: number): string {\n return String(n).padStart(2, \"0\");\n}\n\n/** 날짜만 \"YYYY-MM-DD\" 로 포맷한다. (시간은 버림) */\nexport function formatDate(value: unknown): string {\n const d = toDate(value);\n if (!d) return \"\";\n return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;\n}\n\n/** 날짜+시간을 \"YYYY-MM-DD HH:mm:ss\" 로 포맷한다. */\nexport function formatDateTime(value: unknown): string {\n const d = toDate(value);\n if (!d) return \"\";\n return `${formatDate(d)} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n}\n\n/** 표 컬럼 type 에서 사용할 수 있는 포맷 종류 */\nexport type ColumnFormatType = \"comma\" | \"tel\" | \"bizNum\" | \"date\" | \"datetime\";\n\n/** type 값에 맞는 포맷 함수를 적용한다. (AdminTable 내부에서 사용) */\nexport function formatByType(type: ColumnFormatType, value: unknown): string {\n switch (type) {\n case \"comma\":\n return comma(value as Numeric);\n case \"tel\":\n return tel(value as Numeric);\n case \"bizNum\":\n return bizNum(value as Numeric);\n case \"date\":\n return formatDate(value);\n case \"datetime\":\n return formatDateTime(value);\n default:\n return value == null ? \"\" : String(value);\n }\n}\n","\"use client\";\n\n/**\n * Input — shadcn/ui 기반 기본 입력창\n *\n * 검색 필터, 폼 등에서 사용하는 텍스트 입력 프리미티브.\n *\n * @example\n * setValue(e.target.value)} />\n */\nimport { type ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Input({ className, type, ...props }: ComponentProps<\"input\">) {\n return (\n {children}
\n \n {emptyText}\n
\n ) : (\n \n {virtualizer.getVirtualItems().map((row) => {\n const opt = filtered[row.index];\n const isSelected = opt.value === value;\n const isActive = row.index === active;\n return (\n e.preventDefault()}\n onClick={() => choose(opt)}\n onMouseEnter={() => setActive(row.index)}\n className={cn(\n \"absolute left-0 flex w-full items-center gap-2 rounded-sm px-2 text-sm outline-none\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n isActive && \"bg-accent text-accent-foreground\"\n )}\n style={{ top: row.start, height: row.size }}\n >\n
\n \n );\n\n const popoverContent = (\n \n {/* 미리보기 타일 */}\n {value.map((url, i) => (\n \n {/* eslint-disable-next-line @next/next/no-img-element */}\n preview && setZoomIndex(i)}\n className={cn(\"size-full object-cover\", preview && \"cursor-zoom-in\")}\n />\n {preview && (\n \n removeAt(i)}\n className=\"absolute top-1 right-1 rounded-full bg-black/55 p-1 text-white opacity-0 transition-opacity hover:bg-black/75 group-hover:opacity-100\"\n >\n
\n ))}\n\n {/* 업로드 중 타일 */}\n {Array.from({ length: uploading }).map((_, i) => (\n \n {\n setTouched(true);\n onChange?.(String(next ? onOption?.value : offOption?.value));\n }}\n {...switchProps}\n />\n {activeLabel != null && (\n {activeLabel}\n )}\n
\n );\n } else if (type === \"upload\") {\n autoControl = (\n {shownError}
\n ) : description != null ? (\n{description}
\n ) : null;\n\n if (horizontal) {\n return (\n\n {control}\n {messageEl}\n
\n \n );\n }\n\n return (\n \n {labelEl}\n {control}\n {messageEl}\n
\n );\n}\n","\"use client\";\n\n/**\n * useAdminForm — 폼 값 + 검증 + 제출 표시를 한 번에 관리하는 훅\n *\n * 필드마다 value/onChange/forceValidate 를 직접 만들 필요 없이 field() 가 묶어준다.\n * 저장 버튼 onClick 에서 form.validate() 한 줄로 전체 검증 + 오류 표시가 된다.\n *\n * @example\n * const form = useAdminForm({ name: \"\", email: \"\", password: \"\" });\n *\n * \n onChange?.(e.target.value)}\n className={cn(\n \"flex w-full min-w-0 appearance-none rounded-md border border-input bg-transparent pl-3 shadow-xs transition-colors outline-none\",\n \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\n SIZE_CLASS[size],\n rightPadding\n )}\n {...inputProps}\n />\n\n {/* 오른쪽 버튼 영역 */}\n {hasRight && (\n
\n );\n\n const hintEl = hint ? (\n \n {/* Clear 버튼 */}\n {clearable && (\n onChange?.(\"\")}\n className={cn(\n \"flex items-center justify-center rounded text-muted-foreground transition-opacity hover:text-foreground\",\n BTN_PAD[size],\n clearActive ? \"opacity-100\" : \"pointer-events-none opacity-0\"\n )}\n aria-label=\"입력 초기화\"\n >\n setShowPw((v) => !v)}\n className={cn(\"flex items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground\", BTN_PAD[size])}\n aria-label={showPw ? \"비밀번호 숨기기\" : \"비밀번호 보기\"}\n >\n {showPw ?
\n )}\n \n {hint}\n
\n ) : null;\n\n if (!label) {\n return (\n\n {inputEl}\n {hintEl}\n
\n );\n }\n\n if (layout === \"inline\") {\n return (\n \n \n {label}\n \n
\n );\n }\n\n // stacked\n return (\n \n {inputEl}\n {hintEl}\n
\n \n \n {inputEl}\n {hintEl}\n
\n );\n}\n","\"use client\";\n\n/**\n * AdminTextarea — 라벨 + 여러 줄 입력 컨트롤\n *\n * AdminInput 의 textarea 버전. 메모/설명처럼 여러 줄이 필요한 필드에 사용한다.\n * 한 줄 입력이면 AdminInput 을 사용한다.\n *\n * layout 옵션:\n * - \"stacked\"(기본): 라벨이 textarea 위에 작게(xs, muted) 표시\n * - \"inline\": 라벨이 textarea 왼쪽에 한 줄로 표시\n *\n * @example\n * \n {hint}\n
\n ) : null;\n\n if (!label) {\n return (\n\n {textareaEl}\n {hintEl}\n
\n );\n }\n\n if (layout === \"inline\") {\n return (\n \n \n {label}\n \n
\n );\n }\n\n // stacked\n return (\n \n {textareaEl}\n {hintEl}\n
\n \n \n {textareaEl}\n {hintEl}\n
\n );\n}\n","\"use client\";\n\n/**\n * AdminDateInput — 날짜 입력 공통 컴포넌트 (type=\"date\")\n *\n * 브라우저 기본 날짜 표시(로케일 의존 점 형식)를 숨기고,\n * 직접 \"YYYY-MM-DD\" 형식 또는 placeholder 를 그린다.\n * 클릭 시 네이티브 달력 picker 를 연다.\n *\n * 값은 \"YYYY-MM-DD\" 문자열로 주고받는다.\n *\n * @example\n * const [date, setDate] = useState(\"\");\n * \n {/* 이전 달 */}\n previousMonth && goToMonth(previousMonth)}\n className={navBtnCls}\n >\n nextMonth && goToMonth(nextMonth)}\n className={navBtnCls}\n >\n
\n );\n}\n\nexport function Calendar({\n className,\n classNames,\n showOutsideDays = true,\n startMonth,\n endMonth,\n ...props\n}: CalendarProps) {\n const startYear = (startMonth ?? new Date(TODAY.getFullYear() - 100, 0)).getFullYear();\n const endYear = (endMonth ?? new Date(TODAY.getFullYear() + 10, 11)).getFullYear();\n\n return (\n \n \n goToMonth(new Date(Number(e.target.value), month))\n }\n className={selectCls}\n >\n {years.map((y) => (\n \n ))}\n \n \n goToMonth(new Date(year, Number(e.target.value)))\n }\n className={selectCls}\n >\n {MONTHS_KO.map((label, i) => (\n \n ))}\n \n
\n\n {/* 다음 달 */}\n {title}
\n )\n )}\n\n {expanded && (\n {children}
\n\n {/* 버튼 영역 */}\n \n {actions}\n {onReset && (\n \n
\n \n )}\n \n );\n}\n\nexport interface AdminFilterFieldProps {\n /** 필드 라벨 (왼쪽) */\n label?: ReactNode;\n /** 라벨과 연결할 입력 요소 id */\n htmlFor?: string;\n /** 컨트롤(오른쪽) */\n children: ReactNode;\n /** 라벨 영역 너비 클래스 (기본 sm:w-32) */\n labelClassName?: string;\n className?: string;\n}\n\nexport function AdminFilterField({\n label,\n htmlFor,\n children,\n labelClassName,\n className,\n}: AdminFilterFieldProps) {\n return (\n {children}
\n \n );\n}\n","\"use client\";\n\n/**\n * KeywordFilter — 검색어 필터 (검색 유형 선택 + 키워드 입력)\n *\n * 거의 모든 관리자 필터에 들어가는 \"검색어\" 영역을 공통화한 것.\n * AdminFilterField(라벨 좌 / 컨트롤 우)를 품고 있어 AdminFilter 안에 바로 넣으면 된다.\n * 제어 컴포넌트이며, 비즈니스 로직 없이 값/콜백만 받는다.\n *\n * @example\n * \n {typeOptions && typeOptions.length > 0 && (\n onTypeChange?.(e.target.value)}\n className={cn(selectClass, \"w-28\")}\n >\n {allTypeLabel !== null && }\n {typeOptions.map((o) => (\n \n ))}\n \n )}\n onKeywordChange(e.target.value)}\n />\n
\n \n {typeOptions && typeOptions.length > 0 && (\n onTypeChange?.(e.target.value)}\n className={cn(selectClass, \"w-28\")}\n >\n {allTypeLabel !== null && (\n \n )}\n {typeOptions.map((o) => (\n \n ))}\n \n )}\n\n
\n \n {presetList.map((preset) => (\n {\n const [start, end] = preset.getRange();\n onStartDateChange(start);\n onEndDateChange(end);\n }}\n >\n {preset.label}\n \n ))}\n
\n )}\n \n {Array.from({ length: skeletonCount }).map((_, i) => (\n
\n \n {options.map((opt) => {\n const id = `${baseId}-${opt.value}`;\n return (\n \n toggle(opt.value, checked === true)}\n />\n {opt.label}\n \n );\n })}\n
\n \n {items.map((item, index) => {\n const htmlFor = item.htmlFor ?? `${autoId}-${index}`;\n\n if (item.type === \"checkbox\") {\n return (\n \n {item.loading ? (\n \n ) : (\n
\n );\n}\n","/**\n * AdminTableToolbar — 표 위 한 줄 툴바 (합계/요약 + 액션 버튼)\n *\n * - 왼쪽(summary): 총 N건, 총금액 등 요약 정보를 넣는다. (선택)\n * - 오른쪽(actions): 등록/삭제/엑셀 다운로드 등 버튼 영역을 넣는다. (선택)\n *\n * 상호작용이 없으므로 서버 컴포넌트로도 사용 가능하다.\n *\n * @example\n * {summary}
\n {actions && (\n {actions}
\n )}\n \n );\n}\n","\"use client\";\n\n/**\n * AdminPagination — 표 페이지네이션 (우선순위 7)\n *\n * 완전 제어(controlled) 컴포넌트라 서버/클라이언트 페이징 모두에 쓸 수 있다.\n * - 왼쪽: \"몇 개씩 보기\" page size 선택\n * - 오른쪽: 이전/다음 + 페이지 번호 + \"바로 페이지 이동\" 입력\n *\n * @example\n * \n onPageSizeChange(Number(e.target.value))}\n className={selectClass}\n aria-label=\"페이지당 항목 수\"\n >\n {pageSizeOptions.map((opt) => (\n \n ))}\n \n
\n )}\n\n {/* 페이지 네비게이션 */}\n \n goto(1)}\n disabled={current <= 1}\n aria-label=\"첫 페이지\"\n >\n goto(current - 1)}\n disabled={current <= 1}\n aria-label=\"이전 페이지\"\n >\n \n …\n \n ) : (\n goto(p)}\n aria-current={p === current ? \"page\" : undefined}\n >\n {p}\n \n )\n )}\n\n goto(current + 1)}\n disabled={current >= totalPages}\n aria-label=\"다음 페이지\"\n >\n goto(totalPages)}\n disabled={current >= totalPages}\n aria-label=\"마지막 페이지\"\n >\n
\n \n );\n}\n","\"use client\";\n\n/**\n * AdminTable — 관리자 공통 표 (TanStack Table 엔진 + Ant Design 스타일 컬럼 API, 우선순위 6)\n *\n * 컬럼은 Ant Design 의 column 과 유사하게 정의한다.\n * - title: 헤더 라벨\n * - dataIndex: 표시할 데이터의 키\n * - render(value, record, index): 셀 커스텀 렌더링 (배지/버튼 등)\n * - width / align / ellipsis: 너비 · 정렬 · 넘침 시 \"…\" 말줄임\n *\n * 도메인 비종속: 컬럼/데이터는 props 로 주입하고, 정렬·필터·페이징 로직은 프로젝트에서 처리한다.\n * 행 선택 상태는 외부 제어(rowSelection/onRowSelectionChange)하거나 생략 시 내부 상태로 동작한다.\n *\n * @example\n * const columns: AdminColumn\n setJump(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n submitJump();\n }\n }}\n placeholder={String(current)}\n className=\"h-9 w-16 text-center\"\n aria-label=\"이동할 페이지 번호\"\n />\n \n
\n )}\n | \n |
\n {hasToolbar && (\n
\n );\n}\n","\"use client\";\n\n/**\n * Dialog — 화면 중앙에 뜨는 모달 (Radix Dialog 기반)\n *\n * AdminModal 의 기반 프리미티브. 직접 조합해서 쓸 수도 있다.\n *\n * @example\n * \n */\nimport { type ComponentProps } from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Dialog(props: ComponentProps 안에 블록 요소가 들어가는 HTML 오류(hydration mismatch)가 나지 않도록 한다.\n {description}\n
\n {children}\n
\n\n {footer && (\n {children}
\n\n {footer && \n
\n ),\n { position, duration }\n );\n}\n","\"use client\";\n\n/**\n * confirmModal — antd Modal.confirm 스타일의 확인 다이얼로그\n *\n * ConfirmDialog(controlled 컴포넌트)와 달리 open/onClose state 관리 없이 함수 호출 한 번으로 띄운다.\n * 배경이 어두워지고(dim) 뒤 화면 클릭도 막히는 진짜 모달이다 — confirmToast(sonner 기반)와 달리\n * sonner 에 의존하지 않는다.\n *\n * 내부적으로 document.body 에 임시 컨테이너를 만들어 필요할 때만 렌더링하고, 닫히면(애니메이션 끝난 뒤)\n * 스스로 언마운트해서 정리한다 — 앱 루트에 별도 Provider 를 마운트해둘 필요가 없다.\n *\n * @example\n * confirmModal({\n * title: \"제휴사를 삭제하시겠습니까?\",\n * description: \"삭제하면 되돌릴 수 없습니다.\",\n * confirmLabel: \"삭제\",\n * onConfirm: () => deleteMutation.mutateAsync({ ... }),\n * });\n */\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nimport { ConfirmDialog } from \"./confirm-dialog\";\n\nexport interface ConfirmModalOptions {\n /** 다이얼로그 제목 */\n title?: ReactNode;\n /** 제목 아래 보조 설명 */\n description?: ReactNode;\n /** 확인 버튼 라벨 (기본 \"확인\") */\n confirmLabel?: string;\n /** 취소 버튼 라벨 (기본 \"취소\") */\n cancelLabel?: string;\n /** 확인 클릭 시 실행. Promise 를 반환하면 완료될 때까지 확인 버튼이 로딩 상태가 되고, 성공해야 닫힌다. */\n onConfirm: () => void | Promise{title}
\n {description && (\n \n {description}\n
\n )}\n \n {\n toast.dismiss(id);\n onCancel?.();\n }}\n >\n {cancelLabel}\n \n {\n toast.dismiss(id);\n onConfirm();\n }}\n >\n {confirmLabel}\n \n
\n \n {circle}\n {!isLast && (\n
\n \n
\n );\n}\n","\"use client\";\n\n/**\n * AdminWizard — 단계별 콘텐츠를 \"마법사(steps)\" 또는 \"탭(tabs)\"으로 보여주는 컴포넌트\n *\n * 등록(add)처럼 순서대로 입력해야 하는 흐름은 variant=\"steps\"로 — AdminSteps 진행 표시 +\n * 이전/다음 버튼과 함께 현재 단계의 content 만 보여준다. 수정(update)처럼 이미 값이 다 있어서\n * 아무 섹션이나 바로 이동해서 고치는 흐름은 variant=\"tabs\"로 — AdminTabs 로 자유롭게 전환한다.\n *\n * 섹션(제목+내용)을 items 배열 하나로만 정의하면 되고, variant 에 따라 AdminSteps/AdminTabs 로\n * 자동으로 갈라 렌더링해준다 — steps 용 배열과 tabs 용 배열을 따로 만들 필요가 없다.\n * AdminSteps 처럼 완전한 제어 컴포넌트다 (current/onChange 를 직접 관리).\n *\n * @example\n * const [step, setStep] = useState(0);\n * \n \n {current + 1}. {activeItem?.title}\n \n \n {current + 1} / {total}\n \n
\n {activeItem?.description && (\n \n {activeItem.description}\n
\n )}\n\n
\n \n ({\n title: item.title,\n description: item.description,\n disabled: item.disabled,\n }))}\n />\n
\n );\n}\n","\"use client\";\n\n/**\n * AdminTransfer — 두 목록 간 항목 이동 (Ant Design Transfer 스타일)\n *\n * 각 패널 구성: ① 상단 건수 → ② 검색창 → ③ 표(헤더 전체선택 + 행 목록).\n * 행에는 이미지/설명을 넣을 수 있고, 목록은 스크롤된다.\n * pageSize 를 주면 패널별 클라이언트 페이지네이션을 쓴다. (서버 페이징 아님)\n *\n * 제어 컴포넌트: targetKeys(우측에 있는 key 배열) 와 onChange 로 제어한다.\n *\n * @example\n * const [targetKeys, setTargetKeys] = useState{items[current]?.content}
\n {!hideNav && (\n \n onChange(Math.max(current - 1, 0))}\n >\n {prevLabel}\n \n onChange(Math.min(current + 1, items.length - 1))}\n >\n {nextLabel}\n \n
\n )}\n \n
\n );\n}\n\ninterface TransferPanelProps {\n title: ReactNode;\n items: TransferItem[];\n checkedKeys: Set\n 0 ? \"default\" : \"outline\"}\n size=\"icon\"\n aria-label=\"오른쪽으로 이동\"\n disabled={leftChecked.length === 0}\n onClick={moveRight}\n className=\"disabled:opacity-40\"\n >\n 0 ? \"default\" : \"outline\"}\n size=\"icon\"\n aria-label=\"왼쪽으로 이동\"\n disabled={rightChecked.length === 0}\n onClick={moveLeft}\n className=\"disabled:opacity-40\"\n >\n
\n\n \n {/* ① 건수 */}\n \n \n onToggleAll(\n enabled.map((i) => i.key),\n !!v\n )\n }\n aria-label=\"전체 선택\"\n disabled={enabled.length === 0}\n />\n {columns!.map((c, ci) => (\n \n {c.title}\n \n ))}\n
\n ) : (\n \n {title}\n \n 총 {visible.length}건\n {checkedCount > 0 && (\n <>\n {\" · 선택 \"}\n {checkedCount}\n \n )}\n \n
\n\n {/* ② 검색 (테두리 박스로 감싸고 여백) */}\n {searchable && (\n \n
\n )}\n\n {/* ③ 표 헤더 (전체선택 + 컬럼명) */}\n {useColumns ? (\n \n {\n setSearch(e.target.value);\n setPage(1);\n }}\n placeholder={searchPlaceholder}\n className=\"h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n />\n
\n \n \n onToggleAll(\n enabled.map((i) => i.key),\n !!v\n )\n }\n aria-label=\"전체 선택\"\n disabled={enabled.length === 0}\n />\n 전체\n \n {checkedCount}/{visible.length}\n \n
\n )}\n\n {/* ③ 행 목록 (스크롤) */}\n \n
\n )}\n \n );\n}\n","\"use client\";\n\n/**\n * AdminImage — 클릭하면 확대(라이트박스)되는 이미지\n *\n * 썸네일을 보여주고, 클릭하면 전체화면 오버레이에 큰 이미지를 띄운다.\n * 오버레이/X 버튼/Esc 로 닫는다. (Radix Dialog 기반 — 접근성·포커스 처리 포함)\n *\n * 예외 처리:\n * - src 가 없으면 \"이미지 없음\" placeholder 표시 (확대 비활성)\n * - 이미지 로드 실패 시 \"이미지를 불러올 수 없습니다\" 표시 (확대 비활성)\n *\n * @example\n * {title}
\n ) : null;\n\n let body: ReactNode;\n\n // children: items 표 렌더링 대신, title + 카드 테두리 안에 그대로 보여준다.\n if (children) {\n body = (\n \n {item.label}\n {(item.required ?? isRequiredContent(item.content)) && (\n *\n )}\n
\n \n {item.content}\n
\n \n );\n })}\n \n \n );\n } else {\n // row: 라벨(왼쪽) + 내용(오른쪽) 표. 항목을 columns 기준으로 행에 채운다.\n // CSS 그리드 auto-flow 대신 직접 행을 계산해야 span/순서가 정확하다. (테이블)\n type Packed = AdminDescriptionItem & { span: number };\n const rows: Packed[][] = [];\n let cur: Packed[] = [];\n let used = 0;\n for (const item of items) {\n const span = Math.min(Math.max(item.span ?? 1, 1), columns);\n // 남은 칸보다 크면 현재 행을 마무리(마지막 항목이 남은 칸 채움)하고 새 행 시작\n if (used + span > columns) {\n if (cur.length) cur[cur.length - 1].span += columns - used;\n rows.push(cur);\n cur = [];\n used = 0;\n }\n cur.push({ ...item, span });\n used += span;\n if (used === columns) {\n rows.push(cur);\n cur = [];\n used = 0;\n }\n }\n if (cur.length) {\n cur[cur.length - 1].span += columns - used; // 마지막 행 남은 칸 채움\n rows.push(cur);\n }\n\n const cellBorder = bordered ? \"border border-border\" : \"\";\n\n body = (\n \n {titleEl}\n \n \n \n {rows.map((row, ri) => (\n
\n
\n \n );\n }\n\n if (!loading) return body;\n\n return (\n \n
\n );\n}\n","\"use client\";\n\n/**\n * Badge — 상태 배지 (우선순위 10)\n *\n * 표의 상태 컬럼, 라벨 등에 쓰는 알약형 배지.\n * - text: 표시할 내용 (children 으로 넣어도 된다)\n * - color: 색상. 프리셋(\"gray\"|\"primary\"|\"green\"|\"red\"|\"amber\"|\"yellow\"|\"blue\") 또는\n * 임의의 CSS 색상 문자열(\"#16a34a\", \"oklch(...)\" 등)을 넣을 수 있다.\n * 프리셋이 아닌 색은 글자색을 검정과 섞어 밝은 색(gold 등)도 대비가 보장된다.\n * - size: 크기 (\"sm\"|\"md\"|\"lg\")\n *\n * 프리셋이 아닌 색을 주면 해당 색을 글자색으로, 옅은 톤을 배경으로 자동 계산한다.\n *\n * @example\n * {body}
\n \n
\n 저장되지 않은 변경사항이 있습니다.
}\n *\n * @example\n * // normalizeEmpty: true — null / undefined / \"\" 을 동일하게 처리\n * // API가 null을 반환하고 폼은 \"\"로 초기화할 때 유용\n * const { isDirty } = useDirtyCheck(original, form.values, { normalizeEmpty: true });\n */\n\n\"use client\";\n\nimport { useMemo } from \"react\";\n\n// ─── 내부 유틸 ────────────────────────────────────────────────────────────────\n\ntype AnyObj = Record