feat: CheckBox 구현

[Hanna922]

1️⃣ 어떤 작업을 했나요? (Summary)

• CheckBox 구현했습니다.

2️⃣ 알아두시면 좋아요!

handleWrapperClick 쪽에서 isDisabled일 경우 return, 아닐 경우 checked 값에 따라 isSelected 변경되도록 구현해두었습니다. 혹시 더 좋은 방법이 있다면 알려주시면 감사하겠숩니당

3️⃣ 추후 작업

PlainButton 이어서 작업할게용

[nijuy]

고생하셨습니다!! 열일한나... ( •̀ ω •́ )✧👍 궁금한 점 코멘트로 남겨두겠습니당

[nijuy]

스토리북 Controls 탭에서 isDisabled는 잘 되는데 isSelected는 안 되는 거 같아요!
케이스별 스토리를 만들어 두셔서 확인은 전부 했는데 궁금해서 물어봅니당

(움짤은 controls 탭에서 isDisabled 제어 잘 되는 거 확인 ➡ 클릭했을 때 isSelected 제어 되는 거 확인 ➡ controls 탭에서 isSelected 값을 바꾸고 있는데 변화가 없는 점 순서로 녹화했습니다)

[Hanna922]

@nijuy 엇 이 부분 다시 보시면 CheckBox 직접 클릭했을 때 isSelected 제어 안되는 거 확인하실 수 있어요! 여기 부분은 State가 실시간으로 반영되지 않아서 이렇게 보이는 것 같은데 다른 방법이 있을지 모르겠네요 ㅠㅡㅠ...
이전 YDS 레포에서도 클릭이 가능하도록 만들어둔 Toggle 같은 경우에는 isSelected 제어를 실시간으로 하지 않더라구요!
근데 녹화해주신거 너무 최고에욥...

[nijuy]

@nijuy 엇 이 부분 다시 보시면 CheckBox 직접 클릭했을 때 isSelected 제어 안되는 거 확인하실 수 있어요! 여기 부분은 State가 실시간으로 반영되지 않아서 이렇게 보이는 것 같은데 다른 방법이 있을지 모르겠네요 ㅠㅡㅠ... 이전 YDS 레포에서도 클릭이 가능하도록 만들어둔 Toggle 같은 경우에는 isSelected 제어를 실시간으로 하지 않더라구요! 근데 녹화해주신거 너무 최고에욥...

앟. 직접 클릭했을 때는 상태가 잘 변하는데 controls 탭에서 isSelected를 바꾸면 상태가 안 변한다! 라는 얘기였습니다
제가 이상하게 적었군요..... ٩( ˙0˙)۶

저번에 알려주셨던 예전 배포판(?) 보니까 checkbox는 실시간 제어가 되는데 한나 말대로 toggle은 안되네요 멋쓱 !

[Hanna922]

@nijuy 그 예전 배포판에서 Checkbox가 isSelected로 제어가 되는 이유가 CheckBox 자체를 클릭할 수 있는 기능을 지원하지 않아서 그런 걸거에요! 클릭이 안되더라구욥 큐ㅠㅠㅠ
반면 토글이 안되는 이유는 제가 구현한 CheckBox처럼 클릭을 지원해서 그렇지 않을까 생각합니당

[HyunsDev]

라벨이 드래그가 되는데, user-select:none 으로 드래그를 해제하는게 좋을 것 같아요.

[nijuy]

아까 회의에서 한나가 말했던 거요!!!

1. StyledCheckBoxWrapper에 cursor:pointer 지정
2. input:disabled + .label 에서 cursor: not-allowed ➡ 안됨

이거 살펴봤는데 Disabled Story에서 실제로 input이 disabled 된 상태가 아니라서 안 먹힌 거 같아요!

[nijuy]

@HyunsDev
(제가 모바일이라 코드 부분에 코멘트 다는 게 어려워서 ㅠㅠㅋㅋㅋㅋㅋ 요렇게 답니다,,)

👍 div (icon-padding)로 체크와 라벨 사이 여백 넣는 것보다 gap으로 주는 게 깔끔해보여서!! 최고ㅇㅔ요

useImperativeHandle 관련 코드는 Toggle에도 추가해야 할 것 같아서 낼 알아보고 수정하겠습니다 👀