Feat: 카테고리 드롭다운 메뉴 기능 추가 #1

카테고리 아이콘 클릭 시 드롭다운 메뉴가 나타나는 기능 추가

src/components/CategoryMenu.tsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+const CategoryMenu = ({clicked}:{clicked:boolean}) => {
+    return (
+        <CategoryUl show={String(clicked)}>
+            <CategoryLi>전체 카테고리</CategoryLi>
+            <CategoryLi>여성의류</CategoryLi>
+            <CategoryLi>남성의류</CategoryLi>
+            <CategoryLi>신발</CategoryLi>
+            <CategoryLi>악세사리</CategoryLi>
+            <CategoryLi>디지털</CategoryLi>
+            <CategoryLi>가전제품</CategoryLi>
+            <CategoryLi>스포츠/레저</CategoryLi>
+            <CategoryLi>차량/오토바이</CategoryLi>
+            <CategoryLi>굿즈</CategoryLi>
+            <CategoryLi>예술/희귀/수집품</CategoryLi>
+            <CategoryLi>음반/악기</CategoryLi>
+            <CategoryLi>도서/티켓/문구</CategoryLi>
+            <CategoryLi>뷰티</CategoryLi>
+            <CategoryLi>인테리어</CategoryLi>
+            <CategoryLi>생활용품</CategoryLi>
+            <CategoryLi>공구/산업용품</CategoryLi>
+            <CategoryLi>식품</CategoryLi>
+            <CategoryLi>유아</CategoryLi>
+            <CategoryLi>반려동물</CategoryLi>
+            <CategoryLi>기타</CategoryLi>
+            <CategoryLi>재능</CategoryLi>
+        </CategoryUl>
+    )
+}
+
+export default CategoryMenu;
+
+const CategoryUl = styled.ul<{show:string}>`
+    width: 414px;
+    position: absolute;
+    top: 45px;
+    left: -55px;
+    ${props => props.show === 'true' ?
+        'display: block'
+        :
+        'display: none'
+    }
+`
+
+const CategoryLi = styled.li`
+    list-style: none;
+`

src/components/Header.tsx

@@ -10,10 +10,13 @@ import icMyPage from '../assets/searchBox/icon-mypage.svg';
 import chargeTicket from '../assets/searchBox/img-charge-ticket.png';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import CategoryMenu from './CategoryMenu';
 
 const Header = () => {
     const navigate = useNavigate();
-    let [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+    const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+    const [isCatClicked, setIsCatClicked] = useState<boolean>(false);
+
     return (
         <Wrapper>
             <Container>
@@ -34,10 +37,13 @@ const Header = () => {
                 </TopContainer>
                 <SearchBoxContainer>
                     <LogoImg src={imgLogo} onClick={()=>navigate('/')} />
-                    <IconDiv>
-                        <img src={icHamburger} width={24} />
-                        <IconTextDiv fontSize={'14px'}>카테고리</IconTextDiv>
-                    </IconDiv>
+                    <CategoryContainer>
+                        <IconHamburgerDiv onClick={()=>setIsCatClicked(!isCatClicked)}>
+                            <img src={icHamburger} width={24} />
+                            <IconTextDiv fontSize={'14px'}>카테고리</IconTextDiv>
+                        </IconHamburgerDiv>
+                        <CategoryMenu clicked={isCatClicked} />
+                    </CategoryContainer>
                     <SearchBoxDiv>
                         <TicketImg src={ticket} width={88} />
                         <SearchInput type="text" />
@@ -130,6 +136,10 @@ const LogoImg = styled.img`
     }
 `
 
+const CategoryContainer = styled.div`
+    position: relative;
+`
+
 const SearchBoxDiv = styled.div`
     position: relative;
     width: 560px;
@@ -187,6 +197,18 @@ const IconDiv = styled.div`
     cursor: pointer;
 `
 
+const IconHamburgerDiv = styled.div`
+    display: flex;
+    flex-direction: column;
+    row-gap: 6px;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+    min-width: 61px;
+    margin: 0 25px 0 0;
+    cursor: pointer;
+`
+
 // const UploadBtn = styled.button`
 //     color: white;
 //     background-color: #C908FF;