Feature/#181 Selector 구현 (#183)

* feat: Selector 컴포넌트 구현

#181

* design: borderRadius 알맞게 수정 xl -> 3xl

#181

* refactor: 불필요한 Box 삭제

#181

* chore: mocks 삭제

#181

* feat: value값으로 index 추가

#181

* design: MenuList에 padding 0 적용

#181

* design: icon size 수정

#181

* feat: selected된 요소 알 수 있게 구현

#181

* refactor: selected type에 undefined 제거

#181

src/components/Selector/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Menu, MenuButton, MenuItem, MenuList, Button, Text } from '@chakra-ui/react';
+import { useRef, useEffect, useState } from 'react';
+import { BiChevronDown } from 'react-icons/bi';
+
+import { SelectorProps } from './types';
+
+const Selector = ({ selected, label, handleSelector }: SelectorProps) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuWidth, setMenuWidth] = useState('0px');
+
+  useEffect(() => {
+    if (menuRef.current) {
+      setMenuWidth(`${menuRef.current.offsetWidth}px`);
+    }
+  }, []);
+
+  return (
+    <Menu>
+      <MenuButton
+        ref={menuRef}
+        as={Button}
+        w="100%"
+        color="white"
+        textAlign="left"
+        bg="orange_light"
+        _hover={{ bg: 'orange_light' }}
+        _active={{ bg: 'orange_light' }}
+        _focus={{ bg: 'orange_light' }}
+        rightIcon={<BiChevronDown size="28px" />}
+      >
+        <Text textStyle="bold_md">{selected}</Text>
+      </MenuButton>
+      <MenuList
+        overflow="hidden"
+        minW={menuWidth}
+        p="0"
+        bg="orange_light"
+        borderColor="orange_light"
+        borderRadius="3xl"
+      >
+        {label.map((item, index) => (
+          <MenuItem
+            key={item}
+            pl="15"
+            color="white"
+            bg="orange_light"
+            _hover={{ bg: 'orange_dark' }}
+            onClick={() => handleSelector(item)}
+            value={index}
+          >
+            <Text textStyle="bold_md">{item}</Text>
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default Selector;

src/components/Selector/types.ts

@@ -0,0 +1,5 @@
+export interface SelectorProps {
+  selected: string;
+  label: string[];
+  handleSelector: (data: string) => void;
+}