@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,188 @@
+.filter-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-l);
+    background: var(--color-white);
+    border: 1px solid var(--color-darkWhite);
+    border-radius: var(--radius-m);
+    min-width : 200px;
+}
+
+.filter-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* ── 접기 가능한 패널 ─────────────────────────────────────────
+   헤더를 고정 높이(60px) 바로 만들어 접힘/펼침과 무관하게 항상
+   패널 최상단 같은 위치에 두고, 본문만 아래로 열리고 닫힌다.
+   (세로 패딩을 컨테이너에서 제거하고 본문이 자체 하단 여백을 가짐) */
+.filter-panel--collapsible {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.filter-panel--collapsible .filter-panel__header {
+    min-height: 60px;
+    flex-shrink: 0;
+}
+.filter-panel--collapsible .filter-panel__sections {
+    padding-bottom: var(--spacing-m);
+}
+
+/* 하단 안내 영역 (예: "해당 단어 243개 가능") */
+.filter-panel__footer {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-l);
+    border-top: 1px solid var(--color-darkWhite);
+    color: var(--color-gray);
+}
+
+.filter-panel__title {
+    display: block;
+    text-align: left;
+}
+
+/* 헤더 좌측: 접기 버튼 + 타이틀 인라인 */
+.filter-panel__title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    min-width: 0;
+}
+
+.filter-panel__header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    margin-left: auto;
+}
+
+.filter-panel__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    align-items: flex-start;
+}
+
+.filter-panel__section-label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.filter-panel__section-label {
+    color: var(--color-darkGray);
+    text-align: left;
+    margin: 0;
+}
+
+.filter-panel__section-multiple {
+    color: var(--color-lightGray);
+}
+
+.filter-panel__sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+}
+
+.filter-panel__sections--row {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px 32px;
+    align-items: flex-start;
+}
+
+/* 그룹 라벨 행 — 하위 섹션들을 묶는 헤더. 가로 배치에서 줄 전체를 차지해 줄바꿈을 만든다.
+   우측에 groupAction(보기 모드 토글 등)을 배치. */
+.filter-panel__group-label-row {
+    flex-basis: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-s);
+    padding-top: var(--spacing-xs);
+}
+.filter-panel__group-label {
+    margin: 0;
+    color: var(--color-darkGray);
+    text-align: left;
+}
+
+/* layout='row' 섹션: 라벨을 왼쪽에 두고 아이템을 오른쪽에 가로로 나열 */
+.filter-panel__section--row {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-s);
+}
+
+.filter-panel__section--row .filter-panel__section-label-row {
+    flex: 0 0 auto;
+    min-width: 44px;
+}
+
+/* 가로 배치에서 row 섹션끼리도 인라인으로 나란히 — 콘텐츠 너비만큼 차지하고, 넘치면 줄바꿈 */
+.filter-panel__sections--row .filter-panel__section--row {
+    flex: 0 0 auto;
+    max-width: 100%;
+}
+
+/* block 섹션은 한 줄 전체를 차지해 인라인 흐름에서 분리 */
+.filter-panel__sections--row .filter-panel__section--block {
+    flex-basis: 100%;
+}
+
+
+.filter-panel__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+}
+
+.filter-panel__item-groups {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-xl);
+    row-gap: var(--spacing-xs);
+}
+
+.filter-panel__item-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+}
+
+/* type: 'note' 섹션 — 선택 불가능한 안내 텍스트(예: 입력 구문 사용법). */
+.filter-panel__note {
+    color: var(--color-darkGray);
+    text-align: left;
+    width: 100%;
+}
+
+.filter-panel__note-list {
+    margin: 0;
+    padding-left: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* 글자 입력 TextField 래퍼 — 폭만 지정(테두리·높이는 TextField 자체 스타일). */
+.filter-panel__textfield {
+    min-width: 200px;
+}
+
+/* 훈련 음소 드롭다운 — 전체 너비로 늘리지 않고 콘텐츠 기준 고정폭(선택 값이 바뀌어도 흔들리지 않게 min-width) */
+.filter-panel__dropdown {
+    min-width: 180px;
+}
+
+@media (max-width: 767px) {
+  .filter-panel__textfield {
+    min-width: 0;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import './FilterPanel.css';
+export type { FilterPanelItem, FilterPanelSection } from '../types/filterPanel';
+export { FILTER_ALL_VALUE } from '../types/filterPanel';
+import type { FilterPanelSection } from '../types/filterPanel';
+/** @public */
+export interface FilterPanelProps {
+    title?: ReactNode;
+    headerAction?: ReactNode;
+    /** 헤더 우측에 접기/펼치기 토글 버튼을 노출하고, 접으면 본문(섹션)을 숨긴다. */
+    collapsible?: boolean;
+    /** collapsible일 때 초기 접힘 상태 */
+    defaultCollapsed?: boolean;
+    /** 접힘 상태를 외부에서 제어(controlled). 지정 시 내부 상태 대신 이 값을 따른다. */
+    collapsed?: boolean;
+    /** 접힘 상태가 토글될 때 호출 (controlled 사용 시 상태 갱신용) */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** 섹션 아래 하단에 표시할 안내 영역(예: "해당 단어 243개 가능"). 접히면 함께 숨겨진다. */
+    footer?: ReactNode;
+    sections: FilterPanelSection[];
+    selected?: Record<string, string | string[]>;
+    onSelect?: (value: string, sectionLabel: string) => void;
+    /**
+     * 섹션 나열 방식.
+     * - `inline` (기본) — 섹션이 가로로 흐르며 폭이 부족하면 자동 줄바꿈.
+     * - `newline` — 섹션마다 무조건 개행(각 섹션이 한 줄 차지).
+     */
+    align?: 'inline' | 'newline';
+    /** @deprecated `align` 사용 — 'horizontal'=inline, 'vertical'=newline */
+    sectionAlign?: 'vertical' | 'horizontal';
+    className?: string;
+}
+/** @public */
+export default function FilterPanel({ title, headerAction, collapsible, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected, onSelect, align, sectionAlign, className, }: FilterPanelProps): import("react").JSX.Element;

package/dist/packages/core/src/components/FilterPanel.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { Fragment, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import './FilterPanel.css';
+import Button from './Button';
+import SegmentedControl from './SegmentedControl';
+import TextField from './TextField';
+import Dropdown from './Dropdown';
+export { FILTER_ALL_VALUE } from '../types/filterPanel';
+import { FILTER_ALL_VALUE } from '../types/filterPanel';
+/** @public */
+export default function FilterPanel({ title, headerAction, collapsible = false, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected = {}, onSelect, align, sectionAlign, className, }) {
+    // align 우선. 없으면 구 prop(sectionAlign) 매핑, 그것도 없으면 inline 기본.
+    const isRow = (align ?? (sectionAlign === 'vertical' ? 'newline' : sectionAlign === 'horizontal' ? 'inline' : 'inline')) === 'inline';
+    const { t } = useTranslation();
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const collapsed = controlledCollapsed ?? internalCollapsed;
+    const toggleCollapsed = () => {
+        const next = !collapsed;
+        setInternalCollapsed(next);
+        onCollapsedChange?.(next);
+    };
+    const showHeader = title || headerAction || collapsible;
+    return (_jsxs("div", { className: cx('filter-panel', collapsible ? 'filter-panel--collapsible' : '', collapsed ? 'filter-panel--collapsed' : '', className), children: [showHeader && (_jsxs("div", { className: "filter-panel__header", children: [_jsxs("div", { className: "filter-panel__title-row", children: [collapsible && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-down' : 'chevron-up', 
+                                /* Button은 aria-label을 자기 ariaLabel prop으로 덮어쓴다({...rest} 뒤에
+                                   aria-label={ariaLabelString}을 다시 쓴다) — kebab으로 넘기면 undefined가
+                                   되어 이름이 통째로 사라진다. 저장소의 다른 호출부는 모두 ariaLabel을 쓴다.
+                                   문구도 이 파일만 한국어로 박혀 있었다(키는 이미 있다). */
+                                ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), "aria-expanded": !collapsed, onClick: toggleCollapsed })), title && _jsx("span", { className: "filter-panel__title h4", children: title })] }), _jsx("div", { className: "filter-panel__header-actions", children: !collapsed && headerAction })] })), !collapsed && (_jsxs(_Fragment, { children: [_jsx("div", { className: cx('filter-panel__sections', isRow ? 'filter-panel__sections--row' : ''), children: sections.map(section => {
+                            const sel = selected[section.label];
+                            const isAllSelected = sel === undefined || (Array.isArray(sel) ? sel.length === 0 : false);
+                            // section.items에 빈 항목(null/undefined)이 섞여 들어오면 item.value 접근에서
+                            // 바로 터진다 — 호출부 데이터 소스(단어 목록 필터링 등) 결함을 여기서까지 전파시키지
+                            // 않도록 렌더 직전에 걸러낸다
+                            const items = (section.items ?? []).filter((item) => item != null);
+                            /* 보기 버튼 한 개. 칸으로 나뉜 절(section.groups)과 안 나뉜 절이 같은 버튼을
+                               그리는데, 한때 이 25줄을 두 벌 적어 두었다. 새 속성을 하나 붙일 때 한쪽만
+                               붙는 것이 자연스러운 모양이라 갈릴 수밖에 없다. */
+                            const renderItemButton = (item) => {
+                                const value = typeof item === 'string' ? item : item.value;
+                                const disabled = typeof item !== 'string' && Boolean(item.disabled);
+                                const itemLabels = typeof item !== 'string' ? item.labels : undefined;
+                                const displayLabel = typeof item !== 'string' ? item.displayLabel : undefined;
+                                const tooltip = typeof item !== 'string' ? item.tooltip : undefined;
+                                const descriptionTooltip = typeof item !== 'string' ? item.descriptionTooltip : undefined;
+                                const shape = typeof item !== 'string' ? item.shape : undefined;
+                                const isSelected = Array.isArray(sel) ? sel.includes(value) : sel === value;
+                                return (_jsx(Button, { size: "keyboard", label: itemLabels ?? displayLabel ?? value, type: section.itemType ?? (itemLabels ? 'bar' : value.length === 1 ? 'dot' : undefined), selected: isSelected, disabled: disabled, shape: shape, showTooltipInfo: !!tooltip, tooltipInfoText: tooltip, tooltipDescription: descriptionTooltip, onClick: () => onSelect?.(value, section.label) }, value));
+                            };
+                            return (_jsxs(Fragment, { children: [section.groupLabel && (_jsxs("div", { className: "filter-panel__group-label-row", children: [_jsx("div", { className: "filter-panel__group-label body-2", children: section.groupLabel }), section.groupAction] })), _jsxs("div", { className: cx('filter-panel__section', section.layout === 'row' ? 'filter-panel__section--row' : '', section.block ? 'filter-panel__section--block' : ''), children: [_jsxs("div", { className: "filter-panel__section-label-row", children: [_jsx("span", { className: "filter-panel__section-label body-3", children: section.displayLabel ?? section.label }), section.labelAction] }), section.type === 'note' ? (_jsx("div", { className: "filter-panel__note body-3", children: section.content })) : section.type === 'input' ? (_jsx(TextField, { className: "filter-panel__textfield", placeholder: section.placeholder, ariaLabel: section.displayLabel ?? section.label, value: selected[section.label] ?? '', onChange: (value) => onSelect?.(value, section.label), error: section.error })) : (!section.multiple && section.display === 'segmented') ? (_jsx(SegmentedControl
+                                            /* 바로 위 TextField 처럼 섹션 이름을 그대로 쓴다. 안 주면 라디오그룹이
+                                               기본값 '선택 탭'으로 읽혀, 필터가 여럿인 화면에서 어느 그룹인지
+                                               구분이 안 된다(단어표 검색 설정은 세그먼트가 열 개 가까이 된다). */
+                                            , { 
+                                                /* 바로 위 TextField 처럼 섹션 이름을 그대로 쓴다. 안 주면 라디오그룹이
+                                                   기본값 '선택 탭'으로 읽혀, 필터가 여럿인 화면에서 어느 그룹인지
+                                                   구분이 안 된다(단어표 검색 설정은 세그먼트가 열 개 가까이 된다). */
+                                                ariaLabel: section.displayLabel ?? section.label, options: [
+                                                    ...(section.allOption ? [{ key: FILTER_ALL_VALUE, label: section.allLabel ?? t('common.all', '전체') }] : []),
+                                                    ...items.map(item => {
+                                                        const value = typeof item === 'string' ? item : item.value;
+                                                        const displayLabel = typeof item !== 'string' ? item.displayLabel : undefined;
+                                                        const disabled = typeof item !== 'string' ? item.disabled : undefined;
+                                                        return { key: value, label: displayLabel ?? value, disabled };
+                                                    }),
+                                                ], value: isAllSelected && section.allOption ? FILTER_ALL_VALUE : selected[section.label], onChange: (value) => onSelect?.(value, section.label), size: 32 })) : (!section.multiple && section.display === 'dropdown') ? (_jsx(Dropdown, { className: "filter-panel__dropdown", size: 40, options: [
+                                                    ...(section.allOption ? [{ value: FILTER_ALL_VALUE, label: section.allLabel ?? t('common.all', '전체') }] : []),
+                                                    ...items.map(item => {
+                                                        const value = typeof item === 'string' ? item : item.value;
+                                                        const displayLabel = typeof item !== 'string' ? item.displayLabel : undefined;
+                                                        const disabled = typeof item !== 'string' ? item.disabled : undefined;
+                                                        return { value, label: displayLabel ?? value, disabled };
+                                                    }),
+                                                ], value: isAllSelected && section.allOption ? FILTER_ALL_VALUE : selected[section.label], onChange: (value) => onSelect?.(value, section.label) })) : (_jsxs("div", { className: section.groups ? 'filter-panel__item-groups' : 'filter-panel__items', children: [section.allOption && !section.groups && (_jsx(Button, { size: "keyboard", label: section.allLabel ?? t('common.all', '전체'), selected: isAllSelected, disabled: section.allOptionDisabled, onClick: () => onSelect?.(FILTER_ALL_VALUE, section.label) })), section.groups
+                                                        ? section.groups.map((group, gi) => (_jsxs("div", { className: "filter-panel__item-group", children: [gi === 0 && section.allOption && (_jsx(Button, { size: "keyboard", label: section.allLabel ?? t('common.all', '전체'), selected: isAllSelected, disabled: section.allOptionDisabled, onClick: () => onSelect?.(FILTER_ALL_VALUE, section.label) })), group
+                                                                    .filter((item) => item != null)
+                                                                    .map(renderItemButton)] }, gi)))
+                                                        : items.map(renderItemButton)] }))] })] }, section.label));
+                        }) }), footer != null && footer !== false && (_jsx("div", { className: "filter-panel__footer body-3", children: footer }))] }))] }));
+}

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

@@ -0,0 +1,12 @@
+/** @public */
+export interface FilterSectionInfoProps {
+    /** 툴팁 제목(선택) */
+    title?: string;
+    /** 설명 항목 — 2개 이상이면 번호가 붙는다 */
+    items: string[];
+}
+/**
+ * FilterPanel 섹션 라벨 옆에 붙이는 "?" 버튼 — 마우스를 올리면 DescriptionTooltip으로 설명을 보여준다.
+ * @public
+ */
+export default function FilterSectionInfo({ title, items }: FilterSectionInfoProps): import("react").JSX.Element;

package/dist/packages/core/src/components/FilterSectionInfo.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import Button from './Button';
+import DescriptionTooltip from './Tooltip/DescriptionTooltip';
+import { useHoverAnchor } from '../hooks/useHoverAnchor';
+/**
+ * FilterPanel 섹션 라벨 옆에 붙이는 "?" 버튼 — 마우스를 올리면 DescriptionTooltip으로 설명을 보여준다.
+ * @public
+ */
+export default function FilterSectionInfo({ title, items }) {
+    const { t } = useTranslation();
+    const { anchorRect, openAt, close: handleClose } = useHoverAnchor();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { size: 24, type: "dot", icon: "info", variant: "transparent-gray", useBorder: false, selected: !!anchorRect, ariaLabel: t('common.info', '설명'), onPointerEnter: (e) => openAt(e.currentTarget), onPointerLeave: handleClose, onFocus: (e) => openAt(e.currentTarget), onBlur: handleClose }), anchorRect && (_jsx(DescriptionTooltip, { title: title, items: items, showIndex: items.length > 1, anchorRect: anchorRect, onClose: handleClose }))] }));
+}

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

@@ -0,0 +1,186 @@
+.site-footer {
+    background: var(--color-deepWhite);
+    color: var(--color-gray);
+    padding:  var(--spacing-page);
+    border-top: 1px solid var(--color-whiteLine);
+    box-sizing: border-box;
+}
+
+.site-footer__top {
+    display: flex;
+    gap: 40px;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.site-footer__brand {
+    flex: 0 0 220px;
+    width: 220px;
+}
+
+.site-footer__lead {
+    /* 주변 링크가 lightGray라 darkGray는 혼자 도드라져 보였다 — 한 단계 낮춰
+       위계는 남기되(링크보다 진함) 톤 차이를 줄인다. */
+    color: var(--color-gray);
+    text-align: left;
+}
+
+.site-footer__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 100px 10px; /* row-gap 100px, column-gap 10px */
+    flex: 1 1 auto;
+    min-width: 320px; /* ensure links area doesn't collapse under brand */
+    align-items: flex-start;
+}
+
+.site-footer__column {
+    flex: 0 0 160px; /* fixed base width, allow wrapping */
+    min-width: 160px;
+    text-align: left;
+}
+
+.site-footer__column-title {
+    color: var(--color-lightGray);
+}
+
+.footer-title {
+    font-size: 13px;
+    line-height: 20px;
+    font-weight: 600;
+    color: var(--color-lightGray);
+    width: 80px;
+    display: inline-block;
+}
+
+.site-footer__column ul {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+/*
+ * 링크에 터치 타깃(24px)을 주면서 한 줄이 20 → 24px 로 커졌다. margin 을
+ * 그만큼 덜어 목록 전체 리듬(30px)은 이전과 같게 둔다.
+ */
+.site-footer__column li {
+    margin-bottom: 6px;
+}
+
+.site-footer__column a {
+    color: var(--color-lightGray);
+    text-decoration: none;
+}
+
+/* explicit footer link utility so components can target links */
+/* 글자 높이(16px)가 곧 터치 타깃이라 WCAG 2.2 AA(2.5.8, 24px)에 못 미친다.
+   목록이 세로로 쌓이므로 높이를 벌려도 레이아웃이 크게 흔들리지 않는다. */
+.footer-link {
+    display: inline-flex;
+    align-items: center;
+    /* 짧은 라벨("말귀" 2글자)은 너비도 24px 에 못 미친다 */
+    min-width: 24px;
+    min-height: 24px;
+    font-size: 13px;
+    line-height: 20px;
+    color: var(--color-lightGray);
+    text-decoration: none;
+    transition: color 120ms ease;
+}
+
+.footer-meta {
+    line-height: 18px;
+}
+
+.footer-copyright {
+    line-height: 18px;
+}
+
+/* 호버·포커스는 색으로만 알린다 — 밑줄은 링크가 세로로 촘촘히 쌓인 푸터에서
+   줄 간격을 흔들어 보이게 하고, 색 변화(lightGray → main)만으로 충분히 구분된다. */
+.footer-link:hover,
+.footer-link:focus {
+    color: var(--color-main);
+    text-decoration: none;
+}
+
+.site-footer__rule {
+    border: none;
+    border-top: 1px solid var(--color-darkWhite);
+    margin: 40px 0;
+}
+
+.site-footer__bottom {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 40px;
+}
+
+.site-footer__brand-compact {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+}
+
+.site-footer__logo {
+    height: 52px;
+}
+
+/* center small logo inside bottom brand area */
+.site-footer__bottom .site-footer__brand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.site-footer__meta {
+    color: var(--color-lightGray);
+    text-align: left;
+}
+
+.site-footer__copyright {
+    color: var(--color-lightGray);
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: var(--spacing-page) 0 0 0 ;
+}
+
+/* Tablet layout: stack brand and links; stack brand and meta in bottom */
+@media (max-width: 1024px) {
+    .site-footer__top {
+        flex-direction: column;
+        gap: var(--spacing-page);
+    }
+    .site-footer__brand {
+        width: 100%;
+        flex: 0 0 auto;
+    }
+    .site-footer__links {
+        gap: 20px 10px;
+        width: 100%;
+        margin: 0;
+        /* 기본 규칙의 min-width:320px는 "브랜드 영역 옆에서 링크가 찌그러지지 않게"
+           하려던 것인데, 이 폭부터는 브랜드가 위로 빠지는 세로 배치라 그 이유가
+           사라진다. 그대로 두면 320px 기기에서 링크 블록이 부모(280px)와 뷰포트를
+           40px 넘쳐 잘렸다(스크롤도 안 생겨 잘린 줄도 모른다). */
+        min-width: 0;
+    }
+    .site-footer__bottom {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-page);
+    }
+    .site-footer__meta {
+        width: 100%;
+    }
+    .site-footer__logo { height: 50px; }
+}
+
+@media (max-width: 767px) {
+    .site-footer__logo { height: 48px; }
+}

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

@@ -0,0 +1,18 @@
+import './Footer.css';
+/** @public */
+export interface FooterProps {
+    /** 제공하면 "이용약관" 링크가 페이지 이동 대신 이 핸들러를 호출한다 (미제공 시 기존 href="#" 유지) */
+    onTermsClick?: () => void;
+    /** 제공하면 "개인정보처리방침" 링크가 페이지 이동 대신 이 핸들러를 호출한다 (미제공 시 기존 href="#" 유지) */
+    onPrivacyClick?: () => void;
+    /**
+     * 고객센터 줄에 표시할 연락처. 소비처마다 대표번호가 다를 수 있어 주입받는다.
+     * 넘기지 않으면 기존 값을 그대로 쓴다.
+     */
+    contact?: {
+        email?: string;
+        tel?: string;
+    };
+}
+/** @public */
+export default function Footer({ onTermsClick, onPrivacyClick, contact }?: FooterProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Footer.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import './Footer.css';
+import logoSrc from '../logo/Logo_IHAB_en.svg';
+/** @public */
+export default function Footer({ onTermsClick, onPrivacyClick, contact } = {}) {
+    const email = contact?.email ?? 'support@ihab.co.kr';
+    const tel = contact?.tel ?? '031-380-3724';
+    const { t } = useTranslation();
+    return (_jsx("footer", { className: "site-footer", children: _jsxs("div", { className: "safearea", children: [_jsxs("div", { className: "site-footer__top", children: [_jsx("div", { className: "site-footer__brand", children: _jsx("div", { className: "site-footer__lead h3", children: t('footer.lead', '아이해브는 소리를 통해\n신뢰를 쌓고\n회복을 돕습니다.').split('\n').map((line, i, arr) => (_jsxs(Fragment, { children: [line, i < arr.length - 1 && _jsx("br", {})] }, i))) }) }), _jsxs("div", { className: "site-footer__links", children: [_jsxs("div", { className: "site-footer__column", children: [_jsx("div", { className: "site-footer__column-title footer-title", children: t('footer.site.title', '사이트') }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://www.ihab.co.kr/", target: "_blank", rel: "noopener noreferrer", children: "IHAB" }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://speechear.ihab.co.kr/", target: "_blank", rel: "noopener noreferrer", children: t('footer.site.malgwi', '말귀') }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://ihab-offcial-web.vercel.app/product/sound-localization", target: "_blank", rel: "noopener noreferrer", children: t('footer.site.soundDirection', '소리방향성시스템') }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://ihab-offcial-web.vercel.app/product/vr-sound-localization", target: "_blank", rel: "noopener noreferrer", children: t('footer.site.vrSoundDirection', 'VR소리방향성시스템') }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://ihab-offcial-web.vercel.app/product/hearing-test-pro", target: "_blank", rel: "noopener noreferrer", children: t('footer.site.hearingTest', '청력테스트 프로') }) })] })] }), _jsxs("div", { className: "site-footer__column", children: [_jsx("div", { className: "site-footer__column-title footer-title", children: t('footer.sns.title', 'SNS') }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://blog.naver.com/ihab_official", target: "_blank", rel: "noopener noreferrer", children: t('footer.sns.naverBlog', '네이버 블로그') }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://www.instagram.com/ihab.official.yt/", target: "_blank", rel: "noopener noreferrer", children: "Instagram" }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "https://www.youtube.com/@%EC%95%84%EC%9D%B4%ED%95%B4%EB%B8%8C-%EA%B3%B5%EC%8B%9D%EC%B1%84%EB%84%90", target: "_blank", rel: "noopener noreferrer", children: "Youtube" }) })] })] }), _jsxs("div", { className: "site-footer__column", children: [_jsx("div", { className: "site-footer__column-title footer-title", children: t('footer.policy.title', '정책') }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { className: "footer-link", href: "#", onClick: e => { if (onTermsClick) {
+                                                            e.preventDefault();
+                                                            onTermsClick();
+                                                        } }, children: t('footer.policy.terms', '이용약관') }) }), _jsx("li", { children: _jsx("a", { className: "footer-link", href: "#", onClick: e => { if (onPrivacyClick) {
+                                                            e.preventDefault();
+                                                            onPrivacyClick();
+                                                        } }, children: t('footer.policy.privacy', '개인정보 처리방침') }) })] })] })] })] }), _jsx("hr", { className: "site-footer__rule" }), _jsxs("div", { className: "site-footer__bottom", children: [_jsx("div", { className: "site-footer__brand", children: _jsx("img", { src: logoSrc, alt: "IHAB", className: "site-footer__logo" }) }), _jsxs("div", { className: "site-footer__meta", children: [_jsxs("div", { children: [_jsx("span", { className: "footer-title", children: t('footer.ceo', '대표') }), _jsx("span", { className: "footer-meta caption-1", children: t('footer.ceoName', '한지혜') })] }), _jsxs("div", { children: [_jsx("span", { className: "footer-title", children: t('footer.address', '주소') }), _jsx("span", { className: "footer-meta caption-1", children: t('footer.addressValue', '강원도 춘천시 시청길 32 해찬빌딩 3층 302호') })] }), _jsxs("div", { children: [_jsx("span", { className: "footer-title", children: t('footer.support', '고객센터') }), _jsxs("span", { className: "footer-meta caption-1", children: [email, " \u00A0 ", tel] })] })] })] }), _jsx("div", { className: "site-footer__copyright footer-copyright caption-1", children: "\u00A9 IHAB, Inc. All rights reserved." })] }) }));
+}