@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,424 @@
+/* ── 스케일러 + 종이 ──────────────────────────────────── */
+.word-table__scaler {
+    width: 100%;
+    /* 스케일 축소 시 종이(1123px)의 레이아웃 오버플로는 클립하되, 종이 box-shadow(최대 ~32px 확산)는
+       잘리지 않도록 clip-margin으로 여백을 남긴다. (overflow:hidden이면 그림자가 스케일러 경계에서 잘림) */
+    overflow: clip;
+    overflow-clip-margin: 32px;
+}
+
+.word-table {
+    --print-margin: 57px;
+    box-sizing: border-box;
+    padding: var(--print-margin);
+    background: #fbfdff;
+    box-shadow: var(--shadow-dropdown);
+    border: 1px solid var(--color-whiteLine);
+}
+
+/* ── 콘텐츠(절취선) 영역 ──────────────────────────────── */
+.word-table-block__content {
+    position: relative;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+/* ── 페이지 번호(종이 안에 직접 표기) ──────────────────── */
+.word-table__page-number {
+    position: absolute;
+    bottom: 8px;
+    z-index: 2;
+    color: var(--color-gray);
+    pointer-events: none;
+}
+
+.word-table__page-number--left   { left: 12px; }
+.word-table__page-number--right  { right: 12px; }
+.word-table__page-number--center { left: 50%; transform: translateX(-50%); }
+
+/* 절취선: 표시 (solid, 내부 선만) */
+.word-table-block__content--cut-show {
+    gap: 1px;
+    background: var(--color-whiteLine);
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+
+/* 외곽선 */
+.word-table-block__content--outline {
+    position: relative;
+}
+.word-table-block__content--outline::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--color-whiteLine);
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* 절취선: 코너 */
+.word-table-block__content--cut-corner .word-table-block__card {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    background:
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    left  / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    left  / 1px 8px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    right / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    right / 1px 8px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom left  / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom left  / 1px 8px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom right / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom right / 1px 8px no-repeat,
+        #fbfdff;
+}
+
+/* ── 카드 ───────────────────────────────────────────────── */
+.word-table-block__card {
+    display: flex;
+    background: #fbfdff;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+    transition: box-shadow 0.15s;
+}
+
+.word-table-block__card--filler {
+    align-items: center;
+    justify-content: center;
+}
+
+.word-table-block__card:not(.word-table-block__card--filler):hover {
+    box-shadow: var(--shadow-dropdown);
+    z-index: 1;
+}
+
+.word-table-block__card--draggable {
+    cursor: grab;
+}
+
+.word-table-block__card--draggable:active {
+    cursor: grabbing;
+}
+
+.word-table-block__card--drag-over {
+    outline: 2px solid var(--color-main);
+    outline-offset: -2px;
+    z-index: 2;
+}
+
+.word-table-block__card-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+/* 키보드 대응 — opacity:0인 채로 포커스가 가면 사용자는 보이지 않는 버튼을 누르게 된다 */
+.word-table-block__card:focus-within .word-table-block__card-close,
+/* 이 요소들은 **버튼을 감싼 div**라 자신은 포커스를 못 받는다 — :focus-visible이 아니라
+   :focus-within으로 봐야 안의 버튼이 포커스를 받았을 때 드러난다(실측으로 확인). */
+.word-table-block__card-close:focus-within,
+.word-table-block__card-close:focus-visible,
+.word-table-block__card:hover .word-table-block__card-close {
+    opacity: 1;
+}
+
+.word-table-block__pair-divider {
+    display: none;
+    flex-shrink: 0;
+    width: 1px;
+    height: 20%;
+    align-self: center;
+    background: var(--color-whiteLine);
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+
+.word-table-block__content--div-line .word-table-block__pair-divider {
+    display: block;
+}
+
+/* ── 편집 모드 셀 ──────────────────────────────────────── */
+.word-table-block__edit-cell {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    background: #fbfdff;
+    position: relative;
+    min-height: 0;
+    overflow: hidden;
+    transition: box-shadow 0.15s;
+}
+
+.word-table-block__edit-cell--filled:hover {
+    box-shadow: var(--shadow-dropdown);
+    z-index: 1;
+}
+
+.word-table-block__edit-cell--filled:focus-within .word-table-block__card-close,
+.word-table-block__edit-cell--filled:hover .word-table-block__card-close {
+    opacity: 1;
+}
+
+.word-table-block__edit-cell--empty {
+    align-items: center;
+    justify-content: center;
+}
+
+.word-table-block__edit-cell--active {
+    background: rgba(var(--color-main-rgb, 73, 156, 223), 0.04);
+    outline: 2px solid var(--color-main);
+    outline-offset: -2px;
+}
+
+.word-table-block__content--cut-corner .word-table-block__edit-cell {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    background:
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    left  / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    left  / 1px 8px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    right / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) top    right / 1px 8px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom left  / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom left  / 1px 8px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom right / 8px 1px no-repeat,
+        linear-gradient(var(--color-whiteLine), var(--color-whiteLine)) bottom right / 1px 8px no-repeat,
+        #fbfdff;
+}
+
+/* ── 단어 셀 ───────────────────────────────────────────── */
+.word-table-cell {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.word-table-cell__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 280px;
+    height: 380px;
+    box-sizing: border-box;
+    transform-origin: center center;
+}
+
+.word-table-cell__word {
+    color: var(--color-black);
+    text-align: center;
+    white-space: nowrap;
+}
+
+.word-table-cell__sub {
+    color: var(--color-gray);
+    text-align: center;
+    white-space: nowrap;
+}
+
+.word-table-cell__colloquial {
+    color: var(--color-lightGray);
+    text-align: center;
+    white-space: nowrap;
+}
+
+.word-table-cell__play-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+.word-table-block__card:hover .word-table-cell__play-button,
+.word-table-block__edit-cell:focus-within .word-table-cell__play-button,
+.word-table-cell__play-button:focus-within,
+.word-table-cell__play-button:focus-visible,
+.word-table-block__edit-cell:hover .word-table-cell__play-button {
+    opacity: 1;
+}
+
+.word-table-cell__info-button {
+    position: absolute;
+    top: 60px;
+    left: 20px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+.word-table-block__card:hover .word-table-cell__info-button,
+.word-table-block__edit-cell:focus-within .word-table-cell__info-button,
+.word-table-cell__info-button:focus-within,
+.word-table-cell__info-button:focus-visible,
+.word-table-block__edit-cell:hover .word-table-cell__info-button {
+    opacity: 1;
+}
+
+.word-table-cell__image-wrap {
+    position: relative;
+    width: 240px;
+    height: 240px;
+    border-radius: var(--radius-card);
+    background: var(--color-deepWhite);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.word-table-cell__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: opacity 0.2s;
+}
+
+.word-table-cell__spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.word-table-cell__spinner::after {
+    content: '';
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-white, #fbfdff);
+    border-top-color: var(--color-main, var(--color-main));
+    border-radius: 50%;
+    animation: wordTableCell_spin 0.7s linear infinite;
+}
+
+@keyframes wordTableCell_spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ── 인쇄 ──────────────────────────────────────────────── */
+@media print {
+    @page {
+        margin: 0;
+    }
+
+    body * {
+        visibility: hidden;
+    }
+
+    .word-table,
+    .word-table * {
+        visibility: visible;
+    }
+
+    /* !important 필요: WordTable.tsx가 화면 표시용 scale/marginLeft를 인라인 style로
+       직접 적용하므로(스크린 축소 렌더), 인쇄 시 이를 무효화하려면 클래스 규칙에
+       !important가 불가피(인라인 스타일은 !important 없이는 이길 수 없음). */
+    .word-table {
+        position: fixed;
+        inset: 0;
+        padding: 15mm;
+        margin: 0 !important;
+        background: #fbfdff;
+        box-shadow: none;
+        border: none;
+        transform: none !important;
+    }
+
+    .word-table-block__card-close { display: none; }
+
+    .word-table-cell__play-button,
+    .word-table-cell__info-button,
+    .word-table-cell__spinner {
+        display: none;
+    }
+}
+
+/* ── 채점 표시 ────────────────────────────────────────────
+   **낱말이 아니라 칸(카드)에 하나씩** 붙는다. 대립쌍표는 한 칸이 낱말 둘이지만
+   시행은 한 번이다 — 듣고 둘 중 하나를 고르는 과제라, 맞았는지는 쌍에 대해 매긴다.
+
+   **칸의 하단 중앙**에 둔다. 재생·정보 단추는 낱말마다 좌측 상단에 있는데, 채점은
+   칸 하나에 하나뿐이라 같은 줄에 두면 어느 낱말 것인지 헷갈린다. 아래 가운데면
+   그 칸 전체에 대한 것임이 자리로 드러나고, 낱말·이미지와도 겹치지 않는다. */
+.word-table-cell__score {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    display: flex;
+    gap: 4px;
+}
+
+/* 세 단추 중 **고르지 않은 것**은 평소에 자리에서 빠진다.
+ *
+ * `opacity: 0` 이 아니라 `display: none` 인 이유 — 투명하게만 두면 자리를 그대로
+ * 차지해서, 호버가 풀렸을 때 고른 표시가 제 슬롯 자리(왼쪽·가운데·오른쪽)에 남는다.
+ * 자리에서 빼면 남은 하나만으로 폭이 정해지고, 부모의 `translateX(-50%)` 가 그것을
+ * 칸 가운데로 데려간다.
+ *
+ * 셋을 늘 보이게 두지 않는 이유는 따로 있다 — 표 아래가 동그라미로 가득 차
+ * 정작 매긴 표시가 안 보인다. */
+.word-table-cell__score-slot {
+    display: none;
+}
+
+/* 고른 것은 늘 보인다 — 표를 훑어 "어디를 어떻게 봤는지"가 한눈에 들어와야 한다.
+   마우스를 올리거나 포커스를 받으면 셋이 함께 나타나 고를 수 있다. */
+.word-table-cell__score-slot--on,
+.word-table-block__card:hover .word-table-cell__score-slot,
+.word-table-block__edit-cell:hover .word-table-cell__score-slot,
+.word-table-block__edit-cell:focus-within .word-table-cell__score-slot,
+.word-table-cell__score:focus-within .word-table-cell__score-slot {
+    display: inline-flex;
+}
+
+/* 단추 모양은 `Button` 컴포넌트가 낸다 — 여기서 다시 그리지 않는다.
+   한때 이 자리에 직접 만든 원형 단추 CSS 가 있었는데, 그러면 앱의 단추와 크기·
+   포커스 링·hover 규칙이 따로 놀았다. */
+
+/* 인쇄에는 안 매긴 빈 단추를 내보내지 않는다 — 표 위에 동그라미만 잔뜩 찍힌다.
+   매긴 표시는 그대로 나간다(채점한 표를 그대로 인쇄해 보관하는 쓰임). */
+/* 인쇄에는 **고른 표시만** 나간다. 위 규칙이 이미 그렇게 하지만, 인쇄 순간 마우스가
+   어느 칸 위에 있으면 그 칸만 단추 셋이 찍힌다 — 호버 규칙을 인쇄에서 끈다. */
+@media print {
+    .word-table-block__card:hover .word-table-cell__score-slot:not(.word-table-cell__score-slot--on),
+    .word-table-block__edit-cell:hover .word-table-cell__score-slot:not(.word-table-cell__score-slot--on) {
+        display: none;
+    }
+}
+
+/* 고른 표시의 색은 **그 표시의 색**이어야 한다.
+ *
+ * `Button` 의 `main` 변형은 선택되면 청록(`--color-sub`)으로 바뀐다 — 켜짐/꺼짐을
+ * 오가는 단추에서는 맞는 규칙이지만, 여기서는 색이 곧 채점 결과다. 맞음(○)이
+ * 애매(△, `sub`)와 같은 색이 되면 표를 훑을 때 둘을 못 가른다.
+ *
+ * `selected` 자체는 그대로 둔다 — 그것이 `aria-pressed` 를 만든다. 셋 중 어느 것이
+ * 눌려 있는지는 화면 낭독기에도 전해져야 한다. 색만 제자리로 돌린다. */
+.word-table-cell__score .button--variant-main.is-selected,
+.word-table-cell__score .button--variant-main[aria-pressed='true'] {
+    background: var(--color-main);
+    border-color: var(--color-main);
+}
+
+/* 애매(△)는 주의색. `Button` 에 warn 변형이 없어 여기서 입힌다 — 변형을 새로 만들면
+   앱 전체 단추에 영향이 가는데, 지금 필요한 것은 이 표의 표시 하나뿐이다.
+   (필요해지면 그때 `Button` 으로 올린다.) */
+.word-table-cell__score .button--variant-warn.is-selected,
+.word-table-cell__score .button--variant-warn[aria-pressed='true'] {
+    background: var(--color-warn);
+    border-color: var(--color-warn);
+    --button-icon-color: #ffffff;
+}

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

@@ -0,0 +1,75 @@
+import { type ScoreMark } from './Word/wordTableScoring';
+import { type ReactNode, type Ref } from 'react';
+import './WordTable.css';
+import type { WordSearchResultItem } from '../types/wordSearch';
+import type { WordTableOrientation, WordTableContentType, WordTableCutLine, WordTableEditEntry, PageNumberPosition } from './wordTableLayout';
+export { WORD_TABLE_PAPER } from './wordTableLayout';
+export type { WordTableOrientation, WordTableContentType, WordTableCutLine, WordTableEditEntry, PageNumberPosition } from './wordTableLayout';
+/** @public */
+export interface WordTableProps {
+    title?: ReactNode;
+    titleIcon?: string;
+    disc?: ReactNode;
+    className?: string;
+    orientation?: WordTableOrientation;
+    contentTypes?: WordTableContentType[];
+    cutLine?: WordTableCutLine;
+    showOutline?: boolean;
+    showDivLine?: boolean;
+    items?: WordSearchResultItem[];
+    editCells?: (WordTableEditEntry[] | null)[];
+    /** 칸 수(레이아웃·빈칸 계산). 미지정 시 데이터 길이로 계산 */
+    count?: number;
+    /** 활성(편집중) 칸 인덱스 — 편집 모드 강조용 */
+    activeCell?: number | null;
+    /** 빈 칸/추가 버튼 클릭 → 해당 인덱스 */
+    onActivateCell?: (index: number) => void;
+    /** 편집 셀 제거 */
+    onRemoveCell?: (index: number) => void;
+    /** 표시 항목 제거 */
+    onRemoveItem?: (id: string) => void;
+    /** 표시 항목 드래그 재정렬 */
+    onReorder?: (fromIndex: number, toIndex: number) => void;
+    /** 표시 모드 빈칸에 '추가' 버튼 노출 */
+    showFillerAdd?: boolean;
+    /** 그리드 콘텐츠 DOM ref — 인쇄/캡처용 */
+    contentRef?: Ref<HTMLDivElement>;
+    buttonSize?: number;
+    /** 채점 켜기 — 낱말마다 ○/△/✕ 를 매길 수 있다. 인쇄·미리보기 어디서든 쓸 수 있게 표가 직접 든다. */
+    scoring?: boolean;
+    /**
+     * 매긴 표시(칸 번호 → 표시). **표가 들지 않고 받아 쓴다.**
+     *
+     * 표가 제 안에 들고 있던 때가 있었는데, 쪽마다 이 컴포넌트가 따로 뜨는 탓에
+     * **쪽 나눔이 바뀌면 표시가 있던 자리를 잃었다** — 쪽당 칸 수를 바꾸면 칸이 다른 쪽으로
+     * 옮겨 가는데 표시는 옛 쪽의 상태에 남아, 요약은 "2칸"인데 화면에는 하나만 보였다.
+     * 채점은 표 전체에 대한 것이라 표 전체를 아는 쪽(팝업)이 들어야 한다.
+     */
+    marks?: Record<string, ScoreMark>;
+    /** 칸을 눌렀다고 알린다. 번호는 `scoreIndexOffset` 을 더한 **표 전체 기준**이다. */
+    onMarkClick?: (cellIndex: number, clicked: ScoreMark) => void;
+    /**
+     * 이 표의 첫 칸이 **표 전체에서 몇 번째인가.**
+     *
+     * 표가 여러 쪽으로 나뉘면 쪽마다 이 컴포넌트가 따로 뜨고, 칸 번호는 쪽 안에서 0부터
+     * 다시 센다. 그대로 두면 1쪽 0번과 2쪽 0번이 같은 열쇠가 돼 **채점이 서로 덮어쓴다.**
+     * 쪽의 시작 번호를 받아 표 전체에서 유일한 번호로 만든다.
+     */
+    scoreIndexOffset?: number;
+    /** 페이지 분할 시 현재/전체 페이지 — 지정하면 종이 안에 페이지 번호를 찍는다 */
+    pageNumber?: {
+        current: number;
+        total: number;
+    };
+    /** 페이지 번호 위치 — 'none'이면 미표시 (기본 'right') */
+    pageNumberPosition?: PageNumberPosition;
+    /** 컨테이너 높이에도 맞춰 축소한다(세로 용지가 넘쳐 잘리는 것 방지). 부모가 높이 제한 박스여야 한다. */
+    fitHeight?: boolean;
+}
+/**
+ * 단어표(표 디자인) — A4 종이를 컨테이너에 맞춰 축소(scale)하고,
+ * 칸 그리드와 단어 셀을 그린다. 컨트롤(필터·저장·인쇄)은 포함하지 않는다.
+ * 표시(items)·편집(editCells) 두 모드를 지원한다.
+ * @public
+ */
+export default function WordTable({ title, titleIcon, disc, className, orientation, contentTypes, cutLine, showOutline, showDivLine, items, editCells, count, activeCell, onActivateCell, onRemoveCell, onRemoveItem, onReorder, showFillerAdd, contentRef, buttonSize, pageNumber, pageNumberPosition, fitHeight, scoring, marks, onMarkClick, scoreIndexOffset, }: WordTableProps): import("react").JSX.Element;