From 81a2112b59352d09839f648541e6254fef4c7fca Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 23 Jan 2026 09:30:18 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=83=89=EC=83=81=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=EB=A6=AC=ED=8B=B0=20=ED=86=B5=ED=95=A9=20-=20colorMap?=
 =?UTF-8?q?/getColorStyle=20=EC=A4=91=EB=B3=B5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../pc/admin/schedules/ScheduleCategory.jsx   | 29 +-----------
 .../pages/pc/admin/schedules/ScheduleForm.jsx | 24 +---------
 .../pages/pc/admin/schedules/Schedules.jsx    | 22 +---------
 frontend-temp/src/utils/color.js              | 44 +++++++++++++++++++
 4 files changed, 48 insertions(+), 71 deletions(-)
 create mode 100644 frontend-temp/src/utils/color.js

diff --git a/frontend-temp/src/pages/pc/admin/schedules/ScheduleCategory.jsx b/frontend-temp/src/pages/pc/admin/schedules/ScheduleCategory.jsx
index adb005d..fb666f2 100644
--- a/frontend-temp/src/pages/pc/admin/schedules/ScheduleCategory.jsx
+++ b/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';
-
-// 기본 색상 (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' };
-};
+import { COLOR_OPTIONS, getColorStyle } from '@/utils/color';
 
 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"
diff --git a/frontend-temp/src/pages/pc/admin/schedules/ScheduleForm.jsx b/frontend-temp/src/pages/pc/admin/schedules/ScheduleForm.jsx
index 4f47463..b88d3f7 100644
--- a/frontend-temp/src/pages/pc/admin/schedules/ScheduleForm.jsx
+++ b/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) {
diff --git a/frontend-temp/src/pages/pc/admin/schedules/Schedules.jsx b/frontend-temp/src/pages/pc/admin/schedules/Schedules.jsx
index 8eb1f17..9eb093e 100644
--- a/frontend-temp/src/pages/pc/admin/schedules/Schedules.jsx
+++ b/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);
 
diff --git a/frontend-temp/src/utils/color.js b/frontend-temp/src/utils/color.js
new file mode 100644
index 0000000..92ca7d9
--- /dev/null
+++ b/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' };
+}