Skip to content

Commit 9c41425

Browse files
sojeongP0415sojeongP0415
committed
Merge remote-tracking branch 'origin/dongjun'
2 parents 74032e2 + 9e443fd commit 9c41425

File tree

2 files changed

+297
-97
lines changed

2 files changed

+297
-97
lines changed

‎src/components/ide/IDE.css‎

Lines changed: 128 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@
1414
--text-light: #666666;
1515
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1616
--radius: 6px;
17-
--transition: all 0.2s ease-in-out;
17+
--transition:none;
1818
--header-height: 64px;
1919
--footer-height: 60px;
2020
}
2121

22+
/* 다크 모드 스타일 */
2223
/* 다크 모드 스타일 */
2324
body.dark-mode {
2425
--primary: #7e57c2;
@@ -31,14 +32,22 @@ body.dark-mode {
3132
--border: #444444;
3233
--text: #e0e0e0;
3334
--text-light: #aaaaaa;
35+
background-color: var(--bg);
3436
}
3537

3638
/* 트랜지션 효과 추가 */
3739
*, *::before, *::after {
3840
transition: none
3941
}
40-
.ide-container, .sidebar, .main-content, .right-panel {
41-
overflow: hidden;
42+
.custom-header,
43+
.main-header,
44+
.sidebar-header,
45+
.file-list-header,
46+
.header-title,
47+
.section-header,
48+
.program-input,
49+
.program-output {
50+
transition: var(--transition);
4251
}
4352

4453
* {
@@ -49,6 +58,40 @@ body.dark-mode {
4958

5059
body {
5160
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
61+
background-color: var(--bg);
62+
margin: 0;
63+
padding: 0;
64+
color: var(--text);
65+
min-height: 100vh;
66+
}
67+
68+
/* ResizeObserver 관련 문제 해결을 위한 코드 - 이 부분을 수정 */
69+
.editor-section,
70+
.monaco-editor-wrapper,
71+
.monaco-editor,
72+
.monaco-editor-container,
73+
.monaco-scrollable-element,
74+
.overflow-guard {
75+
/* contain 속성 제거 - 이것이 ResizeObserver 문제의 주요 원인 */
76+
position: relative;
77+
height: 100%;
78+
width: 100%;
79+
}
80+
81+
/* overflow 문제 해결을 위한 수정 */
82+
.ide-container,
83+
.sidebar,
84+
.main-content,
85+
.right-panel,
86+
.visualization-sidebar {
87+
overflow: visible;
88+
position: relative;
89+
}
90+
91+
/* 중첩된 요소의 크기 계산 문제를 해결하기 위한 설정 */
92+
.monaco-editor .overflow-guard {
93+
position: relative;
94+
overflow: hidden;
5295
}
5396

5497
.ide-container {
@@ -59,7 +102,8 @@ body {
59102
background-color: var(--bg);
60103
color: var(--text);
61104
position: relative;
62-
overflow: hidden;
105+
width: 100%;
106+
overflow-x: hidden;
63107
}
64108

65109
/* 로그인 토글을 헤더에 통합 */
@@ -222,7 +266,6 @@ body.dark-mode .sidebar-toggle-button:hover {
222266
height: 100%;
223267
z-index: 10;
224268
position: relative; /* position 추가 */
225-
overflow: hidden; /* overflow 숨김 처리 */
226269
}
227270

228271
.sidebar.collapsed {
@@ -239,7 +282,6 @@ body.dark-mode .sidebar-toggle-button:hover {
239282
flex: 1;
240283
display: flex;
241284
flex-direction: column;
242-
overflow: hidden;
243285
transition: margin-left 0.3s ease;
244286
position: relative;
245287
}
@@ -335,7 +377,6 @@ body.dark-mode .file-item.active {
335377
flex: 1;
336378
display: flex;
337379
flex-direction: column;
338-
overflow: hidden;
339380
transition: width 0.3s ease;
340381
position: relative;
341382
background-color: var(--bg);
@@ -700,22 +741,18 @@ body.dark-mode .visualization-button.active {
700741
flex-direction: column;
701742
z-index: 150;
702743
box-shadow: -3px 0 15px rgba(0, 0, 0, 0.1);
703-
animation: slide-in 0.3s ease;
744+
transform: translateX(0);
745+
transition: transform 0.3s ease;
704746
}
705747

706748
body.dark-mode .visualization-sidebar {
707749
box-shadow: -3px 0 15px rgba(0, 0, 0, 0.3);
708750
}
709-
710-
@keyframes slide-in {
711-
from {
712-
transform: translateX(100%);
713-
}
714-
to {
715-
transform: translateX(0);
716-
}
751+
.visualization-sidebar.hidden {
752+
transform: translateX(100%);
717753
}
718754

755+
719756
.visualization-header {
720757
display: flex;
721758
align-items: center;
@@ -763,6 +800,18 @@ body.dark-mode .visualization-sidebar {
763800
body.dark-mode .visualization-placeholder {
764801
background-color: rgba(0, 0, 0, 0.1);
765802
}
803+
/* 다크모드 전체 배경 적용 */
804+
html.dark-mode, body.dark-mode {
805+
background-color: var(--bg);
806+
}
807+
808+
/* 다크모드 컨테이너 배경 강제 적용 */
809+
body.dark-mode .ide-container,
810+
body.dark-mode .content-layout,
811+
body.dark-mode .main-content,
812+
body.dark-mode .editor-section {
813+
background-color: var(--bg);
814+
}
766815

767816
.visualization-placeholder p {
768817
margin: 8px 0;
@@ -803,6 +852,22 @@ body.dark-mode .visualization-placeholder {
803852
}
804853
}
805854

855+
/* body와 html에 명시적 배경색 설정 */
856+
html, body {
857+
background-color: var(--bg);
858+
margin: 0;
859+
padding: 0;
860+
width: 100%;
861+
}
862+
863+
/* 다크모드에서 명시적으로 배경색 설정 */
864+
body.dark-mode {
865+
background-color: var(--bg);
866+
}
867+
868+
html.dark-mode {
869+
background-color: var(--bg);
870+
}
806871
/* 기존 토글 버튼 및 패널 숨기기 */
807872
.visualization-toggle-closed,
808873
.visualization-toggle-open,
@@ -813,6 +878,7 @@ body.dark-mode .visualization-placeholder {
813878

814879
.monaco-editor-wrapper {
815880
height: 100%;
881+
position: relative;
816882
}
817883

818884
/* 아래의 기존 출력 패널 스타일을 재정의 */
@@ -983,91 +1049,66 @@ body.dark-mode .visualization-placeholder {
9831049
.language-item:hover {
9841050
background-color: rgba(0, 0, 0, 0.05);
9851051
}
986-
987-
body.dark-mode .language-item:hover {
988-
background-color: rgba(255, 255, 255, 0.05);
1052+
/* 전체 페이지에 다크모드 배경색 적용 */
1053+
:root.dark-mode,
1054+
html.dark-mode,
1055+
html[data-theme="dark"],
1056+
:root[data-theme="dark"] {
1057+
background-color: #1e1e1e;
9891058
}
9901059

991-
.language-item.active {
992-
font-weight: 600;
993-
}
994-
995-
.language-item::before {
1060+
/* 문서 최상위 요소에 다크모드 배경색 적용 */
1061+
html::before {
9961062
content: "";
997-
display: block;
998-
width: 4px;
999-
position: absolute;
1000-
left: 0;
1063+
position: fixed;
10011064
top: 0;
1065+
left: 0;
1066+
right: 0;
10021067
bottom: 0;
1003-
transition: var(--transition);
1004-
}
1005-
1006-
/* 언어별 색상 클래스 - 모드에 관계없이 일관적인 색상 유지 */
1007-
.lang-python {
1008-
background-color: #3572A5 !important;
1009-
}
1010-
1011-
.lang-java {
1012-
background-color: #B07219 !important;
1013-
}
1014-
1015-
.lang-cpp {
1016-
background-color: #f34b7d !important;
1017-
}
1018-
1019-
.lang-c {
1020-
background-color: #555555 !important;
1021-
}
1022-
1023-
.lang-javascript {
1024-
background-color: #f1e05a !important;
1025-
color: #333 !important;
1026-
}
1027-
1028-
/* 언어별 테두리 색상 */
1029-
.lang-border-python {
1030-
border-left: 4px solid #3572A5 !important;
1068+
z-index: -1;
1069+
background-color: inherit;
10311070
}
10321071

1033-
.lang-border-java {
1034-
border-left: 4px solid #B07219 !important;
1035-
}
1036-
1037-
.lang-border-cpp {
1038-
border-left: 4px solid #f34b7d !important;
1072+
body.dark-mode::before {
1073+
content: "";
1074+
position: fixed;
1075+
top: 0;
1076+
left: 0;
1077+
right: 0;
1078+
bottom: 0;
1079+
z-index: -1;
1080+
background-color: #1e1e1e;
10391081
}
10401082

1041-
.lang-border-c {
1042-
border-left: 4px solid #555555 !important;
1083+
/* 왼쪽 흰색 부분과 사이드바 수정 */
1084+
body.dark-mode .sidebar,
1085+
body.dark-mode .auth-sidebar {
1086+
background-color: var(--element);
10431087
}
1044-
1045-
.lang-border-javascript {
1046-
border-left: 4px solid #f1e05a !important;
1088+
/* 로그아웃 버튼 스타일 */
1089+
.logout-button {
1090+
background-color: transparent;
1091+
color: #888;
1092+
border: none;
1093+
padding: 4px 8px;
1094+
border-radius: 4px;
1095+
font-size: 12px;
1096+
cursor: pointer;
1097+
margin-left: 8px;
10471098
}
10481099

1049-
/* 게스트 모드 스타일 */
1050-
.guest-mode-text {
1051-
font-size: 13px;
1052-
color: var(--text-light);
1100+
.logout-button:hover {
1101+
background-color: #f0f0f0;
1102+
color: #333;
10531103
}
10541104

1055-
/* 우선순위 문제가 있을 경우를 대비한 강제 스타일 적용 */
1056-
body.dark-mode .ide-container,
1057-
body.dark-mode .sidebar,
1058-
body.dark-mode .main-content,
1059-
body.dark-mode .auth-sidebar,
1060-
body.dark-mode .right-panel {
1061-
background-color: var(--bg) !important;
1062-
color: var(--text) !important;
1105+
body.dark-mode .logout-button:hover {
1106+
background-color: #333;
1107+
color: #eee;
10631108
}
10641109

1065-
body.dark-mode .sidebar-header,
1066-
body.dark-mode .auth-header,
1067-
body.dark-mode .main-header {
1068-
box-shadow: 0 1px 3ptox rgba(0, 0, 0, 0.15);
1069-
}
1070-
body.dark-mode .action-buttons,
1071-
body.dark-mode .section-header {
1072-
background-color: var(--element) !important;
1110+
.login-status-container {
1111+
display: flex;
1112+
align-items: center;
1113+
margin-right: 10px;
10731114
}

0 commit comments

Comments
 (0)