- 일시 : 23.07.21 금요일
- 주제 : 통증관리 시스템 - 분류 3.포인티 디자인 시스템 라이브러리 개발
오늘의 목표
- 분배된 역할 중 foundation 페이지에서 Selection Controls 부분을 개발한다.
진행 사항
✅: 완료, 🌀: 진행중, 🆕: 대기
🌀 (개인) Foundation: Icon 개발
- 아이콘 데이터 관리 방법 고민
🌀 (개인) Foundation: Selection Controls 개발
- 컴포넌트를 통하여 checkbox/radio 타입지정이 가능하도록 한다.
- props로 selected, disabled 스타일을 반환할 수 있도록 한다.
코드 보기 (추후 수정 가능성 있음)
-
파일구조
- Foundation
- SelectionControls
├─ index.tsx
└─ type.ts
- SelectionControls
- Foundation
-
index.tsx
import { styled } from 'styled-components';
import { ISelection } from './type';
const SelectionInput = styled.input`
accent-color: var(--Pri_400);
`;
const SelectionControls = ({ type, selected, disabled }: ISelection) => {
return <SelectionInput type={type} checked={selected} disabled={disabled} />;
};
export default SelectionControls;- type.ts
export interface ISelection {
type: 'checkbox' | 'radio';
selected?: boolean;
disabled?: boolean;
}적용코드
적용화면
회고
그냥 input 태그를 사용하면 안될까?
처음 이 컴포넌트 개발을 시작했을 때, 직전에 icon 컴포넌트를 개발해서 그런지 정말 아무 생각없이 주어진 checkbox/radio 디자인을 이미지로 저장해서 코딩을 하고 있었다. 이미지를 저장하고, 파일명을 붙이고, 조건문을 만들어서 유형에 따라 이미지를 보여주는 노가다(삽질)를 했다. 거기까진 좋았는데 그 이후에 체크박스(라디오)를 클릭하면 input태그를 사용했을 때처럼 체크의 유무가 변경되도록 만들어야 해야겠다는 생각에 이것저것 해보다가 함께 있던 팀원에게 이 이야기를 했는데 "input태그로 만들면 안되요?"라고 했다. 그 때 '아... 왜 그 생각을 못했을까;;;'하고 input태그를 이용해서 만드니 이때껏 사용한 시간의 반의 반도 걸리지 않았다.(^^) 주어진 디자인에서는 색도 다른 것 같아서 이 스타일을 적용할 수 있는지 찾아보니 accent-color라는 input속성이 있어 원하는 색을 지정할 수 있었다.
하지만 '그렇다면 직접 input 태그를 사용하면 더 많은 속성을 이용할 수 있을텐데 왜 굳이 이걸 컴포넌트화 해야하는거지?' 라는 의문이 들었다. 그래서 나름 생각해본 이유는 이 라이브러리를 이용하면 정해진 규칙 (한정된 타입)을 따르도록 만들 수 있기 때문이라고 추측해본다.
accent-color 속성 사용하기
길잡이
🎨color 전역변수 사용하기
- 이미 개발이 완료된 color 전역변수를 사용하여 accent-color를 지정해 주었다.
- 설정한 전역변수를 사용할 때는 var()로 불러와 사용할 수 있다.
accent-color: var(--Pri_400);참고 레퍼런스
🎨input style : accent-color
- input의 체크박스(checkbox), 라디오(radio), 레인지(range), 프로그레스(progress) 타입 색상 스타일 속성을 설정할 수 있다.
체크 자동 색상 변경
참고 레퍼런스
⚠️Warning: You provided a checked prop to a form field without an onChange handler.
-
에러사항
<input type='checkbox'>에서 checked 값을 핸들링하려면 onChange 핸들러를 사용해야하는데 현재 내 코드에서는 아무런 핸들러 없이 값을 전해주고 있기 때문에 이 에러가 발생하였다. -
해결방법
- onChange 핸들러 또는 readOnly를 사용한다.
- checked 속성 대신 defaultChecked를 사용한다.
- onChange 핸들러 또는 readOnly를 사용한다.
참고 레퍼런스
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
