React + styled-component 조합으로 기본 input checkbox를 custom해보자!

기본 checkbox

code

export default function Checkbox() {
  const [isChecked, setIsChecked] = useState(0);
  
  return(
    <input type="checkbox" checked={isChecked}/>
  );
}

UI

기본 checkbox는 회색?검은색? border에 check시 퍼런색 배경이 나타난다.
이런 border와 background 등을 custom 하기 위해서는 기본 checkbox와 새롭게 만드는 checkbox모양 친구를 묶어주는 container가 있어야하며, 기본 checkbox는 보이지 않도록 숨겨줘야 한다.

checkbox custom

code

import * as S from "../styles/Login.styles";

export default function Checkbox() {
   const onChangeCheckbox = (e: ChangeEvent<HTMLInputElement>) => {
    setLogin({ ...login, isUserIdStored: e.target.checked });
  };
  
  return(
            <S.CheckboxContainer>
              <S.HiddenCheckBox
                checked={login.isUserIdStored}
                onChange={onChangeCheckbox}
              />
              <S.SaveIDCheckBox checked={login.isUserIdStored}>
                <S.Icon viewBox="0 0 24 24">
                  <polyline points="20 6 9 17 4 12" />
                </S.Icon>
              </S.SaveIDCheckBox>
            </S.CheckboxContainer>
  );
}

export const CheckboxContainer = styled.div`
  display: flex;
  vertical-align: middle;
  align-items: center;
`;

export const HiddenCheckBox = styled.input.attrs((props) => ({
  type: "checkbox",
  checked: props.checked,
  onChange: props.onChange,
}))`
  border: 0;
  clip: rect(0 0 0 0);
  clippath: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
`;

export const Icon = styled.svg`
  fill: none;
  stroke: ${colors.black[1000]};
  stroke-width: 2px;
`;

export const SaveIDCheckBox = styled.div<{ checked: boolean }>`
  display: inline-block;
  width: 18px;
  height: 18px;
  background: ${(props) =>
    props.checked ? `${colors.brown[800]}` : `${colors.brown[900]}`};
  opacity: ${(props) => !props.checked && 0.7};
  border-radius: 3px;
  transition: all 100ms;
  margin-right: 8px;

  &:hover {
    background: ${colors.brown[800]};
    opacity: 1;
  }

  ${Icon} {
    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
  }
`;

HiddenCheckBox의 경우 display: none을 할 수도 있지만, 다음과 같이 숨길 경우 스크린 리더는 여전히 checkbox의 존재를 알 수 있다고 한다.
웹 접근성 측면에서 처음 안 사실!
https://polished.js.org/docs/#hidevisually

숨겨진 HiddenCheckBox로 checked, onChange를 관리해주고, custom checkbox에 check여부를 대신 표시해주는 방식이다.

viewBox와 polyline의 경우도 이번에 처음 봤다. 이걸 알려면 svg를 알아봐야 하는데...

svg

svg란?

svg란 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽, 즉 크기를 확대하거나 축소할 수 있는 수학적 함수를 이용해 도형이나 선을 그려서 표현한 그래픽이라고 한다.
여기서 수학적 함수를 이용해 도형이나 선을 그려서 표현한 이라는 의미는 수학 시간에 배웠던 좌표 평선 위에 그려져 있는 그래프 정도로 이해할 수 있다.

viewBox란?

viewBox는 svg 요소가 그려지는 영역에서, svg 요소의 크기를 확대, 축소 그리고 위치를 조정할 수 있는 속성이다.
svg 요소를 viewBox 속성 없이도 화면에 그릴 수 있지만, viewBox 속성을 이용하면 화면의 크기에 따라 svg 요소의 크기가 자동으로 조절된다.

polyline이란?

<polyline>는 svg 내에서 사용되는 요소로, 여러 개의 점을 연결하여 부드럽지 않은 직선의 경로 또는 모양을 만들기 위해 사용한다.
svg는 <polyline> 외에도 <line>, <circle>, <ellipse>, <polygon>, <path> 등 다양한 기본 그래픽 형태를 제공한다.

UI

< 출처 :
https://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/
https://gist.github.com/lucasriondel/4833c883c92a58b366d3b8a7577424c5 >