Skip to content

Commit 3a055e2

Browse files
authored
Merge pull request #189 from Gachon-Univ-Creative-Code-Innovation/fix/change-category-ui
카테고리 탭 선택시 카테고리 선택 형식 드롭다운 -> 전체 노출 변경
2 parents 6bd6710 + d7bba65 commit 3a055e2

File tree

3 files changed

+93
-12
lines changed

3 files changed

+93
-12
lines changed

src/screens/MainPageAfter/MainPageAfter.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,41 @@
8888
width: 100%;
8989
}
9090

91+
.blog-category-tabs {
92+
display: flex;
93+
flex-wrap: wrap;
94+
gap: 8px;
95+
margin: 16px 0;
96+
padding: 0 10px;
97+
}
98+
99+
.blog-category-tab {
100+
padding: 8px 16px;
101+
border: 1px solid #d7e4ee;
102+
border-radius: 20px;
103+
background: #ffffff;
104+
color: #666;
105+
font-family: "GmarketSans", sans-serif;
106+
font-size: 14px;
107+
font-weight: 400;
108+
cursor: pointer;
109+
transition: all 0.2s ease;
110+
white-space: nowrap;
111+
}
112+
113+
.blog-category-tab:hover {
114+
background: #f0f5ff;
115+
border-color: #1d1652;
116+
color: #1d1652;
117+
}
118+
119+
.blog-category-tab.active {
120+
background: #1d1652;
121+
border-color: #1d1652;
122+
color: #ffffff;
123+
font-weight: 600;
124+
}
125+
91126
.main-page-after .frame {
92127
background-color: #fafdff;
93128
border-color: #1d1652;

src/screens/MainPageAfter/MainPageAfter.jsx

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ export const MainPageAfter = () => {
6767
const [hasMore, setHasMore] = useState(true);
6868
const [tab, setTab] = useState("Hot");
6969
const [scrolled, setScrolled] = useState(false);
70-
const [isSearchOpen, setIsSearchOpen] = useState(false); //추가
7170
const [selectedCategory, setSelectedCategory] = useState(null);
71+
const [selectedCategoryLabel, setSelectedCategoryLabel] = useState("전체");
7272
const [searchOpen, setSearchOpen] = useState(false);
7373
const observer = useRef();
7474
const navigate = useNavigate();
@@ -286,19 +286,30 @@ export const MainPageAfter = () => {
286286
})}
287287
</div>
288288

289-
{/* 카테고리 탭일 때만 드롭다운 노출 */}
289+
{/* 카테고리 탭일 때만 카테고리 목록 노출 */}
290290
{tab === "Category" && (
291-
<div style={{ margin: "16px 0" }}>
292-
<select
293-
value={selectedCategory || ""}
294-
onChange={e => setSelectedCategory(e.target.value ? Number(e.target.value) : null)}
295-
style={{ fontSize: 16, padding: 6, borderRadius: 6 }}
291+
<div className="blog-category-tabs">
292+
<div
293+
className={`blog-category-tab ${selectedCategoryLabel === "전체" ? "active" : ""}`}
294+
onClick={() => {
295+
setSelectedCategoryLabel("전체");
296+
setSelectedCategory(null);
297+
}}
296298
>
297-
<option value="">카테고리 선택</option>
298-
{BLOG_CATEGORY_LIST.map(cat => (
299-
<option key={cat.code} value={cat.code}>{cat.label}</option>
300-
))}
301-
</select>
299+
전체
300+
</div>
301+
{BLOG_CATEGORY_LIST.map((category) => (
302+
<div
303+
key={category.code}
304+
className={`blog-category-tab ${selectedCategoryLabel === category.label ? "active" : ""}`}
305+
onClick={() => {
306+
setSelectedCategoryLabel(category.label);
307+
setSelectedCategory(category.code);
308+
}}
309+
>
310+
{category.label}
311+
</div>
312+
))}
302313
</div>
303314
)}
304315

src/screens/MainPageBefore/MainPageBefore.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,41 @@
8989
width: 100%;
9090
}
9191

92+
.blog-category-tabs {
93+
display: flex;
94+
flex-wrap: wrap;
95+
gap: 8px;
96+
margin: 16px 0;
97+
padding: 0 10px;
98+
}
99+
100+
.blog-category-tab {
101+
padding: 8px 16px;
102+
border: 1px solid #d7e4ee;
103+
border-radius: 20px;
104+
background: #ffffff;
105+
color: #666;
106+
font-family: "GmarketSans", sans-serif;
107+
font-size: 14px;
108+
font-weight: 400;
109+
cursor: pointer;
110+
transition: all 0.2s ease;
111+
white-space: nowrap;
112+
}
113+
114+
.blog-category-tab:hover {
115+
background: #f0f5ff;
116+
border-color: #1d1652;
117+
color: #1d1652;
118+
}
119+
120+
.blog-category-tab.active {
121+
background: #1d1652;
122+
border-color: #1d1652;
123+
color: #ffffff;
124+
font-weight: 600;
125+
}
126+
92127
.main-page-before .frame {
93128
background-color: #fafdff;
94129
border-color: #1d1652;

0 commit comments

Comments
 (0)