[recover] selectbox

src/components/Home.tsx

@@ -1,4 +1,3 @@
-import RecommendPlaceList from '@/components/selectbox/RecommendPlaceList';
 import Selectbox from '@/components/selectbox/Selectbox';
 import type { RecommendPlaceResponse } from '@/components/selectbox/types/type';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -7,6 +6,7 @@ import SearchBar from '@/components/searchbar/SearchBar';
 import Carousel from '@/components/carousel/Carousel';
 import RankingMovie from '@/components/movie/RankingMovie';
 import { movies } from '@/mock/data';
+import RecommendPlace from '@/components/selectbox/RecommendPlace';
 import { searchbarElements } from '@/components/searchbar/mocks/searchbar';
 
 export default function Home() {
@@ -44,7 +44,17 @@ export default function Home() {
         임시 selectbox
       </span>
       <Selectbox isOpen={isOpen} setIsOpen={setIsOpen} excludeClickRef={ref}>
-        <RecommendPlaceList data={data} />
+        {data.map(({ title, items }, idx) => {
+          return (
+            <Selectbox.Group title={title}>
+              {items.map((item) => (
+                <Selectbox.option key={idx} value={item}>
+                  <RecommendPlace {...item} />
+                </Selectbox.option>
+              ))}
+            </Selectbox.Group>
+          );
+        })}
       </Selectbox>
 
       <SearchBar elements={searchbarElements} />

src/components/selectbox/Selectbox.tsx

@@ -1,4 +1,6 @@
+import SelectboxOption from '@/components/selectbox/components/SelectBoxOption';
 import useOutsideClick from '@/components/selectbox/hooks/useOutsideClick';
+import SelectboxGroup from '@/components/selectbox/SelectboxGroup';
 import { useRef, type SetStateAction } from 'react';
 
 type SelectboxProps = {
@@ -10,14 +12,14 @@ type SelectboxProps = {
   excludeClickRef: React.RefObject<HTMLElement | null>;
 };
 
-export default function Selectbox({
+const Selectbox = ({
   children,
   isCloseOnClickOutside = true,
   isCloseOnPressedESC = true,
   isOpen,
   setIsOpen,
   excludeClickRef,
-}: SelectboxProps) {
+}: SelectboxProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useOutsideClick({
@@ -38,4 +40,9 @@ export default function Selectbox({
       </div>
     )
   );
-}
+};
+
+Selectbox.Group = SelectboxGroup;
+Selectbox.option = SelectboxOption;
+
+export default Selectbox;

src/components/selectbox/components/SelectBoxItem.tsx → src/components/selectbox/components/SelectboxOption.tsx

@@ -1,11 +1,11 @@
 import type { RecommendPlaceResponse } from '@/components/selectbox/types/type';
 
-type SelectBoxItemProps = {
+type SelectBoxOptionProps = {
   children: React.ReactNode;
   value: RecommendPlaceResponse['items'][number];
 };
 
-export default function SelectBoxItem({ children, value }: SelectBoxItemProps) {
+export default function SelectboxOption({ children, value }: SelectBoxOptionProps) {
   const { itemId, itemTitle } = value;
 
   const handleClickItem = () => {