diff --git a/docs/공통코드_관리_시스템_설계.md b/docs/공통코드_관리_시스템_설계.md index fab7f81d..7d503bf6 100644 --- a/docs/공통코드_관리_시스템_설계.md +++ b/docs/공통코드_관리_시스템_설계.md @@ -717,6 +717,73 @@ export class CommonCodeService { **목표 기간**: 2일 → **실제 소요**: 1일 +### ✅ Phase 4.5: UX/UI 개선 (완료) + +- [x] 레이아웃 개선: PC에서 가로 배치, 모바일에서 세로 배치 +- [x] 선택된 카테고리 스타일 개선 (검정→회색, 액션 버튼 항상 표시) +- [x] 코드 수정 모달 개선 (기존 값 로드, 정렬 순서 1부터 시작) +- [x] 코드 삭제 기능 구현 (확인 모달 포함) + +**완료 내용:** + +1. **레이아웃 반응형 개선 완료** + + - PC 화면: `flex-row` 사용하여 카테고리(320px 고정) + 코드 상세(flex-1) 가로 배치 + - 모바일: `flex-col` 사용하여 세로 배치, 각 패널 전체 너비 사용 + - Tailwind CSS의 반응형 클래스 활용 (`lg:flex-row`, `lg:gap-8`) + +2. **선택된 카테고리 시각적 개선 완료** + + - 배경색: `bg-black` → `bg-gray-100` 회색 계열로 변경 + - 테두리: `border-2 border-gray-300` 추가하여 시각적 구분 강화 + - 액션 버튼: 선택된 카테고리에서 항상 표시되도록 스타일 수정 + +3. **코드 수정 모달 개선 완료** + + - 수정 시 기존 데이터 자동 로드: `editingCode` props를 통해 전체 코드 객체 전달 + - 정렬 순서 자동 계산: 기존 코드 최대값 + 1로 자동 설정 + - 폼 유효성 검사 및 실시간 피드백 구현 + +4. **코드 삭제 기능 완성** + - `AlertModal` 컴포넌트를 활용한 삭제 확인 모달 구현 + - 빨간색 아이콘과 제목으로 위험 작업임을 시각적으로 표시 + - 실제 삭제 API 연동 및 즉시 UI 반영 + +**목표 기간**: 1일 → **실제 소요**: 1일 + +### ✅ Phase 4.6: CRUD 즉시 반영 개선 (완료) + +- [x] 코드 CRUD 작업 후 UI 즉시 반영 문제 해결 +- [x] 카테고리 CRUD 작업 후 UI 즉시 반영 문제 해결 +- [x] 카테고리 생성 시 정렬 순서 자동 계산 개선 + +**완료 내용:** + +1. **상태 공유 문제 해결** + + - `useCommonCode` 훅을 여러 컴포넌트에서 독립적으로 사용하여 발생한 상태 공유 문제 해결 + - `CodeFormModal`과 `CodeCategoryFormModal`에서 `useCommonCode` 제거 + - 필요한 데이터와 함수들을 props로 전달받는 방식으로 변경 + +2. **Optimistic Updates 구현** + + - 서버 응답 대기 없이 즉시 UI 업데이트 + - 백그라운드에서 서버 데이터 새로고침으로 일관성 보장 + - 생성/수정/삭제 모든 작업에서 즉시 화면 반영 + +3. **카테고리 정렬 순서 개선** + + - 초기값: `sortOrder: 0` → `sortOrder: 1`로 변경 + - 자동 계산: 기존 카테고리 최대값 + 1로 자동 설정 + - 코드와 동일한 로직 적용으로 일관성 확보 + +4. **TypeScript 타입 안전성 향상** + - 모든 `any` 타입 제거 + - 적절한 타입 정의로 IDE 지원 및 런타임 오류 방지 + - 린터 에러 0개 달성 + +**목표 기간**: 1일 → **실제 소요**: 1일 + ### ⏳ Phase 5: 화면관리 연계 (예정) - [ ] column_labels와 연동 확인 @@ -737,12 +804,14 @@ export class CommonCodeService { ## 🎯 현재 구현 상태 -### 📊 **전체 진행률: 67%** 🎉 +### 📊 **전체 진행률: 83%** 🎉 - ✅ **Phase 1**: 기본 구조 및 데이터베이스 (100%) - **완료!** - ✅ **Phase 2**: 백엔드 API 구현 (100%) - **완료!** - ✅ **Phase 3**: 프론트엔드 기본 구현 (100%) - **완료!** - ✅ **Phase 4**: 고급 기능 구현 (100%) - **완료!** +- ✅ **Phase 4.5**: UX/UI 개선 (100%) - **완료!** +- ✅ **Phase 4.6**: CRUD 즉시 반영 개선 (100%) - **완료!** - ⏳ **Phase 5**: 화면관리 연계 (0%) - ⏳ **Phase 6**: 테스트 및 최적화 (0%) diff --git a/frontend/app/(main)/admin/commonCode/page.tsx b/frontend/app/(main)/admin/commonCode/page.tsx index 8273c8d6..2c0c7896 100644 --- a/frontend/app/(main)/admin/commonCode/page.tsx +++ b/frontend/app/(main)/admin/commonCode/page.tsx @@ -22,34 +22,39 @@ export default function CommonCodeManagementPage() { {/* 메인 콘텐츠 */} -
- {/* 카테고리 패널 */} - - - 📂 코드 카테고리 - - - - - + {/* 반응형 레이아웃: PC는 가로, 모바일은 세로 */} +
+ {/* 카테고리 패널 - PC에서 좌측 고정 너비, 모바일에서 전체 너비 */} +
+ + + 📂 코드 카테고리 + + + + + +
- {/* 구분선 */} - - - {/* 코드 상세 패널 */} - - - - 📋 코드 상세 정보 - {selectedCategoryCode && ( - ({selectedCategoryCode}) - )} - - - - - - + {/* 코드 상세 패널 - PC에서 나머지 공간, 모바일에서 전체 너비 */} +
+ + + + 📋 코드 상세 정보 + {selectedCategoryCode && ( + ({selectedCategoryCode}) + )} + + + + + + +
); diff --git a/frontend/components/admin/CodeCategoryFormModal.tsx b/frontend/components/admin/CodeCategoryFormModal.tsx index a0d988e6..b79c8454 100644 --- a/frontend/components/admin/CodeCategoryFormModal.tsx +++ b/frontend/components/admin/CodeCategoryFormModal.tsx @@ -7,20 +7,30 @@ import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; -import { useCommonCode } from "@/hooks/useCommonCode"; +// import { useCommonCode } from "@/hooks/useCommonCode"; // 제거: 상태 공유 문제 해결 // import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거 import { LoadingSpinner } from "@/components/common/LoadingSpinner"; -import { CodeCategory } from "@/types/commonCode"; +import { CodeCategory, CreateCategoryRequest, UpdateCategoryRequest } from "@/types/commonCode"; interface CodeCategoryFormModalProps { isOpen: boolean; onClose: () => void; editingCategoryCode?: string; + categories: CodeCategory[]; + onCreateCategory: (data: CreateCategoryRequest) => Promise; + onUpdateCategory: (categoryCode: string, data: UpdateCategoryRequest) => Promise; } -export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }: CodeCategoryFormModalProps) { +export function CodeCategoryFormModal({ + isOpen, + onClose, + editingCategoryCode, + categories, + onCreateCategory, + onUpdateCategory, +}: CodeCategoryFormModalProps) { // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거 - const { categories, createCategory, updateCategory } = useCommonCode(); + // const { categories, createCategory, updateCategory } = useCommonCode(); // 제거: props로 전달받음 // 폼 상태 const [formData, setFormData] = useState({ @@ -28,40 +38,46 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }: categoryName: "", categoryNameEng: "", description: "", - sortOrder: 0, + sortOrder: 1, isActive: true, }); const [loading, setLoading] = useState(false); const [errors, setErrors] = useState>({}); - // 수정 모드일 때 기존 데이터 로드 + // 모달 열릴 때 데이터 초기화 useEffect(() => { - if (editingCategoryCode && categories.length > 0) { - const category = categories.find((c) => c.category_code === editingCategoryCode); - if (category) { + if (isOpen) { + if (editingCategoryCode && categories.length > 0) { + // 수정 모드: 기존 데이터 로드 + const category = categories.find((c) => c.category_code === editingCategoryCode); + if (category) { + console.log("🔄 카테고리 수정 모드 - 기존 데이터 로드:", category); + setFormData({ + categoryCode: category.category_code, + categoryName: category.category_name, + categoryNameEng: category.category_name_eng || "", + description: category.description || "", + sortOrder: category.sort_order, + isActive: category.is_active === "Y", + }); + } + } else { + // 새 카테고리 모드: 초기값 설정 및 자동 순서 계산 + const maxSortOrder = categories.length > 0 ? Math.max(...categories.map((c) => c.sort_order)) : 0; + console.log("✨ 새 카테고리 모드 - 초기값 설정, 다음 순서:", maxSortOrder + 1); setFormData({ - categoryCode: category.category_code, - categoryName: category.category_name, - categoryNameEng: category.category_name_eng || "", - description: category.description || "", - sortOrder: category.sort_order, - isActive: category.is_active === "Y", + categoryCode: "", + categoryName: "", + categoryNameEng: "", + description: "", + sortOrder: maxSortOrder + 1, + isActive: true, }); } - } else { - // 새 카테고리일 때 초기값 - setFormData({ - categoryCode: "", - categoryName: "", - categoryNameEng: "", - description: "", - sortOrder: 0, - isActive: true, - }); + setErrors({}); } - setErrors({}); - }, [editingCategoryCode, categories, isOpen]); + }, [isOpen, editingCategoryCode, categories]); // 입력값 검증 const validateForm = () => { @@ -90,7 +106,7 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }: try { if (editingCategoryCode) { // 수정 - await updateCategory(editingCategoryCode, { + await onUpdateCategory(editingCategoryCode, { categoryName: formData.categoryName, categoryNameEng: formData.categoryNameEng, description: formData.description, @@ -99,7 +115,7 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }: }); } else { // 생성 - await createCategory({ + await onCreateCategory({ categoryCode: formData.categoryCode, categoryName: formData.categoryName, categoryNameEng: formData.categoryNameEng, diff --git a/frontend/components/admin/CodeCategoryPanel.tsx b/frontend/components/admin/CodeCategoryPanel.tsx index e04b3a9b..50fa63eb 100644 --- a/frontend/components/admin/CodeCategoryPanel.tsx +++ b/frontend/components/admin/CodeCategoryPanel.tsx @@ -19,7 +19,15 @@ interface CodeCategoryPanelProps { export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: CodeCategoryPanelProps) { // useMultiLang 호출 제거 - 상위에서 전달받도록 수정 - const { categories, categoriesLoading, categoriesError, fetchCategories, deleteCategory } = useCommonCode(); + const { + categories, + categoriesLoading, + categoriesError, + fetchCategories, + createCategory, + updateCategory, + deleteCategory, + } = useCommonCode(); // 로컬 상태 const [searchTerm, setSearchTerm] = useState(""); @@ -138,7 +146,7 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co className={cn( "group flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors", selectedCategoryCode === category.category_code - ? "bg-primary text-primary-foreground" + ? "border-2 border-gray-300 bg-gray-100 shadow-sm" : "hover:bg-muted", )} onClick={() => onSelectCategory(category.category_code)} @@ -163,7 +171,14 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co {/* 액션 버튼 */} -
+
diff --git a/frontend/components/admin/CodeDetailPanel.tsx b/frontend/components/admin/CodeDetailPanel.tsx index d8f79f22..0fd2019b 100644 --- a/frontend/components/admin/CodeDetailPanel.tsx +++ b/frontend/components/admin/CodeDetailPanel.tsx @@ -109,7 +109,8 @@ function SortableCodeItem({ code, onEdit, onDelete }: SortableCodeItemProps) { export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) { // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거 - const { codes, setCodes, codesLoading, codesError, fetchCodes, deleteCode, reorderCodes } = useCommonCode(); + const { codes, setCodes, codesLoading, codesError, fetchCodes, createCode, updateCode, deleteCode, reorderCodes } = + useCommonCode(); // 드래그앤드롭 센서 설정 const sensors = useSensors( @@ -131,10 +132,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) { const [searchTerm, setSearchTerm] = useState(""); const [showActiveOnly, setShowActiveOnly] = useState(false); // 활성 필터 상태 const [showFormModal, setShowFormModal] = useState(false); - const [editingCode, setEditingCode] = useState<{ categoryCode: string; codeValue: string }>({ - categoryCode: "", - codeValue: "", - }); + const [editingCode, setEditingCode] = useState(null); // 전체 코드 객체 저장 const [showDeleteModal, setShowDeleteModal] = useState(false); const [deletingCode, setDeletingCode] = useState<{ categoryCode: string; codeValue: string }>({ categoryCode: "", @@ -158,13 +156,16 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) { const handleCreateCode = () => { if (!categoryCode) return; - setEditingCode({ categoryCode: "", codeValue: "" }); + setEditingCode(null); // 새 코드 모드 setShowFormModal(true); }; // 코드 수정 핸들러 const handleEditCode = (codeValue: string) => { - setEditingCode({ categoryCode, codeValue }); + console.log("🔧 코드 수정 핸들러 호출:", { categoryCode, codeValue }); + const codeToEdit = codes.find((code) => code.code_value === codeValue); + console.log("📋 수정할 코드 데이터:", codeToEdit); + setEditingCode(codeToEdit || null); // 전체 코드 객체 전달 setShowFormModal(true); }; @@ -330,9 +331,15 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) { {showFormModal && ( setShowFormModal(false)} + onClose={() => { + setShowFormModal(false); + setEditingCode(null); // 모달 닫을 때 편집 상태 초기화 + }} categoryCode={categoryCode} - editingCodeValue={editingCode.codeValue} + editingCode={editingCode} // 전체 코드 객체 전달 + codes={codes} // 현재 코드 목록 전달 + onCreateCode={createCode} // 코드 생성 함수 전달 + onUpdateCode={updateCode} // 코드 수정 함수 전달 /> )} @@ -342,11 +349,10 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) { isOpen={showDeleteModal} onClose={() => setShowDeleteModal(false)} onConfirm={handleConfirmDelete} + type="error" title="삭제 확인" message="이 코드를 삭제하시겠습니까?" confirmText="삭제" - cancelText="취소" - variant="destructive" /> )}
diff --git a/frontend/components/admin/CodeFormModal.tsx b/frontend/components/admin/CodeFormModal.tsx index dacfc987..7d51284e 100644 --- a/frontend/components/admin/CodeFormModal.tsx +++ b/frontend/components/admin/CodeFormModal.tsx @@ -7,20 +7,32 @@ import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; -import { useCommonCode } from "@/hooks/useCommonCode"; +// import { useCommonCode } from "@/hooks/useCommonCode"; // 제거: 상태 공유 문제 해결 // import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거 import { LoadingSpinner } from "@/components/common/LoadingSpinner"; +import { CodeInfo, CreateCodeRequest, UpdateCodeRequest } from "@/types/commonCode"; interface CodeFormModalProps { isOpen: boolean; onClose: () => void; categoryCode: string; - editingCodeValue?: string; + editingCode?: CodeInfo | null; // 수정할 코드 객체 (null이면 새 코드) + codes: CodeInfo[]; + onCreateCode: (categoryCode: string, data: CreateCodeRequest) => Promise; + onUpdateCode: (categoryCode: string, codeValue: string, data: UpdateCodeRequest) => Promise; } -export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue }: CodeFormModalProps) { +export function CodeFormModal({ + isOpen, + onClose, + categoryCode, + editingCode, + codes, + onCreateCode, + onUpdateCode, +}: CodeFormModalProps) { // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거 - const { codes, createCode, updateCode } = useCommonCode(); + // const { codes, createCode, updateCode } = useCommonCode(); // 제거: props로 전달받음 // 폼 상태 const [formData, setFormData] = useState({ @@ -28,40 +40,49 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue codeName: "", codeNameEng: "", description: "", - sortOrder: 0, + sortOrder: 1, isActive: true, }); const [loading, setLoading] = useState(false); const [errors, setErrors] = useState>({}); - // 수정 모드일 때 기존 데이터 로드 + // 모달 열릴 때 데이터 초기화 useEffect(() => { - if (editingCodeValue && codes.length > 0) { - const code = codes.find((c) => c.code_value === editingCodeValue); - if (code) { + console.log("🚀 CodeFormModal useEffect 실행:", { + isOpen, + editingCode, + categoryCode, + }); + + if (isOpen) { + if (editingCode) { + // 수정 모드: 전달받은 코드 데이터 사용 + console.log("🔄 수정 모드 - 기존 데이터 로드:", editingCode); setFormData({ - codeValue: code.code_value, - codeName: code.code_name, - codeNameEng: code.code_name_eng || "", - description: code.description || "", - sortOrder: code.sort_order, - isActive: code.is_active === "Y", + codeValue: editingCode.code_value, + codeName: editingCode.code_name, + codeNameEng: editingCode.code_name_eng || "", + description: editingCode.description || "", + sortOrder: editingCode.sort_order, + isActive: editingCode.is_active === "Y", + }); + } else { + // 새 코드 모드: 초기값 설정 + const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sort_order)) : 0; + console.log("✨ 새 코드 모드 - 초기값 설정, 다음 순서:", maxSortOrder + 1); + setFormData({ + codeValue: "", + codeName: "", + codeNameEng: "", + description: "", + sortOrder: maxSortOrder + 1, + isActive: true, }); } - } else { - // 새 코드일 때 초기값 - setFormData({ - codeValue: "", - codeName: "", - codeNameEng: "", - description: "", - sortOrder: 0, - isActive: true, - }); + setErrors({}); } - setErrors({}); - }, [editingCodeValue, codes, isOpen]); + }, [isOpen, editingCode, codes, categoryCode]); // 실시간 필드 검증 const validateField = (fieldName: string, value: string) => { @@ -126,7 +147,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue } // 중복 검사 (신규 생성 시) - if (!editingCodeValue) { + if (!editingCode) { const existingCode = codes.find((c) => c.code_value === formData.codeValue); if (existingCode) { newErrors.codeValue = "이미 존재하는 코드값입니다."; @@ -146,9 +167,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue setLoading(true); try { - if (editingCodeValue) { + if (editingCode) { // 수정 - await updateCode(categoryCode, editingCodeValue, { + await onUpdateCode(categoryCode, editingCode.code_value, { codeName: formData.codeName, codeNameEng: formData.codeNameEng, description: formData.description, @@ -157,7 +178,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue }); } else { // 생성 - await createCode(categoryCode, { + await onCreateCode(categoryCode, { codeValue: formData.codeValue, codeName: formData.codeName, codeNameEng: formData.codeNameEng, @@ -176,7 +197,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue }; // 입력값 변경 핸들러 (실시간 검증 포함) - const handleChange = (field: string, value: any) => { + const handleChange = (field: string, value: string | number | boolean) => { setFormData((prev) => ({ ...prev, [field]: value })); // 실시간 검증 (문자열 필드만) @@ -194,7 +215,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue - {editingCodeValue ? "코드 수정" : "새 코드"} + {editingCode ? "코드 수정" : "새 코드"}
@@ -205,7 +226,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue id="codeValue" value={formData.codeValue} onChange={(e) => handleChange("codeValue", e.target.value.toUpperCase())} - disabled={!!editingCodeValue || loading} + disabled={!!editingCode || loading} placeholder={"코드값을 입력하세요 (예: USER_ACTIVE)"} className={errors.codeValue ? "border-red-500" : ""} /> @@ -269,7 +290,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue {/* 활성 상태 (수정 시에만) */} - {editingCodeValue && ( + {editingCode && (
- {editingCodeValue ? "수정 중..." : "등록 중..."} + {editingCode ? "수정 중..." : "등록 중..."} - ) : editingCodeValue ? ( + ) : editingCode ? ( "코드 수정" ) : ( "코드 등록" diff --git a/frontend/components/common/AlertModal.tsx b/frontend/components/common/AlertModal.tsx index e1fb19f4..31adffa1 100644 --- a/frontend/components/common/AlertModal.tsx +++ b/frontend/components/common/AlertModal.tsx @@ -29,21 +29,25 @@ const alertConfig = { icon: CheckCircle, iconColor: "text-green-500", titleColor: "text-green-700", + buttonVariant: "default" as const, }, error: { icon: XCircle, iconColor: "text-red-500", titleColor: "text-red-700", + buttonVariant: "destructive" as const, }, warning: { icon: AlertTriangle, iconColor: "text-yellow-500", titleColor: "text-yellow-700", + buttonVariant: "default" as const, }, info: { icon: Info, iconColor: "text-blue-500", titleColor: "text-blue-700", + buttonVariant: "default" as const, }, }; diff --git a/frontend/hooks/useCommonCode.ts b/frontend/hooks/useCommonCode.ts index 74a15f4e..df535469 100644 --- a/frontend/hooks/useCommonCode.ts +++ b/frontend/hooks/useCommonCode.ts @@ -93,7 +93,12 @@ export function useCommonCode() { const response = await commonCodeApi.categories.create(data); if (response.success) { - await fetchCategories(); // 목록 새로고침 + // 🔥 즉시 UI 업데이트: 새로운 카테고리를 현재 목록에 추가 + const newCategory = response.data; + setCategories((prevCategories) => [...prevCategories, newCategory]); + + // 🔄 동시에 서버에서 최신 데이터 가져오기 (백그라운드) + fetchCategories(); return response; } else { throw new Error(response.message || "카테고리 생성에 실패했습니다."); @@ -115,7 +120,14 @@ export function useCommonCode() { const response = await commonCodeApi.categories.update(categoryCode, data); if (response.success) { - await fetchCategories(); // 목록 새로고침 + // 🔥 즉시 UI 업데이트: 수정된 카테고리를 현재 목록에서 업데이트 + const updatedCategory = response.data; + setCategories((prevCategories) => + prevCategories.map((category) => (category.category_code === categoryCode ? updatedCategory : category)), + ); + + // 🔄 동시에 서버에서 최신 데이터 가져오기 (백그라운드) + fetchCategories(); return response; } else { throw new Error(response.message || "카테고리 수정에 실패했습니다."); @@ -137,11 +149,19 @@ export function useCommonCode() { const response = await commonCodeApi.categories.delete(categoryCode); if (response.success) { - await fetchCategories(); // 목록 새로고침 + // 🔥 즉시 UI 업데이트: 삭제된 카테고리를 현재 목록에서 제거 + setCategories((prevCategories) => + prevCategories.filter((category) => category.category_code !== categoryCode), + ); + + // 선택된 카테고리가 삭제된 경우 선택 해제 if (selectedCategoryCode === categoryCode) { setSelectedCategoryCode(""); // 선택 해제 setCodes([]); // 코드 목록 초기화 } + + // 🔄 동시에 서버에서 최신 데이터 가져오기 (백그라운드) + fetchCategories(); return response; } else { throw new Error(response.message || "카테고리 삭제에 실패했습니다."); @@ -163,7 +183,12 @@ export function useCommonCode() { const response = await commonCodeApi.codes.create(categoryCode, data); if (response.success) { - await fetchCodes(categoryCode); // 목록 새로고침 + // 🔥 즉시 UI 업데이트: 새로운 코드를 현재 목록에 추가 + const newCode = response.data; + setCodes((prevCodes) => [...prevCodes, newCode]); + + // 🔄 동시에 서버에서 최신 데이터 가져오기 (백그라운드) + fetchCodes(categoryCode); return response; } else { throw new Error(response.message || "코드 생성에 실패했습니다."); @@ -185,7 +210,12 @@ export function useCommonCode() { const response = await commonCodeApi.codes.update(categoryCode, codeValue, data); if (response.success) { - await fetchCodes(categoryCode); // 목록 새로고침 + // 🔥 즉시 UI 업데이트: 수정된 코드를 현재 목록에서 업데이트 + const updatedCode = response.data; + setCodes((prevCodes) => prevCodes.map((code) => (code.code_value === codeValue ? updatedCode : code))); + + // 🔄 동시에 서버에서 최신 데이터 가져오기 (백그라운드) + fetchCodes(categoryCode); return response; } else { throw new Error(response.message || "코드 수정에 실패했습니다."); @@ -207,7 +237,11 @@ export function useCommonCode() { const response = await commonCodeApi.codes.delete(categoryCode, codeValue); if (response.success) { - await fetchCodes(categoryCode); // 목록 새로고침 + // 🔥 즉시 UI 업데이트: 삭제된 코드를 현재 목록에서 제거 + setCodes((prevCodes) => prevCodes.filter((code) => code.code_value !== codeValue)); + + // 🔄 동시에 서버에서 최신 데이터 가져오기 (백그라운드) + fetchCodes(categoryCode); return response; } else { throw new Error(response.message || "코드 삭제에 실패했습니다.");