@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,141 @@
+.icon-grid-menu {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+/* size별 하단 여백 */
+.icon-grid-menu--medium { margin-bottom: 60px; }
+.icon-grid-menu--small  { margin-bottom: var(--spacing-l); }
+
+.page:has(.choice-chips) .icon-grid-menu {
+  margin-bottom: var(--spacing-l);
+}
+
+.icon-grid-menu__button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 68px;
+    height: 68px;
+    gap: 0px;
+    padding: 0;
+    border-radius: 28px;
+    border: 1px solid var(--color-whiteLine);
+    background: var(--color-deepWhite);
+    cursor: pointer;
+    transition: background-color 240ms ease, box-shadow 0.15s, border-color 0.15s;
+    text-align: center;
+}
+
+.icon-grid-menu__button:hover {
+    border-color: var(--color-main);
+    box-shadow: var(--shadow-card);
+}
+
+.icon-grid-menu__button:disabled {
+    cursor: default;
+    opacity: 0.95;
+    box-shadow: none;
+    border-color: var(--color-whiteLine);
+    pointer-events: none;
+    outline: none;
+}
+
+.icon-grid-menu__button-icon {
+    font-size: 28px;
+    color: var(--color-lightGray);
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transform-origin: center;
+    will-change: transform;
+}
+
+/* !important 필요: Icon.tsx의 폴백 SVG(nullSvg)는 style="stroke:...;stroke-width:.." 인라인
+   속성으로 렌더링되어 클래스 규칙보다 우선순위가 높음. 이 규칙을 모든 아이콘(일반 lucide
+   아이콘 + 폴백)에 동일하게 적용하려면 !important가 불가피함. */
+.icon-grid-menu__button-icon-svg svg,
+.icon-grid-menu__button-icon-svg svg * {
+    stroke: currentColor !important;
+    vector-effect: non-scaling-stroke;
+    stroke-width: var(--icon-grid-menu-button-stroke-width, 2px) !important;
+}
+
+.icon-grid-menu__button-icon-svg { width: 24px; height: 24px; }
+.icon-grid-menu__button-icon-svg svg { width: 28px; height: 28px; display:block; }
+
+.icon-grid-menu__button-icon-mask {
+    width: 28px;
+    height: 28px;
+    display: inline-block;
+    background-color: currentColor;
+    -webkit-mask-image: var(--icon-url);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-image: var(--icon-url);
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+}
+
+.icon-grid-menu__button-icon-image { width: 28px; height: 28px; object-fit: contain; display:block; }
+
+.icon-grid-menu__button-wrapper { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
+
+.icon-grid-menu__button-label {
+    color: var(--color-darkGray);
+    word-break: keep-all;
+    overflow-wrap: break-word;
+}
+
+.icon-grid-menu__button.icon-grid-menu__button--selected {
+    background-color: var(--color-main);
+    animation: sub-to-main 360ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    color: #ffffff;
+    box-shadow: var(--shadow-button);
+    border-color: transparent;
+}
+
+.icon-grid-menu__button.icon-grid-menu__button--selected .icon-grid-menu__button-icon {
+    color: #ffffff;
+}
+
+/* ── small 변형 — 좁은 공간(팝업 등)용. 뷰포트와 무관하게 고정 크기 ─────────── */
+.icon-grid-menu--small .icon-grid-menu__button-wrapper { width: 56px; margin: 4px 8px; gap: 4px; }
+/* ── medium 간격 — 기본 미디어쿼리보다 가로 간격 조금 좁게 ──────────────────── */
+.icon-grid-menu--medium .icon-grid-menu__button-wrapper { margin-left: 6px; margin-right: 6px; }
+.icon-grid-menu--small .icon-grid-menu__button {
+    width: 48px;
+    height: 48px;
+    border-radius: 20px;
+}
+.icon-grid-menu--small .icon-grid-menu__button-icon { width: 24px; height: 24px; font-size: 20px; }
+.icon-grid-menu--small .icon-grid-menu__button-icon-svg { width: 20px; height: 20px; }
+.icon-grid-menu--small .icon-grid-menu__button-icon-svg svg { width: 20px; height: 20px; }
+.icon-grid-menu--small .icon-grid-menu__button-icon-mask { width: 20px; height: 20px; }
+.icon-grid-menu--small .icon-grid-menu__button-icon-image { width: 20px; height: 20px; }
+.icon-grid-menu--small .icon-grid-menu__button-label { font-size: 12px; line-height: 1.3; }
+
+@media (min-width: 1024px) {
+    .icon-grid-menu__button-wrapper { width: 80px; margin: 8px 12px; }
+    .icon-grid-menu__button { width: 68px; height: 68px; border-radius: 28px; }
+    .icon-grid-menu__button-icon-mask { width: 28px; height: 28px; }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .icon-grid-menu__button-wrapper { width: 64px; margin: 8px 10px; }
+    .icon-grid-menu__button { width: 58px; height: 58px; border-radius: 24px; }
+    .icon-grid-menu__button-icon-mask { width: 24px; height: 24px; }
+}
+
+@media (max-width: 767px) {
+    .icon-grid-menu__button-wrapper { width: 50px; margin: var(--spacing-xs); }
+    .icon-grid-menu__button { width: 48px; height: 48px; border-radius: 20px; }
+    .icon-grid-menu__button-icon-mask { width: 20px; height: 20px; }
+}

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import './IconGridMenu.css';
+/** @public */
+export interface IconGridMenuCategory {
+    key: string;
+    label?: ReactNode;
+    icon?: string | ReactNode;
+    [k: string]: unknown;
+}
+/** @public */
+export interface IconGridMenuProps {
+    categories?: IconGridMenuCategory[];
+    /** 현재 선택된 카테고리 key (controlled) */
+    selected?: string | null;
+    onSelect?: (key: string | null) => void;
+    /** 버튼 크기 — `medium`(기본, 68px) / `small`(48px) */
+    size?: 'medium' | 'small';
+}
+/** @public */
+export default function IconGridMenu(props: IconGridMenuProps): import("react").JSX.Element;

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

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import './IconGridMenu.css';
+import Icon from './Icon';
+function IconGridMenuButton(props) {
+    const { category = {}, isSelected = false, onClick } = props || {};
+    const keyClass = category?.key ? ` icon-grid-menu__button--${category.key}` : '';
+    // 이름표(span)가 버튼 **밖**에 있어, 버튼 안에는 aria-hidden 된 아이콘만 남는다.
+    // 눈으로는 '음식·건강·날씨'가 보이지만 스크린리더에는 이름 없는 '버튼'으로만 읽혔다.
+    // 이름표를 aria-labelledby 로 가리킨다 — label 이 문자열이 아니라 JSX 일 수도 있어
+    // aria-label 로 옮겨 적는 대신 화면에 이미 있는 그 요소를 그대로 이름으로 삼는다.
+    const labelId = useId();
+    return (_jsxs("div", { className: `icon-grid-menu__button-wrapper${keyClass}`, children: [_jsx("button", { className: `icon-grid-menu__button${isSelected ? ' icon-grid-menu__button--selected' : ''}`, "data-key": category?.key, onClick: isSelected ? undefined : onClick, "aria-pressed": isSelected, "aria-labelledby": labelId, disabled: isSelected, children: _jsx(Icon, { icon: category.icon, label: category.label, className: "icon-grid-menu__button-icon", imgClassName: "icon-grid-menu__button-icon-image", maskClassName: "icon-grid-menu__button-icon-mask", svgClassName: "icon-grid-menu__button-icon-svg" }) }), _jsx("span", { id: labelId, className: "icon-grid-menu__button-label button-1", children: category.label })] }));
+}
+/** @public */
+export default function IconGridMenu(props) {
+    const { categories = [], selected, onSelect, size = 'medium' } = props || {};
+    const initial = selected ?? (categories && categories[0]?.key) ?? null;
+    const [selectedKey, setSelectedKey] = useState(initial ?? null);
+    // 외부 selected prop이 controlled로 전달되면 내부 상태 동기화하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (selected !== undefined && selected !== null) {
+            setSelectedKey(selected);
+        }
+    }, [selected]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const initialOnSelectRef = useRef(onSelect);
+    const initialKeyRef = useRef(selectedKey);
+    const isControlledRef = useRef(selected !== undefined);
+    useEffect(() => {
+        // 비제어(uncontrolled) 모드에서만 초기 선택을 부모에 알림.
+        // 제어 모드(selected 전달)에서는 부모가 이미 값을 가지므로 에코하면 의도치 않게 부모 상태를 덮어쓸 수 있음.
+        if (!isControlledRef.current && initialKeyRef.current && typeof initialOnSelectRef.current === 'function') {
+            initialOnSelectRef.current(initialKeyRef.current);
+        }
+    }, []);
+    const handleClick = useCallback((key) => {
+        const next = selectedKey === key ? null : key;
+        setSelectedKey(next);
+        onSelect?.(next);
+    }, [selectedKey, onSelect]);
+    return (_jsx("div", { className: `icon-grid-menu icon-grid-menu--${size}`, children: (categories || []).map((t) => (_jsx(IconGridMenuButton, { category: t, isSelected: selectedKey === t.key, onClick: () => handleClick(t.key) }, t.key))) }));
+}

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

@@ -0,0 +1,114 @@
+/* ═══════════════════════════════════════════════════════════
+   LandingBottomSticky.css — 화면 하단에 떠 있는 고정 CTA 바
+
+   셸(고정 카드 + 좌우 배치 + hover)만 담는다. 안에 들어갈 문구는 주입받으며,
+   문구를 꾸밀 때 쓰는 보조 클래스(__tagline 계열)도 함께 제공한다.
+
+   커스터마이즈 지점:
+     --bottom-sticky-bg        카드 배경 (기본 --color-pureWhite)
+     --bottom-sticky-max-width 최대 폭 (기본 680px)
+     --bottom-sticky-offset    화면 아래에서 띄우는 거리 (기본 24px)
+═══════════════════════════════════════════════════════════ */
+
+.bottom-sticky {
+  position: fixed;
+  bottom: var(--bottom-sticky-offset, 24px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-sticky, 500);
+  width: calc(100% - 48px);
+  max-width: var(--bottom-sticky-max-width, 680px);
+  animation: bottom-sticky-in .4s cubic-bezier(.2, .9, .2, 1) both;
+}
+
+@keyframes bottom-sticky-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+.bottom-sticky__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-m, 16px);
+  background: var(--bottom-sticky-bg, var(--color-pureWhite));
+  border-radius: var(--radius-m, 20px);
+  padding: 12px 12px 12px 24px;
+  box-shadow: 0 8px 40px rgba(15, 18, 60, .18), 0 2px 8px rgba(15, 18, 60, .06);
+  transition: box-shadow .2s, transform .2s;
+}
+
+/* onClick을 받은 경우에만 클릭 대상처럼 보이게 한다 */
+.bottom-sticky__inner--clickable { cursor: pointer; }
+
+.bottom-sticky__inner--clickable:hover {
+  /* 브랜드색 그림자 — --brand-main을 바꾸면 함께 따라온다 */
+  box-shadow:
+    0 16px 56px color-mix(in srgb, var(--color-main) 30%, transparent),
+    0 4px 12px color-mix(in srgb, var(--color-main) 15%, transparent);
+  transform: translateY(-4px);
+  border: 1px solid var(--color-main);
+}
+
+.bottom-sticky__content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s, 12px);
+  flex: 1;
+  justify-content: center;
+}
+
+/* ── 문구용 보조 클래스 (주입하는 쪽이 가져다 쓴다) ───────────── */
+.bottom-sticky__tagline {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  color: var(--color-black);
+  white-space: nowrap;
+  margin: 0;
+}
+
+/* 그라데이션 강조 텍스트 */
+.bottom-sticky__tagline-highlight {
+  background: linear-gradient(90deg, var(--color-main), var(--color-sub), var(--color-infoLink));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  display: inline;
+}
+
+/* 줄바꿈 단위 — 이 덩어리 안에서는 끊기지 않는다.
+   좁은 화면에서 문장 꼬리만 다음 줄로 떨어지는 것을 막는다. */
+.bottom-sticky__tagline-part {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.bottom-sticky__tagline-logo {
+  height: 32px;
+  width: auto;
+  display: block;
+}
+
+@media (max-width: 600px) {
+  /* 문구와 버튼이 한 줄에 다 안 들어가므로 세로로 개행 — 문구 위, 버튼 아래(전체 너비) */
+  .bottom-sticky {
+    bottom: var(--bottom-sticky-offset, 16px);
+    width: calc(100% - 32px);
+  }
+  .bottom-sticky__inner {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--spacing-m, 16px);
+    gap: var(--spacing-s, 12px);
+  }
+  .bottom-sticky__content { flex: none; justify-content: center; gap: 6px; }
+  .bottom-sticky__tagline {
+    white-space: normal;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+  }
+  .bottom-sticky__tagline-logo { height: 26px; }
+}

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import './LandingBottomSticky.css';
+/** @public */
+export interface LandingBottomStickyProps {
+    /** 왼쪽 문구 영역 — 로고·강조 텍스트 등을 자유롭게 주입한다. */
+    children?: ReactNode;
+    /** 오른쪽 액션(버튼 등) */
+    action?: ReactNode;
+    /** 카드 전체를 눌렀을 때. 주지 않으면 카드는 클릭 대상이 아니다(커서·hover 효과도 없음). */
+    onClick?: () => void;
+    /** 루트에 덧붙일 클래스 */
+    className?: string;
+}
+/**
+ * 화면 하단에 떠 있는 고정 CTA 바 — 셸(고정 카드 + 좌우 배치 + hover)만 담당한다.
+ *
+ * 안에 들어갈 문구는 제품마다 다르므로 주입받는다. 문구를 꾸밀 때 쓰는 보조 클래스는
+ * LandingBottomSticky.css가 함께 제공한다:
+ * `bottom-sticky__tagline` / `__tagline-part`(줄바꿈 단위) /
+ * `__tagline-highlight`(그라데이션 강조) / `__tagline-logo`.
+ *
+ * 표시 여부(예: 비로그인일 때만)는 호출부가 결정한다 — 이 컴포넌트는 인증을 모른다.
+ *
+ * @public
+ */
+export default function LandingBottomSticky({ children, action, onClick, className, }: LandingBottomStickyProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './LandingBottomSticky.css';
+/**
+ * 화면 하단에 떠 있는 고정 CTA 바 — 셸(고정 카드 + 좌우 배치 + hover)만 담당한다.
+ *
+ * 안에 들어갈 문구는 제품마다 다르므로 주입받는다. 문구를 꾸밀 때 쓰는 보조 클래스는
+ * LandingBottomSticky.css가 함께 제공한다:
+ * `bottom-sticky__tagline` / `__tagline-part`(줄바꿈 단위) /
+ * `__tagline-highlight`(그라데이션 강조) / `__tagline-logo`.
+ *
+ * 표시 여부(예: 비로그인일 때만)는 호출부가 결정한다 — 이 컴포넌트는 인증을 모른다.
+ *
+ * @public
+ */
+export default function LandingBottomSticky({ children, action, onClick, className, }) {
+    const innerClass = onClick
+        ? 'bottom-sticky__inner bottom-sticky__inner--clickable'
+        : 'bottom-sticky__inner';
+    return (_jsx("div", { className: className ? `bottom-sticky ${className}` : 'bottom-sticky', children: _jsxs("div", { className: innerClass, onClick: onClick, children: [_jsx("div", { className: "bottom-sticky__content", children: children }), action] }) }));
+}

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

@@ -0,0 +1,192 @@
+/* ═══════════════════════════════════════════════════════════
+   LandingHeader.css — 랜딩/마케팅 페이지용 상단 고정 헤더
+
+   커스터마이즈 지점(컴포넌트 로컬 변수):
+     --landing-header-bg           배경 (기본 --color-deepWhite)
+     --landing-header-border       아래 경계선 (기본 rgba(15,18,60,.05), transparent 로 끌 수 있음)
+     --landing-header-height       높이 (기본 72px)
+     --landing-header-link-color   가운데 링크 색 (기본 --color-deepGray)
+     --landing-header-link-hover   링크 hover 색 (기본 --color-main)
+═══════════════════════════════════════════════════════════ */
+
+.landing-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky, 500);
+  /* backdrop-filter blur는 저사양 기기(구형 안드로이드·통합그래픽 노트북)에서
+     스크롤 버벅임의 주 원인이라 쓰지 않는다. 불투명 배경이라 블러 없이도
+     스크롤할 때 뒤 콘텐츠가 비쳐 글자가 겹쳐 읽히지 않는다. */
+  background: var(--landing-header-bg, var(--color-deepWhite));
+  /* 셸 배경과 같은 톤으로 쓰는 앱은 이 선이 이음매처럼 보인다.
+     transparent 를 주면 없앨 수 있다. */
+  border-bottom: 1px solid var(--landing-header-border, rgba(15, 18, 60, .05));
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.landing-header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--landing-header-height, 72px);
+  position: relative;
+}
+
+/*
+ * 로고는 왼쪽 끝에 붙이고 폭은 자산이 정한다.
+ * flex-shrink 를 막지 않으면 로고가 길어질 때 눌려서 찌그러진다.
+ * transform-origin 을 왼쪽으로 둬야 hover 확대가 왼쪽 기준으로 커진다.
+ */
+.landing-header__brand {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-right: auto;
+  text-decoration: none;
+}
+
+/* 높이만 고정하고 가로는 자산의 비율대로 흐른다 — 로고를 갈아 끼워도 안 찌그러진다. */
+.landing-header__logo {
+  display: block;
+  height: var(--landing-header-logo-height, 40px);
+  width: auto;
+  max-width: none;
+  transform-origin: left center;
+  transition: transform .3s cubic-bezier(.2, .9, .2, 1.2), filter .3s;
+}
+
+.landing-header__brand:hover .landing-header__logo {
+  transform: scale(1.05);
+  filter: brightness(1.08);
+}
+
+/* 가운데 링크 — 뷰포트 중앙에 고정(좌우 요소 폭과 무관하게 정중앙) */
+.landing-header__links {
+  display: flex;
+  align-items: center;
+  gap: 36px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--landing-header-link-color, var(--color-deepGray));
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.landing-header__links a {
+  color: inherit;
+  text-decoration: none;
+  position: relative;
+  padding: 6px 0;
+  transition: color .2s;
+}
+
+.landing-header__links a:hover {
+  color: var(--landing-header-link-hover, var(--color-main));
+}
+
+/* hover 시 왼쪽에서 오른쪽으로 차오르는 밑줄 */
+.landing-header__links a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 100%;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-main), var(--color-sub));
+  border-radius: 1px;
+  transition: right .35s cubic-bezier(.2, .7, .2, 1);
+}
+
+.landing-header__links a:hover::after { right: 0; }
+
+.landing-header__actions {
+  display: flex;
+  gap: var(--spacing-xs, 8px);
+  align-items: center;
+}
+
+/* ── 햄버거 + 드로어 ── */
+/* 넓은 화면에서는 가운데 링크가 보이므로 햄버거를 숨긴다 */
+.landing-header__toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  /* 로고·액션과 달리 아이콘만 있어 터치 타깃이 작아지기 쉽다 — 44px 로 잡는다 */
+  width: 44px;
+  height: 44px;
+  margin-right: -10px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: var(--landing-header-link-color, var(--color-deepGray));
+}
+
+.landing-header__burger {
+  position: relative;
+  display: block;
+  width: 22px;
+  height: 14px;
+}
+
+.landing-header__burger > span {
+  position: absolute;
+  inset-inline: 0;
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+  transition:
+    transform .2s cubic-bezier(.2, .7, .2, 1),
+    opacity .2s cubic-bezier(.2, .7, .2, 1);
+}
+
+.landing-header__burger > span:nth-child(1) { top: 0; }
+.landing-header__burger > span:nth-child(2) { top: 6px; }
+.landing-header__burger > span:nth-child(3) { top: 12px; }
+
+.landing-header__toggle--open .landing-header__burger > span:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+.landing-header__toggle--open .landing-header__burger > span:nth-child(2) {
+  opacity: 0;
+}
+.landing-header__toggle--open .landing-header__burger > span:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
+.landing-header__drawer {
+  border-top: 1px solid rgba(15, 18, 60, .05);
+  background: var(--landing-header-bg, var(--color-deepWhite));
+}
+
+.landing-header__drawer-item {
+  display: block;
+}
+
+.landing-header__drawer-item a {
+  display: flex;
+  align-items: center;
+  /* 손가락 기준 타깃 */
+  min-height: 48px;
+  font-size: 15px;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--landing-header-link-color, var(--color-deepGray));
+  transition: color .2s;
+}
+
+.landing-header__drawer-item a:hover,
+.landing-header__drawer-item a[aria-current='page'] {
+  color: var(--landing-header-link-hover, var(--color-main));
+}
+
+/* 좁은 화면 — 가운데 링크를 접고 햄버거로 연다 */
+@media (max-width: 960px) {
+  .landing-header__links { display: none; }
+  .landing-header__toggle { display: flex; }
+}
+
+/* 넓은 화면에서는 드로어가 열려 있을 이유가 없다 */
+@media (min-width: 961px) {
+  .landing-header__drawer { display: none; }
+}

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

@@ -0,0 +1,67 @@
+import { type ReactNode } from 'react';
+import './LandingHeader.css';
+/**
+ * 가운데 내비 링크 한 개.
+ * label은 이미 번역된 문자열/노드를 넘긴다 — 이 컴포넌트는 i18n을 모른다.
+ * @public
+ */
+export interface LandingHeaderLink {
+    href: string;
+    label: ReactNode;
+    /** 현재 위치면 true — aria-current="page" 가 붙는다 */
+    current?: boolean;
+}
+/** @public */
+export interface LandingHeaderProps {
+    /** 브랜드 로고. 문자열이면 이미지 URL로 보고 <img>로 렌더하고, 노드면 그대로 넣는다. */
+    logo?: ReactNode;
+    /** logo가 문자열(URL)일 때의 대체 텍스트 */
+    logoAlt?: string;
+    /**
+     * 로고 클릭 시 이동 위치.
+     *
+     * 주지 않으면 로고를 링크로 감싸지 않는다. 예전에는 기본값이 '#'이라
+     * 갈 곳이 없어도 늘 <a>가 씌워졌다 — 눌러도 주소에 #만 붙는 죽은 링크가
+     * 되고, 낭독기는 목적지 없는 링크를 하나 더 읽는다.
+     */
+    logoHref?: string;
+    /** 가운데 내비 링크들. 좁은 화면에서는 햄버거 안으로 접힌다. */
+    links?: LandingHeaderLink[];
+    /** 우측 액션 영역 — 로그인 버튼 등을 자유롭게 주입한다. */
+    actions?: ReactNode;
+    /** 헤더 루트(&lt;header&gt;)에 덧붙일 클래스 */
+    className?: string;
+    /**
+     * 가운데 정렬 컨테이너 클래스. 이 컴포넌트는 최대폭·좌우 여백을 정하지 않으므로,
+     * 사이트의 컨테이너 클래스를 넘겨 폭을 맞춘다. 없으면 헤더 폭 전체를 쓴다.
+     */
+    containerClassName?: string;
+    /**
+     * 링크 렌더를 가로챈다. 라우터 링크(next/link 등)를 써야 클라이언트 이동이 유지된다.
+     * 없으면 평범한 &lt;a&gt; 로 그린다.
+     */
+    renderLink?: (link: LandingHeaderLink, props: {
+        onClick?: () => void;
+    }) => ReactNode;
+    /** 햄버거 버튼의 접근성 이름 — 소비처가 번역해서 넘긴다 */
+    menuLabel?: {
+        open: string;
+        close: string;
+    };
+}
+/**
+ * 랜딩/마케팅 페이지용 상단 고정 헤더.
+ *
+ * 로고 · 가운데 링크 · 우측 액션을 전부 주입받는 표현 전용 컴포넌트다.
+ * i18n·인증·특정 버튼 구현에 의존하지 않으므로 제품마다 다른 내용으로 재사용할 수 있다.
+ *
+ * 좁은 화면(≤960px)에서는 가운데 링크를 감추고 햄버거로 연다. 링크가 페이지 내
+ * 앵커가 아니라 사이트 경로일 때 모바일에서 이동 수단이 사라지지 않게 하려는 것이다.
+ *
+ * 색·높이는 컴포넌트 로컬 CSS 변수로 조정한다
+ * (`--landing-header-bg` / `--landing-header-border` / `--landing-header-height` /
+ *  `--landing-header-link-color` / `--landing-header-link-hover`).
+ *
+ * @public
+ */
+export default function LandingHeader({ logo, logoAlt, logoHref, links, actions, className, containerClassName, renderLink, menuLabel, }: LandingHeaderProps): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import './LandingHeader.css';
+/**
+ * 랜딩/마케팅 페이지용 상단 고정 헤더.
+ *
+ * 로고 · 가운데 링크 · 우측 액션을 전부 주입받는 표현 전용 컴포넌트다.
+ * i18n·인증·특정 버튼 구현에 의존하지 않으므로 제품마다 다른 내용으로 재사용할 수 있다.
+ *
+ * 좁은 화면(≤960px)에서는 가운데 링크를 감추고 햄버거로 연다. 링크가 페이지 내
+ * 앵커가 아니라 사이트 경로일 때 모바일에서 이동 수단이 사라지지 않게 하려는 것이다.
+ *
+ * 색·높이는 컴포넌트 로컬 CSS 변수로 조정한다
+ * (`--landing-header-bg` / `--landing-header-border` / `--landing-header-height` /
+ *  `--landing-header-link-color` / `--landing-header-link-hover`).
+ *
+ * @public
+ */
+export default function LandingHeader({ logo, logoAlt = '', logoHref, links = [], actions, className, containerClassName, renderLink, menuLabel = { open: '메뉴 열기', close: '메뉴 닫기' }, }) {
+    const [open, setOpen] = useState(false);
+    const innerClass = containerClassName
+        ? `${containerClassName} landing-header__inner`
+        : 'landing-header__inner';
+    const link = (item, onClick) => {
+        if (renderLink)
+            return renderLink(item, { onClick });
+        return (_jsx("a", { href: item.href, onClick: onClick, "aria-current": item.current ? 'page' : undefined, children: item.label }));
+    };
+    return (_jsxs("header", { className: className ? `landing-header ${className}` : 'landing-header', children: [_jsxs("div", { className: innerClass, children: [logo != null && (() => {
+                        const brand = typeof logo === 'string'
+                            ? _jsx("img", { src: logo, alt: logoAlt, className: "landing-header__logo" })
+                            : logo;
+                        return logoHref
+                            ? _jsx("a", { href: logoHref, className: "landing-header__brand", children: brand })
+                            : _jsx("div", { className: "landing-header__brand", children: brand });
+                    })(), links.length > 0 && (_jsx("nav", { className: "landing-header__links", children: links.map(item => (_jsx("span", { children: link(item) }, item.href))) })), _jsxs("div", { className: "landing-header__actions", children: [actions, links.length > 0 && (_jsx("button", { type: "button", onClick: () => setOpen(v => !v), "aria-expanded": open, "aria-controls": "landing-header-drawer", "aria-label": open ? menuLabel.close : menuLabel.open, className: open
+                                    ? 'landing-header__toggle landing-header__toggle--open'
+                                    : 'landing-header__toggle', children: _jsxs("span", { className: "landing-header__burger", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) }))] })] }), links.length > 0 && (_jsx("nav", { id: "landing-header-drawer", hidden: !open, className: "landing-header__drawer", children: _jsx("div", { className: containerClassName ?? undefined, children: links.map(item => (_jsx("span", { className: "landing-header__drawer-item", children: link(item, () => setOpen(false)) }, item.href))) }) }))] }));
+}