@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Panel.css

@@ -0,0 +1,361 @@
+/* ── SectionCard ──────────────────────────────────────────────────────── */
+.panel {
+  background: var(--color-white);
+  border: 1px solid var(--color-whiteLine);
+  border-radius: var(--radius-card);
+  padding: 0;
+  text-align: left;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+.panel--no-border {
+  border: none;
+}
+/* 배경 제거 — 카드 흰 배경/모서리를 없애 페이지에 녹아든다 */
+.panel--no-bg {
+  background: transparent;
+  border-radius: 0;
+}
+.panel--no-border .panel-row {
+  padding-left: 0;
+  padding-right: 0;
+}
+/* row 구분선 제거 */
+.panel--no-row-border .panel-row + .panel-row {
+  border-top: none;
+}
+.panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  margin: 0;
+  padding: 0 20px;          /* row와 좌측 정렬 맞춤 (좌우 20) */
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--color-darkWhite);
+}
+/* header 높이도 size 스케일을 따름 — small 48 / medium 56 / large 64 */
+.panel--small  .panel__header { min-height: 48px; }
+.panel--medium .panel__header { min-height: 56px; }
+.panel--large  .panel__header { min-height: 64px; }
+.panel__title {
+  color: var(--color-darkGray);
+  margin: 0;
+}
+.panel__actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* ── SectionRow ───────────────────────────────────────────────────────── */
+.panel-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-m);
+  padding: 4px 20px;        /* 좌우 20 / 상하 4 통일. 실제 행 높이는 min-height(size)가 결정 */
+  box-sizing: border-box;
+}
+/* 높이 스케일 — small 48 / medium 56(기본) / large 64 */
+.panel--small  .panel-row { min-height: 48px; }
+.panel--medium .panel-row { min-height: 56px; }
+.panel--large  .panel-row { min-height: 64px; }
+/* 인접한 row 사이에만 구분선 (첫/끝 처리 불필요) */
+.panel-row + .panel-row {
+  border-top: 1px solid var(--color-darkWhite);
+}
+/* minHeight 패널(panel--fill) — 빈 공간이 남을 수 있으므로 행마다 하단 구분선 */
+.panel--fill .panel-row {
+  border-bottom: 1px solid var(--color-darkWhite);
+}
+.panel--fill .panel-row + .panel-row {
+  border-top: none;
+}
+.panel--no-row-border .panel-row {
+  border-bottom: none;
+}
+/* 비-row 콘텐츠(stats 등) 다음에 오는 첫 row — 구분선만 제거 */
+.panel > :not(.panel-row) + .panel-row {
+  border-top: none;
+}
+
+/* ── PanelGrid — n열 그리드 배치 ────────────────────────────────────────── */
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--panel-grid-cols, 2), 1fr);
+  gap: 1px;
+  padding-bottom: 1px;
+  background: var(--color-darkWhite);
+  overflow: hidden;
+}
+.panel-grid .panel-row {
+  background: var(--color-white);
+}
+.panel-grid .panel-row + .panel-row {
+  border-top: none;
+}
+
+/* ── Panel row state (loading / empty) ──────────────────────────────── */
+.panel-row--empty {
+  justify-content: center;
+  color: var(--color-lightGray);
+}
+
+.panel-row--loading {
+  justify-content: center;
+}
+
+/* ── SectionCard scrollable body ─────────────────────────────────────── */
+.panel__body--scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+/* ── SectionRow variants ──────────────────────────────────────────────── */
+/* content: 단순 패딩 콘텐츠 영역 (min-height·flex 오버라이드) */
+.panel-row--content {
+  display: block;
+  padding: 16px;
+  min-height: 0;
+}
+/* scroll: flex column + overflow-y auto — 내부가 길어지면 스크롤 */
+.panel-row--scroll {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px 20px;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+/* 베리언트 row는 기본 구분선 규칙 비적용 */
+.panel-row--content + .panel-row--content,
+.panel-row--scroll  + .panel-row--scroll,
+.panel-row--content + .panel-row--scroll,
+.panel-row--scroll  + .panel-row--content {
+  border-top: none;
+}
+
+/* 좌측 아이콘 슬롯 (카테고리 아이콘 등) — 라벨 앞에 위치 */
+.panel-row__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* 행 기본 gap(16px)에서 보정해 아이콘↔라벨 간격을 12px로 */
+  margin-right: -4px;
+}
+/* 기본: 라벨이 남는 공간을 모두 차지, 오른쪽은 자연 크기 */
+.panel-row__left {
+  flex: 1;
+  min-width: 0;
+}
+/* 라벨과 부가설명은 한 단계씩 진하게 — lightGray는 어느 배경에서도 2.5:1 수준이라
+   WCAG AA(4.5:1)를 만족할 수 없었다. 둘 사이의 톤 위계는 그대로 유지한다. */
+.panel-row__label {
+  color: var(--color-deepGray);
+}
+.panel-row__sub {
+  color: var(--color-gray);
+  margin-top: 2px;
+}
+.panel-row__right {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* 좁은 화면에서는 오른쪽 블록이 줄지도 내려가지도 못해 행 밖으로 잘려 나갔다
+   (설정 화면 실측: 278px 행에 440px 블록 → 218px가 화면 밖). flex:0 0 auto라
+   축소가 막혀 있었기 때문. 줄바꿈과 축소를 함께 허용한다. */
+@media (max-width: 767px) {
+  .panel-row {
+    flex-wrap: wrap;
+  }
+  .panel-row__right {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+}
+
+/* 폼 레이아웃 — 라벨 고정폭 grid. children 모드 row에도 적용 (labelWidth prop으로 폭 조절) */
+.panel--form .panel-row {
+  display: grid;
+  grid-template-columns: var(--panel-label-width, 80px) 1fr;
+  align-items: center;
+  gap: var(--spacing-m);
+}
+.panel--form .panel-row:has(.text-field--full-width) {
+  align-items: flex-start;
+}
+.panel--form .panel-row:has(.text-field--full-width) .panel-row__left {
+  padding-top: 9px;
+}
+
+/* input / dropdown 전용: 라벨 고정, 오른쪽이 남는 공간 차지 */
+.panel-row--label-fixed .panel-row__left {
+  flex: 0 0 var(--panel-label-width, 120px);
+}
+.panel-row--label-fixed .panel-row__right {
+  flex: 1;
+  min-width: 0;
+}
+.panel-row--clickable {
+  cursor: pointer;
+  transition: background 0.1s, box-shadow 0.1s;
+}
+.panel-row--clickable:hover {
+  background: var(--color-darkWhite);
+}
+.panel-row__text {
+  color: var(--color-darkGray);
+  text-align: right;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.panel-row--text .panel-row__right {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── block 행 — 라벨/우측 분리 없이 콘텐츠를 꽉 채우는 행(description, label 없는 custom) ──
+   세로 flex: 자식은 가로로 꽉 차고(stretch), 행 min-height 안에서 세로 중앙에 온다 */
+.panel-row--block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /* 기본 .panel-row의 align-items:center를 덮어쓴다 — column 방향에선 가로축이라
+     center면 자식이 내용 폭으로 줄어들며 가운데 몰린다. stretch로 가로 꽉 채움 유지 */
+  align-items: stretch;
+}
+.panel-row__description {
+  margin: 0;
+  color: var(--color-gray);
+  line-height: 1.6;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* ── variant별 정적 인라인 style 이전 — useFullWidth는 boolean prop이라 두 고정
+   상태를 클래스 토글로 표현(값 자체는 동적이 아님). p.valueColor만 실제 동적이라 인라인 유지. */
+.panel-row__dropdown-group {
+  display: flex;
+  gap: var(--spacing-s);
+}
+.panel-row__dropdown-group--full {
+  flex: 1;
+  min-width: 0;
+}
+.panel-row__dropdown-item--full {
+  flex: 1;
+  min-width: 0;
+}
+.panel-row__dropdown-error-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.panel-row__dropdown-error-wrap--full {
+  flex: 1;
+  min-width: 0;
+}
+.panel-row__text--full {
+  text-align: left;
+  width: 100%;
+}
+.panel-row__input-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.panel-row__input-wrap--full {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── vertical align ───────────────────────────────────────────────────── */
+.panel-row--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs, 8px);
+}
+.panel-row--vertical .panel-row__left {
+  flex: none;
+  width: 100%;
+}
+.panel-row--vertical .panel-row__right {
+  flex: none;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.panel-row--vertical .panel-row__text {
+  margin-left: 0;
+  text-align: left;
+}
+
+/* ── device variant — 좌/우 2-column grid ─────────────────────────────── */
+.panel-row--device {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  align-items: stretch;
+  padding: 0;
+  min-height: 0;
+}
+.panel-row__device-column {
+  padding: 14px 16px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  /* 기기가 있을 때와 미등록일 때의 높이를 맞춘다 — 낀 기기를 내리면 패널이 줄어들며
+     아래 표가 통째로 들썩였다. 채워진 쪽(164px)에 맞춰 못 박는다. */
+  min-height: 164px;
+}
+.panel-row__device-column + .panel-row__device-column {
+  border-left: 1px solid var(--color-darkWhite);
+}
+.panel-row__device-head    { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 8px; }
+.panel-row__device-side    { color: var(--color-darkGray); margin: 0; text-align: left; }
+.panel-row__device-info    { display: flex; flex-direction: column; gap: 3px; margin: 0; align-items: flex-start; text-align: left; }
+/* 위의 쪽 이름(좌/우)이 왼쪽에 서 있는데 아래만 가운데였다 — 좁은 칸에서 눈이
+   두 축을 오갔다. 한 축으로 맞춘다. */
+.panel-row__device-kind    { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
+.panel-row__device-name    { color: var(--color-darkGray); }
+.panel-row__device-detail  { color: var(--color-gray); }
+.panel-row__device-product { color: var(--color-darkGray); }
+.panel-row__device-date    { color: var(--color-lightGray); margin-top: 2px; }
+.panel-row__device-empty   { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-lightGray); }
+
+.required-mark {
+  color: var(--color-main);
+  margin-left: 2px;
+}
+
+.panel-row__error {
+  color: var(--color-error);
+  margin-top: 4px;
+}
+
+.panel-row__helper {
+  color: var(--color-lightGray);
+  margin-top: 4px;
+}
+
+.panel-row__button-group {
+  display: flex;
+  gap: 6px;
+}
+
+/* 한 행에 놓인 드롭다운들(등급·품사·어종, 생년월일 년/월/일)을 좁은 화면에서 줄바꿈한다.
+   라벨 폭이 고정이라 남는 폭을 셋이 나눠 가지면 한 칸이 48px가 되고, 고른 값은커녕
+   글자 한 자도 안 보인 채 화살표만 남는다(375px에서 실측). 최소 폭을 주고 넘치면
+   아래로 내린다 — 위쪽 flex:1 규칙보다 뒤에 와야 이긴다(같은 특이도라 순서가 정한다). */
+@media (max-width: 767px) {
+  .panel-row__dropdown-group { flex-wrap: wrap; }
+  .panel-row__dropdown-item--full,
+  .panel-row__dropdown-error-wrap--full { flex: 1 1 104px; }
+}

package/dist/packages/core/src/components/Panel.d.ts

@@ -0,0 +1,166 @@
+import type { ReactNode, KeyboardEvent } from 'react';
+import type { DeviceEntry, DeviceSide } from './HearingDeviceInfo';
+import './Panel.css';
+type PanelSize = 'small' | 'medium' | 'large';
+interface PanelProps {
+    title?: ReactNode;
+    actions?: ReactNode;
+    /** 행 높이 스케일 — small 48 / medium 56 / large 64. 기본 medium */
+    size?: PanelSize;
+    minHeight?: number | string;
+    maxWidth?: number | string;
+    className?: string;
+    scrollable?: boolean;
+    /** 외곽선 표시 여부. 기본 true */
+    useBorder?: boolean;
+    /** 배경(카드 흰 배경) 표시 여부. 기본 true. false면 투명 배경으로 페이지에 녹아든다 */
+    useBg?: boolean;
+    /** row 구분선 표시 여부. 기본 true */
+    useRowBorder?: boolean;
+    /** PanelRow label 열 고정 너비 (예: 80, '6rem') */
+    labelWidth?: number | string;
+    /** 폼 레이아웃 — 모든 row를 라벨 고정폭(labelWidth, 기본 80px) grid로 정렬 */
+    form?: boolean;
+    /** true면 children 대신 스피너 표시 */
+    loading?: boolean;
+    /** 빈 상태 메시지. loading이 false이고 children이 없을 때 표시 */
+    empty?: ReactNode;
+    children?: ReactNode;
+}
+export default function Panel({ title, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
+/** @public */
+export declare function PanelGrid({ cols, children }: {
+    cols?: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+type Base = {
+    label?: string;
+    sub?: string;
+    onClick?: () => void;
+    required?: boolean;
+    error?: string;
+    align?: 'horizontal' | 'vertical';
+    useFullWidth?: boolean;
+    icon?: ReactNode;
+};
+export type PanelRowToggle = Base & {
+    variant: 'toggle';
+    checked: boolean;
+    onChange: (v: boolean) => void;
+};
+export type PanelRowSegmented = Base & {
+    variant: 'segmented';
+    options: {
+        key: string;
+        label: string;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    size?: 32 | 40 | 48;
+};
+export type DropdownItem = {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    /**
+     * 이 드롭다운 하나의 이름. 미지정 시 "행 라벨 + placeholder" 로 조합한다
+     * (생년월일 + 년 → "생년월일 년").
+     */
+    ariaLabel?: string;
+};
+export type PanelRowDropdown = Base & {
+    variant: 'dropdown';
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    value?: string;
+    onChange?: (v: string) => void;
+    dropdowns?: DropdownItem[];
+};
+export type ButtonItem = {
+    label: ReactNode;
+    btnVariant?: string;
+    btnSize?: number;
+    disabled?: boolean;
+    onClick: () => void;
+};
+export type PanelRowButton = Base & {
+    variant: 'button';
+    buttonLabel?: ReactNode;
+    btnVariant?: string;
+    btnSize?: number;
+    disabled?: boolean;
+    onClick?: () => void;
+    buttons?: ButtonItem[];
+};
+export type PanelRowText = Base & {
+    variant: 'text';
+    value: string;
+    valueColor?: string;
+};
+export type PanelRowInput = Base & {
+    variant: 'input';
+    value: string;
+    onChange?: (v: string) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
+    onEnter?: () => void;
+    placeholder?: string;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    readOnly?: boolean;
+    disabled?: boolean;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    autoComplete?: string;
+    helperText?: string;
+    /** 최대 글자 수 — 설정 시 입력 제한 + 박스 안쪽 글자수 카운터 표시 */
+    maxLength?: number;
+    /** 글자수 카운터 표시 여부 (maxLength 설정 시, 기본 true) */
+    showCount?: boolean;
+    /** 여러 줄 입력(textarea) 모드 */
+    multiline?: boolean;
+    /** multiline 모드 기본 행 수 */
+    rows?: number;
+};
+export type PanelRowCustom = Base & {
+    variant: 'custom';
+    children: ReactNode;
+};
+/** 라벨/우측 분리 없이 설명 문단을 통으로 표시하는 행 */
+export type PanelRowDescription = {
+    variant: 'description';
+    children: ReactNode;
+};
+/** 빈 상태 표현 — Panel의 `empty` prop이 내부적으로 이 variant로 렌더한다. 단독으로도 사용 가능. */
+export type PanelRowEmpty = {
+    variant: 'empty';
+    children: ReactNode;
+};
+/** 로딩 스피너 1개만 중앙에 표시 — Panel의 `loading` prop이 내부적으로 이 variant로 렌더한다. */
+export type PanelRowLoading = {
+    variant: 'loading';
+};
+export type PanelRowChildren = {
+    label?: ReactNode;
+    sub?: string;
+    onClick?: () => void;
+    children?: ReactNode;
+    align?: 'horizontal' | 'vertical';
+    icon?: ReactNode;
+};
+export type PanelRowProps = PanelRowToggle | PanelRowSegmented | PanelRowDropdown | PanelRowButton | PanelRowText | PanelRowInput | PanelRowCustom | PanelRowDescription | PanelRowEmpty | PanelRowLoading | PanelRowChildren;
+export declare function PanelRow(props: PanelRowProps): import("react").JSX.Element;
+export type { DeviceSide };
+export interface PanelRowDeviceProps {
+    devices: {
+        좌: DeviceEntry | null;
+        우: DeviceEntry | null;
+    };
+    /** 있으면 각 쪽 이름 옆에 '착용 해제'가 선다 — 그 쪽의 '지금 착용중' 만 내린다(이력은 남는다) */
+    onRelease?: (side: DeviceSide) => void;
+}
+export declare function PanelRowDevice({ devices, onRelease }: PanelRowDeviceProps): import("react").JSX.Element;