UI 요청사항
피그마 UI의 체크박스 형태를 보면, 범용적으로 사용될 것으로 보이는 체크박스가 있다.
PR 코드
피그마 UI에서 요구된 대로 동작이 잘 되도록 구현이 되었다.
하지만 아쉬운 점은 이 화면에 한정되는 컴포넌트로 만들어졌다는 걸 볼 수 있다.
- 체크박스에 텍스트가 들어올 수도 있고, 우측 끝에 버튼이 있을 수도 있지만, 없을 수도 있다.
- 또 버튼 이름이 꼭 “보기”가 아닐 수도 있다.
- 컴포넌트 명은 TncCheckBox로 Tnc 동의 시에 범용적으로 사용될 것 같은 이름을 갖고 있지만, 약물보드 라는 폴더 하위에 종속되어 있으므로 범용적으로 사용되는 컴포넌트라고 인지할 수 없다.
위와 같은 문제점을 안고있는, 유연하지 못한 컴포넌트가 되었다.
비슷한 UI 요청이 들어왔을 때면 이미 있는 컴포넌트니까 재활용하면 금방 끝날 수 있겠다 싶다가도, 기존 컴포넌트를 재사용 할 수 없다는 사실을 깨닫고 컴포넌트 재설계부터 진행하게 될 것이다.
개선점
빨간색으로 하나의 컴포넌트 이지만 구성요소들이 조합되는 형태로 구성된다면 재사용성 있게 사용할 수 있다.
- 체크박스 컴포넌트
- 현재 체크박스 상태와
- onPress
- 중앙에 표기할 텍스트
- 텍스트 스타일이 다이나믹하게 변한다고 한다면 합성을 받도록,
- 그 외에는 텍스트와 기타 config 정도만 프롭으로 받도록 구성
- 우측 버튼
- 버튼 컴포넌트 자체를 합성으로 받거나
- 텍스트와 onPress를 프롭으로 전달받도록 하거나