Skip to content

Commit af47fca

Browse files
Danto7632Danto7632
committed
코드방송 UI 및 dark모드 개선
1 parent b976d48 commit af47fca

7 files changed

Lines changed: 241 additions & 327 deletions

File tree

‎src/api/globalFetch.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ window.fetch = async (...args) => {
1919

2020
window.dispatchEvent(new Event("dv:auth-updated"));
2121

22-
const redirectTo = window.location.hash ? window.location.hash.replace(/^#/, "") || "/" : window.location.pathname || "/";
22+
let redirectTo = window.location.hash ? window.location.hash.replace(/^#/, "") || "/" : window.location.pathname || "/";
23+
if (redirectTo.startsWith("/broadcast/live")) {
24+
redirectTo = "/broadcast";
25+
}
2326
promptLogin("세션이 만료되었습니다. 다시 로그인해 주세요.", { redirectTo });
2427
}
2528

‎src/components/codecast/codecastlive/ChatPanel.css‎

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,80 @@
1-
/* 도킹 모드 공통 */
1+
/* ChatPanel.css */
2+
23
.chat-panel.docked {
3-
position: sticky; /* 헤더 아래에 고정 */
4+
position: sticky;
45
display: flex;
56
flex-direction: column;
6-
background: #fff;
7-
border-left: 1px solid #eee;
8-
/* 우측 고정 폭은 부모(grid)에서 제어 (340px) */
7+
background: var(--surface-card);
8+
border-left: 1px solid var(--border-subtle);
9+
color: var(--text-primary);
910
}
1011

1112
.chat-header {
1213
display: flex;
1314
align-items: center;
1415
justify-content: space-between;
1516
padding: 14px 16px;
16-
border-bottom: 1px solid #e6e6ef;
17+
border-bottom: 1px solid var(--border-subtle);
1718
}
19+
1820
.chat-header h3 {
1921
margin: 0;
2022
font-size: 16px;
23+
color: var(--text-primary);
2124
}
2225

2326
.chat-close {
2427
background: transparent;
2528
border: none;
2629
cursor: pointer;
2730
font-size: 16px;
28-
color: #666;
31+
color: var(--text-muted);
2932
}
3033

3134
.chat-list {
3235
flex: 1;
3336
overflow: auto;
3437
padding: 12px 14px;
38+
color: var(--text-primary);
39+
}
40+
41+
.chat-item + .chat-item {
42+
margin-top: 10px;
3543
}
3644

37-
.chat-item + .chat-item { margin-top: 10px; }
3845
.chat-user {
3946
font-weight: 700;
4047
font-size: 13px;
41-
color: #333;
48+
color: var(--text-primary);
4249
}
50+
4351
.chat-text {
4452
font-size: 14px;
45-
color: #222;
53+
color: var(--text-muted);
4654
}
4755

4856
.chat-input {
4957
display: flex;
5058
gap: 8px;
5159
padding: 10px 12px;
52-
border-top: 1px solid #e6e6ef;
60+
border-top: 1px solid var(--border-subtle);
61+
background: var(--surface-card);
5362
}
63+
5464
.chat-input input {
5565
flex: 1;
56-
border: 1px solid #e0e0ea;
66+
border: 1px solid var(--border-subtle);
5767
border-radius: 8px;
5868
padding: 10px 12px;
5969
font-size: 14px;
70+
background: var(--surface-input);
71+
color: var(--text-primary);
72+
}
73+
74+
.chat-input input::placeholder {
75+
color: var(--text-muted);
6076
}
77+
6178
.chat-input .send-btn {
6279
border: none;
6380
border-radius: 8px;
@@ -72,37 +89,14 @@
7289
background: var(--accent-hover);
7390
}
7491

75-
/* 다크 모드 */
7692
.dark-mode .chat-panel.docked {
77-
background: #1a1a26;
78-
border-left: 1px solid rgba(255,255,255,0.08);
79-
box-shadow: -10px 0 28px rgba(0,0,0,0.35);
80-
}
81-
82-
.dark-mode .chat-header {
83-
border-bottom-color: rgba(255,255,255,0.08);
93+
box-shadow: -12px 0 32px rgba(4, 4, 12, 0.45);
8494
}
8595

8696
.dark-mode .chat-close {
87-
color: #bbb;
88-
}
89-
90-
.dark-mode .chat-user {
91-
color: #eaeaf2;
97+
color: var(--text-muted);
9298
}
9399

94100
.dark-mode .chat-text {
95-
color: #ddd;
96-
}
97-
98-
.dark-mode .chat-input {
99-
border-top-color: rgba(255,255,255,0.08);
100-
}
101-
.dark-mode .chat-input input {
102-
background: #232333;
103-
color: #eee;
104-
border-color: #2f2f40;
105-
}
106-
.dark-mode .chat-input .send-btn {
107-
background: var(--accent-secondary);
101+
color: var(--text-muted);
108102
}

‎src/components/codecast/codecastlive/CodeEditor.css‎

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
/* ========== 기본: Light ========== */
1+
/* CodeEditor.css */
22

33
.code-editor {
44
flex: 1;
55
min-width: 0;
66
min-height: 0;
77
display: flex;
88
flex-direction: column;
9-
background-color: #ffffff;
9+
background-color: var(--surface-card);
1010
padding: 16px;
11-
color: #222;
11+
color: var(--text-primary);
1212
font-family: 'Courier New', monospace;
1313
font-size: 15px;
1414
}
@@ -21,31 +21,28 @@
2121
gap: 12px;
2222
}
2323

24-
/* ✅ 사용자 뱃지 */
2524
.current-user-badge {
26-
background-color: #f2f2f4;
27-
color: #333;
25+
background-color: var(--surface-muted);
26+
color: var(--text-primary);
2827
padding: 6px 12px;
2928
border-radius: 12px;
3029
font-weight: 600;
3130
font-size: 14px;
32-
border: 1px solid #e4e4ea;
31+
border: 1px solid var(--border-subtle);
3332
display: inline-flex;
3433
align-items: center;
3534
gap: 6px;
3635
}
3736

38-
/* 오른쪽 버튼 묶음 */
3937
.toolbar-right {
4038
display: inline-flex;
4139
align-items: center;
4240
gap: 8px;
4341
}
4442

45-
/* 실행 버튼 */
4643
.run-button {
4744
background-color: var(--accent-secondary);
48-
color: white;
45+
color: #fff;
4946
border: none;
5047
padding: 6px 12px;
5148
border-radius: 6px;
@@ -56,98 +53,100 @@
5653
gap: 6px;
5754
transition: background-color 0.2s ease;
5855
}
59-
.run-button:hover { background-color: var(--accent-hover); }
6056

61-
/* 시각화 버튼 */
57+
.run-button:hover {
58+
background-color: var(--accent-hover);
59+
}
60+
6261
.viz-button {
63-
background-color: #f2f2f4;
64-
color: #333;
65-
border: 1px solid #e4e4ea;
62+
background-color: var(--surface-muted);
63+
color: var(--text-primary);
64+
border: 1px solid var(--border-subtle);
6665
padding: 6px 12px;
6766
border-radius: 6px;
6867
cursor: pointer;
6968
font-size: 14px;
7069
display: flex;
7170
align-items: center;
7271
gap: 6px;
73-
transition: background-color 0.2s ease, border-color 0.2s ease, color .2s ease;
72+
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
7473
}
74+
7575
.viz-button:hover {
76-
background-color: #ece9f7;
77-
border-color: var(--accent-primary);
76+
background-color: var(--accent-soft);
77+
border-color: var(--accent-border);
7878
color: var(--accent-primary);
7979
}
8080

81-
/* ✅ [수정된 부분] 파일 선택 버튼 크기 조정 */
8281
.toolbar-right .select-file-btn {
83-
/* run-button, viz-button과 동일한 패딩을 적용하여 크기를 맞춤 */
8482
padding: 6px 12px;
85-
86-
/* 기존 스타일 유지 (CodecastLive.js에서 부여한 클래스) */
87-
background-color: #555;
88-
color: white;
89-
border: none;
83+
background-color: var(--accent-soft);
84+
color: var(--accent-secondary);
85+
border: 1px solid var(--accent-border);
9086
border-radius: 6px;
9187
cursor: pointer;
9288
font-size: 14px;
89+
font-weight: 600;
9390
display: flex;
9491
align-items: center;
9592
gap: 6px;
93+
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
9694
}
95+
9796
.toolbar-right .select-file-btn:hover {
98-
background-color: #777;
97+
background-color: var(--accent-soft-strong);
98+
border-color: var(--accent-secondary);
99+
color: var(--accent-primary);
100+
box-shadow: 0 0 0 1px rgba(139, 112, 255, 0.18);
99101
}
100102

103+
body.dark-mode .toolbar-right .select-file-btn {
104+
background-color: color-mix(in srgb, var(--accent-soft) 75%, transparent);
105+
border-color: rgba(124, 104, 220, 0.42);
106+
color: var(--text-primary);
107+
}
108+
109+
body.dark-mode .toolbar-right .select-file-btn:hover {
110+
box-shadow: 0 0 0 1px rgba(124, 104, 220, 0.36);
111+
color: var(--accent-glow);
112+
}
101113

102-
/* Monaco 에디터가 부모 높이를 꽉 채우도록 */
103-
.code-editor > div, /* @monaco-editor/react 래퍼 */
114+
.code-editor > div,
104115
.code-editor .monaco-editor,
105116
.code-editor .monaco-editor .overflow-guard {
106117
flex: 1;
107118
min-height: 0;
108119
}
109120

110-
/* ========== Dark Mode Overrides ========== */
111-
112-
/* 🟢 수정: CodeEditor 루트 배경을 #1c1c1c로 설정 */
113-
.dark-mode .code-editor {
114-
background-color: #1c1c1c;
115-
color: #fff;
121+
body.dark-mode .code-editor .monaco-editor,
122+
body.dark-mode .code-editor .monaco-editor .overflow-guard,
123+
body.dark-mode .code-editor .monaco-editor .monaco-editor-background,
124+
body.dark-mode .code-editor .monaco-editor .lines-content,
125+
body.dark-mode .code-editor .monaco-editor .view-overlays,
126+
body.dark-mode .code-editor .monaco-editor .margin-view-overlays {
127+
background-color: var(--ide-editor-bg) !important;
116128
}
117129

118-
/* 🟢 수정: Monaco Editor 내부 요소의 배경색을 #1c1c1c로 강제 적용 */
119-
.dark-mode .monaco-editor,
120-
.dark-mode .monaco-editor .lines-content,
121-
.dark-mode .monaco-editor .view-overlays,
122-
.dark-mode .monaco-editor .scroll-decoration {
123-
background-color: #1c1c1c !important;
130+
body.dark-mode .code-editor .monaco-editor .view-lines {
131+
background-color: var(--ide-editor-bg) !important;
124132
}
125133

126-
/* 🟢 수정: Gutter(라인 번호 영역) 및 내부 마진 배경도 #1c1c1c로 맞춤 */
127-
.dark-mode .monaco-editor .monaco-editor-background,
128-
.dark-mode .monaco-editor .margin {
129-
background-color: #1c1c1c !important;
134+
body.dark-mode .code-editor .monaco-editor .margin,
135+
body.dark-mode .code-editor .monaco-editor .glyph-margin {
136+
background-color: var(--ide-editor-gutter) !important;
137+
border-right: 1px solid var(--border-subtle);
130138
}
131139

132-
/* ✅ 추가: 라인 번호 색상을 흰색으로 설정 */
133-
.dark-mode .monaco-editor .line-numbers {
134-
color: #ffffff !important;
140+
body.dark-mode .code-editor .monaco-editor .scroll-decoration {
141+
box-shadow: none;
142+
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent);
135143
}
136144

137-
138-
.dark-mode .current-user-badge {
139-
background-color: #222;
140-
color: #fff;
141-
border-color: #3a3a48;
145+
body.dark-mode .code-editor .monaco-editor .line-numbers,
146+
body.dark-mode .code-editor .monaco-editor .margin .current-line {
147+
color: var(--ide-editor-line-number) !important;
142148
}
143149

144-
.dark-mode .viz-button {
145-
background-color: #2b2b34;
146-
color: #eaeaf2;
147-
border: 1px solid #3a3a48;
150+
body.dark-mode .code-editor .monaco-editor .line-numbers.active-line-number {
151+
color: var(--accent-primary) !important;
148152
}
149-
.dark-mode .viz-button:hover {
150-
background-color: #34343f;
151-
border-color: var(--accent-primary);
152-
color: var(--accent-primary);
153-
}

0 commit comments

Comments
 (0)