Skip to content

Commit c158f15

Browse files
sojeongP0415sojeongP0415
committed
scroll 해결, mypage 제외 다크모드 적용
1 parent 409c49d commit c158f15

File tree

14 files changed

+471
-25
lines changed

14 files changed

+471
-25
lines changed

‎.idea/vcs.xml‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { HashRouter, Route, Routes } from "react-router-dom";
2+
import { useState, useEffect } from "react";
23

34
import Header from "./components/header/Header";
45
import Footer from "./components/footer/Footer";
@@ -14,11 +15,31 @@ import Settings from "./components/mypage/Settings";
1415
import Shared from "./components/mypage/Shared";
1516
import MyProject from "./components/mypage/MyProject";
1617
import MyCommunity from "./components/mypage/MyCommunity";
18+
import ScrollToTop from "./components/common/ScrollToTop";
1719

1820
function App() {
21+
const [isDark, setIsDark] = useState(false);
22+
23+
useEffect(() => {
24+
document.body.classList.toggle("dark-mode", isDark);
25+
}, [isDark]);
26+
27+
useEffect(() => {
28+
const savedTheme = localStorage.getItem("theme");
29+
if (savedTheme === "dark") {
30+
setIsDark(true);
31+
}
32+
}, []);
33+
34+
useEffect(() => {
35+
document.body.classList.toggle("dark-mode", isDark);
36+
localStorage.setItem("theme", isDark ? "dark" : "light");
37+
}, [isDark]);
38+
1939
return (
2040
<HashRouter>
21-
<Header />
41+
<Header isDark={isDark} setIsDark={setIsDark} />
42+
<ScrollToTop />
2243
<Routes>
2344
<Route path="/" element={<Main />} />
2445
<Route path="/login" element={<Login />} />

‎src/components/codecast/Codecast.css‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,4 +144,84 @@
144144
color: #888;
145145
margin-top: 6px;
146146
text-align: left;
147-
}
147+
}
148+
149+
/* 🌙 전체 배경 */
150+
.dark-mode .broadcast-container {
151+
background-color: #1e1e1e;
152+
color: #f0f0f0;
153+
}
154+
155+
/* 🌙 아이콘 */
156+
.dark-mode .broadcast-icon {
157+
color: #6a0dad;
158+
}
159+
160+
/* 🌙 설명 텍스트 */
161+
.dark-mode .broadcast-header p {
162+
color: #cccccc;
163+
}
164+
165+
/* 🌙 카드 배경 */
166+
.dark-mode .broadcast-card {
167+
background-color: #2a2a2a;
168+
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
169+
}
170+
171+
/* 🌙 카드 내부 텍스트 */
172+
.dark-mode .broadcast-card p {
173+
color: #bbbbbb;
174+
}
175+
176+
/* 🌙 인풋 */
177+
.dark-mode .input-group input,
178+
.dark-mode .start-input-group input {
179+
background-color: #1e1e1e;
180+
color: #f0f0f0;
181+
border: 1px solid #555;
182+
}
183+
184+
/* 🌙 참여 버튼 */
185+
.dark-mode .input-group button {
186+
background-color: #6a0dad;
187+
color: white;
188+
}
189+
190+
.dark-mode .input-group button:hover {
191+
background-color: #5a0099;
192+
}
193+
194+
/* 🌙 새 방송 시작 버튼 */
195+
.dark-mode .start-btn {
196+
background-color: #6a0dad;
197+
color: white;
198+
}
199+
200+
.dark-mode .start-btn:hover {
201+
background-color: #5a0099;
202+
}
203+
204+
/* 🌙 구분선 */
205+
.dark-mode .hr-with-text {
206+
color: #aaa;
207+
}
208+
209+
.dark-mode .hr-with-text::before,
210+
.dark-mode .hr-with-text::after {
211+
border-top: 1px solid #444;
212+
}
213+
214+
/* 🌙 폼 라벨 */
215+
.dark-mode .start-input-group label {
216+
color: #ddd;
217+
}
218+
219+
/* 🌙 헬프 텍스트 */
220+
.dark-mode .help-text {
221+
color: #aaa;
222+
}
223+
224+
/* 🌙 필수 표시 */
225+
.dark-mode .required {
226+
color: #ff6b6b;
227+
}

‎src/components/common/ScrollToTop.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useEffect } from "react";
2+
import { useLocation } from "react-router-dom";
3+
4+
const ScrollToTop = () => {
5+
const { pathname } = useLocation();
6+
7+
useEffect(() => {
8+
window.scrollTo({
9+
top: 0,
10+
behavior: "smooth" // "smooth" or "instant"
11+
});
12+
}, [pathname]);
13+
14+
return null;
15+
};
16+
17+
export default ScrollToTop;

‎src/components/community/Community.css‎

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
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

@@ -261,3 +261,108 @@ body {
261261
}
262262

263263
}
264+
265+
/* 🌙 전체 배경 및 텍스트 */
266+
body.dark-mode {
267+
background-color: #1e1e1e;
268+
}
269+
.dark-mode .community-container {
270+
background-color: #1e1e1e;
271+
color: #eee;
272+
}
273+
274+
/* 🌙 상단 헤더 버튼 */
275+
.dark-mode .new-post-button {
276+
background-color: #6a0dad;
277+
color: white;
278+
}
279+
280+
.dark-mode .new-post-button:hover {
281+
background-color: #5a0099;
282+
}
283+
284+
/* 🌙 섹션 제목 */
285+
.dark-mode .section-title {
286+
border-bottom: 2px solid #444;
287+
color: #f5f5f5;
288+
}
289+
290+
/* 🌙 인기 게시물 래퍼 */
291+
.dark-mode .popular-posts-wrapper {
292+
background-color: #2a2a2a;
293+
border: 1px solid #444;
294+
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.03);
295+
}
296+
297+
/* 🌙 인기 게시물 카드 */
298+
.dark-mode .popular-post-card {
299+
background-color: #1e1e1e;
300+
border: 1px solid #444;
301+
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.04);
302+
}
303+
304+
.dark-mode .popular-post-card p {
305+
color: #ccc;
306+
}
307+
308+
.dark-mode .popular-post-card .post-meta {
309+
color: #aaa;
310+
}
311+
312+
/* 🌙 검색 필터 */
313+
.dark-mode .search-filter input {
314+
background-color: #2a2a2a;
315+
border: 1px solid #555;
316+
color: #f0f0f0;
317+
}
318+
319+
/* 🌙 필터 버튼 */
320+
.dark-mode .filter-buttons button {
321+
background-color: #2a2a2a;
322+
border: 1px solid #555;
323+
color: #ccc;
324+
}
325+
326+
.dark-mode .filter-buttons button:hover {
327+
background-color: #333;
328+
}
329+
330+
/* 🌙 게시글 카드 */
331+
.dark-mode .post-card {
332+
background-color: #2a2a2a;
333+
border: 1px solid #444;
334+
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.03);
335+
}
336+
337+
.dark-mode .post-content p {
338+
color: #ccc;
339+
}
340+
341+
/* 🌙 태그 */
342+
.dark-mode .tag {
343+
background-color: #333;
344+
color: #56f3a1;
345+
}
346+
347+
/* 🌙 날짜 */
348+
.dark-mode .date {
349+
color: #999;
350+
}
351+
352+
/* 🌙 좋아요/댓글/공유 버튼 */
353+
.dark-mode .buttons button {
354+
color: #ccc;
355+
}
356+
357+
/* 🌙 페이지네이션 */
358+
.dark-mode .pagination button {
359+
border: 1px solid #555;
360+
color: #ccc;
361+
background-color: #2a2a2a;
362+
}
363+
364+
.dark-mode .pagination .active {
365+
background-color: #56f3a1;
366+
color: #1e1e1e;
367+
border: none;
368+
}

‎src/components/footer/Footer.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,43 @@
7878
font-size: 13px;
7979
color: #666;
8080
}
81+
82+
/* 🌙 푸터 전체 배경 및 텍스트 */
83+
.dark-mode .footer {
84+
background-color: #1c1c1c;
85+
color: #e0e0e0;
86+
border-top: 1px solid #333;
87+
}
88+
89+
/* 🌙 사이트명 */
90+
.dark-mode .site-name {
91+
color: #f5f5f5;
92+
}
93+
94+
/* 🌙 각 섹션 제목 */
95+
.dark-mode .footer-section h4 {
96+
color: #dddddd;
97+
}
98+
99+
/* 🌙 링크 기본 색상 및 hover */
100+
.dark-mode .footer-section a {
101+
color: #aaaaaa;
102+
}
103+
104+
.dark-mode .footer-section a:hover {
105+
color: #b88eff;
106+
}
107+
108+
/* 🌙 소셜 아이콘 색상 및 hover */
109+
.dark-mode .social-icons {
110+
color: #cccccc;
111+
}
112+
113+
.dark-mode .social-icons svg:hover {
114+
color: #b88eff;
115+
}
116+
117+
/* 🌙 하단 문구 */
118+
.dark-mode .footer-bottom {
119+
color: #888;
120+
}

‎src/components/footer/Footer.jsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import React from "react";
22
import "./Footer.css";
3-
// import logoImage from "../assets/logo.png";
43
import { FaGithub, FaTwitter, FaFacebook, FaInstagram } from "react-icons/fa"; // 아이콘용
54

65
const Footer = () => {
76
return (
87
<footer className="footer">
98
<div className="footer-content">
10-
{/* 왼쪽 로고 + 소개 */}
119
<div className="footer-section about">
1210
<div className="footer-logo">
13-
{/*<img src={logoImage} alt="Logo" />*/}
1411
<span className="site-name">Zivorp</span>
1512
</div>
1613
<p>인터랙티브한 코드 시각화 웹 IDE 플랫폼으로 코딩을<br />더 쉽고 재미있게 배워보세요.</p>
@@ -55,7 +52,7 @@ const Footer = () => {
5552
</div>
5653

5754
<div className="footer-bottom">
58-
© 2025 CodeViz. All rights reserved.
55+
© 2025 Zivorp. All rights reserved.
5956
</div>
6057
</footer>
6158
);

0 commit comments

Comments
 (0)