Merge pull request #102 from DMU-DebugVisual/sunwoong

파일 CRUD API 통합 및 사이드바 UI 개선 (안정화 포함)

Author: Danto7632

src/components/ide/IDE.css

@@ -6,6 +6,7 @@
     --primary-hover: #5339a0;
     --success: #43a047;
     --warning: #fb8c00;
+    --danger-color: #e53935; /* 🆕 삭제 색상 정의 */
     --bg: #f8f9fa;
     --element: #ffffff;
     --element-light: #f3f4f6;
@@ -16,7 +17,7 @@
     --text-medium: #4b5563;
     --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     --radius: 6px;
-    --transition: none;
+    --transition: all 0.2s ease; /* transition 속성 통일 */
     --header-height: 64px;
     --footer-height: 60px;
 }
@@ -27,6 +28,7 @@ body.dark-mode {
     --primary-hover: #5e35b1;
     --success: #4caf50;
     --warning: #ff9800;
+    --danger-color: #ff5252; /* 🆕 다크 모드 삭제 색상 정의 */
     --bg: #1e1e1e;
     --element: #252525;
     --element-light: #2d2d2d;
@@ -164,7 +166,7 @@ body {
 .sidebar-title {
     font-size: 13px !important;
     font-weight: 600 !important;
-    color: var(--text);
+    color: var(--text) !important; /* 덮어쓰기 위해 !important 추가 */
     margin: 0;
     line-height: 1.4 !important;
     display: flex;
@@ -306,6 +308,8 @@ body.dark-mode .section-icon {
     height: 26px !important;
     position: relative !important;
     min-height: 26px !important;
+    /* 🆕 삭제 버튼 공간 확보 */
+    padding-right: 32px !important;
 }
 
 .file-item:hover {
@@ -372,6 +376,65 @@ body.dark-mode .file-item.active:hover {
 .file-icon.json-icon { background-color: #eab308; }
 .file-icon.default-icon { background-color: var(--text-light); font-size: 8px; }
 
+/* ⛔ 뱃지(S/L) 스타일 완전히 숨기기 */
+.file-badge {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    margin: 0 !important;
+}
+/* ------------------------------------- */
+
+/* 🆕 삭제 버튼 스타일 */
+.delete-file-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-light);
+    /* 🎨 평소에는 숨기고 hover 시 나타나도록 opacity 0 */
+    opacity: 0;
+    transition: opacity 0.2s, color 0.2s;
+    padding: 4px;
+    line-height: 1;
+    position: absolute;
+    /* 뱃지 공간 확보 후 오른쪽에 위치 */
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    border-radius: 4px;
+    height: 24px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* 🎨 파일 아이템 호버 시 삭제 버튼 표시 */
+.file-item:hover .delete-file-button {
+    opacity: 0.7;
+}
+
+/* 🎨 삭제 버튼 자체 호버 시 색상 강조 */
+.delete-file-button:hover {
+    color: var(--danger-color);
+    background-color: rgba(229, 57, 53, 0.1); /* 라이트 모드 */
+    opacity: 1;
+}
+
+body.dark-mode .delete-file-button:hover {
+    background-color: rgba(255, 82, 82, 0.1); /* 다크 모드 */
+}
+
+.delete-file-button i[data-feather="trash-2"] {
+    width: 14px;
+    height: 14px;
+    stroke-width: 2px;
+}
+/* ------------------------------------- */
+
+
 .file-item.example-file { opacity: 0.9; }
 .file-item.example-file:hover { opacity: 1; }
 .file-item.json-file { border-left: 2px solid #eab308; padding-left: 6px; }
@@ -1075,4 +1138,67 @@ body.dark-mode .active-file-name {
 /* 2. 다크 모드일 때만 밝은 색으로 덮어쓰기 */
 body.dark-mode .sidebar-title {
     color: #e0e0e0 !important;
+}
+
+/* --- 🆕 파일 아이템 및 삭제 버튼 최종 수정 --- */
+
+.file-item {
+    /* padding-right를 늘려 삭제 버튼 공간 확보 */
+    padding-right: 32px !important;
+}
+
+/* ⛔ 뱃지(S/L) 스타일 완전히 숨기기 */
+.file-badge {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    margin: 0 !important;
+}
+
+/* 🆕 삭제 버튼 스타일 */
+.delete-file-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-light);
+    /* 🎨 평소에는 숨기고 hover 시 나타나도록 opacity 0 */
+    opacity: 0;
+    transition: opacity 0.2s, color 0.2s, background-color 0.2s;
+    padding: 4px;
+    line-height: 1;
+    position: absolute;
+    /* 오른쪽에 위치 */
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    border-radius: 4px;
+    height: 24px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* 🎨 파일 아이템 호버 시 삭제 버튼 표시 */
+.file-item:hover .delete-file-button {
+    opacity: 0.7;
+}
+
+/* 🎨 삭제 버튼 자체 호버 시 색상 강조 */
+.delete-file-button:hover {
+    color: var(--danger-color);
+    background-color: rgba(229, 57, 53, 0.1);
+    opacity: 1;
+}
+
+body.dark-mode .delete-file-button:hover {
+    background-color: rgba(255, 82, 82, 0.15); /* 다크 모드 배경색을 조금 더 진하게 */
+}
+
+.delete-file-button i[data-feather="trash-2"] {
+    width: 14px;
+    height: 14px;
+    stroke-width: 2px;
 }

src/components/ide/IDE.jsx

@@ -19,8 +19,6 @@ if (!document.querySelector('script[src*="feather"]')) {
     document.head.appendChild(script);
 }
 
-// ⛔ Script error 방지를 위해 applyResizeObserverFix 함수 정의 전체를 제거했습니다.
-
 const IDE = () => {
     // 🆕 더미 파일 데이터 (mockData 기반)
     const [dummyFiles] = useState(() => [...codeExampleMocks, ...jsonExampleMocks]);
@@ -210,7 +208,7 @@ const IDE = () => {
         }
     }, [toast]);
 
-    // 🔑 개선된 파일 선택 핸들러
+    // 🔑 개선된 파일 선택 핸들러 (파일 상세 보기 및 조회)
     const handleFileSelect = async (identifier, isServerFile = false) => {
         if (!isSaved) {
             const shouldSave = window.confirm('변경 사항을 저장하시겠습니까?');
@@ -270,6 +268,71 @@ const IDE = () => {
         }
     };
 
+    // 🔑 파일 삭제 핸들러 (새로 추가된 기능)
+    const handleDeleteFile = async (fileUUID, fileName) => {
+        if (!isLoggedIn) {
+            toast("로그인 후 이용 가능한 기능입니다.", 'toast-error');
+            return;
+        }
+
+        if (!window.confirm(`정말로 서버 파일 "${fileName}"을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`)) {
+            return;
+        }
+
+        const token = localStorage.getItem('token');
+        if (!token) {
+            toast("인증 토큰이 없습니다. 다시 로그인해 주세요.", 'toast-error');
+            return;
+        }
+
+        try {
+            // API 호출: 파일 삭제
+            const response = await fetch(`${config.API_BASE_URL}/api/file/${fileUUID}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                },
+            });
+
+            if (!response.ok) {
+                let errorMsg = `파일 삭제 실패: ${response.statusText}`;
+                if (response.status === 404) errorMsg = "삭제할 파일을 서버에서 찾을 수 없습니다.";
+                throw new Error(errorMsg);
+            }
+
+            // 1. 로컬 상태 업데이트: savedFiles에서 제거
+            setSavedFiles(prev => prev.filter(f => f.fileUUID !== fileUUID));
+
+            // 2. 현재 활성화 파일 상태 확인 및 리셋
+            if (activeFileUUID === fileUUID) {
+                const defaultLang = supportedLanguages.find(lang => lang.id === selectedLanguage) || supportedLanguages[0];
+                const newDefaultFile = {
+                    name: "untitled.py",
+                    code: defaultLang.template,
+                    type: 'code',
+                    fileUUID: null,
+                    isServerFile: false
+                };
+
+                // 삭제된 파일이 현재 편집 중이었습니다. 새 기본 파일로 상태 리셋.
+                setCode(newDefaultFile.code);
+                setFileName(newDefaultFile.name);
+                setActiveFileUUID(null);
+                setIsSaved(true);
+                setCurrentFileType(newDefaultFile.type);
+                setSelectedLanguage(getLanguageFromFileName(newDefaultFile.name));
+                toast(`삭제된 파일이 현재 편집 중이었습니다. 기본 파일로 돌아갑니다.`, 'toast-warning');
+            }
+
+            toast(`파일 "${fileName}"이(가) 성공적으로 삭제되었습니다.`);
+
+        } catch (error) {
+            console.error('❌ 파일 삭제 중 오류:', error);
+            toast(`파일 삭제 실패: ${error.message}`, 'toast-error');
+        }
+    };
+
+
     // 🆕 더미 파일 선택 핸들러 (원본 유지)
     const handleDummyFileSelect = (file) => {
         if (!isSaved) {
@@ -770,7 +833,6 @@ const IDE = () => {
 
     // 3. 🐛 에디터 레이아웃 관련 useEffect (최종 안정화)
     useEffect(() => {
-        // applyResizeObserverFix() 제거했으므로, 브라우저 resize 이벤트에만 의존합니다.
         const updateAllEditorLayouts = () => {
             if (editorRef.current) {
                 window.requestAnimationFrame(() => {
@@ -788,7 +850,6 @@ const IDE = () => {
 
     // 4. 🐛 사이드바 접힘/펼침 상태 변경 시 에디터 레이아웃 업데이트 (간소화 유지)
     useEffect(() => {
-        // 애니메이션 완료 후 한 번만 레이아웃을 최종 업데이트
         const timeoutId = setTimeout(() => {
             if (editorRef.current) {
                 try {
@@ -803,6 +864,13 @@ const IDE = () => {
         return () => clearTimeout(timeoutId);
     }, [isLeftPanelCollapsed]);
 
+    // 5. 🎨 사이드바 파일 목록 업데이트 시 Feather Icons 새로고침
+    useEffect(() => {
+        if (window.feather) {
+            window.feather.replace();
+        }
+    }, [savedFiles, sidebarSections]); // 파일 목록이나 섹션 토글 시 업데이트
+
     // 🎨 다크 모드 토글 시 에디터 테마 변경 (원본 유지)
     useEffect(() => {
         const observer = new MutationObserver((mutations) => {
@@ -827,7 +895,7 @@ const IDE = () => {
         return () => { observer.disconnect(); };
     }, [isDarkMode]);
 
-    // 🆕 ModernSidebar 렌더링 함수 (원본 유지)
+    // 🆕 ModernSidebar 렌더링 함수 (삭제 버튼 추가)
     const renderModernSidebar = () => {
         const myServerFiles = savedFiles.filter(f => f.isServerFile && f.fileUUID);
         const myLocalFiles = savedFiles.filter(f => !f.isServerFile && !f.fileUUID);
@@ -861,7 +929,8 @@ const IDE = () => {
                                         {sidebarSections.myFiles ? '▼' : '▶'}
                                     </span>
                                     <i data-feather="folder" className="section-icon"></i>
-                                    <span className="section-title">내 파일 ({myServerFiles.length + myLocalFiles.length}개)</span>
+                                    {/* 💡 파일 개수 표시 제거 */}
+                                    <span className="section-title">내 파일</span>
                                 </button>
 
                                 {sidebarSections.myFiles && (
@@ -875,7 +944,19 @@ const IDE = () => {
                                             >
                                                 {getFileIcon(file.name)}
                                                 <span className="file-name">{file.name}</span>
-                                                <span className="file-badge server-badge" title="서버 저장 파일">S</span>
+                                                {/* ⛔ 뱃지 제거됨 */}
+
+                                                {/* 🔑 파일 삭제 버튼 추가 */}
+                                                <button
+                                                    className="delete-file-button"
+                                                    onClick={(e) => {
+                                                        e.stopPropagation(); // 파일 선택 이벤트 방지
+                                                        handleDeleteFile(file.fileUUID, file.name);
+                                                    }}
+                                                    title="파일 삭제"
+                                                >
+                                                    <i data-feather="trash-2"></i>
+                                                </button>
                                             </div>
                                         ))}
 
@@ -888,7 +969,7 @@ const IDE = () => {
                                             >
                                                 {getFileIcon(file.name)}
                                                 <span className="file-name">{file.name}</span>
-                                                <span className="file-badge local-badge" title="로컬 임시 파일">L</span>
+                                                {/* ⛔ 뱃지 제거됨 */}
                                             </div>
                                         ))}
                                     </div>