refactor: 색상 유틸리티 통합 - colorMap/getColorStyle 중복 제거

- utils/color.js 생성 (COLOR_MAP, COLOR_OPTIONS, getColorStyle)
- Schedules.jsx: 1159줄 → 1139줄 (20줄 감소)
- ScheduleForm.jsx: 765줄 → 743줄 (22줄 감소)
- ScheduleCategory.jsx: 466줄 → 441줄 (25줄 감소)
- 3개 파일에서 중복 코드 제거, 공통 유틸리티 import로 교체

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend-temp/src/pages/pc/admin/schedules/ScheduleCategory.jsx

@@ -8,32 +8,7 @@ import { AdminLayout, ConfirmDialog } from '@/components/pc/admin';
 import { useAdminAuth } from '@/hooks/pc/admin';
 import { useToast } from '@/hooks/common';
 import * as categoriesApi from '@/api/admin/categories';
-
+import { COLOR_OPTIONS, getColorStyle } from '@/utils/color';
-// 기본 색상 (8개)
-const colorOptions = [
-  { id: 'blue', name: '파란색', bg: 'bg-blue-500', hex: '#3b82f6' },
-  { id: 'green', name: '초록색', bg: 'bg-green-500', hex: '#22c55e' },
-  { id: 'purple', name: '보라색', bg: 'bg-purple-500', hex: '#a855f7' },
-  { id: 'red', name: '빨간색', bg: 'bg-red-500', hex: '#ef4444' },
-  { id: 'pink', name: '분홍색', bg: 'bg-pink-500', hex: '#ec4899' },
-  { id: 'yellow', name: '노란색', bg: 'bg-yellow-500', hex: '#eab308' },
-  { id: 'orange', name: '주황색', bg: 'bg-orange-500', hex: '#f97316' },
-  { id: 'gray', name: '회색', bg: 'bg-gray-500', hex: '#6b7280' },
-];
-
-// 색상 헬퍼 (커스텀 HEX 지원)
-const getColorStyle = (colorValue) => {
-  // 기본 색상인지 확인
-  const preset = colorOptions.find((c) => c.id === colorValue);
-  if (preset) {
-    return { className: preset.bg };
-  }
-  // HEX 색상인 경우
-  if (colorValue?.startsWith('#')) {
-    return { style: { backgroundColor: colorValue } };
-  }
-  return { className: 'bg-gray-500' };
-};
 
 function ScheduleCategory() {
   const { user, isAuthenticated } = useAdminAuth();
@@ -319,7 +294,7 @@ function ScheduleCategory() {
               <div className="mb-8">
                 <label className="block text-sm font-medium text-gray-700 mb-3">색상 선택 *</label>
                 <div className="flex flex-wrap gap-3">
-                  {colorOptions.map((color) => (
+                  {COLOR_OPTIONS.map((color) => (
                     <button
                       key={color.id}
                       type="button"

frontend-temp/src/pages/pc/admin/schedules/ScheduleForm.jsx

@@ -24,6 +24,7 @@ import { useToast } from '@/hooks/common';
 import * as categoriesApi from '@/api/admin/categories';
 import * as schedulesApi from '@/api/admin/schedules';
 import { getMembers } from '@/api/public/members';
+import { getColorStyle } from '@/utils/color';
 
 function ScheduleForm() {
   const navigate = useNavigate();
@@ -93,29 +94,6 @@ function ScheduleForm() {
   // 수정 모드용 기존 이미지 ID 추적
   const [existingImageIds, setExistingImageIds] = useState([]);
 
-  // 카테고리 색상 맵핑
-  const colorMap = {
-    blue: 'bg-blue-500',
-    green: 'bg-green-500',
-    purple: 'bg-purple-500',
-    red: 'bg-red-500',
-    pink: 'bg-pink-500',
-    yellow: 'bg-yellow-500',
-    orange: 'bg-orange-500',
-    gray: 'bg-gray-500',
-    cyan: 'bg-cyan-500',
-    indigo: 'bg-indigo-500',
-  };
-
-  // 색상 스타일 (기본 색상 또는 커스텀 HEX)
-  const getColorStyle = (color) => {
-    if (!color) return { className: 'bg-gray-500' };
-    if (color.startsWith('#')) {
-      return { style: { backgroundColor: color } };
-    }
-    return { className: colorMap[color] || 'bg-gray-500' };
-  };
-
   // 첫 번째 카테고리를 기본값으로 설정
   useEffect(() => {
     if (categories.length > 0 && !formData.category && !isEditMode) {

frontend-temp/src/pages/pc/admin/schedules/Schedules.jsx

@@ -27,6 +27,7 @@ import { useToast } from '@/hooks/common';
 import { getTodayKST, formatDate } from '@/utils';
 import { getCategoryId, getScheduleDate } from '@/utils/schedule';
 import * as schedulesApi from '@/api/admin/schedules';
+import { getColorStyle } from '@/utils/color';
 
 function Schedules() {
   const navigate = useNavigate();
@@ -202,27 +203,6 @@ function Schedules() {
     return [{ id: 'all', name: '전체', color: 'gray' }, ...Array.from(categoryMap.values())];
   }, [schedules]);
 
-  // 카테고리 색상 맵핑
-  const colorMap = {
-    blue: 'bg-blue-500',
-    green: 'bg-green-500',
-    purple: 'bg-purple-500',
-    red: 'bg-red-500',
-    pink: 'bg-pink-500',
-    yellow: 'bg-yellow-500',
-    orange: 'bg-orange-500',
-    gray: 'bg-gray-500',
-  };
-
-  // 색상 스타일 (기본 색상 또는 커스텀 HEX)
-  const getColorStyle = (color) => {
-    if (!color) return { className: 'bg-gray-500' };
-    if (color.startsWith('#')) {
-      return { style: { backgroundColor: color } };
-    }
-    return { className: colorMap[color] || 'bg-gray-500' };
-  };
-
   // 일정 데이터를 지연 처리하여 달력 UI 응답성 향상
   const deferredSchedules = useDeferredValue(schedules);
 

frontend-temp/src/utils/color.js

@@ -0,0 +1,44 @@
+/**
+ * 카테고리 색상 관련 유틸리티
+ */
+
+// Tailwind 색상 맵
+export const COLOR_MAP = {
+  blue: 'bg-blue-500',
+  green: 'bg-green-500',
+  purple: 'bg-purple-500',
+  red: 'bg-red-500',
+  pink: 'bg-pink-500',
+  yellow: 'bg-yellow-500',
+  orange: 'bg-orange-500',
+  gray: 'bg-gray-500',
+  cyan: 'bg-cyan-500',
+  indigo: 'bg-indigo-500',
+};
+
+// 색상 옵션 (카테고리 관리에서 사용)
+export const COLOR_OPTIONS = [
+  { id: 'blue', name: '파란색', bg: 'bg-blue-500', hex: '#3b82f6' },
+  { id: 'green', name: '초록색', bg: 'bg-green-500', hex: '#22c55e' },
+  { id: 'purple', name: '보라색', bg: 'bg-purple-500', hex: '#a855f7' },
+  { id: 'red', name: '빨간색', bg: 'bg-red-500', hex: '#ef4444' },
+  { id: 'pink', name: '분홍색', bg: 'bg-pink-500', hex: '#ec4899' },
+  { id: 'yellow', name: '노란색', bg: 'bg-yellow-500', hex: '#eab308' },
+  { id: 'orange', name: '주황색', bg: 'bg-orange-500', hex: '#f97316' },
+  { id: 'gray', name: '회색', bg: 'bg-gray-500', hex: '#6b7280' },
+];
+
+/**
+ * 색상 스타일 반환 (기본 색상 또는 커스텀 HEX)
+ * @param {string} color - 색상 ID ('blue', 'green' 등) 또는 HEX 코드 ('#3b82f6')
+ * @returns {{ className?: string, style?: object }} - Tailwind 클래스 또는 인라인 스타일
+ */
+export function getColorStyle(color) {
+  if (!color) {
+    return { className: 'bg-gray-500' };
+  }
+  if (color.startsWith('#')) {
+    return { style: { backgroundColor: color } };
+  }
+  return { className: COLOR_MAP[color] || 'bg-gray-500' };
+}