Skip to content

Commit 74032e2

Browse files
sojeongP0415sojeongP0415
committed
mypage 다크모드 작업, 컴포넌트 겹침 수정
1 parent 777f934 commit 74032e2

File tree

13 files changed

+863
-277
lines changed

13 files changed

+863
-277
lines changed

‎src/components/community/Community.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
body {
22
margin: 0;
33
padding: 0;
4-
/*background-color: #f5f6fa;*/
4+
background-color: #f5f6fa;
55
font-family: 'Noto Sans KR', sans-serif;
66
}
77

88
.community-container {
9-
max-width: 90%;
9+
max-width: 900px;
1010
margin: 0 auto;
11-
padding: 2rem 3rem;
11+
padding: 80px 20px;
1212
}
1313

1414
.community-header {

‎src/components/mypage/MyCommunity.css‎

Lines changed: 86 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
.mycommunity-wrapper {
22
display: flex;
3+
flex: 1;
4+
overflow: hidden;
35
min-height: 100vh;
46
background-color: #f9f9f9;
7+
padding-top: 70px;
58
}
69

7-
.community-container {
8-
max-width: 900px;
10+
.mycommunity-container {
11+
overflow-y: auto;
12+
max-width: 100%;
913
margin: 0 auto;
10-
padding: 80px 20px;
14+
padding: 60px;
1115
}
1216

1317
.community-title {
@@ -44,7 +48,7 @@
4448
font-weight: bold;
4549
}
4650

47-
.post-card {
51+
.mypost-card {
4852
display: flex;
4953
background-color: white;
5054
padding: 20px;
@@ -108,9 +112,87 @@
108112

109113
.edit-btn {
110114
background-color: white;
115+
color: black;
111116
}
112117

113118
.delete-btn {
114119
background-color: #ffe4e4;
115120
color: #d32f2f;
116121
}
122+
123+
/* 🌙 전체 배경 */
124+
.dark-mode .mycommunity-wrapper {
125+
background-color: #1e1e1e;
126+
color: #eee;
127+
}
128+
129+
.dark-mode .mycommunity-container {
130+
color: #eee;
131+
}
132+
133+
/* 🌙 검색창 */
134+
.dark-mode .community-search {
135+
background-color: #2a2a2a;
136+
border: 1px solid #555;
137+
color: #eee;
138+
}
139+
140+
/* 🌙 탭 버튼 */
141+
.dark-mode .commu-tab {
142+
background-color: #2a2a2a;
143+
color: #ccc;
144+
}
145+
146+
.dark-mode .commu-tab:hover {
147+
background-color: #3a3a3a;
148+
}
149+
150+
.dark-mode .commu-tab.active {
151+
background-color: #b88eff;
152+
color: #1e1e1e;
153+
}
154+
155+
/* 🌙 게시물 카드 */
156+
.dark-mode .mypost-card {
157+
background-color: #2a2a2a;
158+
box-shadow: 0 4px 10px rgba(200, 200, 200, 0.2);
159+
}
160+
161+
/* 🌙 썸네일 */
162+
.dark-mode .post-thumbnail {
163+
background-color: #444;
164+
}
165+
166+
/* 🌙 태그 */
167+
.dark-mode .post-tags .tag {
168+
background-color: #3a3a3a;
169+
color: #b88eff;
170+
}
171+
172+
/* 🌙 게시물 요약 */
173+
.dark-mode .post-summary {
174+
color: #ccc;
175+
}
176+
177+
/* 🌙 메타 정보 */
178+
.dark-mode .post-meta {
179+
color: #aaa;
180+
}
181+
182+
/* 🌙 버튼 */
183+
.dark-mode .edit-btn {
184+
background-color: #2a2a2a;
185+
border: 1px solid #666;
186+
color: #eee;
187+
}
188+
189+
.dark-mode .delete-btn {
190+
background-color: #5a2c2c;
191+
border: 1px solid #aa4444;
192+
color: #ffb3b3;
193+
}
194+
195+
.dark-mode .delete-btn:hover {
196+
background-color: #722f2f;
197+
color: #ffd6d6;
198+
}

‎src/components/mypage/MyCommunity.jsx‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,48 @@
11
import React from "react";
2+
import { FaThumbsUp, FaComment } from 'react-icons/fa';
23
import "./MyCommunity.css";
3-
import Header from "../header/Header";
44
import Sidebar from "./Sidebar";
55

66
const MyCommunity = () => {
77
return (
8-
<div className="mycommunity-wrapper">
9-
<Sidebar />
10-
<section className="community-container">
11-
<h2 className="community-title">내 활동</h2>
12-
<input type="text" className="community-search" placeholder="검색..."/>
13-
<div className="community-tabs">
14-
<button className="commu-tab active">내 게시물</button>
15-
<button className="commu-tab">내 댓글</button>
16-
</div>
8+
<div className="mypage-wrapper">
9+
<div className="mycommunity-wrapper">
10+
<Sidebar/>
11+
<section className="mycommunity-container">
12+
<h2 className="community-title">내 활동</h2>
13+
<input type="text" className="community-search" placeholder="검색..."/>
14+
<div className="community-tabs">
15+
<button className="commu-tab active">내 게시물</button>
16+
<button className="commu-tab">내 댓글</button>
17+
</div>
1718

18-
<div className="post-card">
19-
<div className="post-thumbnail"/>
20-
<div className="post-content">
21-
<div className="post-tags">
22-
<span className="tag">알고리즘</span>
23-
<span className="tag">정렬</span>
24-
<span className="tag">시각화</span>
25-
</div>
26-
<h3 className="post-title">버블 정렬 시각화 프로젝트 공유합니다</h3>
27-
<p className="post-summary">버블 정렬 알고리즘을 시각적으로 이해하기 쉽게 구현해보았습니다. 피드백 부탁드려요!</p>
28-
<div className="post-meta">
29-
<span>📅 2023. 5. 15.</span>
30-
<span>👍 24</span>
31-
<span>💬 8</span>
32-
</div>
33-
<div className="post-actions">
34-
<button className="edit-btn">✏ 수정</button>
35-
<button className="delete-btn">🗑 삭제</button>
19+
<div className="mypost-card">
20+
<div className="post-thumbnail"/>
21+
<div className="post-content">
22+
<div className="post-tags">
23+
<span className="tag">알고리즘</span>
24+
<span className="tag">정렬</span>
25+
<span className="tag">시각화</span>
26+
</div>
27+
<h3 className="post-title">버블 정렬 시각화 프로젝트 공유합니다</h3>
28+
<p className="post-summary">버블 정렬 알고리즘을 시각적으로 이해하기 쉽게 구현해보았습니다. 피드백 부탁드려요!</p>
29+
<div className="post-meta">
30+
<span>2023. 5. 15.</span>
31+
<span>
32+
<FaThumbsUp /> 24
33+
</span>
34+
<span>
35+
<FaComment /> 8
36+
</span>
37+
</div>
38+
<div className="post-actions">
39+
<button className="edit-btn">수정</button>
40+
<button className="delete-btn">삭제</button>
41+
</div>
3642
</div>
3743
</div>
38-
</div>
39-
</section>
44+
</section>
45+
</div>
4046
</div>
4147
);
4248
};

‎src/components/mypage/MyProject.css‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
.myproject-wrapper {
22
display: flex;
3+
flex: 1;
4+
overflow: hidden;
35
min-height: 100vh;
46
background-color: #f9f9f9;
7+
padding-top: 70px;
58
}
69

710
.projects-container {
811
flex: 1;
9-
padding: 80px 60px;
12+
padding: 60px;
1013
background-color: #f9f9f9;
1114
margin: 0 auto;
1215
overflow: auto;
@@ -212,3 +215,111 @@
212215
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
213216
cursor: pointer;
214217
}
218+
219+
/* 🌙 전체 배경 */
220+
.dark-mode .myproject-wrapper {
221+
background-color: #1e1e1e;
222+
color: #eee;
223+
}
224+
225+
.dark-mode .projects-container {
226+
background-color: #1e1e1e;
227+
color: #eee;
228+
}
229+
230+
/* 🌙 헤더 */
231+
.dark-mode .projects-header h2 {
232+
color: #f5f5f5;
233+
}
234+
235+
/* 🌙 새 프로젝트 버튼 */
236+
.dark-mode .new-project-btn {
237+
background-color: #b88eff;
238+
color: #1e1e1e;
239+
}
240+
241+
/* 🌙 검색창 */
242+
.dark-mode .project-search-input {
243+
background-color: #2a2a2a;
244+
border: 1px solid #555;
245+
color: #eee;
246+
}
247+
248+
.dark-mode .search-icon {
249+
color: #aaa;
250+
}
251+
252+
/* 🌙 필터 드롭다운 */
253+
.dark-mode .filter-select {
254+
background-color: #2a2a2a;
255+
border: 1px solid #555;
256+
color: #eee;
257+
}
258+
259+
/* 🌙 탭 버튼 */
260+
.dark-mode .tabs {
261+
background-color: #333;
262+
color: #ccc;
263+
}
264+
265+
.dark-mode .tabs.active {
266+
background-color: #b88eff;
267+
color: #1e1e1e;
268+
}
269+
270+
/* 🌙 프로젝트 카드 */
271+
.dark-mode .project-card {
272+
background-color: #2a2a2a;
273+
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
274+
}
275+
276+
.dark-mode .project-card:hover {
277+
box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1);
278+
}
279+
280+
/* 🌙 카드 썸네일 */
281+
.dark-mode .card-header {
282+
background-color: #444;
283+
}
284+
285+
/* 🌙 즐겨찾기 버튼 */
286+
.dark-mode .favorite-btn {
287+
background-color: #1e1e1e;
288+
color: #facc15;
289+
}
290+
291+
/* 🌙 카드 제목 */
292+
.dark-mode .card-body h3 {
293+
color: #f0f0f0;
294+
}
295+
296+
/* 🌙 카드 설명 */
297+
.dark-mode .card-body p {
298+
color: #ccc;
299+
}
300+
301+
/* 🌙 메타 정보 */
302+
.dark-mode .card-meta {
303+
color: #aaa;
304+
}
305+
306+
/* 🌙 점 세 개 메뉴 버튼 */
307+
.dark-mode .menu-btn {
308+
color: #bbb;
309+
}
310+
311+
/* 🌙 언어 태그 (색상 보존 or 다크톤 조정) */
312+
.dark-mode .language-tag.javascript {
313+
background-color: #3a2f0a;
314+
color: #facc15;
315+
}
316+
317+
.dark-mode .language-tag.python {
318+
background-color: #133d33;
319+
color: #6ee7b7;
320+
}
321+
322+
.dark-mode .language-tag.typescript {
323+
background-color: #252f5c;
324+
color: #a5b4fc;
325+
}

0 commit comments

Comments
 (0)