Next.js 13 + tailwindcss 초기세팅하기

Rocky·2022년 11월 20일
9

Intro

이번에 회사에서 리뉴얼 프로젝트가 시작되어 Next.js 신규 버전인 13버전과 더불어
기존에 사용하고 있던 MUI css라이브러리를 사용하지 않고, tailwindcss로 작업을 하기로 했다.

기존 프로젝트에서는 Next.js를 썼지만 getStaticProps, getServerSideProps 등을 능숙히 사용하지 않았어서, 어차피 앞으로 사용 될 기술을 익힐겸 아직 베타버전이긴 하지만 app폴더 시스템으로 프로젝트를 시작하였다.

또한, MUI를 사용하지 않고 tailwindcss를 쓰게된 점은 여러 가지 이유가 있지만 아래와 같은 이유로 사용을 결정하였다.

  • MUI보다 커스텀에 용이하다.
    - MUI도 Unstyled components(링크)를 제공하지만,
    개인적으로는 tailwindcss가 차후 변경된 디자인을 적용 할 경우 조금 더 편리하지 않을까 싶었다.
  • 실제로 빌드 될 때, 사용하는 css만 빌드되기 때문에 성능적 이점이 있다.
  • MUI를 쓰면서 DX(development experience)가 만족스러웠으나, 너무 편해서 css 코드 수정을 해본 기억이 가물가물하다..(개인적인 공부를 회사 프로젝트에서 하는편)

Installation

초기세팅 당시 tailwindcss에서 제공하는 초기세팅 방법을 참고하여 진행하였다.

  • Using Turbopack
  • Using the app directory
    -> 내가 초기세팅 할 당시에는 터보팩을 사용할 경우만 공식문서에서 제공해주었는데, 차후에 app폴더를 사용할 경우의 세팅법이 추가가 되었다(tailwind.config.js에서 app폴더가 추가되는거 말고는 크게 차이가 없다)

폴더 구조

위의 세팅법을 참고하여 세팅을 한다면 src폴더가 없이 styles, app, ui, public.. 등으로 되어있을 것이다.
root단에서는 public, src로 해서 작업하는 코드들은 src안에 들어가도록 하고자 수정하였고,
app폴더에 예약된 파일들로 레이아웃, 페이지 구성이 가능하기에 components 폴더에서 아토믹 디자인 패턴으로
폴더구조를 가져가는것이 차후 유지보수에 좋지 않을까 싶어 아래와 같이 구상하였다.

+-- public
	+-- fonts
    	+-- (...).woff2
    +-- favicon.ico
+-- src
	+-- components
    	+-- atoms
        	+-- Button.tsx
            +-- (...)
        +-- molcules
        +-- organisms
	+-- app
    	+-- page.tsx (이전 버전의 _app.tsx 역할)
        +-- layout.tsx (공통레이아웃을 잡을 수 있으며, _document.ts의 역할)
        +-- template.tsx
        +-- loading.tsx
        +-- error.tsx
        (...그 외 폴더)
    +-- pages
    	+-- api
        	+-- (...)
    +-- styles
    	+-- globals.css
        +-- dist.css (.gitignore에 추가)
    +-- hooks
    	+-- (...)
    +--

app폴더에서 page, layout, template, loading, error 파일은 예약된 파일로, app폴더 아래의 폴더들은 아래와 같이 동작한다.

<Layout> <!-- layout.{js,ts,jsx,tsx} -->
  <Template> <!-- template.{js,ts,jsx,tsx} -->
  	<ErrorBoundary fallback={<Error/>}> <!-- error.{js,ts,jsx,tsx} -->
  		<Suspense fallback={<Error/>}> <!-- loading.{js,ts,jsx,tsx} -->
    		<Page /> <!-- page.{js,ts,jsx,tsx} -->
	  	</Suspense>
    </ErrorBoundary>
  </Template>
</Layout>

Custom Theme 설정

Figma로 디자이너와 협업을 하면서 컬러, 폰트 등 디자이너가 제공하는 디자인시스템을 토대로 설정하였다.

// tailwind.config.js

const { fontFamily } = require('tailwindcss/defaultTheme');

const BACKGROUND_WIDTH = {
  280: '280px',
  320: '320px',
  360: '360px',
  420: '420px',
};

module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      animation: {
        buttonHover: 'buttonHover 0.3s ease forwards',
      },
      colors: {
        tp: {
          blue100: '#ECF6FF',
          blue101: '#F2FBFE',
          blue200: '#2D9CDB',
          blue300: '#2F80ED',
          blue400: '#0E4E97',
          gray100: '#E8EBED',
          gray200: '#C9CDD2',
          gray300: '#9FA4AA',
          gray400: '#72787F',
          gray500: '#464C53',
          gray600: '#26282B',
          green100: '#EEFDFA',
          green200: '#00AF89',
          green300: '#14866D',
          red100: '#FEE7E6',
          red200: '#EB5757',
          red300: '#B32424',
          white100: '#FFFFFF',
          white200: '#F7F8F9',
          yellow100: '#FEF6E7',
          yellow200: '#FFCC33',
          yellow300: '#F2994A',
        },
      },
      fontSize: {
        body: ['16px', { fontWeight: '400', lineHeight: '24px' }],
        'body-bold': ['16px', { fontWeight: '500', lineHeight: '20px' }],
        caption1: ['14px', { fontWeight: '400', lineHeight: '20px' }],
        'caption1-bold': ['14px', { fontWeight: '500', lineHeight: '20px' }],
        caption2: ['12px', { fontWeight: '400', lineHeight: '18px' }],
        'caption2-bold': ['12px', { fontWeight: '600', lineHeight: '18px' }],
        caption3: ['11px', { fontWeight: '400', lineHeight: '14px' }],
        head: ['24px', { fontWeight: '500', lineHeight: '33px' }],
        'head-bold': ['24px', { fontWeight: '700', lineHeight: '33px' }],
        number: ['18px', { fontWeight: '400', lineHeight: '20px' }],
        'number-bold': ['18px', { fontWeight: '500', lineHeight: '20px' }],
        'number-extra-bold': [
          '18px',
          { fontWeight: '600', lineHeight: '20px' },
        ],
        subTitle: ['18px', { fontWeight: '500', lineHeight: '26px' }],
        'subTitle-bold': ['18px', { fontWeight: '600', lineHeight: '26px' }],
        title: ['21px', { fontWeight: '500', lineHeight: '30px' }],
        'title-bold': ['21px', { fontWeight: '600', lineHeight: '30px' }],
        'title-extra-bold': ['21px', { fontWeight: '700', lineHeight: '30px' }],
      },
      keyframes: (props) => {
        const { theme } = props;
        return {
          buttonHover: {
            '0%': {
              backgroundColor: theme('colors.tp.blue300'),
              boxShadow: theme('boxShadow.none'),
            },
            '100%': {
              backgroundColor: theme('colors.tp.blue400'),
              boxShadow: theme('boxShadow.lg'),
            },
          },
        };
      },
      maxWidth: { ...BACKGROUND_WIDTH },
      minWidth: { ...BACKGROUND_WIDTH },
      width: { ...BACKGROUND_WIDTH },
    },
    fontFamily: {
      pretendard: ['Pretendard', ...fontFamily.sans],
    },
  },
};

폰트 적용

@next/font를 활용해서 Pretendard 폰트를 적용하려 했으나 폰트를 적용하면
폰트명이 클래스명처럼 나와서 구분하기 쉽지 않아 woff2파일로 적용하였다.

/* globals.css */
@tailwind base;

@layer base {
  @font-face {
    font-family: 'Pretendard';
    src: url('/fonts/pretendard-regular.subset.woff2') format('woff2');
    font-display: swap;
  }

  html {
    font-family: 'Pretendard', ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol', 'Noto Color Emoji';
  }
}

@tailwind components;
@tailwind utilities;
profile
r이 열한개!

0개의 댓글