Feat: 카테고리 드롭다운 메뉴 #1

- 카테고리 아이콘 스타일 수정 - 카테고리 아이콘 클릭 시 드롭다운 메뉴 나타나도록 기능 추가
JMarketYard · Jan 22, 2025 · 9671aa5 · 9671aa5
1 parent cf463e8
commit 9671aa5
Showing 1 changed file with 38 additions and 3 deletions.
diff --git a/src/components/CategoryMenu.tsx b/src/components/CategoryMenu.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const CategoryMenu = ({clicked}:{clicked:boolean}) => {
     return (
         <CategoryUl show={String(clicked)}>
-            <CategoryLi>전체 카테고리</CategoryLi>
+            <CategoryName>전체 카테고리</CategoryName>
             <CategoryLi>여성의류</CategoryLi>
             <CategoryLi>남성의류</CategoryLi>
             <CategoryLi>신발</CategoryLi>
@@ -32,17 +32,52 @@ const CategoryMenu = ({clicked}:{clicked:boolean}) => {
 export default CategoryMenu;
 
 const CategoryUl = styled.ul<{show:string}>`
-    width: 414px;
+    width: 200px;
     position: absolute;
     top: 45px;
-    left: -55px;
+    left: -65px;
     ${props => props.show === 'true' ?
         'display: block'
         :
         'display: none'
     }
 `
 
+const CategoryName = styled.li`
+    list-style: none;
+    height: 36px;
+    border: 1px solid #8F8E94;
+    background: #FFF;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    font-size: 15.5px;
+    font-weight: 700;
+    color: #000;
+    font-family: Pretendard;
+    font-style: normal;
+    line-height: 45px; /* 204.545% */
+    letter-spacing: -0.165px;
+    &:hover {
+        cursor: default;
+    }
+`
+
 const CategoryLi = styled.li`
     list-style: none;
+    height: 36px;
+    background: #FFF;
+    display: flex;
+    align-items: center;
+    padding: 4px 0 0 15px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #000;
+    font-family: Pretendard;
+    font-style: normal;
+    line-height: 45px; /* 204.545% */
+    letter-spacing: -0.165px;
+    &:hover {
+        cursor: pointer;
+    }
 `