[#102] ✨ 설렉트 컴포넌트에 검색 기능 추가 (#193)

* [#168] 💄 add pencil icon to project

* [#168] 🔧 add piclorem to next image domain

* [#168] 💄 address size of Logo since next 15 update

* [#168] ♻️ turn divider from div to span

* [#168] 💄 give fullwidth as default and adjust icon location

* [#168] 🐛 give use client since dropdown is statefull

* [#168] ♻️ give use client since hooks are statefull

* [#168] 💄 set justify-center in pagination container

* [#168] ✨ add initial team recruitment page

* [#168] ✨ add team type states

* [#102] ✨ add util function cn

* [#102] ✨ commonize search component (50%)

* [#102] ✨ integrate select component as one compound

* [#102] 💄 remove selecte style from select component

Author: KingNono1030

src/app/(pages)/team/page.tsx

@@ -16,7 +16,7 @@ import { Text } from '@/components/common/text'
 import { Footer } from '@/components/shared/footer'
 import { Header } from '@/components/shared/header'
 import { Pagination } from '@/components/shared/pagination'
-import { MultiSelect, Select } from '@/components/shared/select'
+import { Select } from '@/components/shared/select'
 import { TeamRecruitmentCard } from '@/components/team/TeamRecruitmentCard'
 
 import { usePagination } from '@/hooks/usePagination'
@@ -246,7 +246,7 @@ export default function TeamPage(): JSX.Element {
   console.log(`기존 twMerge : ${twMerge(mergeText)}`)
   console.log(`기존 twMergeEx : ${twMergeEx(mergeText)}`)
 
-  const [techStack, setTechstack] = useState('')
+  const [techStack, setTechstack] = useState<string[]>([])
   const [position, setPosition] = useState('')
   const [order, setOrder] = useState<'recent' | 'like'>('recent')
   const { isOpen: onRecruitment, toggle: toggleRecruitment } = useToggle()
@@ -261,6 +261,14 @@ export default function TeamPage(): JSX.Element {
   } = usePagination({ totalItems: 20, itemsPerPage: 10, buttonsPerPage: 10 })
   const [teamType, setTeamType] = useState<TeamType>('STUDY')
 
+  const handleTechStack = (newValue: string) => {
+    if (techStack.includes(newValue)) {
+      setTechstack(prev => prev.filter(item => item !== newValue))
+    } else {
+      setTechstack(prev => [...prev, newValue])
+    }
+  }
+
   return (
     <div>
       <Header isAuthenticated={true} user={USER}></Header>
@@ -344,17 +352,25 @@ export default function TeamPage(): JSX.Element {
           <div className='mb-20 flex items-center justify-between'>
             <div className='flex gap-12'>
               <Select
-                value={techStack}
-                onChange={setTechstack}
                 options={stackOptions}
-                placeholder='기술 스택'
-              />
+                isMulti={true}
+                isSearchable={true}
+                onChange={setTechstack}
+              >
+                <Select.Trigger placeholder='기술 스택' />
+                <Select.Menu className='w-246'>
+                  <Select.Search />
+                </Select.Menu>
+              </Select>
               <Select
-                value={position}
-                onChange={setPosition}
                 options={positionOptions}
-                placeholder='포지션'
-              />
+                isMulti={true}
+                isSearchable={false}
+                onChange={setPosition}
+              >
+                <Select.Trigger placeholder='포지션' />
+                <Select.Menu className='w-216' />
+              </Select>
             </div>
             <div className='flex gap-20'>
               <div className='flex gap-40'>