Skip to content

Commit 7881fd8

Browse files
sojeongP0415sojeongP0415
committed
Merge branch 'sunwoong'
2 parents 1f98759 + 9e62ad9 commit 7881fd8

5 files changed

Lines changed: 625 additions & 0 deletions

File tree

‎src/components/community/Community.css‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background-color: #f5f6fa;
5+
font-family: 'Noto Sans KR', sans-serif;
6+
}
7+
8+
.community-container {
9+
max-width: 90%;
10+
margin: 0 auto;
11+
padding: 2rem 3rem;
12+
}
13+
14+
.community-header {
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
margin-bottom: 2rem;
19+
}
20+
21+
.community-header h1 {
22+
font-size: 3rem;
23+
font-weight: bold;
24+
}
25+
26+
.new-post-button {
27+
background-color: #845ef7;
28+
color: white;
29+
padding: 0.75rem 1.75rem; /* ↑ 세로 패딩 늘려서 버튼 커짐 */
30+
border: none;
31+
border-radius: 6px;
32+
font-weight: bold;
33+
font-size: 1.25rem; /* 글씨 키움 */
34+
cursor: pointer;
35+
transition: background-color 0.3s;
36+
}
37+
38+
39+
.new-post-button:hover {
40+
background-color: #6f4fd5;
41+
}
42+
43+
.section-title {
44+
font-size: 1.25rem;
45+
font-weight: bold;
46+
display: flex;
47+
align-items: center;
48+
gap: 0.5rem;
49+
border-bottom: 2px solid #ddd;
50+
padding-bottom: 1.25rem; /* ← 이 값을 늘리면 선과의 간격이 늘어남 */
51+
margin-bottom: 1.5rem;
52+
}
53+
54+
55+
.popular-posts-wrapper {
56+
background-color: white;
57+
border: 1px solid #ccc;
58+
border-radius: 10px;
59+
padding: 1rem 2rem 3rem 2rem; /* 위 여백을 1.5rem으로 줄임 */
60+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
61+
margin-bottom: 2rem;
62+
width: 97.5%;
63+
min-height: 600px;
64+
}
65+
66+
.popular-posts {
67+
display: grid;
68+
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* 너비 늘림 */
69+
gap: 1.5rem;
70+
}
71+
72+
.popular-post-card {
73+
background-color: #fff;
74+
border: 1px solid #ccc;
75+
border-radius: 10px;
76+
padding: 1rem;
77+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
78+
display: flex;
79+
flex-direction: column;
80+
height: 470px;
81+
}
82+
83+
.popular-post-card img {
84+
width: 100%;
85+
height: 300px; /* 높이 늘림 */
86+
object-fit: cover;
87+
border-radius: 8px;
88+
margin-bottom: 1rem;
89+
background-color: #eee;
90+
}
91+
92+
.popular-post-card h3 {
93+
font-size: 1.5rem;
94+
font-weight: bold;
95+
margin: 0 0 0.5rem 0;
96+
}
97+
98+
.popular-post-card p {
99+
font-size: 1rem;
100+
color: #666;
101+
margin-bottom: 0.75rem;
102+
overflow: hidden;
103+
display: -webkit-box;
104+
-webkit-line-clamp: 2;
105+
-webkit-box-orient: vertical;
106+
}
107+
108+
.popular-post-card .post-meta {
109+
display: flex;
110+
justify-content: space-between;
111+
font-size: 1rem;
112+
color: #555;
113+
margin-top: auto;
114+
}
115+
116+
.search-filter {
117+
display: flex;
118+
gap: 1rem;
119+
margin-bottom: 1rem;
120+
}
121+
122+
.search-filter input {
123+
flex: 1;
124+
padding: 0.75rem 1rem; /* ↑ 위아래 높이 증가 */
125+
font-size: 1rem; /* 글자 키움 */
126+
border-radius: 6px;
127+
border: 1px solid #ccc;
128+
}
129+
130+
131+
.filter-buttons button {
132+
padding: 0.75rem 1rem; /* ↑ 버튼 높이 증가 */
133+
font-size: 1rem; /* 글자 크기 증가 */
134+
background: none;
135+
border: 1px solid #ddd;
136+
border-radius: 6px;
137+
cursor: pointer;
138+
background-color: white;
139+
}
140+
.post-card {
141+
display: flex;
142+
border: 1px solid #ddd;
143+
border-radius: 8px;
144+
margin-bottom: 1rem;
145+
overflow: hidden;
146+
background-color: white;
147+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
148+
flex-wrap: nowrap;
149+
}
150+
151+
.thumbnail-box {
152+
flex: 0 0 350px; /* ✅ 좌우 크기 ↑ (기존보다 넓게) */
153+
height: auto;
154+
background-color: #eee;
155+
overflow: hidden;
156+
display: flex;
157+
justify-content: center;
158+
align-items: center;
159+
}
160+
161+
.thumbnail-box img {
162+
width: 100%;
163+
height: 100%;
164+
object-fit: cover;
165+
display: block;
166+
}
167+
168+
.post-content {
169+
flex: 1;
170+
padding: 1rem 1.5rem; /* 여유 있는 좌우 여백 */
171+
}
172+
173+
174+
.tags {
175+
margin-bottom: 0.5rem;
176+
}
177+
178+
.tag {
179+
font-size: 0.75rem;
180+
background-color: #e0f2f1;
181+
color: #0CA678;
182+
padding: 2px 6px;
183+
border-radius: 4px;
184+
margin-right: 0.5rem;
185+
}
186+
187+
.post-content h3 {
188+
font-size: 1.5rem;
189+
font-weight: bold;
190+
margin-bottom: 0.5rem;
191+
}
192+
193+
.post-content p {
194+
font-size: 1rem;
195+
color: #555;
196+
margin-bottom: 1rem;
197+
}
198+
199+
.post-footer {
200+
display: flex;
201+
justify-content: space-between;
202+
align-items: center;
203+
}
204+
205+
.author-info {
206+
display: flex;
207+
align-items: center;
208+
gap: 0.5rem;
209+
}
210+
211+
.author-info img {
212+
border-radius: 50%;
213+
}
214+
215+
.author-info p {
216+
margin: 0;
217+
font-size: 0.9rem;
218+
}
219+
220+
.date {
221+
font-size: 0.75rem;
222+
color: #777;
223+
}
224+
225+
.buttons button {
226+
margin-left: 0.5rem;
227+
background: none;
228+
border: none;
229+
cursor: pointer;
230+
font-size: 0.9rem;
231+
}
232+
233+
.pagination {
234+
margin-top: 2rem;
235+
display: flex;
236+
justify-content: center;
237+
gap: 0.5rem;
238+
}
239+
240+
.pagination button {
241+
padding: 0.5rem 0.75rem;
242+
border: 1px solid #ddd;
243+
border-radius: 4px;
244+
background: none;
245+
cursor: pointer;
246+
}
247+
248+
.pagination .active {
249+
background-color: #0CA678;
250+
color: white;
251+
border: none;
252+
}
253+
254+
@media (max-width: 768px) {
255+
.popular-posts {
256+
grid-template-columns: 1fr;
257+
}
258+
259+
.community-container {
260+
padding: 1rem;
261+
}
262+
263+
}

‎src/components/community/Community.jsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from "react";
2+
import "./Community.css";
3+
4+
export default function Community() {
5+
const posts = [
6+
{
7+
title: "버블 정렬 시각화 프로젝트 공유합니다",
8+
summary: "버블 정렬 알고리즘을 시각적으로 이해하기 쉽게 구현해보았습니다. 피드백 부탁드려요!",
9+
tags: ["알고리즘", "정렬", "시각화"],
10+
author: "김코딩",
11+
date: "2023. 5. 15",
12+
likes: 24,
13+
comments: 8,
14+
thumbnail: "https://via.placeholder.com/300x180"
15+
},
16+
{
17+
title: "그래프 탐색 알고리즘 비교: BFS vs DFS",
18+
summary: "그래프 탐색 알고리즘의 차이점을 비교하고 어떤 상황에서 더 적합한지 정리했습니다.",
19+
tags: ["그래프", "BFS", "DFS"],
20+
author: "이알고",
21+
date: "2023. 5. 17",
22+
likes: 32,
23+
comments: 12,
24+
thumbnail: "https://via.placeholder.com/300x180"
25+
},
26+
{
27+
title: "동적 프로그래밍 문제 해결 가이드",
28+
summary: "DP 문제를 효율적으로 푸는 전략과 예제를 모아 정리해봤습니다.",
29+
tags: ["DP", "문제풀이", "코딩테스트"],
30+
author: "박코딩",
31+
date: "2023. 5. 18",
32+
likes: 40,
33+
comments: 15,
34+
thumbnail: "https://via.placeholder.com/300x180"
35+
}
36+
];
37+
38+
return (
39+
<div className="community-container">
40+
<div className="community-header">
41+
<h1>커뮤니티</h1>
42+
<button className="new-post-button">+ 새 게시물</button>
43+
</div>
44+
45+
<div className="popular-posts-wrapper">
46+
<h2 className="section-title">🔥 인기 게시물</h2>
47+
<div className="popular-posts">
48+
{posts.slice(0, 3).map((post, idx) => (
49+
<div className="popular-post-card" key={idx}>
50+
<img src={post.thumbnail} alt="썸네일" />
51+
<div className="post-text">
52+
<h3>{post.title}</h3>
53+
<p>{post.summary}</p>
54+
</div>
55+
<div className="post-meta">
56+
<span>{post.author}</span>
57+
<span>좋아요 {post.likes}</span>
58+
</div>
59+
</div>
60+
))}
61+
</div>
62+
</div>
63+
64+
<div className="search-filter">
65+
<input type="text" placeholder="게시물 검색..." />
66+
<div className="filter-buttons">
67+
<button>최신순</button>
68+
<button>인기순</button>
69+
<button>팔로잉</button>
70+
<button>북마크</button>
71+
</div>
72+
</div>
73+
74+
{posts.map((post, idx) => (
75+
<div className="post-card" key={idx}>
76+
<div className="thumbnail-box">
77+
<img src={post.thumbnail} alt="썸네일" />
78+
</div>
79+
<div className="post-content">
80+
<div className="tags">
81+
{post.tags.map((tag, i) => (
82+
<span key={i} className="tag">{tag}</span>
83+
))}
84+
</div>
85+
<h3>{post.title}</h3>
86+
<p>{post.summary}</p>
87+
<div className="post-footer">
88+
<div className="author-info">
89+
<img src="https://via.placeholder.com/32" alt="작성자" />
90+
<div>
91+
<p>{post.author}</p>
92+
<p className="date">{post.date}</p>
93+
</div>
94+
</div>
95+
<div className="buttons">
96+
<button>좋아요 {post.likes}</button>
97+
<button>댓글 {post.comments}</button>
98+
<button>공유</button>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
))}
104+
105+
<div className="pagination">
106+
<button>◀</button>
107+
<button className="active">1</button>
108+
<button>2</button>
109+
<button>▶</button>
110+
</div>
111+
</div>
112+
);
113+
}

0 commit comments

Comments
 (0)