Skip to content

Commit ce1086c

Browse files
authored
Merge pull request #97 from DMU-DebugVisual/sunwoong
실시간 코드 화면 UI 및 기능 수정
2 parents bf3b629 + a87a86a commit ce1086c

File tree

4 files changed

+148
-111
lines changed

4 files changed

+148
-111
lines changed

src/components/codecast/codecastlive/CodeEditor.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,27 @@
7878
color: #4f2aa3;
7979
}
8080

81+
/* ✅ [수정된 부분] 파일 선택 버튼 크기 조정 */
82+
.toolbar-right .select-file-btn {
83+
/* run-button, viz-button과 동일한 패딩을 적용하여 크기를 맞춤 */
84+
padding: 6px 12px;
85+
86+
/* 기존 스타일 유지 (CodecastLive.js에서 부여한 클래스) */
87+
background-color: #555;
88+
color: white;
89+
border: none;
90+
border-radius: 6px;
91+
cursor: pointer;
92+
font-size: 14px;
93+
display: flex;
94+
align-items: center;
95+
gap: 6px;
96+
}
97+
.toolbar-right .select-file-btn:hover {
98+
background-color: #777;
99+
}
100+
101+
81102
/* Monaco 에디터가 부모 높이를 꽉 채우도록 */
82103
.code-editor > div, /* @monaco-editor/react 래퍼 */
83104
.code-editor .monaco-editor,

src/components/codecast/codecastlive/CodeEditor.jsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import './CodeEditor.css';
88
* - file?: { name, language, content }
99
* - readOnly?: boolean
1010
* - onChange?: (next: string) => void
11-
* - currentUser?: { name: string, role: 'host'|'edit'|'view', code?: string } // ✅ 뱃지 표시용
11+
* - currentUser?: { name: string, role: 'host'|'edit'|'view', code?: string }
12+
* - selectFileAction?: React.ReactNode // ✅ 파일 선택 버튼을 받기 위한 prop
1213
*/
13-
export default function CodeEditor({ file, readOnly = false, onChange, currentUser, isDark }) {
14+
export default function CodeEditor({ file, readOnly = false, onChange, currentUser, isDark, selectFileAction }) {
1415
const initialValue = useMemo(() => file?.content ?? '', [file?.content]);
1516
const [code, setCode] = useState(initialValue);
1617

@@ -28,33 +29,35 @@ export default function CodeEditor({ file, readOnly = false, onChange, currentUs
2829
return '';
2930
};
3031

31-
const theme = isDark ? 'vs-dark' : 'vs-light'; // ✅ props 우선
32+
const theme = isDark ? 'vs-dark' : 'vs-light';
3233

3334
return (
3435
<section className="code-editor">
3536
<div className="editor-header">
36-
{/* 사용자 뱃지 복원, 권한 뱃지 제거 */}
37+
{/* 사용자 뱃지 */}
3738
{currentUser?.name && (
3839
<div className="current-user-badge">
3940
{roleIcon(currentUser.role)} {currentUser.name}
4041
</div>
4142
)}
4243

43-
{/*<button className="run-button" onClick={handleRun}>
44-
<FaPlay /> 실행
45-
</button>*/}
46-
{/* ✅ 오른쪽 툴바: 실행 + 시각화 */}
44+
{/* ✅ 오른쪽 툴바: 파일 선택 + 실행 + 시각화 */}
4745
<div className="toolbar-right">
46+
{/* 1. 파일 선택 버튼 (CodecastLive.js에서 전달됨) */}
47+
{selectFileAction}
48+
49+
{/* 2. 실행 버튼 */}
4850
<button className="run-button" onClick={handleRun}>
4951
<FaPlay/> 실행
5052
</button>
53+
54+
{/* 3. 시각화 버튼 */}
5155
<button className="viz-button" onClick={handleVisualize}>
5256
<FaChartBar/> 시각화
5357
</button>
5458
</div>
5559
</div>
5660

57-
{/* 필요 시 height=100%로 바꿔도 됩니다 (부모 컨테이너가 flex:1이면) */}
5861
<Editor
5962
height="90%"
6063
language={language}
@@ -76,4 +79,4 @@ export default function CodeEditor({ file, readOnly = false, onChange, currentUs
7679
/>
7780
</section>
7881
);
79-
}
82+
}

src/components/codecast/codecastlive/CodecastLive.css

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
}
6363

6464
.empty-help {
65-
margin: 0; /* 기본 마진 제거! */
65+
margin: 0; /* 기본 마진 제거! */
6666
color: #555;
6767
font-size: 15px;
6868
letter-spacing: 0.2px;
@@ -228,7 +228,6 @@
228228
align-items: center;
229229
gap: 8px;
230230
flex-grow: 0;
231-
/* ✅ 수정: right-controls는 비어있으므로 left-controls만 사용 */
232231
}
233232

234233
.left-controls {
@@ -262,25 +261,30 @@
262261
font-size: 20px;
263262
}
264263

265-
/* 화면 공유 버튼 (기본/비활성 상태) */
264+
/* ⚠️ 수정: .share-toggle-btn이 기본 스타일을 사용하도록 추가 */
265+
.share-toggle-btn,
266266
.share-screen {
267-
background-color: #5865f2; /* 디스코드 블루 */
267+
background-color: #6a0dad; /* 디스코드 블루 (공유하기 기본 색상) */
268268
color: white;
269269
}
270270

271+
.share-toggle-btn:not(:disabled):hover,
271272
.share-screen:not(:disabled):hover {
272-
background-color: #4752c4;
273+
background-color: #c9a7ff;
273274
}
274275

275276
/* 화면 공유 버튼 (활성 상태, 공유 중) */
277+
.share-toggle-btn.active,
276278
.share-screen.active {
277279
background-color: #38a75e; /* 공유 중 녹색 */
278280
}
279281

282+
.share-toggle-btn.active:not(:disabled):hover,
280283
.share-screen.active:not(:disabled):hover {
281284
background-color: #2e8b4c;
282285
}
283286

287+
.share-toggle-btn .check-icon,
284288
.share-screen .check-icon {
285289
/* ✅ 수정: 체크 아이콘 크기도 버튼 크기에 맞춰 조정 */
286290
font-size: 16px;

0 commit comments

Comments
 (0)