Chore/lucide react

.husky/pre-commit

@@ -1,63 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-echo "🔎 pre-commit: lint-staged 실행 및 최종 점검 시작"
-
-# 0) 커밋에 포함된 파일 목록 (추가/복사/수정)
-STAGED_FILES="$(git diff --name-only --cached --diff-filter=ACMR)"
-if [ -z "$STAGED_FILES" ]; then
-  echo "ℹ️  스테이징된 파일이 없습니다. 건너뜁니다."
-  exit 0
-fi
-
-# 1) 변경 파일만 자동 수정 (eslint --fix, prettier --write)
-if ! pnpm lint-staged; then
-  echo
-  echo "❌ lint-staged 단계에서 오류가 발생했습니다."
-  echo "   - 자동수정 불가한 린트 에러가 있을 수 있어요."
-  echo "   - 로컬에서 'pnpm lint'로 에러를 확인하고 수정한 뒤 다시 커밋하세요."
-  exit 1
-fi
-
-# 2) 최종 점검: 스테이징된 파일만 대상으로 검사(수정 없이 실패만 감지)
-PRETTIER_FAIL=0
-ESLINT_FAIL=0
-
-# 개행만 구분자로 사용 (공백 포함 파일명 안전)
-IFS="$(printf '\n')"
-for f in $STAGED_FILES; do
-  case "$f" in
-    *.js|*.jsx|*.ts|*.tsx|*.json|*.css|*.md)
-      # Prettier 포맷 준수 확인 (수정 없이 검사)
-      pnpm -s prettier --check "$f" || PRETTIER_FAIL=1
-      ;;
-  esac
-done
-
-for f in $STAGED_FILES; do
-  case "$f" in
-    *.js|*.jsx|*.ts|*.tsx)
-      # ESLint 최종 확인 (수정 없이 검사)
-      pnpm -s eslint --max-warnings=0 "$f" || ESLINT_FAIL=1
-      ;;
-  esac
-done
-unset IFS
-
-if [ "$PRETTIER_FAIL" -ne 0 ]; then
-  echo
-  echo "❌ Prettier 포맷 위반이 남아 있습니다."
-  echo "   - 'pnpm format' 후 다시 커밋하세요."
-  exit 1
-fi
-
-if [ "$ESLINT_FAIL" -ne 0 ]; then
-  echo
-  echo "❌ ESLint 위반이 남아 있습니다."
-  echo "   - 'pnpm lint:fix' 또는 수동 수정 후 다시 커밋하세요."
-  exit 1
-fi
-
-COUNT="$(printf '%s\n' "$STAGED_FILES" | wc -l | tr -d ' ')"
-echo "✅ pre-commit 통과: ${COUNT}개 파일 점검 완료"
-exit 0
+pnpm lint-staged

package.json

@@ -15,7 +15,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
+      "eslint --fix --max-warnings=0",
       "prettier --write"
     ],
     "*.{json,css,md}": [
@@ -24,6 +24,8 @@
   },
   "dependencies": {
     "@fontsource/pretendard": "^5.2.5",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
     "next": "15.5.3",
     "react": "19.1.0",
     "react-dom": "19.1.0"

src/app/page.tsx

@@ -1,6 +1,13 @@
+import { Icon } from "@/shared/ui/Icon";
+import { ICON_KEYS } from "@/shared/ui/Icon.registry";
+import clsx from "clsx";
+
 export default function Home() {
+  // 데모용 플래그 (상황에 따라 토글)
+  const compact = false; // true면 여백/그리드 조금 더 촘촘히
+
   return (
-    <main className="p-8 space-y-12">
+    <main className={clsx("p-8 space-y-12", compact && "p-6 space-y-8")}>
       {/* === 0. 페이지 안내 === */}
       <header className="space-y-2">
         <h1 className="t-32-b">globals.css 유틸 종합 테스트</h1>
@@ -270,6 +277,24 @@ export default function Home() {
           <p className="t-14-m">흰 카드 위의 대비 체크</p>
         </div>
       </section>
+
+      {/* === 아이콘 쇼케이스 === */}
+      <h1 className="mb-6 text-2xl font-bold">📦 Icon Showcase</h1>
+      <div
+        className={clsx(
+          "grid gap-6",
+          compact
+            ? "grid-cols-3 sm:grid-cols-4 md:grid-cols-5"
+            : "grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8",
+        )}
+      >
+        {ICON_KEYS.map((name) => (
+          <div key={name} className="flex flex-col items-center gap-2">
+            <Icon name={name} size={28} />
+            <span className="text-xs text-gray-600">{name}</span>
+          </div>
+        ))}
+      </div>
     </main>
   );
 }

src/shared/ui/Icon.registry.ts

@@ -0,0 +1,80 @@
+import {
+  ArrowLeft,
+  ArrowRight,
+  Bell,
+  BellRing,
+  Calendar,
+  CalendarDays,
+  CalendarRange,
+  Check,
+  CheckSquare,
+  Clock,
+  Eye,
+  EyeOff,
+  Grid3X3,
+  HelpCircle,
+  Info,
+  Laptop,
+  Layout,
+  Mail,
+  Maximize,
+  Menu,
+  Minus,
+  Monitor,
+  Move,
+  Plus,
+  RotateCcw,
+  Search,
+  Settings,
+  Smartphone,
+  StickyNote,
+  UserPlus,
+  Users,
+  X,
+} from "lucide-react";
+
+/**
+ * 아이콘 레지스트리
+ * - 필요한 Lucide 아이콘만 import 후 객체로 매핑
+ * - key는 프로젝트에서 사용할 이름 (camelCase)
+ */
+export const icons = {
+  eye: Eye,
+  eyeOff: EyeOff,
+  check: Check,
+  x: X,
+  mail: Mail,
+  arrowLeft: ArrowLeft,
+  arrowRight: ArrowRight,
+  search: Search,
+  userPlus: UserPlus,
+  monitor: Monitor,
+  laptop: Laptop,
+  smartphone: Smartphone,
+  calendar: Calendar,
+  calendarDays: CalendarDays,
+  calendarRange: CalendarRange,
+  checkSquare: CheckSquare,
+  stickyNote: StickyNote,
+  rotateCcw: RotateCcw,
+  bell: Bell,
+  clock: Clock,
+  users: Users,
+  bellRing: BellRing,
+  settings: Settings,
+  menu: Menu,
+  info: Info,
+  helpCircle: HelpCircle,
+  minus: Minus,
+  plus: Plus,
+  grid3X3: Grid3X3,
+  layout: Layout,
+  move: Move,
+  maximize: Maximize,
+} as const;
+
+/** 아이콘 이름 타입 */
+export type IconName = keyof typeof icons;
+
+/** 아이콘 key 리스트 (예: map 렌더링에 활용) */
+export const ICON_KEYS = Object.keys(icons) as IconName[];

src/shared/ui/Icon.tsx

@@ -0,0 +1,18 @@
+import type { IconProps } from "@/types/icon";
+import clsx from "clsx";
+import { icons } from "./Icon.registry";
+
+export function Icon({ name, size = 24, strokeWidth = 2, label, className, ...rest }: IconProps) {
+  const Cmp = icons[name];
+  return (
+    <Cmp
+      size={size}
+      strokeWidth={strokeWidth}
+      color="currentColor"
+      className={clsx("text-gray-900", className)}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      {...rest}
+    />
+  );
+}

src/types/icon.ts

@@ -0,0 +1,23 @@
+import type { IconName } from "@/shared/ui/Icon.registry";
+import type { Calendar } from "lucide-react";
+import type { ComponentProps } from "react";
+
+/** Lucide 아이콘 공통 props */
+type LucideBaseProps = ComponentProps<typeof Calendar>;
+
+/**
+ * 공통 Icon 컴포넌트 Props
+ * - 색상은 Tailwind text-* 클래스로 제어
+ * - color prop은 제외하고 항상 currentColor 사용
+ */
+export type IconProps = {
+  name: IconName;
+  /** 스크린리더용 라벨 (시각적 title 아님) */
+  label?: string;
+  /** 아이콘 크기 (기본 24) */
+  size?: number;
+  /** 선 굵기 (기본 2) */
+  strokeWidth?: number;
+  /** Tailwind 클래스와 결합 가능 */
+  className?: string;
+} & Omit<LucideBaseProps, "ref" | "color">;