edgecross_common_style_guide v0.0.2

$ yarn init
$ yarn add -D react react-dom @types/react @types/react-dom
$ yarn add -D typescript

$ yarn add styled-components
$ yarn add -D @types/styled-components

$ yarn add -D @storybook/react
$ npx sb init

CheckBox 컴포넌트 사용 예시

import { useState, useCallback } from "react";

function App() {
  const [checkArray, setCheckArray] = useState<string[]>([]);

  const handleCheckBoxChange = useCallback(
    (id: string, checked: boolean, control: number) => {
      if (id === "All" && checkArray.length === control) {
        setCheckArray([]);
        return;
      } else if (id === "All") {
        setCheckArray(["1", "2"]);
        return;
      }

      if (checked) {
        setCheckArray(checkArray.filter((item) => item !== id));
      } else {
        setCheckArray([...checkArray, id]);
      }
    },
    [checkArray]
  );

  return (
    <React.Fragment>
      <CheckBox
        id="All" // 전체 선택/취소가 가능한 unique id value 제공
        control={2}
        checkedList={checkArray}
        onChange={handleCheckBoxChange}
      />
      <CheckBox
        id="1" // id값 개별 부여
        control={2} // 핸들링 하고자하는 id값의 총 개수
        checkedList={checkArray}
        onChange={handleCheckBoxChange}
      />
      <CheckBox
        id="2"
        control={2}
        checkedList={checkArray}
        onChange={handleCheckBoxChange}
      />
      {checkArray}
    </React.Fragment>
  );
}

export default App;