Skip to content

Commit 08b9b3d

Browse files
Danto7632Danto7632
authored
Merge pull request #64 from DMU-DebugVisual/sunwoong
커뮤니티 상세페이지 UI 구현 및 다크모드 대응
2 parents bdc4587 + c3e2f27 commit 08b9b3d

File tree

4 files changed

+671
-133
lines changed

4 files changed

+671
-133
lines changed

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import MyProject from "./components/mypage/MyProject";
1818
import MyCommunity from "./components/mypage/MyCommunity";
1919
import ScrollToTop from "./components/common/ScrollToTop";
2020
import CommunityWrite from "./components/community/CommunityWrite";
21+
import PostDetail from "./components/community/PostDetail"; // ✅ 게시글 상세 컴포넌트 추가
2122

2223
function AppContent() {
2324
const location = useLocation();
@@ -72,6 +73,7 @@ function AppContent() {
7273
<Route path="/ide/:language/:filename" element={<IDE />} />
7374
<Route path="/community" element={<Community />} />
7475
<Route path="/community/write" element={<CommunityWrite />} />
76+
<Route path="/community/post/:id" element={<PostDetail />} /> {/* ✅ 상세 페이지 라우팅 추가 */}
7577
<Route path="/broadcast" element={<Codecast />} />
7678
<Route path="/startbroadcast" element={<StartCodecast />} />
7779
<Route path="/mypage" element={<MyPageLayout nickname={nickname} />}>

‎src/components/community/Community.jsx‎

Lines changed: 122 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from "react";
2+
import { useNavigate } from "react-router-dom";
23
import "./Community.css";
34

45
export default function Community() {
6+
const navigate = useNavigate();
57
const tabs = ["전체", "미해결", "해결됨"];
68
const filters = ["최신순", "정확도순", "답변많은순", "좋아요순"];
79

@@ -100,154 +102,141 @@ export default function Community() {
100102

101103
return (
102104
<div className="community-wrapper">
103-
<div className="community-page">
104-
<aside className="sidebar-left">
105-
<h3>함께 공부해요.</h3>
106-
<ul>
107-
<li className="active">질문 & 답변</li>
108-
<li>고민있어요</li>
109-
<li>스터디</li>
110-
<li>팀 프로젝트</li>
111-
<li>블로그</li>
112-
</ul>
113-
<div className="top-writers">
114-
<h4>Zivorp TOP Writers</h4>
115-
<ol>
116-
<li>
117-
<span>y2gcoder</span><span>10</span>
118-
</li>
119-
<li>
120-
<span>durams</span><span>8</span>
121-
</li>
122-
<li>
123-
<span>David</span><span>7</span>
124-
</li>
125-
<li>
126-
<span>식빵</span><span>10</span>
127-
</li>
128-
<li>
129-
<span>이선희</span><span>10</span>
130-
</li>
131-
<li>
132-
<span>찹찹이</span><span>10</span>
133-
</li>
134-
<li>
135-
<span>Rio song</span><span>10</span>
136-
</li>
137-
</ol>
138-
</div>
139-
140-
</aside>
141-
142-
<main className="community-main">
143-
<div className="tabs">
144-
{tabs.map((tab, i) => (
145-
<button key={i} className={i === 0 ? "active-tab" : ""}>{tab}</button>
146-
))}
147-
</div>
105+
<div className="community-page">
106+
<aside className="sidebar-left">
107+
<h3>함께 공부해요.</h3>
108+
<ul>
109+
<li className="active">질문 & 답변</li>
110+
<li>고민있어요</li>
111+
<li>스터디</li>
112+
<li>팀 프로젝트</li>
113+
<li>블로그</li>
114+
</ul>
115+
<div className="top-writers">
116+
<h4>Zivorp TOP Writers</h4>
117+
<ol>
118+
<li><span>y2gcoder</span><span>10</span></li>
119+
<li><span>durams</span><span>8</span></li>
120+
<li><span>David</span><span>7</span></li>
121+
<li><span>식빵</span><span>10</span></li>
122+
<li><span>이선희</span><span>10</span></li>
123+
<li><span>찹찹이</span><span>10</span></li>
124+
<li><span>Rio song</span><span>10</span></li>
125+
</ol>
126+
</div>
127+
</aside>
148128

149-
<div className="search-bar">
150-
<div className="search-row">
151-
<input type="text" placeholder="궁금한 질문을 검색해보세요!" />
152-
<button className="search-btn">검색</button>
129+
<main className="community-main">
130+
<div className="tabs">
131+
{tabs.map((tab, i) => (
132+
<button key={i} className={i === 0 ? "active-tab" : ""}>{tab}</button>
133+
))}
153134
</div>
154-
<div className="search-row">
155-
<input type="text" placeholder="# 태그로 검색해보세요!" />
156-
<button className="reset-btn">초기화</button>
135+
136+
<div className="search-bar">
137+
<div className="search-row">
138+
<input type="text" placeholder="궁금한 질문을 검색해보세요!" />
139+
<button className="search-btn">검색</button>
140+
</div>
141+
<div className="search-row">
142+
<input type="text" placeholder="# 태그로 검색해보세요!" />
143+
<button className="reset-btn">초기화</button>
144+
</div>
157145
</div>
158-
</div>
159146

160-
<div className="filter-area">
161-
<div className="filter-bar">
162-
{filters.map((filter, i) => (
163-
<button key={i} className={i === 0 ? "active" : ""}>{filter}</button>
164-
))}
147+
<div className="filter-area">
148+
<div className="filter-bar">
149+
{filters.map((filter, i) => (
150+
<button key={i} className={i === 0 ? "active" : ""}>{filter}</button>
151+
))}
152+
</div>
153+
<button className="write-btn">✏️ 글쓰기</button>
165154
</div>
166-
<button className="write-btn">✏️ 글쓰기</button>
167-
</div>
168155

169-
<div className="post-list">
170-
{posts.map((post, i) => (
171-
<div key={i} className="post-card">
172-
<div className="post-meta">
173-
<div className="title-row">
174-
<span className={`badge ${post.status === "해결됨" ? "badge-solved" : ""}`}>
175-
{post.status}
176-
</span>
177-
<h3 className="post-title">{post.title}</h3>
156+
<div className="post-list">
157+
{posts.map((post, i) => (
158+
<div
159+
key={i}
160+
className="post-card"
161+
onClick={() => navigate(`/community/post/${i}`)}
162+
style={{ cursor: "pointer" }}
163+
>
164+
<div className="post-meta">
165+
<div className="title-row">
166+
<span className={`badge ${post.status === "해결됨" ? "badge-solved" : ""}`}>
167+
{post.status}
168+
</span>
169+
<h3 className="post-title">{post.title}</h3>
170+
</div>
171+
<p className="post-summary">{post.summary}</p>
178172
</div>
179-
<p className="post-summary">{post.summary}</p>
180-
</div>
181-
<div className="post-tags">
182-
{post.tags.map((tag, j) => (
183-
<span key={j} className="tag">{tag}</span>
184-
))}
185-
</div>
186-
<div className="post-footer">
187-
<div className="post-footer-left">
188-
<span>{post.author}</span>
189-
<span>{post.date}</span>
173+
<div className="post-tags">
174+
{post.tags.map((tag, j) => (
175+
<span key={j} className="tag">{tag}</span>
176+
))}
190177
</div>
191-
<div className="post-footer-right">
192-
<span>👍 {post.likes}</span>
193-
<span>💬 {post.comments}</span>
178+
<div className="post-footer">
179+
<div className="post-footer-left">
180+
<span>{post.author}</span>
181+
<span>{post.date}</span>
182+
</div>
183+
<div className="post-footer-right">
184+
<span>👍 {post.likes}</span>
185+
<span>💬 {post.comments}</span>
186+
</div>
194187
</div>
195188
</div>
189+
))}
190+
</div>
196191

192+
<div className="pagination-wrapper">
193+
<div className="page-numbers">
194+
<button className="page-button active">1</button>
195+
<button className="page-button">2</button>
196+
<button className="page-button">3</button>
197+
<button className="page-button">4</button>
198+
<button className="page-button">5</button>
197199
</div>
198-
))}
199-
</div>
200-
<div className="pagination-wrapper">
201-
<div className="page-numbers">
202-
<button className="page-button active">1</button>
203-
<button className="page-button">2</button>
204-
<button className="page-button">3</button>
205-
<button className="page-button">4</button>
206-
<button className="page-button">5</button>
200+
<button className="next-page">다음 페이지</button>
207201
</div>
208-
<button className="next-page">다음 페이지</button>
209-
</div>
210-
211-
212-
</main>
213-
202+
</main>
214203

215-
<aside className="sidebar-right">
216-
<div className="popular-tags">
217-
<h4>인기 태그</h4>
218-
<div className="tag-list">
219-
<span>Java</span><span>C</span><span>C++</span><span>jpa</span>
220-
<span>JavaScript</span><span>Python</span><span>객체지향</span>
221-
<span>빅데이터</span><span>spring</span><span>TypeScript</span><span>머신러닝</span>
204+
<aside className="sidebar-right">
205+
<div className="popular-tags">
206+
<h4>인기 태그</h4>
207+
<div className="tag-list">
208+
<span>Java</span><span>C</span><span>C++</span><span>jpa</span>
209+
<span>JavaScript</span><span>Python</span><span>객체지향</span>
210+
<span>빅데이터</span><span>spring</span><span>TypeScript</span><span>머신러닝</span>
211+
</div>
222212
</div>
223-
</div>
224-
<div className="popular-posts">
225-
<h4>주간 인기글</h4>
226-
<ul>
227-
<li>
228-
<div className="post-title">버블 정렬 시각화 프로젝트 공유합니다</div>
229-
<div className="post-author">김코딩</div>
230-
</li>
231-
<li>
232-
<div className="post-title">그래프 탐색 알고리즘 비교: BFS vs DFS</div>
233-
<div className="post-author">이알고</div>
234-
</li>
235-
<li>
236-
<div className="post-title">동적 프로그래밍 문제 해결 가이드</div>
237-
<div className="post-author">박코딩</div>
238-
</li>
239-
<li>
240-
<div className="post-title">백엔드 신입 CS 스터디 3기 모집</div>
241-
<div className="post-author">김지훈</div>
242-
</li>
243-
<li>
244-
<div className="post-title">AI 실전 활용을 위한 4주 집중 스터디, 애사모!</div>
245-
<div className="post-author">Edun</div>
246-
</li>
247-
</ul>
248-
</div>
249-
</aside>
250-
</div>
213+
<div className="popular-posts">
214+
<h4>주간 인기글</h4>
215+
<ul>
216+
<li>
217+
<div className="post-title">버블 정렬 시각화 프로젝트 공유합니다</div>
218+
<div className="post-author">김코딩</div>
219+
</li>
220+
<li>
221+
<div className="post-title">그래프 탐색 알고리즘 비교: BFS vs DFS</div>
222+
<div className="post-author">이알고</div>
223+
</li>
224+
<li>
225+
<div className="post-title">동적 프로그래밍 문제 해결 가이드</div>
226+
<div className="post-author">박코딩</div>
227+
</li>
228+
<li>
229+
<div className="post-title">백엔드 신입 CS 스터디 3기 모집</div>
230+
<div className="post-author">김지훈</div>
231+
</li>
232+
<li>
233+
<div className="post-title">AI 실전 활용을 위한 4주 집중 스터디, 애사모!</div>
234+
<div className="post-author">Edun</div>
235+
</li>
236+
</ul>
237+
</div>
238+
</aside>
239+
</div>
251240
</div>
252241
);
253242
}

0 commit comments

Comments
 (0)