sh-ui-cli 0.14.0 → 0.21.0

package/data/registry/react/components/header/index.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+type HeaderCtx = {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+};
+
+const HeaderContext = React.createContext<HeaderCtx | null>(null);
+
+function useHeader(): HeaderCtx {
+  const ctx = React.useContext(HeaderContext);
+  if (!ctx) {
+    throw new Error("Header 하위 컴포넌트는 <Header> 안에서만 사용할 수 있습니다.");
+  }
+  return ctx;
+}
+
+/* ───────── Root ─────────
+ * mode 판정은 CSS 미디어 쿼리에 위임(`--bp-md` 기준).
+ * 이 컴포넌트는 open/close 상태만 관리한다.
+ */
+
+/**
+ * 사이트 상단 헤더(`<header>`). 데스크탑에서는 inline nav, 모바일에서는 햄버거 + drawer로
+ * CSS가 자동 전환한다. 컴포넌트는 open/close 상태와 body 스크롤 잠금만 담당.
+ */
+export const Header = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & {
+    /**
+     * 모바일 drawer 초기 상태 (비제어 모드).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** 모바일 drawer 열림 상태 (제어 모드). 지정 시 내부 state 대신 이 값이 우선. */
+    open?: boolean;
+    /** drawer 열림 변경 콜백. 제어 모드에서는 이 안에서 외부 상태를 업데이트해야 한다. */
+    onOpenChange?: (open: boolean) => void;
+  }
+>(function Header(
+  { children, className, defaultOpen = false, open: openProp, onOpenChange, ...props },
+  ref,
+) {
+  const isControlled = openProp !== undefined;
+  const [internal, setInternal] = React.useState(defaultOpen);
+  const open = isControlled ? openProp : internal;
+  const setOpen = React.useCallback(
+    (v: boolean) => {
+      if (!isControlled) setInternal(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  // drawer 열림 동안 body 스크롤 잠금
+  React.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  return (
+    <HeaderContext.Provider value={{ open, setOpen }}>
+      <header
+        ref={ref}
+        className={cx("sh-ui-header", className)}
+        data-drawer-open={open ? "" : undefined}
+        {...props}
+      >
+        {children}
+      </header>
+    </HeaderContext.Provider>
+  );
+});
+
+/* ───────── Brand / Logo / Title ───────── */
+
+/** 좌측 브랜드 영역. HeaderLogo + HeaderTitle을 묶을 때 사용. */
+export const HeaderBrand = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function HeaderBrand({ className, ...props }, ref) {
+  return <div ref={ref} className={cx("sh-ui-header__brand", className)} {...props} />;
+});
+
+/** 브랜드 로고 슬롯. SVG 또는 이미지를 자식으로 둔다. */
+export const HeaderLogo = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function HeaderLogo({ className, ...props }, ref) {
+  return <span ref={ref} className={cx("sh-ui-header__logo", className)} {...props} />;
+});
+
+/** 브랜드 텍스트 타이틀. */
+export const HeaderTitle = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function HeaderTitle({ className, ...props }, ref) {
+  return <span ref={ref} className={cx("sh-ui-header__title", className)} {...props} />;
+});
+
+/* ───────── Trigger ─────────
+ * 햄버거 버튼. 모바일에서만 표시(CSS로 제어). 클릭 시 drawer 토글.
+ */
+
+/** 모바일 햄버거 토글 버튼. CSS 미디어 쿼리로 모바일에서만 노출되며 drawer 열림을 제어한다. */
+export const HeaderTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(function HeaderTrigger({ className, onClick, children, ...props }, ref) {
+  const { open, setOpen } = useHeader();
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cx("sh-ui-header__trigger", className)}
+      aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
+      aria-expanded={open}
+      data-open={open ? "" : undefined}
+      onClick={(e) => {
+        setOpen(!open);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {children ?? (open ? <CloseIcon /> : <MenuIcon />)}
+    </button>
+  );
+});
+
+/* ───────── Nav ─────────
+ * 자식(HeaderItem 등)을 두 곳에 렌더:
+ *   - inline nav  (wide 뷰포트)
+ *   - drawer      (narrow 뷰포트 + open 상태)
+ * CSS가 뷰포트에 맞춰 하나만 보이도록 처리한다.
+ */
+
+/**
+ * 내비게이션 영역. 자식을 inline nav와 mobile drawer 두 곳에 동시에 렌더하며
+ * CSS가 뷰포트에 따라 한 쪽만 보여준다.
+ */
+export const HeaderNav = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(function HeaderNav({ className, children, ...props }, ref) {
+  const { open, setOpen } = useHeader();
+  return (
+    <>
+      <nav
+        ref={ref}
+        className={cx("sh-ui-header__nav", className)}
+        {...props}
+      >
+        {children}
+      </nav>
+      {/* Drawer backdrop */}
+      <div
+        className="sh-ui-header__backdrop"
+        data-open={open ? "" : undefined}
+        onClick={() => setOpen(false)}
+        aria-hidden
+      />
+      {/* Drawer panel */}
+      <aside
+        className="sh-ui-header__drawer"
+        data-open={open ? "" : undefined}
+        aria-hidden={!open}
+      >
+        <div className="sh-ui-header__drawer-head">
+          <HeaderTrigger />
+        </div>
+        <nav className="sh-ui-header__drawer-nav">{children}</nav>
+      </aside>
+    </>
+  );
+});
+
+/* ───────── Item ───────── */
+
+/** 내비 한 항목(`<a>`). 클릭 시 모바일 drawer가 자동으로 닫힌다. `active`로 현재 위치 강조. */
+export const HeaderItem = React.forwardRef<
+  HTMLAnchorElement,
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * 현재 페이지 표시. `true`면 시각적으로 강조된다.
+     * 라우터 활성 상태와 직접 연결해 사용 (예: `active={pathname === href}`).
+     *
+     * @default false
+     */
+    active?: boolean;
+  }
+>(function HeaderItem({ className, active, onClick, href, ...props }, ref) {
+  const { setOpen } = useHeader();
+  return (
+    <a
+      ref={ref}
+      href={href}
+      className={cx("sh-ui-header__item", className)}
+      data-active={active ? "" : undefined}
+      onClick={(e) => {
+        setOpen(false);
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Actions (우측 트레일링) ───────── */
+
+/** 우측 트레일링 액션 영역. 검색·테마 토글·로그인 버튼 등을 둔다. */
+export const HeaderActions = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function HeaderActions({ className, ...props }, ref) {
+  return (
+    <div ref={ref} className={cx("sh-ui-header__actions", className)} {...props} />
+  );
+});
+
+/* ───────── 기본 아이콘 ───────── */
+
+function MenuIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M3 6h18M3 12h18M3 18h18"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M6 6l12 12M18 6L6 18"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/data/registry/react/components/header/styles.css

@@ -0,0 +1,190 @@
+/* ───── Root ───── */
+.sh-ui-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+}
+
+/* ───── Brand ───── */
+.sh-ui-header__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.sh-ui-header__logo {
+  display: inline-flex;
+  align-items: center;
+  color: var(--foreground);
+}
+
+.sh-ui-header__title {
+  font-size: var(--text-base);
+  font-weight: var(--weight-bold);
+  color: var(--foreground);
+  letter-spacing: -0.3px;
+}
+
+/* ───── Trigger (햄버거) ───── */
+.sh-ui-header__trigger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--foreground);
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  transition: background-color var(--duration-fast);
+}
+.sh-ui-header__trigger:hover {
+  background: var(--background-muted);
+}
+.sh-ui-header__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ───── Inline Nav ───── */
+.sh-ui-header__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.sh-ui-header__nav::-webkit-scrollbar {
+  display: none;
+}
+
+/* ───── Item ───── */
+.sh-ui-header__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+}
+.sh-ui-header__item:hover {
+  color: var(--foreground);
+  background: var(--background-muted);
+}
+.sh-ui-header__item[data-active] {
+  color: var(--foreground);
+  font-weight: var(--weight-semibold);
+}
+.sh-ui-header__item:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ───── Actions ───── */
+.sh-ui-header__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* ───── Drawer (backdrop + panel) — 기본 숨김 ───── */
+.sh-ui-header__backdrop,
+.sh-ui-header__drawer {
+  display: none;
+}
+
+/* ───── Mobile (< breakpoint.md) ───── */
+@media (max-width: 767px) {
+  /* 햄버거 노출 & 좌측 배치 */
+  .sh-ui-header__trigger {
+    display: inline-flex;
+    order: -1;
+  }
+  /* inline nav 숨김 */
+  .sh-ui-header__nav {
+    display: none;
+  }
+  /* 모바일에서 gap 조정 */
+  .sh-ui-header {
+    gap: var(--space-2);
+  }
+
+  /* backdrop */
+  .sh-ui-header__backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(8px);
+    z-index: var(--z-overlay);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+  .sh-ui-header__backdrop[data-open] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* drawer panel */
+  .sh-ui-header__drawer {
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: min(17.5rem, 85vw);
+    background: var(--background-subtle);
+    border-right: 1px solid var(--border);
+    z-index: var(--z-modal);
+    transform: translateX(-100%);
+    transition: transform var(--duration-base) var(--ease-standard);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+  .sh-ui-header__drawer[data-open] {
+    transform: translateX(0);
+  }
+
+  .sh-ui-header__drawer-head {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--space-2) var(--space-2);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sh-ui-header__drawer-nav {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-2);
+    gap: 1px;
+  }
+
+  .sh-ui-header__drawer .sh-ui-header__item {
+    padding: var(--space-3) var(--space-3);
+    font-size: var(--text-sm);
+    border-radius: calc(var(--radius) - 2px);
+  }
+}