회원가입 폼에서 주로 쓰이는 필수입력사항에* 별표 표시하기

마켓컬리의 회원가입 폼

회원가입 폼에서 주로 볼 수 있는 필수입력사항 * 별표시를 렌더링하고 싶을 땐 가상요소(pseudo-Element)를 이용할 수 있다.

&::after {
    content: '*';
    color: '#ff0000';
}

styled-components를 이용한다면 믹스인을 만들어서 사용하면 편하다.

import { css } from 'styled-components';

export const RequiredStar = (position: 'before' | 'after') => css`
  ${position === 'before'
    ? css`
        &::before {
          content: '*';
          color: ${({ theme }) => theme.color.red};
        }
      `
    : css`
        &::after {
          content: '*';
          color: ${({ theme }) => theme.color.red};
        }
      `}
`;

before, after 를 정할 수 있게 추상화했다.