프로젝트 소개

[사이드 프로젝트 후기] 하이퍼에듀 - 학원 리뷰 서비스 개발

특징 기능 설명

스타일 가이드 정의

자주 사용하는 스타일 셋을 tailwind config에 정의했습니다. 특히 메인컬러를 main-xxx 로 저장해둔 덕분에 중간에 메인컬러가 변경 되었음에도, tailwind config만 변경하면 됐기 때문에 상당히 편리했어요!

// tailwind.config.js
const toSizeObject = (array) =>
  array.reduce(
    (obj, v) => {
      obj[v] = `${v}px`
      return obj
    },
    { 0: '0' }
  )

const favoriteSizes = toSizeObject([10, 12, 16, 20, 24, 32, 40, 48, 64, 80])

module.exports = {
...
  theme: {
    extend: {
      colors: {
        ...colors,
        main: '#e60f45',
        'main-100': '#e60f451a',
        'main-200': '#fff2f4',
        'main-300': '#ab03301a',
        'main-hover': '#d94369',
        'main-active': '#ab0330',
      },
    },
    height: {
      ...theme.height,
      auto: 'auto',
      full: '100%',
      screen: '100vh',
      ...favoriteSizes,
    },
    ...
  }
...
}

input, button, textarea 등 여러 곳에서 반복적으로 사용되는 element의 스타일을 전역 스타일시트에 정의했어요. 규모가 큰 프로젝트가 아니고, element 기본으로 제공하는 기능들로 충분했기 때문에 스타일 컴포넌트로 제작하지는 않았습니다. ( 하지만 Input은 규모가 작더라도 스타일 컴포넌트를 만드는게, 스타일 관리하기가 편리했을 것 같아요 😅)

<!-- component.vue -->
<button :disabled="isLoading" color="white"> 시작하기 </button>

/** index.scss **/
button {
  @apply flex;
  @apply items-center;
  @apply justify-center;
  @apply border-2 border-main;
  @apply bg-main;
  @apply py-10 px-20;
  @apply text-white;
  @apply rounded-6;
  @apply duration-300;

  min-height: 48px;

  &:hover {
    @apply border-main-hover;
    @apply bg-main-hover;
  }

  &:active {
    @apply border-main-active;
    @apply bg-main-active;
  }

  &[disabled] {
    @apply border-gray-300;
    @apply text-gray-600;
    @apply bg-gray-300;
  }

  &[color='white'] {
    @apply bg-slate-50;

    @apply text-main;
    @apply border-2 border-main;

    border: 2px solid #e60f45;

    &:hover {
      background-color: #fff2f4;
    }

    &:active {
      background-color: #fff2f4;
    }
  }

  &[no-outline] {
    @apply border-none;
  }
}

재사용 컴포넌트