[#102] ✨ shared 컴포넌트 Select 개발 (#122)

* [#50] 🚚 rename index.tsx -> index.ts

* [#67] 💄 solve prettier build warnings by formatting

* [#97] ✨ add dropdown component

* [#97] ♻️ add close method to useToggle hook

* [#97] ✅ add dropdown stories

* [#97] 🔧 add icon assets (setting / workbag / codefile / logout)

* [#97] 💄 adjust svg fill and stroke attributes

* [#97] 💄 replace size props from 44 px to 48px in avatar

* [#97] 💄 expand highlight component with new className props

* [#97] ✨ add header user menu component

* [#97] ✅ add header user menu stories

* [#97] 🐛 remove unused value props from dropdown items

* [#97] 🚚 remove comments and allow close method when touching outside of dropdown

* [#97] 🚚 remove closeOnSelect props from header user menu component

* [#97] 🗑️ remove select component

* [#97] 🐛 solve build warning by removing unused import line

* [#97] ✨ make sure dropdown to close when clicked outside of the menu

* [#102] 💄 update caret up svg style

* [#102] ♻️ allow using useDropdownContext as a module

* [#102] ✨ add select component

* [#102] ✅ add select stories

* [#102] ♻️ simplify classname by declaring vars

* [#102] 💄 control width in dropdown trigger box instead of trigger

* [#102] 🚚 rename dropdown trigger box props

* [#102] ♻️ remove duplicated state control

* [#102] 🐛 remove unused arguments in handleSelect

* [#102] ♻️ isOpon state controles aria-expanded of dropdown trigger

* [#102] 🚚 renmae story paths in select stories

* [#102] ✨ add multiple select component

* [#102] ✅ add multi select stories

* [#102] 🐛 fix build error by erasing dependency list in dropdown

* [#102] 🗑️ remove React import

Author: KingNono1030

src/assets/icons/ic-caret-up.svg

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 

src/components/common/button/Clickable.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 

src/components/common/dropdown/Dropdown.test.tsx

@@ -15,8 +15,9 @@ interface DropdownContextType {
 
 const DropdownContext = createContext<DropdownContextType | null>(null)
 
-const useDropdownContext = () => {
+export const useDropdownContext = (): DropdownContextType => {
   const context = useContext(DropdownContext)
+
   if (!context) {
     throw new Error('useDropdownContext must be used within a DropdownProvider')
   }
@@ -46,7 +47,7 @@ const Dropdown = ({ children, className }: BaseProps): JSX.Element => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [])
+  })
 
   return (
     <DropdownContext.Provider value={{ isOpen, toggle, close }}>
@@ -58,15 +59,15 @@ const Dropdown = ({ children, className }: BaseProps): JSX.Element => {
 }
 
 const Trigger = ({ children, className }: BaseProps) => {
-  const { toggle } = useDropdownContext()
+  const { isOpen, toggle } = useDropdownContext()
 
   return (
     <button
       type='button'
       className={className}
       onClick={toggle}
       aria-haspopup='listbox'
-      aria-expanded={true}
+      aria-expanded={isOpen}
     >
       {children}
     </button>
@@ -112,7 +113,7 @@ interface ItemProps extends BaseProps {
 
 const getItemStyle = (className: string) =>
   clsx(
-    'flex h-40 w-full items-center rounded-8 px-12 text-body2 text-gray-800 hover:bg-gray-100',
+    'flex h-40 w-full items-center rounded-8 px-12 text-body2 font-medium text-gray-800 hover:bg-gray-100',
     className
   )
 

src/components/common/dropdown/Dropdown.tsx

@@ -1,3 +1,3 @@
-import { Dropdown } from './Dropdown'
+import { Dropdown, useDropdownContext } from './Dropdown'
 
-export { Dropdown }
+export { Dropdown, useDropdownContext }

src/components/common/dropdown/index.ts

@@ -0,0 +1,103 @@
+import { IcCaretDown, IcCaretUp } from '@/assets/IconList'
+import clsx from 'clsx'
+
+import { Box } from '@/components/common/containers'
+import { Dropdown, useDropdownContext } from '@/components/common/dropdown'
+import { CheckboxInput } from '@/components/common/input'
+
+type Option = {
+  label: string
+  value: string
+}
+
+interface SelectProps {
+  options: Option[]
+  values: string[]
+  onChange: React.Dispatch<React.SetStateAction<string[]>>
+  placeholder?: string
+  disabled?: boolean
+}
+export const MultiSelect = ({
+  options,
+  values,
+  onChange,
+  placeholder = 'Select an option',
+  disabled = false,
+}: SelectProps): JSX.Element => {
+  const selectedOptions = options.filter(option =>
+    values.includes(option.value)
+  )
+  const selectedLabel = selectedOptions[0]?.value
+    ? `${selectedOptions[0]?.value}` +
+      (selectedOptions.length - 1
+        ? ` 외 ${selectedOptions.length - 1}개 선택`
+        : '')
+    : ''
+
+  const handleSelect = (value: string) => {
+    onChange(prev =>
+      prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]
+    )
+  }
+
+  const triggerStyle = clsx({
+    'pointer-events-none cursor-not-allowed': disabled,
+  })
+
+  return (
+    <Dropdown>
+      <Dropdown.Trigger className={triggerStyle} aria-disabled={disabled}>
+        <DropdownTriggerBox
+          label={selectedLabel || placeholder}
+          isSelected={!!selectedLabel}
+          isDisabled={disabled}
+        />
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        {options.map(option => (
+          <Dropdown.Item
+            key={option.value}
+            closeOnSelect={false}
+            onClick={() => handleSelect(option.value)}
+          >
+            <CheckboxInput
+              label={option.label}
+              onClick={() => handleSelect(option.value)}
+              variant='checkbox'
+              checked={selectedOptions.some(
+                selectedOption => selectedOption.value === option.value
+              )}
+              className='ml-4 cursor-pointer'
+            />
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
+interface DropdownTriggerBoxProps {
+  label: string
+  isSelected: boolean
+  isDisabled: boolean
+}
+
+const DropdownTriggerBox = ({
+  label,
+  isSelected,
+  isDisabled,
+}: DropdownTriggerBoxProps) => {
+  const { isOpen } = useDropdownContext()
+  const triggerBoxClass = clsx(
+    'h-48 w-210 justify-between p-12 text-body1 font-medium text-gray-500 focus:border-primary-normal',
+    { 'text-gray-800': isSelected },
+    { 'bg-gray-200 text-gray-400': isDisabled }
+  )
+
+  return (
+    <Box className={triggerBoxClass} rounded={8}>
+      {label}
+      {isOpen ? <IcCaretUp /> : <IcCaretDown />}
+    </Box>
+  )
+}

src/components/shared/select/MultiSelect.tsx

@@ -0,0 +1,84 @@
+import { IcCaretDown, IcCaretUp } from '@/assets/IconList'
+import clsx from 'clsx'
+
+import { Box } from '@/components/common/containers'
+import { Dropdown, useDropdownContext } from '@/components/common/dropdown'
+
+type Options = {
+  label: string
+  value: string
+}
+
+interface SelectProps {
+  options: Options[]
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+}
+export const Select = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select an option',
+  disabled = false,
+}: SelectProps): JSX.Element => {
+  const selectedOption = options.find(option => option.value === value)
+  const selectedLabel = selectedOption?.label || ''
+
+  const handleSelect = (value: string) => {
+    onChange(value)
+  }
+
+  const triggerStyle = clsx({
+    'pointer-events-none cursor-not-allowed': disabled,
+  })
+
+  return (
+    <Dropdown>
+      <Dropdown.Trigger className={triggerStyle} aria-disabled={disabled}>
+        <DropdownTriggerBox
+          label={selectedLabel || placeholder}
+          isSelected={!!selectedLabel}
+          isDisabled={disabled}
+        />
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        {options.map(option => (
+          <Dropdown.Item
+            key={option.value}
+            onClick={() => handleSelect(option.value)}
+          >
+            {option.label}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
+interface DropdownTriggerBoxProps {
+  label: string
+  isSelected: boolean
+  isDisabled: boolean
+}
+
+const DropdownTriggerBox = ({
+  label,
+  isSelected,
+  isDisabled,
+}: DropdownTriggerBoxProps) => {
+  const { isOpen } = useDropdownContext()
+  const triggerBoxClass = clsx(
+    'h-48 w-210 justify-between p-12 text-body1 font-medium text-gray-500 focus:border-primary-normal',
+    { 'text-gray-800': isSelected },
+    { 'bg-gray-200 text-gray-400': isDisabled }
+  )
+
+  return (
+    <Box className={triggerBoxClass} rounded={8}>
+      {label}
+      {isOpen ? <IcCaretUp /> : <IcCaretDown />}
+    </Box>
+  )
+}

src/components/shared/select/Select.tsx

@@ -0,0 +1,4 @@
+import { MultiSelect } from './MultiSelect'
+import { Select } from './Select'
+
+export { Select, MultiSelect }

src/components/shared/select/index.ts

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+
+import { Meta, StoryFn } from '@storybook/react'
+
+import { MultiSelect } from '@/components/shared/select'
+
+export default {
+  title: 'Shared/Select/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta
+
+const Template: StoryFn<typeof MultiSelect> = args => {
+  const [values, setValues] = useState<string[]>(args.values || [])
+  return <MultiSelect {...args} values={values} onChange={setValues} />
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  options: [
+    { label: '백엔드', value: '백엔드' },
+    { label: '프론트엔드', value: '프론트엔드' },
+    { label: '모바일', value: '모바일' },
+    { label: '기타', value: '기타' },
+  ],
+  values: [],
+  placeholder: '포지션',
+  disabled: false,
+}
+
+export const WithPreSelectedValue = Template.bind({})
+WithPreSelectedValue.args = {
+  options: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+  values: ['option2'],
+  placeholder: 'Select an option',
+  disabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  options: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+  values: [],
+  placeholder: 'Select an option',
+  disabled: true,
+}
+
+export const MultiSelected = Template.bind({})
+MultiSelected.args = {
+  options: [
+    { label: '스터디', value: '스터디' },
+    { label: '팀 프로젝트', value: '팀 프로젝트' },
+    { label: '멘토링', value: '멘토링' },
+  ],
+  values: ['스터디', '팀 프로젝트'],
+  placeholder: '모집 유형 선택',
+  disabled: false,
+}
+
+export const NoOptionsAvailable = Template.bind({})
+NoOptionsAvailable.args = {
+  options: [],
+  values: [],
+  placeholder: '선택할 옵션이 없습니다',
+  disabled: false,
+}

src/stories/shared/select/MultiSelect.stories.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+
+import { Meta, StoryFn } from '@storybook/react'
+
+import { Select } from '@/components/shared/select'
+
+export default {
+  title: 'Shared/Select/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta
+
+const Template: StoryFn<typeof Select> = args => {
+  const [value, setValue] = useState(args.value)
+  return <Select {...args} value={value} onChange={setValue} />
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  options: [
+    { label: '스터디', value: '스터디' },
+    { label: '팀 프로젝트', value: '팀 프로젝트' },
+    { label: '멘토링', value: '멘토링' },
+  ],
+  value: '',
+  placeholder: '모집 유형 선택',
+  disabled: false,
+}
+
+export const WithPreSelectedValue = Template.bind({})
+WithPreSelectedValue.args = {
+  options: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+  value: 'option2',
+  placeholder: 'Select an option',
+  disabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  options: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+  value: '',
+  placeholder: 'Select an option',
+  disabled: true,
+}