segmented-controls-react/README.md

A good-lookin' segmented control React component 🔥

## 실행 환경

불필요한 노드를 최소화 하기 위해 webpack으로 React + Typescript + Styled Components + Storybook을 세팅했습니다. 그리고 간단한 lint, prettier 설정도 추가했습니다.

label과 input을 연결해 웹 접근성을 고려한 개발을 하였습니다.

framer-motion 라이브러리를 사용하여 애니메이션을 적용하였습니다.

모바일 환경에서도 동일한 사용감을 제공합니다.

개발자 경험을 위해 tsDoc을 추가하였습니다.

서바사이드 렌더링 지원 -> 해당 기능 잠시 보류입니다. 
## 실행 방법

1. package install

- npm i (or yarn)

2. run dev server

- npm run dev (or yarn dev)를 통해 구현된 컴포넌트를 localhost:3000에서 확인하실 수 있습니다.

3. build

- npm run build (or yarn build)

## 사용법

```js
const App = () => {
  return (
    <>
      <SegmentedControls
        options={[
          { value: "one", disabled: true },
          { value: "two" },
          { value: "three" },
        ]}
        defaultIndex={1}
        setValue={(val) => console.log(val)}
        size={"large"}
        name={"one"}
      />
      <SegmentedControls
        options={[
          { value: "one", disabled: true },
          { value: "two" },
          { value: "three" },
          { value: "four" },
        ]}
        defaultIndex={1}
        setValue={(val) => console.log(val)}
        size={"small"}
        name={"two"}
      />
    </>
  );
};
```

## 결과물

[Demo](https://63a6e1c767126194e2a4a9aa-cbgjyhyetq.chromatic.com/?path=/story/segmentedcontrols--three-segments)

![](https://velog.velcdn.com/images/dusdjeks/post/69213a67-6062-4c34-bacf-756526c61826/image.gif)

![](https://velog.velcdn.com/images/dusdjeks/post/7e340608-a6ea-4693-9e85-d08f76883e54/image.gif)

## 속성

| Name         | Type                                      | Default | Description                                                                                               |
| ------------ | ----------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| options      | `{ value: string, disabled?: boolean }[]` |         | Enter the label of segments                                                                               |
| setValue     | `Dispatch<SetStateAction<string>>`        |         | callback on input change, passed the value string. Called once initially with the default value on mount. |
| size         | `large or small`                          |         | Enter the size of component you want                                                                      |
| name         | `string`                                  |         | Enter name of the radio <input>s                                                                          |
| defaultIndex | `number`                                  |         | You could set default value through this property                                                         |