@wishket/design-system 2.2.1 → 3.0.1

package/scripts/codemods/__tests__/__fixtures__/menu-split/spread-props.output.tsx

@@ -0,0 +1,4 @@
+import { Menu } from '@wishket/design-system';
+
+export const Page = (props: MenuProps) => // TODO: codemod could not safely resolve spread props — manually choose MenuLink or MenuButton.
+<Menu {...props} />;

package/scripts/codemods/__tests__/run-fixtures.cjs

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+/**
+ * Codemod fixture 검증 스크립트.
+ *
+ * 각 codemod에 대해 `__fixtures__/<codemod-name>/<case>.input.tsx`를
+ * jscodeshift로 변환한 결과를 `<case>.output.tsx`와 비교한다.
+ *
+ * 사용:
+ *   node scripts/codemods/__tests__/run-fixtures.js
+ *
+ * 회귀 방어 목적. CI에서 매 PR 마다 실행하면 codemod 변경 시 회귀를 잡을 수 있다.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const CODEMODS = ['add-as-link', 'menu-split'];
+const ROOT = path.join(__dirname, '..');
+const FIXTURES_ROOT = path.join(__dirname, '__fixtures__');
+
+function normalize(s) {
+  // Whitespace + 사소한 포맷 차이 흡수
+  return s.replace(/\s+/g, ' ').replace(/\s*([{}<>=,;])\s*/g, '$1').trim();
+}
+
+function runCodemod(codemodPath, inputPath) {
+  // jscodeshift를 stdout으로 출력
+  const out = execSync(
+    `npx jscodeshift -t "${codemodPath}" --parser=tsx --dry --print --silent --stdin --no-babel < "${inputPath}"`,
+    { encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
+  ).trim();
+
+  // --print는 변환된 코드를 출력하지만 헤더(파일 경로 등)도 같이 나옴.
+  // 가장 단순한 방법: tmp 파일에 input을 복사 후 변환 결과를 stdout으로 읽기
+  return out;
+}
+
+let passed = 0;
+let failed = 0;
+const failures = [];
+
+for (const codemod of CODEMODS) {
+  const codemodPath = path.join(ROOT, `${codemod}.ts`);
+  const fixturesDir = path.join(FIXTURES_ROOT, codemod);
+
+  if (!fs.existsSync(fixturesDir)) {
+    console.log(`(skip) no fixtures for ${codemod}`);
+    continue;
+  }
+
+  const cases = fs
+    .readdirSync(fixturesDir)
+    .filter(f => f.endsWith('.input.tsx'))
+    .map(f => f.replace('.input.tsx', ''));
+
+  for (const c of cases) {
+    const inputPath = path.join(fixturesDir, `${c}.input.tsx`);
+    const outputPath = path.join(fixturesDir, `${c}.output.tsx`);
+
+    if (!fs.existsSync(outputPath)) {
+      failed++;
+      failures.push(`${codemod}/${c}: missing ${c}.output.tsx`);
+      continue;
+    }
+
+    // Input을 임시 파일로 복사한 뒤 jscodeshift로 in-place 변환, 결과 읽기
+    const tmpDir = fs.mkdtempSync(path.join(require('os').tmpdir(), 'codemod-test-'));
+    const tmpFile = path.join(tmpDir, `${c}.tsx`);
+    fs.copyFileSync(inputPath, tmpFile);
+    try {
+      execSync(
+        `npx jscodeshift -t "${codemodPath}" --parser=tsx --extensions=tsx --no-babel "${tmpFile}"`,
+        { stdio: 'pipe' },
+      );
+      const actual = fs.readFileSync(tmpFile, 'utf8');
+      const expected = fs.readFileSync(outputPath, 'utf8');
+
+      if (normalize(actual) === normalize(expected)) {
+        passed++;
+        console.log(`  ✓ ${codemod}/${c}`);
+      } else {
+        failed++;
+        failures.push(
+          `${codemod}/${c}:\n--- expected ---\n${expected}\n--- actual ---\n${actual}`,
+        );
+        console.log(`  ✗ ${codemod}/${c}`);
+      }
+    } finally {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  }
+}
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) {
+  console.log('\n--- failures ---');
+  failures.forEach(f => console.log(f + '\n'));
+  process.exit(1);
+}

package/scripts/codemods/add-as-link.ts

@@ -0,0 +1,110 @@
+import type {
+  API,
+  ASTPath,
+  Collection,
+  FileInfo,
+  ImportDeclaration,
+  JSCodeshift,
+  JSXAttribute,
+  JSXMemberExpression,
+  JSXOpeningElement,
+} from 'jscodeshift';
+
+const TARGET_COMPONENTS = new Set([
+  'TextLink',
+  'Menu',
+  'GNBList.Item',
+]);
+
+const DESIGN_SYSTEM_PACKAGE = '@wishket/design-system';
+const NEXT_LINK_PACKAGE = 'next/link';
+const NEXT_LINK_LOCAL_NAME = 'Link';
+
+export default function transformer(file: FileInfo, api: API): string {
+  const j: JSCodeshift = api.jscodeshift;
+  const root = j(file.source);
+
+  const dsImport: Collection<ImportDeclaration> = root.find(
+    j.ImportDeclaration,
+    {
+      source: { value: DESIGN_SYSTEM_PACKAGE },
+    },
+  );
+  if (dsImport.size() === 0) return file.source;
+
+  let didChange = false;
+
+  root
+    .find(j.JSXOpeningElement)
+    .forEach((path: ASTPath<JSXOpeningElement>) => {
+      const name = getJSXName(path.node);
+      if (!name || !TARGET_COMPONENTS.has(name)) return;
+
+      const attrs = path.node.attributes ?? [];
+
+      const hasAs = attrs.some(
+        (attr): attr is JSXAttribute =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'as',
+      );
+      if (hasAs) return;
+
+      const hasHref = attrs.some(
+        (attr): attr is JSXAttribute =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'href',
+      );
+      if (!hasHref) return;
+
+      const asAttr = j.jsxAttribute(
+        j.jsxIdentifier('as'),
+        j.jsxExpressionContainer(j.identifier(NEXT_LINK_LOCAL_NAME)),
+      );
+      path.node.attributes = [asAttr, ...attrs];
+      didChange = true;
+    });
+
+  if (!didChange) return file.source;
+
+  const hasNextLinkImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: NEXT_LINK_PACKAGE },
+      })
+      .size() > 0;
+
+  if (!hasNextLinkImport) {
+    const newImport = j.importDeclaration(
+      [j.importDefaultSpecifier(j.identifier(NEXT_LINK_LOCAL_NAME))],
+      j.literal(NEXT_LINK_PACKAGE),
+    );
+    root.get().node.program.body.unshift(newImport);
+  }
+
+  return root.toSource({ quote: 'single' });
+}
+
+function getJSXName(node: JSXOpeningElement): string | null {
+  const { name } = node;
+  if (name.type === 'JSXIdentifier') return name.name;
+  if (name.type === 'JSXMemberExpression') {
+    return memberExpressionToString(name);
+  }
+  return null;
+}
+
+function memberExpressionToString(
+  expr: JSXMemberExpression,
+): string | null {
+  const right = expr.property.name;
+  if (expr.object.type === 'JSXIdentifier') {
+    return `${expr.object.name}.${right}`;
+  }
+  if (expr.object.type === 'JSXMemberExpression') {
+    const left = memberExpressionToString(expr.object);
+    return left ? `${left}.${right}` : null;
+  }
+  return null;
+}

package/scripts/codemods/menu-split.ts

@@ -0,0 +1,252 @@
+import type {
+  API,
+  ASTPath,
+  Collection,
+  FileInfo,
+  ImportDeclaration,
+  ImportSpecifier,
+  JSCodeshift,
+  JSXAttribute,
+  JSXIdentifier,
+  JSXOpeningElement,
+} from 'jscodeshift';
+
+const DESIGN_SYSTEM_PACKAGE = '@wishket/design-system';
+const SOURCE_NAME = 'Menu';
+const LINK_NAME = 'MenuLink';
+const BUTTON_NAME = 'MenuButton';
+
+/**
+ * v3 — `Menu` 컴포넌트를 `MenuLink` / `MenuButton`으로 분리하는 codemod.
+ *
+ * 변환 규칙:
+ *
+ * 1. `@wishket/design-system`에서 import된 `Menu`만 처리 (alias 미지원).
+ * 2. JSX 호출 분석:
+ *    - `href` prop 있음 → `<MenuLink ...>`로 rename + import 정리
+ *    - `href` 없고 `onClick` 있음 → `<MenuButton ...>`로 rename + import 정리
+ *    - 둘 다 있음 (모순) → 변환 안 함 + TODO 코멘트
+ *    - 둘 다 없음 → 변환 안 함 + TODO 코멘트
+ *    - spread props (`<Menu {...props} />`) → 변환 안 함 + TODO 코멘트
+ * 3. import 정리:
+ *    - `Menu`를 사용된 변형(`MenuLink` / `MenuButton` / 둘 다)으로 교체
+ *    - 모든 호출을 변환하지 못해 `Menu`가 여전히 필요한 경우 `Menu`도 유지
+ */
+export default function transformer(file: FileInfo, api: API): string {
+  const j: JSCodeshift = api.jscodeshift;
+  const root = j(file.source);
+
+  const dsImports: Collection<ImportDeclaration> = root.find(
+    j.ImportDeclaration,
+    {
+      source: { value: DESIGN_SYSTEM_PACKAGE },
+    },
+  );
+  if (dsImports.size() === 0) return file.source;
+
+  // `Menu`가 alias 없이 default-named로 import 되었는지 확인.
+  let hasMenuImport = false;
+  let hasAliasedMenuImport = false;
+
+  dsImports.forEach(path => {
+    const specifiers = path.node.specifiers ?? [];
+    specifiers.forEach(spec => {
+      if (spec.type !== 'ImportSpecifier') return;
+      const importedName = spec.imported.name;
+      if (importedName !== SOURCE_NAME) return;
+      const localName = spec.local?.name ?? importedName;
+      if (localName !== SOURCE_NAME) {
+        hasAliasedMenuImport = true;
+      } else {
+        hasMenuImport = true;
+      }
+    });
+  });
+
+  if (!hasMenuImport && !hasAliasedMenuImport) {
+    return file.source;
+  }
+
+  let didChange = false;
+  let usedMenuLink = false;
+  let usedMenuButton = false;
+  let hasUnconvertedMenu = false;
+
+  if (hasAliasedMenuImport) {
+    // alias가 있는 경우 안전하게 변환하기 어려움 — 파일 상단에 안내 코멘트 추가.
+    addLeadingComment(
+      j,
+      root,
+      ` TODO: codemod could not safely resolve aliased Menu import — manually split into MenuLink / MenuButton.`,
+    );
+    return root.toSource({ quote: 'single' });
+  }
+
+  root
+    .find(j.JSXOpeningElement)
+    .forEach((path: ASTPath<JSXOpeningElement>) => {
+      const name = getJSXName(path.node);
+      if (name !== SOURCE_NAME) return;
+
+      const attrs = path.node.attributes ?? [];
+
+      const hasSpread = attrs.some(attr => attr.type === 'JSXSpreadAttribute');
+      if (hasSpread) {
+        addCommentBefore(
+          j,
+          path,
+          ` TODO: codemod could not safely resolve spread props — manually choose MenuLink or MenuButton.`,
+        );
+        hasUnconvertedMenu = true;
+        return;
+      }
+
+      const hasHref = attrs.some(
+        (attr): attr is JSXAttribute =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'href',
+      );
+      const hasOnClick = attrs.some(
+        (attr): attr is JSXAttribute =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'onClick',
+      );
+
+      if (hasHref && hasOnClick) {
+        addCommentBefore(
+          j,
+          path,
+          ` TODO: codemod could not safely resolve — manually choose MenuLink or MenuButton.`,
+        );
+        hasUnconvertedMenu = true;
+        return;
+      }
+
+      if (!hasHref && !hasOnClick) {
+        addCommentBefore(
+          j,
+          path,
+          ` TODO: codemod could not safely resolve — Menu without href or onClick. Choose MenuLink (add href) or MenuButton (add onClick).`,
+        );
+        hasUnconvertedMenu = true;
+        return;
+      }
+
+      const target = hasHref ? LINK_NAME : BUTTON_NAME;
+      renameJSXElement(j, path, target);
+
+      if (target === LINK_NAME) usedMenuLink = true;
+      else usedMenuButton = true;
+
+      didChange = true;
+    });
+
+  // Import 정리.
+  dsImports.forEach(path => {
+    const specifiers = path.node.specifiers ?? [];
+    const next: ImportSpecifier[] = [];
+    let touched = false;
+
+    specifiers.forEach(spec => {
+      if (spec.type !== 'ImportSpecifier') {
+        next.push(spec as ImportSpecifier);
+        return;
+      }
+      if (spec.imported.name !== SOURCE_NAME) {
+        next.push(spec);
+        return;
+      }
+      // `Menu`를 제거하고 사용된 변형으로 교체.
+      touched = true;
+      if (hasUnconvertedMenu) {
+        // 일부 변환 못한 호출이 남아있어 Menu도 유지가 필요할 수 있음.
+        next.push(spec);
+      }
+      if (usedMenuLink) {
+        next.push(
+          j.importSpecifier(j.identifier(LINK_NAME)) as ImportSpecifier,
+        );
+      }
+      if (usedMenuButton) {
+        next.push(
+          j.importSpecifier(j.identifier(BUTTON_NAME)) as ImportSpecifier,
+        );
+      }
+    });
+
+    if (touched) {
+      // 중복 제거 (같은 이름이 이미 import된 경우 대비).
+      const seen = new Set<string>();
+      path.node.specifiers = next.filter(spec => {
+        if (spec.type !== 'ImportSpecifier') return true;
+        const importedName = spec.imported.name;
+        const localName = spec.local?.name ?? importedName;
+        const key = `${importedName}::${localName}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      didChange = true;
+    }
+  });
+
+  if (!didChange) return file.source;
+
+  return root.toSource({ quote: 'single' });
+}
+
+function getJSXName(node: JSXOpeningElement): string | null {
+  const { name } = node;
+  if (name.type === 'JSXIdentifier') return name.name;
+  return null;
+}
+
+function renameJSXElement(
+  j: JSCodeshift,
+  path: ASTPath<JSXOpeningElement>,
+  newName: string,
+) {
+  const opening = path.node;
+  (opening.name as JSXIdentifier).name = newName;
+
+  // self-closing이 아니면 닫는 태그도 함께 갱신.
+  const parent = path.parent.node;
+  if (parent && parent.type === 'JSXElement' && parent.closingElement) {
+    const closingName = parent.closingElement.name;
+    if (closingName.type === 'JSXIdentifier') {
+      (closingName as JSXIdentifier).name = newName;
+    }
+  }
+}
+
+function addCommentBefore(
+  j: JSCodeshift,
+  path: ASTPath<JSXOpeningElement>,
+  message: string,
+) {
+  // JSX element 자체의 부모(보통 JSXElement)를 찾아 그 앞에 코멘트를 삽입.
+  let current: ASTPath | null = path;
+  while (current && current.node && current.node.type !== 'JSXElement') {
+    current = current.parent;
+  }
+  if (!current) return;
+
+  const node = current.node;
+  node.comments = node.comments ?? [];
+  node.comments.push(j.commentLine(message, true, false));
+}
+
+function addLeadingComment(
+  j: JSCodeshift,
+  root: Collection,
+  message: string,
+) {
+  const program = root.get().node.program;
+  const body = program.body;
+  if (!body || body.length === 0) return;
+  const first = body[0];
+  first.comments = first.comments ?? [];
+  first.comments.push(j.commentLine(message, true, false));
+}

package/dist/Components/Navigations/Menu/Menu.d.ts

@@ -1,81 +0,0 @@
-import { ReactNode } from 'react';
-import { MediumSystemIconName, SmallSystemIconName } from '../../DataDisplays/SystemIcon';
-import { IconButtonDropdownItem } from '../../Inputs';
-export interface MenuProps {
-    type?: 'main' | 'sub';
-    variant?: 'white' | 'gray';
-    name: string;
-    badgeCount?: string;
-    isSelected?: boolean;
-    leadingIcon?: MediumSystemIconName;
-    iconButtonName?: SmallSystemIconName;
-    onClick?: () => void;
-    onOptionClick?: () => void;
-    href?: string;
-    children?: ReactNode;
-    items?: IconButtonDropdownItem[];
-    selectedItem?: IconButtonDropdownItem;
-    onItemClick?: (item: IconButtonDropdownItem) => void;
-}
-/**
- * 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
- *
- * @param {Object} props
- * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 ('main', 'sub')
- * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형 ('white', 'gray')
- * @param {string} props.name - 메뉴에 표시될 텍스트
- * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
- * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
- * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘(medium 사이즈)
- * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
- * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
- * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
- * @param {string} [props.href] - 메뉴 링크 주소
- * @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
- * @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
- * @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
- * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 컴포넌트 사용 시 필요 (item: Item) => {}
- *
- * @example
- * // 기본 메뉴
- * <Menu
- *   name="메뉴 항목"
- *   onClick={() => console.log('메뉴 클릭')}
- * />
- *
- * // 아이콘과 뱃지가 있는 서브 메뉴
- * <Menu
- *   type="sub"
- *   name="서브 메뉴"
- *   leadingIcon="home"
- *   badgeCount="5"
- *   onClick={() => console.log('서브 메뉴 클릭')}
- * />
- *
- * // IconButtonDropdown과 함께 사용시
- * <Menu
- *   name="메뉴"
- *   onClick={() => console.log('메뉴 클릭')}
- *   iconButtonName="small_more_options"
- *   items={items}
- *   selectedItem={selectedItem}
- *   onItemClick={onItemClick}
- * />
- *
- * // 드롭다운이 필요하지 않은 옵션 메뉴(ex. 버튼 클릭 시 모달 오픈))
- * <Menu
- *   variant="gray"
- *   name="옵션 메뉴"
- *   isSelected={true}
- *   iconButtonName="small_more_options"
- *   onClick={() => console.log('메뉴 클릭')}
- *   onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
- * />
- * // 링크로 사용해야하는 메뉴
- * <Menu
- *   href="/test"
- *   name="테스트 메뉴"
- * />
- */
-declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, href, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
-export { Menu };

package/dist/Components/Navigations/Menu/Menu.js

@@ -1,62 +0,0 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{twJoin as s,twMerge as i}from"tailwind-merge";import r from"next/link";import"../../DataDisplays/Avatar/Avatar.js";import{CountBadge as n}from"../../DataDisplays/CountBadge/CountBadge.js";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as p}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import"@wishket/yogokit";import"../../Inputs/AutoCompleteList/AutoCompleteList.parts.js";import"../../Inputs/Input/Input.js";import"../../Inputs/Input/PasswordInput.js";import"../../Inputs/Input/LabelInput.js";import"../../Inputs/Input/InputTypeSelector.js";import"../../Inputs/Button/Button.js";import"../../Inputs/Calendar/Calendar.utils.js";import"../../Inputs/Checkbox/Checkbox.js";import"../../Inputs/ChoiceChip/ChoiceChip.js";import{IconButton as m}from"../../Inputs/IconButton/IconButton.js";import"../../Inputs/Radio/Radio.js";import"../../Inputs/TextField/TextField.js";import"../../Inputs/CommentArea/CommentArea.js";import{IconButtonDropdown as l}from"../../Inputs/IconButtonDropdown/IconButtonDropdown.js";import"../../Inputs/FilterChip/FilterChip.js";
-/**
- * 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
- *
- * @param {Object} props
- * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 ('main', 'sub')
- * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형 ('white', 'gray')
- * @param {string} props.name - 메뉴에 표시될 텍스트
- * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
- * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
- * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘(medium 사이즈)
- * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
- * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
- * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
- * @param {string} [props.href] - 메뉴 링크 주소
- * @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
- * @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
- * @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
- * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 컴포넌트 사용 시 필요 (item: Item) => {}
- *
- * @example
- * // 기본 메뉴
- * <Menu
- *   name="메뉴 항목"
- *   onClick={() => console.log('메뉴 클릭')}
- * />
- *
- * // 아이콘과 뱃지가 있는 서브 메뉴
- * <Menu
- *   type="sub"
- *   name="서브 메뉴"
- *   leadingIcon="home"
- *   badgeCount="5"
- *   onClick={() => console.log('서브 메뉴 클릭')}
- * />
- *
- * // IconButtonDropdown과 함께 사용시
- * <Menu
- *   name="메뉴"
- *   onClick={() => console.log('메뉴 클릭')}
- *   iconButtonName="small_more_options"
- *   items={items}
- *   selectedItem={selectedItem}
- *   onItemClick={onItemClick}
- * />
- *
- * // 드롭다운이 필요하지 않은 옵션 메뉴(ex. 버튼 클릭 시 모달 오픈))
- * <Menu
- *   variant="gray"
- *   name="옵션 메뉴"
- *   isSelected={true}
- *   iconButtonName="small_more_options"
- *   onClick={() => console.log('메뉴 클릭')}
- *   onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
- * />
- * // 링크로 사용해야하는 메뉴
- * <Menu
- *   href="/test"
- *   name="테스트 메뉴"
- * />
- */const u=({type:u="main",variant:c="white",name:d,isSelected:y=!1,badgeCount:I,leadingIcon:g,iconButtonName:h,onClick:j,onOptionClick:C,href:w,items:x,selectedItem:B,onItemClick:f})=>{const b=!!(h&&x&&f&&B),k=!!h&&!!C,D=(t,e,o)=>{const r="sub"===t?"pl-12":"",n={white:s("hover:bg-w-gray-50",o&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:s("hover:bg-w-gray-100",o&&"bg-w-gray-100  hover:bg-w-gray-100")};return i("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",r,n[e])},v=/*#__PURE__*/t(e,{children:[g&&/*#__PURE__*/o(p,{testId:"design-system-menu-leading-icon",name:g,className:s("white"===c&&y&&"text-primary")}),
-/*#__PURE__*/o(a,{"data-testid":"design-system-menu-name",variant:"body16",className:"w-full select-none",children:d}),I&&/*#__PURE__*/o(n,{variant:((t,e)=>"white"!==t?"white_gray":e?"primary":"gray")(c,y),text:I,className:"relative",showZero:!0}),b&&/*#__PURE__*/o(l,{size:"sm",icon:h,items:x,selectedItem:B,onItemClick:f}),k&&/*#__PURE__*/o(m,{size:"sm",className:"shrink-0",onClick:t=>{t.stopPropagation(),C()},children:/*#__PURE__*/o(p,{name:h})})]});return w?/*#__PURE__*/o(r,{href:w,"data-testid":"design-system-menu",className:D(u,c,y),children:v}):/*#__PURE__*/o("button",{"data-testid":"design-system-menu",className:D(u,c,y),onClick:j,children:v})};export{u as Menu};

package/dist/cjs/Components/Navigations/Menu/Menu.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("next/link");require("../../DataDisplays/Avatar/Avatar.js");var s=require("../../DataDisplays/CountBadge/CountBadge.js"),n=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var i=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js"),require("@wishket/yogokit"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LabelInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"),require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js");var a=require("../../Inputs/IconButton/IconButton.js");require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js");var o=require("../../Inputs/IconButtonDropdown/IconButtonDropdown.js");require("../../Inputs/FilterChip/FilterChip.js");exports.Menu=({type:u="main",variant:p="white",name:l,isSelected:c=!1,badgeCount:m,leadingIcon:d,iconButtonName:y,onClick:I,onOptionClick:g,href:j,items:h,selectedItem:q,onItemClick:x})=>{const C=!!(y&&h&&x&&q),w=!!y&&!!g,B=(e,r,s)=>{const n="sub"===e?"pl-12":"",i={white:t.twJoin("hover:bg-w-gray-50",s&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:t.twJoin("hover:bg-w-gray-100",s&&"bg-w-gray-100  hover:bg-w-gray-100")};return t.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",n,i[r])},v=/*#__PURE__*/e.jsxs(e.Fragment,{children:[d&&/*#__PURE__*/e.jsx(i.SystemIcon,{testId:"design-system-menu-leading-icon",name:d,className:t.twJoin("white"===p&&c&&"text-primary")}),
-/*#__PURE__*/e.jsx(n.Typography,{"data-testid":"design-system-menu-name",variant:"body16",className:"w-full select-none",children:l}),m&&/*#__PURE__*/e.jsx(s.CountBadge,{variant:((e,t)=>"white"!==e?"white_gray":t?"primary":"gray")(p,c),text:m,className:"relative",showZero:!0}),C&&/*#__PURE__*/e.jsx(o.IconButtonDropdown,{size:"sm",icon:y,items:h,selectedItem:q,onItemClick:x}),w&&/*#__PURE__*/e.jsx(a.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),g()},children:/*#__PURE__*/e.jsx(i.SystemIcon,{name:y})})]});return j?/*#__PURE__*/e.jsx(r,{href:j,"data-testid":"design-system-menu",className:B(u,p,c),children:v}):/*#__PURE__*/e.jsx("button",{"data-testid":"design-system-menu",className:B(u,p,c),onClick:I,children:v})};