impl multi prop into select

packages/web/src/app/example/casio/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import Select, {
+  SelectItem,
+} from "@sparcs-students/web/common/components/Select";
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+`;
+
+const Section = styled.div`
+  margin-bottom: 40px;
+`;
+
+const Header = styled.h1`
+  font-size: 24px;
+  margin-bottom: 20px;
+`;
+
+const ExamplePage: React.FC = () => {
+  const [singleSelected, setSingleSelected] = useState<string>("");
+  const [multiSelected, setMultiSelected] = useState<string[]>([]);
+  const [errorStatus, setErrorStatus] = useState<boolean>(false);
+
+  const singleSelectItems: SelectItem[] = [
+    { label: "Option 1", value: "option1", selectable: true },
+    { label: "Option 2", value: "option2", selectable: true },
+    { label: "Option 3", value: "option3", selectable: true },
+  ];
+
+  const multiSelectItems: SelectItem[] = [
+    { label: "Apple", value: "apple", selectable: true },
+    { label: "Banana", value: "banana", selectable: true },
+    { label: "Cherry", value: "cherry", selectable: true },
+    { label: "Grapes", value: "grapes", selectable: true },
+  ];
+
+  console.log(errorStatus);
+
+  return (
+    <Container>
+      <Header>Select Component Example</Header>
+
+      {/* 단일 선택 */}
+      <Section>
+        <h2>Single Select</h2>
+        <Select
+          label="Choose an option"
+          items={singleSelectItems}
+          selectedValue={singleSelected}
+          onSelect={value => setSingleSelected(value as string)}
+          errorMessage="You must select an option"
+          setErrorStatus={setErrorStatus}
+        />
+        <p>
+          <strong>Selected Value:</strong> {singleSelected || "None"}
+        </p>
+      </Section>
+
+      {/* 다중 선택 */}
+      <Section>
+        <h2>Multi Select</h2>
+        <Select
+          label="Select your favorite fruits"
+          items={multiSelectItems}
+          selectedValue={multiSelected}
+          multi
+          onSelect={value => setMultiSelected(value as string[])}
+          errorMessage="At least one fruit must be selected"
+          setErrorStatus={setErrorStatus}
+        />
+        <p>
+          <strong>Selected Values:</strong>{" "}
+          {multiSelected.length > 0 ? multiSelected.join(", ") : "None"}
+        </p>
+      </Section>
+    </Container>
+  );
+};
+
+export default ExamplePage;

packages/web/src/common/components/Forms/Select.tsx → packages/web/src/common/components/Select/index.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled, { css } from "styled-components";
 import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import Label from "./_atomic/Label";
-import ErrorMessage from "./_atomic/ErrorMessage";
+import Label from "../Forms/_atomic/Label";
+import ErrorMessage from "../Forms/_atomic/ErrorMessage";
+import Dropdown from "./Dropdown";
 
 export interface SelectItem {
   label: string;
@@ -15,8 +16,9 @@ interface SelectProps {
   label?: string;
   errorMessage?: string;
   disabled?: boolean;
-  selectedValue?: string;
-  onSelect?: (value: string) => void;
+  selectedValue?: string | string[];
+  multi?: boolean; // 다중 선택 여부 추가
+  onSelect?: (value: string | string[]) => void;
   setErrorStatus?: (hasError: boolean) => void;
 }
 
@@ -61,21 +63,7 @@ const StyledSelect = styled.div<{
   ${({ disabled }) => disabled && disabledStyle}
 `;
 
-const Dropdown = styled.div`
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin-top: 4px;
-  padding: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
-  border-radius: 4px;
-  background-color: ${({ theme }) => theme.colors.WHITE};
-  gap: 4px;
-  z-index: 1000; // Ensure the dropdown appears above other content
-`;
-
-const Option = styled.div<{ selectable?: boolean }>`
+const Option = styled.div<{ selectable?: boolean; isSelected?: boolean }>`
   gap: 10px;
   border-radius: 4px;
   padding: 4px 12px;
@@ -85,6 +73,8 @@ const Option = styled.div<{ selectable?: boolean }>`
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ theme, selectable }) =>
     selectable ? theme.colors.BLACK : theme.colors.GRAY[100]};
+  background-color: ${({ theme, isSelected }) =>
+    isSelected ? theme.colors.GREEN[100] : theme.colors.WHITE};
   ${({ selectable }) =>
     selectable &&
     css`
@@ -136,6 +126,7 @@ const Select: React.FC<SelectProps> = ({
   label = "",
   disabled = false,
   selectedValue = "",
+  multi = false, // 기본값을 false로 설정
   onSelect = () => {},
   setErrorStatus = () => {},
 }) => {
@@ -144,8 +135,11 @@ const Select: React.FC<SelectProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    setErrorStatus(!!errorMessage || (!selectedValue && items.length > 0));
-  }, [errorMessage, selectedValue, items.length, setErrorStatus]);
+    const hasError =
+      (multi && Array.isArray(selectedValue) && selectedValue.length === 0) ||
+      (!multi && !selectedValue && items.length > 0);
+    setErrorStatus(!!errorMessage || hasError);
+  }, [errorMessage, selectedValue, items.length, multi, setErrorStatus]);
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -175,14 +169,40 @@ const Select: React.FC<SelectProps> = ({
 
   const handleOptionClick = (item: SelectItem) => {
     if (item.selectable) {
-      onSelect(item.value);
+      if (multi) {
+        let newSelectedValue = Array.isArray(selectedValue)
+          ? [...selectedValue]
+          : [];
+        if (newSelectedValue.includes(item.value)) {
+          newSelectedValue = newSelectedValue.filter(val => val !== item.value);
+        } else {
+          newSelectedValue.push(item.value);
+        }
+        onSelect(newSelectedValue);
+      } else {
+        onSelect(item.value);
+      }
+    }
+    if (!multi) {
       setIsOpen(false);
     }
   };
 
-  const selectedLabel =
-    items.find(item => item.value === selectedValue)?.label ||
-    "항목을 선택해주세요";
+  let selectedLabel: string;
+
+  if (multi) {
+    if (Array.isArray(selectedValue) && selectedValue.length > 0) {
+      selectedLabel = items
+        .filter(item => selectedValue.includes(item.value))
+        .map(item => item.label)
+        .join(", ");
+    } else {
+      selectedLabel = "항목을 선택해주세요";
+    }
+  } else {
+    const foundItem = items.find(item => item.value === selectedValue);
+    selectedLabel = foundItem ? foundItem.label : "항목을 선택해주세요";
+  }
 
   return (
     <SelectWrapper>
@@ -191,13 +211,19 @@ const Select: React.FC<SelectProps> = ({
         <DropdownContainer ref={containerRef}>
           <StyledSelect
             hasError={
-              hasOpenedOnce && !selectedValue && items.length > 0 && !isOpen
+              hasOpenedOnce &&
+              multi &&
+              Array.isArray(selectedValue) &&
+              selectedValue.length === 0 &&
+              !isOpen
             }
             disabled={disabled}
             onClick={handleSelectClick}
             isOpen={isOpen}
           >
-            <SelectValue isSelected={!!selectedValue}>
+            <SelectValue
+              isSelected={multi ? selectedValue.length > 0 : !!selectedValue}
+            >
               {selectedLabel}
             </SelectValue>
             <IconWrapper>
@@ -215,6 +241,12 @@ const Select: React.FC<SelectProps> = ({
                   <Option
                     key={item.value}
                     selectable={item.selectable}
+                    isSelected={
+                      multi
+                        ? Array.isArray(selectedValue) &&
+                          selectedValue.includes(item.value)
+                        : selectedValue === item.value
+                    }
                     onClick={() => handleOptionClick(item)}
                   >
                     {item.label}
@@ -226,11 +258,14 @@ const Select: React.FC<SelectProps> = ({
             </Dropdown>
           )}
         </DropdownContainer>
-        {hasOpenedOnce && !selectedValue && items.length > 0 && (
-          <ErrorMessage>
-            {errorMessage || "필수로 선택해야 하는 항목입니다"}
-          </ErrorMessage>
-        )}
+        {hasOpenedOnce &&
+          multi &&
+          Array.isArray(selectedValue) &&
+          selectedValue.length === 0 && (
+            <ErrorMessage>
+              {errorMessage || "필수로 선택해야 하는 항목입니다"}
+            </ErrorMessage>
+          )}
       </SelectWrapper>
     </SelectWrapper>
   );

packages/web/tsconfig.json

@@ -23,4 +23,4 @@
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
-}
+}