feat(icon): phosphor react adapter — 7C.2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/package.json

@@ -10,6 +10,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\" --ignore-path .gitignore"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "axios": "^1.14.0",
     "next": "14.2.35",
     "react": "^18",

frontend/src/components/ui/Icon.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React from 'react';
+import {
+  // 디자인 파일에 등장하는 모든 아이콘 import
+  SquaresFour, BookOpen, ArrowsClockwise, TrendUp, Folders, Infinity as InfinityIcon,
+  Fire, Check, X, Triangle, Stack, Target, ChartPolar, ChartLineUp, ChartPieSlice, ChartBar,
+  CheckCircle, MagicWand, Plus, CaretUp, CaretDown, CaretRight, CaretLeft,
+  BookBookmark, Function as FunctionIcon, Dna, ClockCounterClockwise, PencilSimple, Archive,
+  Users, ChalkboardTeacher, Sliders, FilePdf, MoonStars, Devices, Keyboard, Brain, Funnel,
+  MagnifyingGlass, DownloadSimple, CalendarBlank, CalendarCheck, BellRinging, Bell, Sparkle,
+  Minus, DotsThree, Translate, BookOpenText, SkipForward, Info, SignOut, Camera, Crown,
+  Export, Gear, ArrowRight, type IconProps as PhIconProps, type IconWeight,
+} from '@phosphor-icons/react';
+
+// name → component map. 새 아이콘 추가 시 이 맵에만 등록.
+const ICON_MAP = {
+  'squares-four': SquaresFour,
+  'book-open': BookOpen,
+  'arrows-clockwise': ArrowsClockwise,
+  'trend-up': TrendUp,
+  'folders': Folders,
+  'infinity': InfinityIcon,
+  'fire': Fire,
+  'check': Check,
+  'x': X,
+  'triangle': Triangle,
+  'stack': Stack,
+  'target': Target,
+  'chart-polar': ChartPolar,
+  'chart-line-up': ChartLineUp,
+  'chart-pie-slice': ChartPieSlice,
+  'chart-bar': ChartBar,
+  'check-circle': CheckCircle,
+  'magic-wand': MagicWand,
+  'plus': Plus,
+  'caret-up': CaretUp,
+  'caret-down': CaretDown,
+  'caret-right': CaretRight,
+  'caret-left': CaretLeft,
+  'book-bookmark': BookBookmark,
+  'function': FunctionIcon,
+  'dna': Dna,
+  'clock-counter-clockwise': ClockCounterClockwise,
+  'pencil-simple': PencilSimple,
+  'archive': Archive,
+  'users': Users,
+  'chalkboard-teacher': ChalkboardTeacher,
+  'sliders': Sliders,
+  'file-pdf': FilePdf,
+  'moon-stars': MoonStars,
+  'devices': Devices,
+  'keyboard': Keyboard,
+  'brain': Brain,
+  'funnel': Funnel,
+  'magnifying-glass': MagnifyingGlass,
+  'download-simple': DownloadSimple,
+  'calendar-blank': CalendarBlank,
+  'calendar-check': CalendarCheck,
+  'bell-ringing': BellRinging,
+  'bell': Bell,
+  'sparkle': Sparkle,
+  'minus': Minus,
+  'dots-three': DotsThree,
+  'translate': Translate,
+  'book-open-text': BookOpenText,
+  'skip': SkipForward,
+  'info': Info,
+  'sign-out': SignOut,
+  'camera': Camera,
+  'crown': Crown,
+  'export': Export,
+  'gear': Gear,
+  'arrow-right': ArrowRight,
+} as const;
+
+export type IconName = keyof typeof ICON_MAP;
+
+export interface IconProps extends Omit<PhIconProps, 'ref'> {
+  name: IconName;
+}
+
+/**
+ * ReLoop 공통 Icon 어댑터.
+ *
+ * 디자인 파일의 `<i class="ph ph-squares-four">` 에 대응.
+ * 사용: `<Icon name="squares-four" size={20} weight="regular" />`
+ */
+export function Icon({ name, weight = 'regular', size = 20, ...rest }: IconProps) {
+  const Component = ICON_MAP[name];
+  if (!Component) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn(`[Icon] unknown name: ${name}`);
+    }
+    return null;
+  }
+  return <Component weight={weight} size={size} {...rest} />;
+}