Merge pull request #58 from DMU-DebugVisual/inseong

Danto7632 · web-flow · commit 230c927f25b6 · 2025-06-11T12:32:22.000+09:00
시각화 모듈화
diff --git a/src/components/ide/IDE.jsx b/src/components/ide/IDE.jsx
@@ -586,77 +586,127 @@ const IDE = () => {
         }
     };
 
-    // 🆕 개선된 시각화 클릭 핸들러
-    const handleVisualizationClick = async () => {
-        if (!code.trim()) {
-            alert('시각화할 코드를 먼저 작성해주세요.');
-            return;
-        }
 
-        const fileType = getFileType(fileName);
-        setCurrentFileType(fileType);
 
-        if (fileType === 'json') {
-            // JSON 파일인 경우: API 호출 없이 에디터 내용을 직접 파싱
-            console.log('📄 JSON 파일 시각화 - API 호출 없음');
-            try {
-                const jsonData = JSON.parse(code);
-                setSelectedJsonData(jsonData);
-                setIsExampleFile(false);
-                setIsVisualizationModalOpen(true);
-            } catch (error) {
-                alert(`JSON 형식이 올바르지 않습니다: ${error.message}`);
-                return;
-            }
+// 🆕 개선된 시각화 클릭 핸들러 (AST 부분만 저장)
+// IDE.jsx의 handleVisualizationClick 함수에서 수정할 부분
+
+// 🆕 개선된 시각화 클릭 핸들러 (AST 부분만 저장)
+// 🆕 JSON 파일 생성/업데이트 함수 (문자열 그대로 저장)
+const createOrUpdateJsonFileRaw = async (jsonFileName, content) => {
+    try {
+        // savedFiles에서 기존 JSON 파일 찾기
+        const existingFileIndex = savedFiles.findIndex(f => f.name === jsonFileName);
+
+        if (existingFileIndex >= 0) {
+            // 기존 파일 업데이트
+            const updatedFiles = [...savedFiles];
+            updatedFiles[existingFileIndex] = {
+                name: jsonFileName,
+                code: content, // JSON.stringify 없이 직접 저장
+                type: 'json'
+            };
+            setSavedFiles(updatedFiles);
+            console.log(`✅ JSON 파일 업데이트됨: ${jsonFileName}`);
         } else {
-            // 코드 파일인 경우: API 호출 후 JSON 파일 생성/덮어쓰기
-            console.log('💻 코드 파일 시각화 - API 호출 후 JSON 생성');
+            // 새 JSON 파일 생성
+            const newJsonFile = {
+                name: jsonFileName,
+                code: content, // JSON.stringify 없이 직접 저장
+                type: 'json'
+            };
+            setSavedFiles(prev => [...prev, newJsonFile]);
+            console.log(`✅ JSON 파일 생성됨: ${jsonFileName}`);
+        }
 
-            try {
-                // API 호출
-                const apiUrl = config.API_ENDPOINTS.VISUALIZE_CODE || `${config.API_BASE_URL}/visualize`;
-                const requestBody = {
-                    code: code,
-                    input: input,
-                    lang: mapLanguageToAPI(selectedLanguage)
-                };
+        return content;
+    } catch (error) {
+        console.error('❌ JSON 파일 생성/업데이트 실패:', error);
+        throw error;
+    }
+};
 
-                console.log('🚀 시각화 API 호출:', requestBody);
+// 🆕 개선된 시각화 클릭 핸들러 (AST 부분만 저장)
+const handleVisualizationClick = async () => {
+    if (!code.trim()) {
+        alert('시각화할 코드를 먼저 작성해주세요.');
+        return;
+    }
 
-                const response = await fetch(apiUrl, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(requestBody),
-                });
+    const fileType = getFileType(fileName);
+    setCurrentFileType(fileType);
 
-                if (!response.ok) {
-                    throw new Error(`API 요청 실패: ${response.status} ${response.statusText}`);
-                }
+    if (fileType === 'json') {
+        // JSON 파일인 경우: API 호출 없이 에디터 내용을 직접 파싱
+        console.log('📄 JSON 파일 시각화 - API 호출 없음');
+        try {
+            const jsonData = JSON.parse(code);
+            setSelectedJsonData(jsonData);
+            setIsExampleFile(false);
+            setIsVisualizationModalOpen(true);
+        } catch (error) {
+            alert(`JSON 형식이 올바르지 않습니다: ${error.message}`);
+            return;
+        }
+    } else {
+        // 코드 파일인 경우: API 호출 후 AST 부분만 JSON 파일로 생성/덮어쓰기
+        console.log('💻 코드 파일 시각화 - API 호출 후 AST만 JSON 생성');
 
-                const visualizationData = await response.json();
-                console.log('✅ 시각화 데이터 수신:', visualizationData);
+        try {
+            // API 호출
+            const apiUrl = config.API_ENDPOINTS.VISUALIZE_CODE || `${config.API_BASE_URL}/visualize`;
+            const requestBody = {
+                code: code,
+                input: input,
+                lang: mapLanguageToAPI(selectedLanguage)
+            };
 
-                // 매칭되는 JSON 파일명 생성
-                const jsonFileName = getMatchingJsonFileName(fileName);
+            console.log('🚀 시각화 API 호출:', requestBody);
 
-                // JSON 파일 생성/업데이트
-                await createOrUpdateJsonFile(jsonFileName, visualizationData);
+            const response = await fetch(`${config.API_BASE_URL}/api/code/visualize`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestBody),
+            });
 
-                // 시각화 모달 열기
-                setSelectedJsonData(visualizationData);
-                setIsExampleFile(false);
-                setIsVisualizationModalOpen(true);
+            if (!response.ok) {
+                throw new Error(`API 요청 실패: ${response.status} ${response.statusText}`);
+            }
 
-                toast(`시각화 완료! ${jsonFileName} 파일이 생성/업데이트되었습니다.`);
+            const apiResponse = await response.json();
+            console.log('✅ API 응답 수신:', apiResponse);
 
-            } catch (error) {
-                console.error('❌ 시각화 실패:', error);
-                alert(`시각화 실패: ${error.message}`);
+            // 🔥 핵심 변경: AST 부분만 추출 (API에서 온 따옴표 제거)
+            let visualizationData = apiResponse.ast || "AST 데이터가 없습니다.";
+            
+            // API에서 온 양 끝 따옴표 제거
+            if (typeof visualizationData === 'string' && visualizationData.startsWith('"') && visualizationData.endsWith('"')) {
+                visualizationData = visualizationData.slice(1, -1);
             }
+            
+            console.log('📊 AST 데이터 추출 (따옴표 제거 후):', visualizationData);
+
+            // 매칭되는 JSON 파일명 생성
+            const jsonFileName = getMatchingJsonFileName(fileName);
+
+            // AST 데이터를 JSON 파일로 생성/업데이트 (JSON.stringify 없이 직접 저장)
+            await createOrUpdateJsonFileRaw(jsonFileName, visualizationData);
+
+            // 시각화 모달 열기
+            setSelectedJsonData(visualizationData);
+            setIsExampleFile(false);
+            setIsVisualizationModalOpen(true);
+
+            toast(`시각화 완료! ${jsonFileName} 파일이 생성/업데이트되었습니다.`);
+
+        } catch (error) {
+            console.error('❌ 시각화 실패:', error);
+            alert(`시각화 실패: ${error.message}`);
         }
-    };
+    }
+};
 
     // 🆕 개선된 파일 선택 핸들러
     const handleFileSelect = (name) => {
diff --git a/src/components/ide/VisualizationModal.jsx b/src/components/ide/VisualizationModal.jsx
@@ -593,6 +593,8 @@ const InfoPanel = ({ data, currentStep, totalSteps, animationType }) => {
                     {[
                         { label: '알고리즘', value: data?.algorithm || 'Unknown' },
                         { label: '언어', value: data?.lang || 'Unknown' },
+                        { label: '⏰ 시간복잡도', value: data?.TimeComplexity || 'O(?)', isComplexity: true, complexityType: 'time' },
+                        { label: '💾 공간복잡도', value: data?.SpaceComplexity || 'O(?)', isComplexity: true, complexityType: 'space' },
                         { label: '입력값', value: data?.input || '없음' },
                         { label: '변수 개수', value: `${data?.variables?.length || 0}개` },
                         { label: '실행 단계', value: `${totalSteps}단계` },
@@ -603,17 +605,38 @@ const InfoPanel = ({ data, currentStep, totalSteps, animationType }) => {
                             display: 'flex',
                             justifyContent: 'space-between',
                             padding: '6px 8px',
-                            background: '#f8fafc',
+                            background: item.isComplexity 
+                                ? (item.complexityType === 'time' 
+                                    ? 'linear-gradient(135deg, #fef3c7, #fde68a)' 
+                                    : 'linear-gradient(135deg, #dbeafe, #bfdbfe)')
+                                : '#f8fafc',
                             borderRadius: '6px',
-                            fontSize: '12px'
+                            fontSize: '12px',
+                            border: item.isComplexity 
+                                ? (item.complexityType === 'time' ? '1px solid #f59e0b' : '1px solid #3b82f6')
+                                : 'none'
                         }}>
-                            <span style={{ color: '#64748b' }}>{item.label}:</span>
-                            <span style={{ fontWeight: '600', color: '#1e293b' }}>{item.value}</span>
+                            <span style={{ 
+                                color: item.isComplexity 
+                                    ? (item.complexityType === 'time' ? '#92400e' : '#1e40af')
+                                    : '#64748b',
+                                fontWeight: item.isComplexity ? '600' : 'normal'
+                            }}>
+                                {item.label}:
+                            </span>
+                            <span style={{ 
+                                fontWeight: '600', 
+                                color: item.isComplexity 
+                                    ? (item.complexityType === 'time' ? '#92400e' : '#1e40af')
+                                    : '#1e293b',
+                                fontFamily: item.isComplexity ? 'monospace' : 'inherit'
+                            }}>
+                                {item.value}
+                            </span>
                         </div>
                     ))}
                 </div>
             </InfoCard>
-
             {/* API 출력 결과 */}
             {(data?.stdout || data?.stderr) && (
                 <InfoCard title="실행 결과" icon="💻">
diff --git a/src/config.js b/src/config.js
@@ -5,6 +5,7 @@ const API_ENDPOINTS = {
     LOGIN: `${API_BASE_URL}/api/auth/login`,
     SIGNUP: `${API_BASE_URL}/api/auth/signup`,
     RUN_CODE: `${API_BASE_URL}/api/code/run`,
+    ISUALIZE_CODE: `${API_BASE_URL}/api/code/visualize`
     // 필요시 다른 엔드포인트도 추가
 };
 
