From a25da7dfd057d7c4c4f18505f7ce87579727ac26 Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Mon, 17 Jun 2024 10:37:08 +0900
Subject: [PATCH] Fix Dropdown Multiple

---
 .../DropdownMultiple.stories.tsx              | 14 +++--
 .../DropdownMultiple/DropdownMultipleItem.tsx | 60 ++++++++++++-------
 .../DropdownMultipleTrigger.tsx               |  6 +-
 .../Dropdown/DropdownMultiple/types/index.ts  | 10 +++-
 4 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/src/core/components/Dropdown/DropdownMultiple/DropdownMultiple.stories.tsx b/src/core/components/Dropdown/DropdownMultiple/DropdownMultiple.stories.tsx
index 4398faf..d5bee95 100644
--- a/src/core/components/Dropdown/DropdownMultiple/DropdownMultiple.stories.tsx
+++ b/src/core/components/Dropdown/DropdownMultiple/DropdownMultiple.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { MouseEvent, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 import DropdownMultiple from './index';
 import {
@@ -32,20 +32,22 @@ export const Default = () => {
 
   const items = data.map((item, idx) => {
     const { value, label } = item;
-    const checked = currentValues.some((item) => item.value === value);
+    const isChecked = currentValues.some(({ value: v }) => v === value);
 
     return (
       <DropdownMultiple.Item
         key={idx}
-        checked={checked}
-        onClick={(e: MouseEvent<HTMLLIElement>) => {
+        checked={isChecked}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
           e.stopPropagation();
 
-          if (!checked) {
+          const { checked } = e.target;
+
+          if (checked) {
             setCurrentValues((prev) => [...prev, item]);
           } else {
             setCurrentValues((prev) =>
-              prev.filter((prevItem) => prevItem !== item),
+              prev.filter((prevItem) => prevItem.value !== item.value),
             );
           }
         }}
diff --git a/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleItem.tsx b/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleItem.tsx
index 58cd629..72f1d32 100644
--- a/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleItem.tsx
+++ b/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleItem.tsx
@@ -1,33 +1,53 @@
 import clsx from 'clsx';
-import { forwardRef, Ref } from 'react';
+import { ComponentPropsWithRef, forwardRef, useId } from 'react';
 import { Check } from '@phosphor-icons/react';
 
-import { DropdownSelectItemProps } from '@/core/components/Dropdown/DropdownSelect/types';
+import { DropdownMultipleItemProps } from '@/core/components/Dropdown/DropdownMultiple/types';
 
 const DropdownMultipleItem = forwardRef(
   (
-    { className, children, checked, ...props }: DropdownSelectItemProps,
-    ref: Ref<HTMLLIElement>,
+    {
+      className,
+      children,
+      checked,
+      disabled,
+      readOnly,
+      ...props
+    }: DropdownMultipleItemProps,
+    ref: ComponentPropsWithRef<'input'>['ref'],
   ) => {
+    const id = useId();
+    const isDisabled = disabled || readOnly;
+
     return (
-      <li
-        ref={ref}
-        role='option'
-        className={clsx(
-          'flex cursor-pointer items-center justify-between text-body-01-regular text-gray-08 hover:font-bold',
-          checked && 'font-bold',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <Check
-          weight='bold'
+      <li role='option'>
+        <label
+          htmlFor={id}
           className={clsx(
-            '-mt-[2px] flex-shrink-0 text-gray-03',
-            checked && 'text-primary-03',
+            'flex items-center justify-between text-body-01-regular text-gray-08 hover:font-bold',
+            checked && 'font-bold',
+            isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
+            className,
           )}
-        />
+        >
+          {children}
+          <input
+            ref={ref}
+            id={id}
+            checked={checked}
+            type='checkbox'
+            className='peer hidden'
+            disabled={disabled}
+            readOnly={readOnly}
+            {...props}
+          />
+          <Check
+            weight='bold'
+            className={clsx(
+              '-mt-[2px] flex-shrink-0 text-gray-03 peer-checked:text-primary-03',
+            )}
+          />
+        </label>
       </li>
     );
   },
diff --git a/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleTrigger.tsx b/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleTrigger.tsx
index bbc017f..8db6b4e 100644
--- a/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleTrigger.tsx
+++ b/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleTrigger.tsx
@@ -58,7 +58,11 @@ const DropdownMultipleTrigger = forwardRef(
           <Typography
             theme='subhead-02-regular'
             color={!showPlaceholder && !isDisabled ? 'gray-08' : 'gray-05'}
-            text={!showPlaceholder ? currentValues.join(', ') : placeholder}
+            text={
+              !showPlaceholder
+                ? currentValues.map((value) => value.label).join(', ')
+                : placeholder
+            }
             className={clsx(
               'flex-1 truncate text-start',
               isDisabled && 'mr-[1.75rem]',
diff --git a/src/core/components/Dropdown/DropdownMultiple/types/index.ts b/src/core/components/Dropdown/DropdownMultiple/types/index.ts
index abaa62f..5c64213 100644
--- a/src/core/components/Dropdown/DropdownMultiple/types/index.ts
+++ b/src/core/components/Dropdown/DropdownMultiple/types/index.ts
@@ -1,4 +1,9 @@
-import { HTMLAttributes, MouseEvent, ReactElement } from 'react';
+import {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  MouseEvent,
+  ReactElement,
+} from 'react';
 
 import { DropdownProps } from '@/core/components/Dropdown/DropdownBase/types';
 import DropdownSelectItems from '@/core/components/Dropdown/DropdownSelect/DropdownSelectItems';
@@ -24,6 +29,9 @@ export interface DropdownMultipleTriggerProps<T extends ValueWithLabelType>
   onDelete?: (value: T) => void;
 }
 
+export interface DropdownMultipleItemProps
+  extends InputHTMLAttributes<HTMLInputElement> {}
+
 type DropdownMultiple = (props: DropdownProps) => ReactElement;
 
 export type ReturnType = DropdownMultiple & {