Merge pull request #97 from DMU-DebugVisual/sunwoong

실시간 코드 화면 UI 및 기능 수정

Author: Danto7632

src/components/codecast/codecastlive/CodeEditor.css

@@ -78,6 +78,27 @@
     color: #4f2aa3;
 }
 
+/* ✅ [수정된 부분] 파일 선택 버튼 크기 조정 */
+.toolbar-right .select-file-btn {
+    /* run-button, viz-button과 동일한 패딩을 적용하여 크기를 맞춤 */
+    padding: 6px 12px;
+
+    /* 기존 스타일 유지 (CodecastLive.js에서 부여한 클래스) */
+    background-color: #555;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.toolbar-right .select-file-btn:hover {
+    background-color: #777;
+}
+
+
 /* Monaco 에디터가 부모 높이를 꽉 채우도록 */
 .code-editor > div, /* @monaco-editor/react 래퍼 */
 .code-editor .monaco-editor,

src/components/codecast/codecastlive/CodeEditor.jsx

@@ -8,9 +8,10 @@ import './CodeEditor.css';
  * - file?: { name, language, content }
  * - readOnly?: boolean
  * - onChange?: (next: string) => void
- * - currentUser?: { name: string, role: 'host'|'edit'|'view', code?: string } // ✅ 뱃지 표시용
+ * - currentUser?: { name: string, role: 'host'|'edit'|'view', code?: string }
+ * - selectFileAction?: React.ReactNode // ✅ 파일 선택 버튼을 받기 위한 prop
  */
-export default function CodeEditor({ file, readOnly = false, onChange, currentUser, isDark }) {
+export default function CodeEditor({ file, readOnly = false, onChange, currentUser, isDark, selectFileAction }) {
     const initialValue = useMemo(() => file?.content ?? '', [file?.content]);
     const [code, setCode] = useState(initialValue);
 
@@ -28,33 +29,35 @@ export default function CodeEditor({ file, readOnly = false, onChange, currentUs
         return '';
     };
 
-    const theme = isDark ? 'vs-dark' : 'vs-light';   // ✅ props 우선
+    const theme = isDark ? 'vs-dark' : 'vs-light';
 
     return (
         <section className="code-editor">
             <div className="editor-header">
-                {/* ✅ 사용자 뱃지 복원, 권한 뱃지 제거 */}
+                {/* 사용자 뱃지 */}
                 {currentUser?.name && (
                     <div className="current-user-badge">
                         {roleIcon(currentUser.role)} {currentUser.name}
                     </div>
                 )}
 
-                {/*<button className="run-button" onClick={handleRun}>
-                    <FaPlay /> 실행
-                </button>*/}
-                {/* ✅ 오른쪽 툴바: 실행 + 시각화 */}
+                {/* ✅ 오른쪽 툴바: 파일 선택 + 실행 + 시각화 */}
                 <div className="toolbar-right">
+                    {/* 1. 파일 선택 버튼 (CodecastLive.js에서 전달됨) */}
+                    {selectFileAction}
+
+                    {/* 2. 실행 버튼 */}
                     <button className="run-button" onClick={handleRun}>
                         <FaPlay/> 실행
                     </button>
+
+                    {/* 3. 시각화 버튼 */}
                     <button className="viz-button" onClick={handleVisualize}>
                         <FaChartBar/> 시각화
                     </button>
                 </div>
             </div>
 
-            {/* 필요 시 height=100%로 바꿔도 됩니다 (부모 컨테이너가 flex:1이면) */}
             <Editor
                 height="90%"
                 language={language}
@@ -76,4 +79,4 @@ export default function CodeEditor({ file, readOnly = false, onChange, currentUs
             />
         </section>
     );
-}
+}

src/components/codecast/codecastlive/CodecastLive.css

@@ -62,7 +62,7 @@
 }
 
 .empty-help {
-    margin: 0;                     /* ✅ 기본 마진 제거! */
+    margin: 0;                     /* 기본 마진 제거! */
     color: #555;
     font-size: 15px;
     letter-spacing: 0.2px;
@@ -228,7 +228,6 @@
     align-items: center;
     gap: 8px;
     flex-grow: 0;
-    /* ✅ 수정: right-controls는 비어있으므로 left-controls만 사용 */
 }
 
 .left-controls {
@@ -262,25 +261,30 @@
     font-size: 20px;
 }
 
-/* 화면 공유 버튼 (기본/비활성 상태) */
+/* ⚠️ 수정: .share-toggle-btn이 기본 스타일을 사용하도록 추가 */
+.share-toggle-btn,
 .share-screen {
-    background-color: #5865f2; /* 디스코드 블루 */
+    background-color: #6a0dad; /* 디스코드 블루 (공유하기 기본 색상) */
     color: white;
 }
 
+.share-toggle-btn:not(:disabled):hover,
 .share-screen:not(:disabled):hover {
-    background-color: #4752c4;
+    background-color: #c9a7ff;
 }
 
 /* 화면 공유 버튼 (활성 상태, 공유 중) */
+.share-toggle-btn.active,
 .share-screen.active {
     background-color: #38a75e; /* 공유 중 녹색 */
 }
 
+.share-toggle-btn.active:not(:disabled):hover,
 .share-screen.active:not(:disabled):hover {
     background-color: #2e8b4c;
 }
 
+.share-toggle-btn .check-icon,
 .share-screen .check-icon {
     /* ✅ 수정: 체크 아이콘 크기도 버튼 크기에 맞춰 조정 */
     font-size: 16px;