2/2 TIL | 쉼표 작업 일지 #28. 커스텀 체크박스 만들기

🔙 이전 시리즈

2/1 TIL | 쉼표 작업 일지 #27. 오늘의 고민: 유니크한 예약번호와 드롭다운 메뉴

---

작업 회고

1. 커스텀 체크박스

쉼표 체크박스 UI 디자인 (checked/unchecked)

어제부로 결제 프로세스 마크업은 마무리지었고, 오늘 하루는 스타일링에 매진하였다. 그러다가 체크박스를 스타일링해야 했는데, 브라우저에서 기본으로 제공하는 <input type="checkbox" />는 스타일링이 원하는 대로 되지 않는 것이다. 개발자 도구를 뜯어보니 브라우저에서 기본으로 세팅해 놓은 스타일링이 있어서 위 사진과 같이 내가 원하는 모양으로 만들기 위해선 다른 방식으로 만들어야 했다.

import styled from 'styled-components';

import { Check } from '../../../assets/icons/input';

const Label = styled.label`
  display: flex;
  align-items: flex-end;
  user-select: none;
`;

const Input = styled.input`
  appearance: none;
  
  width: 18px;
  height: 18px;
  
  margin: 0;

  border: 2px solid ${({ theme }) => theme.textColors.content};
  border-radius: 4px;

  &:checked {
    border-color: transparent;
    background: url(${Check}) no-repeat 50% 50%;
    background-size: 100% 100%;
    background-color: ${({ theme }) => theme.colors.primary};
  }
`;

const Text = styled.p`
  margin-left: 8px;

  font-size: 14px;
  font-weight: 500;
  color: ${({ theme }) => theme.textColors.content};
`;

export default function CheckBox({ name, text }) {
  return (
    <Label htmlFor={name}>
      <Input
        type="checkbox"
        id={name}
      />
      <Text>{text}</Text>
    </Label>
  );
}

공통으로 쓰이는 컴포넌트라 재사용할 수 있게 props로 name과 text를 넘겨받게 만들었다. 스타일링은 input 태그를 안 보이게 처리(appearance: none;)하고, 체크되지 않은 상태를 스타일링하고, 체크된 상태를 :checked 가상 선택자로 스타일링했다.

체크됐을 때 박스 안에 보이는 체크 아이콘은 svg 파일이라 배경 이미지로 깔았다. 그렇게 완성한 체크박스는 아래와 같이 잘 동작한다!

checked/unchecked 화면

2. user-select: none; 속성

user-select: auto;

브라우저 기본값은 user-select: auto;인데, 그렇게 되면 위와 같이 텍스트를 드래그할 수 있다. 하지만 체크박스 옆 텍스트가 드래그 안 되는 것이 좋을 거 같아 찾아보니, user-select: none; 속성으로 드래그를 막을 수 있었다.

user-select: none;

체크만 되고, 더 이상 드래그가 되지 않는 나의 체크박스! 꽤 오랜 기간 CSS를 공부해왔는데, 이 속성은 처음 써보기도 했고, 유용한 거 같아 기록해 본다.

---

이제 슬슬 선배 기수들이 면접 보고 온 후기를 알려주는데 1년 전 생각도 나고, 이제 나도 곧 면접 보러 다닐 일상을 앞두고 있는지라 남일 같지 않았다. 게다가 작년 말부터 시장상황이 좋지 못해 작년 미국에서부터 시작된 laid off 바람이 한국에까지 불어오면서, 데브시스터즈, 그린랩스, 패스트파이브, 구글코리아 등.. 규모 있는 회사들에서 구조조정을 하는 상황이다. 아마 조금 있으면 스타트업까지도 확장되겠지.. 그래서 더 늦기 전에 하루빨리 포트폴리오를 완성해야겠다는 생각뿐이다...!

바람이 아무리 불어도 뿌리 깊은 나무는 흔들리지 않듯이, 지금 시점에서 내가 할 수 있는 최선은 이런저런 생각을 하며 걱정하기보다는 개발 역량 강화에 좀 더 집중해서 깊이 있는 T자형 인재가 되는 것뿐이다.. 마이 코딩 라이프, 오늘도 파이팅!