Merge pull request #80 from DMU-DebugVisual/sojeong

코드방송 다크모드, 포커스, 파일선택 추가

Author: Danto7632

src/App.js

@@ -79,7 +79,7 @@ function AppContent() {
                 <Route path="/community/post/:id" element={<PostDetail />} /> {/* ✅ 상세 페이지 */}
                 <Route path="/broadcast" element={<Codecast />} />
                 <Route path="/startbroadcast" element={<StartCodecast />} />
-                <Route path="/broadcast/live" element={<CodecastLive />} />
+                <Route path="/broadcast/live" element={<CodecastLive isDark={isDark} />} />
                 <Route path="/mypage" element={<MyPageLayout nickname={nickname} />}>
                     <Route index element={<Mypage nickname={nickname} />} />
                     <Route path="project" element={<MyProject />} />

src/components/codecast/Codecast.jsx

@@ -1,18 +1,24 @@
 import React from "react";
 import { FaPlus, FaArrowRight, FaDesktop } from "react-icons/fa";
 import "./Codecast.css";
-import {Link} from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const Codecast = () => {
+    const navigate = useNavigate();
+
+    const handleJoin = () => {
+        // 나중에 코드 검증 로직 추가 가능
+        navigate("/broadcast/live");
+    };
+
     return (
         <div>
-
             <section className="broadcast-container">
                 <div className="broadcast-header">
                     <FaDesktop className="broadcast-icon" />
                     <h2>코드 방송</h2>
                     <p>
-                        실시간으로 코드를 공유하고 함께 학습하세요.<br/>
+                        실시간으로 코드를 공유하고 함께 학습하세요.<br />
                         방송 코드를 입력하거나 직접 방송을 시작해보세요.
                     </p>
                 </div>
@@ -22,9 +28,9 @@ const Codecast = () => {
                         <h3>방송 참여하기</h3>
                         <p>방송 코드를 입력하여 진행 중인 방송에 참여하세요.</p>
                         <div className="input-group">
-                            <input type="text" placeholder="방송 코드 입력"/>
-                            <button>
-                                <FaArrowRight/>
+                            <input type="text" placeholder="방송 코드 입력" />
+                            <button onClick={handleJoin}>
+                                <FaArrowRight />
                                 참여하기
                             </button>
                         </div>
@@ -36,7 +42,7 @@ const Codecast = () => {
                         <h3>새 방송 시작하기</h3>
                         <p>새로운 코드 방송을 시작하여 다른 사용자들과 실시간으로 코드를 공유하세요.</p>
                         <Link to="/startbroadcast" className="start-btn">
-                            <FaPlus/>
+                            <FaPlus />
                             새 방송 시작
                         </Link>
                     </div>

src/components/codecast/codecastlive/CodeEditor.css

@@ -1,11 +1,14 @@
+/* ========== 기본: Light ========== */
+
 .code-editor {
     flex: 1;
+    min-width: 0;
+    min-height: 0;
     display: flex;
     flex-direction: column;
-    background-color: #0f0f1a;
-    padding: 20px;
-    overflow-y: auto;
-    color: white;
+    background-color: #ffffff;
+    padding: 16px;
+    color: #222;
     font-family: 'Courier New', monospace;
     font-size: 15px;
 }
@@ -14,20 +17,25 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
+    gap: 12px;
 }
 
+/* ✅ 사용자 뱃지 (복원) */
 .current-user-badge {
-    background-color: #222;
-    color: #fff;
+    background-color: #f2f2f4;
+    color: #333;
     padding: 6px 12px;
     border-radius: 12px;
     font-weight: 600;
     font-size: 14px;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+    border: 1px solid #e4e4ea;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
 }
 
-
+/* 실행 버튼 */
 .run-button {
     background-color: #6a0dad;
     color: white;
@@ -41,14 +49,25 @@
     gap: 6px;
     transition: background-color 0.2s ease;
 }
+.run-button:hover { background-color: #8844dd; }
 
-.run-button:hover {
-    background-color: #8844dd;
+/* Monaco 에디터가 부모 높이를 꽉 채우도록 */
+.code-editor > div, /* @monaco-editor/react 래퍼 */
+.code-editor .monaco-editor,
+.code-editor .monaco-editor .overflow-guard {
+    flex: 1;
+    min-height: 0;
 }
 
-.code-block {
+/* ========== Dark Mode Overrides ========== */
+
+.dark-mode .code-editor {
     background-color: #0f0f1a;
-    padding: 10px;
-    white-space: pre-wrap;
-    line-height: 1.5;
+    color: #fff;
+}
+
+.dark-mode .current-user-badge {
+    background-color: #222;
+    color: #fff;
+    border-color: #3a3a48;
 }

src/components/codecast/codecastlive/CodeEditor.jsx

@@ -1,56 +1,69 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Editor from '@monaco-editor/react';
 import { FaPlay } from 'react-icons/fa';
 import './CodeEditor.css';
 
-const CodeEditor = ({ currentUser }) => {
-    const [code, setCode] = useState(currentUser.code);
+/**
+ * Props
+ * - file?: { name, language, content }
+ * - readOnly?: boolean
+ * - onChange?: (next: string) => void
+ * - currentUser?: { name: string, role: 'host'|'edit'|'view', code?: string } // ✅ 뱃지 표시용
+ */
+export default function CodeEditor({ file, readOnly = false, onChange, currentUser, isDark }) {
+    const initialValue = useMemo(() => file?.content ?? '', [file?.content]);
+    const [code, setCode] = useState(initialValue);
 
-    // ✅ currentUser가 바뀔 때마다 코드 상태를 새로 설정
-    useEffect(() => {
-        setCode(currentUser.code);
-    }, [currentUser]);
+    useEffect(() => setCode(initialValue), [initialValue]);
 
-    const handleRun = () => {
-        alert("코드 실행 기능은 아직 미구현입니다.");
-    };
+    const language = useMemo(() => file?.language || 'python', [file?.language]);
+
+    const handleRun = () => alert('코드 실행 기능은 아직 미구현입니다.');
 
-    const getIcon = (role) => {
-        switch (role) {
-            case 'host':
-                return '👑';
-            case 'editing':
-                return '✍️';
-            default:
-                return '';
-        }
+    const roleIcon = (role) => {
+        if (role === 'host') return '👑';
+        if (role === 'edit') return '✏️';
+        if (role === 'view') return '👁️';
+        return '';
     };
 
+    // const theme = document.body.classList.contains('dark-mode') ? 'vs-light' : 'vs-dark';
+    const theme = isDark ? 'vs-dark' : 'vs-light';   // ✅ props 우선
     return (
         <section className="code-editor">
             <div className="editor-header">
-                <div className="current-user-badge">
-                    {getIcon(currentUser.role)} {currentUser.name}
-                </div>
+                {/* ✅ 사용자 뱃지 복원, 권한 뱃지 제거 */}
+                {currentUser?.name && (
+                    <div className="current-user-badge">
+                        {roleIcon(currentUser.role)} {currentUser.name}
+                    </div>
+                )}
+
                 <button className="run-button" onClick={handleRun}>
                     <FaPlay /> 실행
                 </button>
             </div>
 
+            {/* 필요 시 height=100%로 바꿔도 됩니다 (부모 컨테이너가 flex:1이면) */}
             <Editor
-                height="calc(100vh - 160px)" // 헤더와 버튼 고려
-                defaultLanguage="python"
-                theme="vs-dark"
+                height="90%"
+                language={language}
+                theme={theme}
                 value={code}
-                onChange={(newValue) => setCode(newValue)}
+                onChange={(v) => {
+                    const next = v ?? '';
+                    setCode(next);
+                    onChange && onChange(next);
+                }}
                 options={{
+                    readOnly,
                     fontSize: 14,
                     minimap: { enabled: false },
                     padding: { top: 10 },
+                    scrollBeyondLastLine: false,
+                    smoothScrolling: true,
                 }}
             />
         </section>
     );
-};
-
-export default CodeEditor;
+}

src/components/codecast/codecastlive/CodePreviewList.css

@@ -1,51 +1,88 @@
-.code-preview-list {
-    background-color: #191919;
-    padding: 12px 16px;
+/* ========== 기본: Light ========== */
+
+.preview-bar {
+    border-top: 1px solid #e6e6ea;
+    background: #fafafb;
+    padding: 10px 12px;
+}
+
+.preview-track {
     display: flex;
-    gap: 16px;
+    gap: 12px;
     overflow-x: auto;
-    border-top: 1px solid #333;
+    scrollbar-width: thin;
 }
 
-.code-preview-card {
-    background-color: #1f1f2e;
+.preview-card {
+    flex: 0 0 280px;
+    text-align: left;
+    background: #ffffff;
+    border: 1px solid #e6e6ef;
     border-radius: 10px;
-    min-width: 240px;
-    max-width: 240px;
-    flex-shrink: 0;
-    color: white;
-    font-size: 13px;
-    font-family: 'Courier New', monospace;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #333;
-    overflow: hidden;
+    padding: 10px;
+    cursor: pointer;
+    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+}
+.preview-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
+    border-color: #d7d7ec;
+}
+.preview-card.active {
+    border-color: #6f42c1;
+    box-shadow: 0 0 0 2px rgba(111,66,193,0.15) inset;
 }
 
-.card-header {
-    background-color: #2c2c2c;
-    padding: 8px 12px;
+.preview-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    font-weight: bold;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+.r-icon { font-size: 14px; }
+.r-icon.host { color: #ffbf00; }
+.r-icon.edit { color: #00a152; }
+.r-icon.view { color: #9aa0a6; }
+
+.p-name {
+    font-weight: 700;
+    color: #222;
     font-size: 14px;
-    border-bottom: 1px solid #444;
-    height: 30px;
 }
 
-.card-name {
-    color: #fff;
+.snippet {
+    margin: 0;
+    color: #555;
+    font-size: 12px;
+    white-space: pre-wrap;
+    line-height: 1.4;
+    max-height: 80px;
+    overflow: hidden;
 }
 
-.card-role {
-    font-size: 16px;
+/* ========== Dark Mode Overrides ========== */
+
+.dark-mode .preview-bar {
+    border-top: 1px solid #333;
+    background: #141419;
 }
 
-.preview-code {
-    padding: 12px;
-    white-space: pre-wrap;
-    line-height: 1.5;
-    max-height: calc(1.4em * 5); /* 4줄 기준 */
-    overflow: hidden;
+.dark-mode .preview-card {
+    background: #1a1a26;
+    border: 1px solid rgba(255,255,255,0.08);
+}
+.dark-mode .preview-card:hover {
+    border-color: rgba(128,90,213,0.5);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
+}
+.dark-mode .preview-card.active {
+    border-color: #6a0dad;
+    box-shadow: 0 0 0 2px rgba(106,13,173,0.25) inset;
 }
+
+.dark-mode .p-name { color: #eee; }
+.dark-mode .snippet { color: #c8c1d9; }
+
+.dark-mode .r-icon.host { color: gold; }
+.dark-mode .r-icon.edit { color: #00c853; }
+.dark-mode .r-icon.view { color: #888; }