impl multi prop into select

[sparcscasio]

요약 *

It closes #22

스크린샷

다중 선택 시

multi = true일 때, 아무것도 선택 X -> error 출력

"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;

이후 Task *

• 없음

[wjeongchoi]

폴더 정리를 한 번 해야할 것 같아서 기능 체크는 그거 후에 할게요!

지금 드롭다운 컴포넌트만 Select 폴더에 들어가 있는데 정작 Select는 Forms에 들어가 있어서, Select를 Select 폴더에 옮기고 index.tsx로 바꿔주세요
그리고 Select에서 사용하는 외부 컴포넌트가 있다면 그것도 Select 폴더에 옮겨주세요
혹시 애매한거 있으면 질문해주세요!

[wjeongchoi]

테스트 해보려고 하는데 PR에 예시 코드 추가해줄 수 있나요?

[sparcscasio]

테스트 해보려고 하는데 PR에 예시 코드 추가해줄 수 있나요?

/example/casio에 페이지 만들어두었습니당

[wjeongchoi]

example 페이지 코드만 본문으로 옮기고 머지하면 될 것 같아요! 수고했습니다

[wjeongchoi]

이 파일 file change에서는 지우고, pr 본문에 넣어주세요!