feat: Switch 컴포넌트 구현 #156
feat: Switch 컴포넌트 구현 #156
Conversation
|
|
||
| export const Switch = forwardRef<HTMLDivElement, SwitchProps>( | ||
| ({ isDisabled = false, isSelected = false, size, onSelectedChange, ...props }, ref) => { | ||
| const [innerSelected, setInnerSelected] = useState(isSelected); |
There was a problem hiding this comment.
이 부분 구현이 잘못됐어요.
props와 기능이 1대1 대응되는 내부 상태가 있다는 것은,
외부에서 변경된 상태가 props로 들어오더라도 이 변경점을 잘 반영해야해요.
그런데 이 코드는 해당 변경점을 잘 반영하고 있지 못한 거 같아요.
There was a problem hiding this comment.
저는 isSelected의 역할이 Switch의 초기 상태(innerSelected의 초기값)라고 생각하고 만들었어요
Switch는 컴포넌트 내부 innerSelected 상태로 선택 여부를 관리하는 방식이라
외부에서 isSelected 값이 변경되어도 Switch에서는 반영하지 않는 게 맞다고 생각했스빈다
radix-ui Switch의 defaultChecked랑 같은 역할이라고 생각하시면 될 거 같아요
헷갈리지 않게 isSelected -> defaultSelected로 변경해두겠습니다!!
There was a problem hiding this comment.
음… 납득이 안되는데요
만약 초기화버튼을 눌렀을때 switch가 false로 바뀌는 기능을 구현해야한다면
어떤 방식으로 제공할 생각이신가요?
There was a problem hiding this comment.
페카 말처럼 스위치를 직접 클릭하지 않고도 상태 변경이 가능해야 하는 케이스가 있을 수 있어
isSelected 변경을 Switch에서 반영할 수 있게 코드 수정하기로 모각코때 얘기함 !!
|
++ 만약 그대로 냅둬주신다면 맥락 파악을 위해서 |
- 상태 전환을 보여주는 거라 Click -> Change - 코드 예시 추가
src/components/Switch/Switch.mdx
Outdated
|
|
||
| ```tsx | ||
| <span> switch label </span> | ||
| <Switch size="large"> |
There was a problem hiding this comment.
이벤트 할당 부분 예시 코드 빼고 전부 /> 로 끝나도록 수정해야 할 것 같아요!
| background-color: ${({ $isDisabled, $isSelected, theme }) => | ||
| getTrackColor({ $isDisabled, $isSelected, theme })}; | ||
| cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')}; | ||
| `; |
There was a problem hiding this comment.
키보드로 스위치 조작 시, 위 사진처럼 파란 outline이 생기는데 focus 시, outline: none; 설정해서 없애는 거 어떨까요ㅎㅎㅎ
There was a problem hiding this comment.
한번 적용해보니까 "현재 포커스된 요소"가 뭔지 식별이 어렵다는 문제가 있네요 🤔
대신 기본 outline이 쬐끔,,, 투박하니까 디자인에 맞게 커스터마이즈 된 outline 스타일 만들어주실 수 있는지 우미한테 물어볼게요!!
There was a problem hiding this comment.
여기 기본 outline 그대로 사용하면 된다고 답변 왔습니다!
- defaultSelected -> isSelected - switch 컴포넌트 내부에 useUpdateEffect 추가 - 외부에서 상태 변경하는 스토리 추가
- 및 불필요한 스토리 삭제
1️⃣ 어떤 작업을 했나요? (Summary)
기존 코드에 영향을 미치지 않는 변경사항
switch컴포넌트용 컬러 토큰을 추가했습니다switch컴포넌트를 구현했습니다2️⃣ 알아두시면 좋아요!
3️⃣ 추후 작업
4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?