Merge remote-tracking branch 'origin/dongjun'

Author: sojeongP0415

.idea/vcs.xml

@@ -254,11 +254,12 @@ input:checked + .slider:before {
     width: 100%;
 }
 
-/* 인증 사이드바 스타일 */
+/* 인증 사이드바 스타일 - 수정됨 */
 .auth-sidebar {
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 0;
 }
 
 .auth-header {
@@ -280,23 +281,23 @@ input:checked + .slider:before {
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 20px;
-    /* justify-content: center; 제거 */
+    padding: 24px 20px;
     align-items: center;
-    gap: 20px;
-    padding-top: 40px; /* 상단 패딩 추가 */
 }
 
 .auth-message {
     text-align: center;
     color: var(--text-light);
     font-size: 14px;
     line-height: 1.6;
-    margin-bottom: 20px; /* 여백 증가 */
+    margin-bottom: 15px;
 }
 
-.auth-message p {
-    margin-bottom: 10px;
+.auth-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
 }
 
 .auth-button {
@@ -312,6 +313,7 @@ input:checked + .slider:before {
     cursor: pointer;
     transition: var(--transition);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border: none;
 }
 
 .login-button.auth-button {
@@ -327,13 +329,14 @@ input:checked + .slider:before {
 }
 
 .signup-button.auth-button {
-    background-color: #333333;
+    background-color: rgba(126, 87, 194, 0.15);
     color: var(--primary);
-    border: 1px solid var(--primary);
+    border: 1px solid rgba(126, 87, 194, 0.3);
 }
 
 .signup-button.auth-button:hover {
-    background-color: rgba(126, 87, 194, 0.15);
+    background-color: rgba(126, 87, 194, 0.25);
+    transform: translateY(-1px);
 }
 
 .main-header {

src/components/ide/IDE.css

@@ -143,19 +143,14 @@ const IDE = () => {
         // 비회원이면 API 호출 안함
         if (!isLoggedIn) return;
 
-        try {
-            const response = await fetch('/api/files');
-
-            if (!response.ok) {
-                throw new Error('파일 목록 불러오기 실패');
-            }
-
-            const files = await response.json();
-            setSavedFiles(files);
-        } catch (error) {
-            console.error('파일 목록 불러오기 오류:', error);
-            // 오류 시 기본 파일 목록 유지
-        }
+        // 임시 로컬 파일 목록 사용
+        const localFiles = [
+            { name: "untitled.py", code: '# 여기에 코드를 입력하세요' },
+            { name: "example.py", code: 'print("Hello, World!")' },
+            { name: "test.js", code: 'console.log("Testing JavaScript");' }
+        ];
+
+        setSavedFiles(localFiles);
     };
 
     // 회원 상태가 변경될 때 파일 목록 갱신
@@ -217,26 +212,32 @@ const IDE = () => {
             // 현재 에디터의 값을 가져옴
             const currentCode = editorRef.current.getValue();
 
-            // API 호출
-            const response = await fetch('/api/execute', {
+            // HTML 예시처럼 API 호출
+            const response = await fetch('http://localhost:4000/api/run', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
                     code: currentCode,
-                    language: selectedLanguage,
-                    fileName: fileName,
+                    lang: selectedLanguage,
                     input: input
                 }),
             });
 
+            console.log('보내는 데이터:', JSON.stringify({
+                code: currentCode,
+                lang: selectedLanguage,
+                input: input
+            }));
+
             if (!response.ok) {
                 throw new Error('API 호출 실패');
             }
 
-            const result = await response.json();
-            setOutput(result.output || "실행 결과가 없습니다.");
+            // HTML 예시처럼 text로 응답을 받음
+            const result = await response.text();
+            setOutput(result || "실행 결과가 없습니다.");
         } catch (error) {
             console.error('코드 실행 중 오류:', error);
 
@@ -297,7 +298,7 @@ const IDE = () => {
     };
 
     // 파일 저장 함수
-    const handleSave = async () => {
+    const handleSave = () => {
         // 비회원은 로그인 유도
         if (!isLoggedIn) {
             alert("로그인 후 이용 가능한 기능입니다.");
@@ -308,27 +309,6 @@ const IDE = () => {
             // 현재 에디터의 값을 가져옴
             const currentCode = editorRef.current.getValue();
 
-            // API 호출
-            const response = await fetch('/api/save', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    code: currentCode,
-                    fileName: fileName,
-                    language: selectedLanguage
-                }),
-            });
-
-            if (!response.ok) {
-                throw new Error('파일 저장 실패');
-            }
-
-            // 저장 성공
-            setIsSaved(true);
-            setCode(currentCode);
-
             // 로컬 상태 업데이트
             const existingFileIndex = savedFiles.findIndex((file) => file.name === fileName);
 
@@ -342,78 +322,38 @@ const IDE = () => {
                 setSavedFiles([...savedFiles, { name: fileName, code: currentCode }]);
             }
 
+            setIsSaved(true);
+            setCode(currentCode);
             toast("파일이 저장되었습니다.");
         } catch (error) {
             console.error('파일 저장 중 오류:', error);
-
-            // API 오류 시 로컬만 업데이트
-            const currentCode = editorRef.current.getValue();
-            const existingFileIndex = savedFiles.findIndex((file) => file.name === fileName);
-
-            if (existingFileIndex >= 0) {
-                // 기존 파일 업데이트
-                const updatedFiles = [...savedFiles];
-                updatedFiles[existingFileIndex] = { name: fileName, code: currentCode };
-                setSavedFiles(updatedFiles);
-            } else {
-                // 새 파일 추가
-                setSavedFiles([...savedFiles, { name: fileName, code: currentCode }]);
-            }
-
-            setIsSaved(true);
-            setCode(currentCode);
-            toast("API 연결 실패. 임시로 저장되었습니다.");
+            toast("저장 중 오류가 발생했습니다.");
         }
     };
 
     // 파일 선택 함수
-    const handleFileSelect = async (name) => {
+    const handleFileSelect = (name) => {
         // 현재 파일에 변경사항이 있으면 저장
         if (!isSaved) {
             const shouldSave = window.confirm('변경 사항을 저장하시겠습니까?');
             if (shouldSave) {
-                await handleSave();
+                handleSave();
             }
         }
 
-        try {
-            // API에서 파일 내용 불러오기
-            const response = await fetch(`/api/files/${name}`);
-
-            if (!response.ok) {
-                throw new Error('파일 불러오기 실패');
-            }
-
-            const fileData = await response.json();
-            setFileName(fileData.name);
-            setCode(fileData.code);
-            setActiveFile(fileData.name);
+        // 로컬 상태에서 파일 찾기
+        const selectedFile = savedFiles.find((file) => file.name === name);
+        if (selectedFile) {
+            setFileName(selectedFile.name);
+            setCode(selectedFile.code);
+            setActiveFile(selectedFile.name);
             setIsSaved(true);
 
             // 파일 확장자에 맞는 언어 설정
-            const fileExtension = fileData.name.split('.').pop().toLowerCase();
-            const langId = getLanguageFromFileName(fileData.name);
+            const langId = getLanguageFromFileName(selectedFile.name);
             if (langId) {
                 setSelectedLanguage(langId);
             }
-        } catch (error) {
-            console.error('파일 불러오기 오류:', error);
-
-            // API 호출 실패 시 로컬 상태에서 불러오기 시도
-            const selectedFile = savedFiles.find((file) => file.name === name);
-            if (selectedFile) {
-                setFileName(selectedFile.name);
-                setCode(selectedFile.code);
-                setActiveFile(selectedFile.name);
-                setIsSaved(true);
-
-                // 파일 확장자에 맞는 언어 설정
-                const fileExtension = selectedFile.name.split('.').pop().toLowerCase();
-                const langId = getLanguageFromFileName(selectedFile.name);
-                if (langId) {
-                    setSelectedLanguage(langId);
-                }
-            }
         }
     };
 
@@ -490,7 +430,7 @@ const IDE = () => {
                         </div>
                     </>
                 ) : (
-                    // 비회원용 사이드바 - 로그인/회원가입 버튼
+                    // 비회원용 사이드바 - 로그인/회원가입 버튼 (수정된 부분)
                     <div className="auth-sidebar">
                         <div className="auth-header">
                             <div className="auth-title">
@@ -500,17 +440,18 @@ const IDE = () => {
                         </div>
                         <div className="auth-content">
                             <div className="auth-message">
-                                <p>코드 저장 및 관리를 위해 로그인하세요.</p>
                                 <p>아직 계정이 없으신가요?</p>
                             </div>
-                            <button className="login-button auth-button">
-                                <span className="icon-small">🔑</span>
-                                로그인
-                            </button>
-                            <button className="signup-button auth-button">
-                                <span className="icon-small">✏️</span>
-                                회원가입
-                            </button>
+                            <div className="auth-buttons">
+                                <button className="login-button auth-button">
+                                    <span className="icon-small">🔑</span>
+                                    로그인
+                                </button>
+                                <button className="signup-button auth-button">
+                                    <span className="icon-small">✏️</span>
+                                    회원가입
+                                </button>
+                            </div>
                         </div>
                     </div>
                 )}