diff --git a/docs/frontend-improvement.md b/docs/frontend-improvement.md
index ecbcd49..364238a 100644
--- a/docs/frontend-improvement.md
+++ b/docs/frontend-improvement.md
@@ -47,7 +47,7 @@ components/
| AlbumPhotos.jsx | 1536 | 1536 | 미분리 |
| Schedules.jsx | 1465 | 1159 | ✅ 분리 완료 |
| ScheduleForm.jsx | 1047 | 765 | ✅ 분리 완료 |
-| ScheduleDict.jsx | 714 | 714 | 미분리 |
+| ScheduleDict.jsx | 714 | 572 | ✅ 분리 완료 |
| AlbumForm.jsx | 631 | 631 | 미분리 |
---
@@ -176,8 +176,10 @@ pages/pc/admin/schedules/
- `LocationSearchDialog.jsx` 추출 (장소 검색 모달)
- `MemberSelector.jsx` 추출 (멤버 선택 UI)
- `ImageUploader.jsx` 추출 (이미지 업로드 및 드래그앤드롭)
-3. [ ] AlbumPhotos.jsx 분리 (1536줄, 구조 복잡)
-4. [ ] ScheduleDict.jsx 분리 (714줄)
+3. [x] ScheduleDict.jsx 분리 (714줄 → 572줄, 142줄 감소)
+ - `WordItem.jsx` 추출 (단어 테이블 행 컴포넌트)
+ - `POS_TAGS` 상수 함께 분리
+4. [ ] AlbumPhotos.jsx 분리 (1536줄, 구조 복잡)
5. [ ] AlbumForm.jsx 분리 (631줄)
### Phase 3: 추가 개선
diff --git a/frontend-temp/src/components/pc/admin/schedule/WordItem.jsx b/frontend-temp/src/components/pc/admin/schedule/WordItem.jsx
new file mode 100644
index 0000000..8c7e4f2
--- /dev/null
+++ b/frontend-temp/src/components/pc/admin/schedule/WordItem.jsx
@@ -0,0 +1,168 @@
+/**
+ * 사전 단어 항목 컴포넌트
+ * - 사전 관리 페이지의 단어 테이블 행
+ */
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Trash2, ChevronDown } from 'lucide-react';
+
+/**
+ * 품사 태그 옵션
+ */
+export const POS_TAGS = [
+ {
+ value: 'NNP',
+ label: '고유명사 (NNP)',
+ description: '사람, 그룹, 프로그램 이름 등',
+ examples: '프로미스나인, 송하영, 뮤직뱅크',
+ },
+ {
+ value: 'NNG',
+ label: '일반명사 (NNG)',
+ description: '일반적인 명사',
+ examples: '직캠, 팬미팅, 콘서트',
+ },
+ {
+ value: 'SL',
+ label: '외국어 (SL)',
+ description: '영어 등 외국어 단어',
+ examples: 'fromis_9, YouTube, fromm',
+ },
+];
+
+/**
+ * 단어 항목 컴포넌트
+ * @param {Object} props
+ * @param {string} props.id - 단어 고유 ID
+ * @param {string} props.word - 단어
+ * @param {string} props.pos - 품사 태그
+ * @param {number} props.index - 목록 인덱스
+ * @param {Function} props.onUpdate - 수정 핸들러 (id, word, pos)
+ * @param {Function} props.onDelete - 삭제 핸들러 ()
+ */
+function WordItem({ id, word, pos, index, onUpdate, onDelete }) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [editWord, setEditWord] = useState(word);
+ const [editPos, setEditPos] = useState(pos);
+ const [showPosDropdown, setShowPosDropdown] = useState(false);
+ const dropdownRef = useRef(null);
+
+ // 외부 클릭 시 드롭다운 닫기
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setShowPosDropdown(false);
+ }
+ };
+
+ if (showPosDropdown) {
+ document.addEventListener('mousedown', handleClickOutside);
+ }
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, [showPosDropdown]);
+
+ const handleSave = () => {
+ if (editWord.trim() && (editWord.trim() !== word || editPos !== pos)) {
+ onUpdate(id, editWord.trim(), editPos);
+ }
+ setIsEditing(false);
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === 'Enter') {
+ handleSave();
+ } else if (e.key === 'Escape') {
+ setEditWord(word);
+ setEditPos(pos);
+ setIsEditing(false);
+ }
+ };
+
+ return (
+
+ | {index + 1} |
+
+ {isEditing ? (
+ setEditWord(e.target.value)}
+ onKeyDown={handleKeyDown}
+ onBlur={handleSave}
+ autoFocus
+ className="w-full px-3 py-1.5 border border-primary rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+ />
+ ) : (
+ setIsEditing(true)}
+ className="cursor-pointer hover:text-primary transition-colors font-medium"
+ >
+ {word}
+
+ )}
+ |
+
+
+
+
+ {showPosDropdown && (
+
+ {POS_TAGS.map((tag) => (
+
+ ))}
+
+ )}
+
+ |
+
+
+ |
+
+ );
+}
+
+export default WordItem;
diff --git a/frontend-temp/src/components/pc/admin/schedule/index.js b/frontend-temp/src/components/pc/admin/schedule/index.js
index e7c9d91..3151963 100644
--- a/frontend-temp/src/components/pc/admin/schedule/index.js
+++ b/frontend-temp/src/components/pc/admin/schedule/index.js
@@ -4,3 +4,4 @@ export { default as ScheduleItem, getEditPath } from './ScheduleItem';
export { default as LocationSearchDialog } from './LocationSearchDialog';
export { default as MemberSelector } from './MemberSelector';
export { default as ImageUploader } from './ImageUploader';
+export { default as WordItem, POS_TAGS } from './WordItem';
diff --git a/frontend-temp/src/pages/pc/admin/schedules/ScheduleDict.jsx b/frontend-temp/src/pages/pc/admin/schedules/ScheduleDict.jsx
index 09d0b5d..9c5cdbe 100644
--- a/frontend-temp/src/pages/pc/admin/schedules/ScheduleDict.jsx
+++ b/frontend-temp/src/pages/pc/admin/schedules/ScheduleDict.jsx
@@ -2,9 +2,10 @@ import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { useQuery } from '@tanstack/react-query';
-import { Home, ChevronRight, Book, Plus, Trash2, Search, ChevronDown } from 'lucide-react';
+import { Home, ChevronRight, Book, Plus, Search, ChevronDown } from 'lucide-react';
import { Toast } from '@/components/common';
import { AdminLayout, ConfirmDialog } from '@/components/pc/admin';
+import { WordItem, POS_TAGS } from '@/components/pc/admin/schedule';
import { useAdminAuth } from '@/hooks/pc/admin';
import { useToast } from '@/hooks/common';
import * as suggestionsApi from '@/api/admin/suggestions';
@@ -38,149 +39,6 @@ const cardVariants = {
},
};
-// 품사 태그 옵션
-const POS_TAGS = [
- {
- value: 'NNP',
- label: '고유명사 (NNP)',
- description: '사람, 그룹, 프로그램 이름 등',
- examples: '프로미스나인, 송하영, 뮤직뱅크',
- },
- { value: 'NNG', label: '일반명사 (NNG)', description: '일반적인 명사', examples: '직캠, 팬미팅, 콘서트' },
- {
- value: 'SL',
- label: '외국어 (SL)',
- description: '영어 등 외국어 단어',
- examples: 'fromis_9, YouTube, fromm',
- },
-];
-
-// 단어 항목 컴포넌트
-function WordItem({ id, word, pos, index, onUpdate, onDelete }) {
- const [isEditing, setIsEditing] = useState(false);
- const [editWord, setEditWord] = useState(word);
- const [editPos, setEditPos] = useState(pos);
- const [showPosDropdown, setShowPosDropdown] = useState(false);
- const dropdownRef = useRef(null);
-
- // 외부 클릭 시 드롭다운 닫기
- useEffect(() => {
- const handleClickOutside = (event) => {
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
- setShowPosDropdown(false);
- }
- };
-
- if (showPosDropdown) {
- document.addEventListener('mousedown', handleClickOutside);
- }
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, [showPosDropdown]);
-
- const handleSave = () => {
- if (editWord.trim() && (editWord.trim() !== word || editPos !== pos)) {
- onUpdate(id, editWord.trim(), editPos);
- }
- setIsEditing(false);
- };
-
- const handleKeyDown = (e) => {
- if (e.key === 'Enter') {
- handleSave();
- } else if (e.key === 'Escape') {
- setEditWord(word);
- setEditPos(pos);
- setIsEditing(false);
- }
- };
-
- return (
-
- {index + 1} |
-
- {isEditing ? (
- setEditWord(e.target.value)}
- onKeyDown={handleKeyDown}
- onBlur={handleSave}
- autoFocus
- className="w-full px-3 py-1.5 border border-primary rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
- />
- ) : (
- setIsEditing(true)}
- className="cursor-pointer hover:text-primary transition-colors font-medium"
- >
- {word}
-
- )}
- |
-
-
-
-
- {showPosDropdown && (
-
- {POS_TAGS.map((tag) => (
-
- ))}
-
- )}
-
- |
-
-
- |
-
- );
-}
-
function ScheduleDict() {
const { user, isAuthenticated } = useAdminAuth();
const { toast, setToast } = useToast();