refactor: Toggle 컴포넌트 재구축 및 서비스 코드 반영, 디자인시스템 v1.3.10 배포

[dladncks1217]

📄 Summary

기존 토글의 경우 사용하는 측에서 useSelect를 받아와 사용해야 했음.
사용하는 측에서 컴포넌트가 너무 무거워지고 복잡해짐. 개선을 위한 재구축

기존 사용의 경우 아래와 같았음.

const { selected, handleSelectClick } = useSelect(ORDER_BY_REGISTRATION);
    // -> props로 내려줌

const 컴포넌트명 = ({selected, handleSelect}) =>{
return(
     <ToggleGroup>
         <Toggle selectedId={selected} changeSelect={handleSelect}>
         // ...
      </ToggleGroup>
}

개선 이후

   <NewToggle additinalFunc={함수명} {...args}>
      <h6>NewToggle</h6>
      <div style={{ display: 'flex' }}>
        <NewToggle.List text="Toggle 1" toggleKey="toggle1" />
        <NewToggle.List text="Toggle 2" toggleKey="toggle2" />
      </div>
      <div>
        <NewToggle.Item toggleKey="toggle1">나는토글1</NewToggle.Item>
        <NewToggle.Item toggleKey="toggle2">나는토글2</NewToggle.Item>
      </div>
    </NewToggle>

이름은 기존 쓰고있던것들때문에 임시로 NewToggle로 해뒀습니다
NewToggle안에 additinalFunc는 내부적으로 변화하는 state에 의해 외부에서 컨트롤해야할 뭔가가 필요할때 쓰면 됩니다.

additinalFunc={(id: number | string) => {console.log(id)}} 
// 예시이긴 한데, id로 toggleKey가 들어온다고 생각하고 쓰면 됨

🙋🏻 More

일단 서비스측에서 사용하던 코드 가볍게 조금 고쳤는데, 추가적으로 고쳐갈 예정.

#792

[github-actions]

로컬 cypress 테스트가 실패했습니다. 테스트 결과 자세히 보기

[github-actions]

로컬 cypress 테스트가 실패했습니다. 테스트 결과 자세히 보기

[LJW25]

훌륭합니다 리더 슬링키