Next 페이지에 색상(Color) 모듈 적용

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2022년 1월

배경

• 디자인을 반영하여 구현하다 보면, 많은 색상 코드를 사용하는데, 이를 매번 코드로 작성하는 것이 불편해서 색상 모듈로 만들어 봤음
• 디자이너 님으로부터 자주 사용되는 색상 코드를 공유받은 후 모듈로 제작함

색상 모듈

export const Colors = {
  blue: {
    100: '#1F74F2',
  },
  gray: {
    100: '#F4F6F7',
    200: '#E6E9EA',
    300: '#D4DADD',
    400: '#828A93',
    500: '#79818A',
  },
  white: {
    100: '#ffffff',
  },
  black: {
    100: '#000000',
    200: 'rgba(0, 0, 0, 0.2)',
    400: 'rgba(0, 0, 0, 0.4)',
    600: 'rgba(0, 0, 0, 0.6)',
  },
};

색상 모듈 적용 전 vs 후

• 적용 전

  background-color: ${props => (props.activated ? '#000000' : '#F4F6F7')};
  color: ${props => (props.activated ? '#FFFFFF' : '#000000')};
  &:hover {
    background-color: ${props => (props.activated ? '#000000' : '#E6E9EA')};

• 적용 후

  background-color: ${props => (props.activated ? Colors.black[100] : Colors.gray[100])};
  color: ${props => (props.activated ? Colors.white[100] : Colors.black[100])};
  &:hover {
    background-color: ${props => (props.activated ? Colors.black[100] : Colors.gray[200])};

• 적용 전에는 색상 코드를 매번 입력해줘야 해서 불편했고, 어떤 색상인지 파악하기도 어려웠음. 적용 후에는 대략적인 색상 파악도 가능하고, 입력하기에도 훨씬 편해짐.

배우고 느낀 점

• 어떻게 하면 더욱 효율적으로, 가독성 좋게 코드 작성할지를 항상 생각하기.