📒Foundation 정의 (with Theming)

기초작업이 필요한 이유와 적용방식 과정에 대해 소개합니다.

각 컴포넌트별로 테마를 정의하는 과정은 이후 챕터에서 자세히 다룹니다. 현 챕터에서는 프로젝트에 Theme을 적용하는 전체적인 흐름을 소개하니 큰 흐름으로 살펴봐주세요!

Foundation(기초 작업) 이란 프로젝트 시작 전 디자인 요구 사항에 맞게 스타일을 설정해주는 작업을 말합니다. 프로젝트 별로 메인으로 쓰는 색상 코드, 폰트 사이즈, 버튼 타입 등을 초기에 모두 설정하여 업무의 효율성과 유지보수성을 높여줍니다.

이렇게 사용자 인터페이스(UI)의 기초 디자인을 수정하는 것을 'Theming' 이라고 합니다.

Custom Theme 적용 전

<>
   <Button bg={'yellow.500'} color={'black'} fontSize={'16px'}>
      // 이 버튼은 solid 타입을 가지며 폰트 사이즈는 '16px' 입니다.
   </Button>
   <Button 
      bg={'yellow.500'} 
      borderColor={'yellow.500'} 
      borderWidht={'1px'} 
      fontSize={'14px'}>
      // 이 버튼은 outline 타입을 가지며 폰트 사이즈는 '14px' 입니다.
   </Button>
</>

Custom Theme 정의

const theme = extendTheme({
  components: {
    Button: {
      ...
      sizes: {
        sm: {
          fontSize: '14px'
        }.
        md: {
          fontSize: '16px'
        }
      },
      variants: {
        ...
        solid: {
          bg: 'yellow.500',
          color: 'black'
         },
        outline: {
          bg: 'white',
          borderColor: 'yellow.500',
          borderWidht: '1px',
          fontSize: 'md'
         },
      }
    },
  },
});

Custom Theme 적용 후

<>
   <Button variant={'solid'} fontSize='md'>
      // 이 버튼은 solid 타입을 가지며 폰트 사이즈는 '16px' 입니다.
   </Button>
   <Button variant={'outline'} fontSize='sm'>
      // 이 버튼은 outline 타입을 가지며 폰트 사이즈는 '14px' 입니다.
   </Button>
</>

Chakra UI 용어 정리 (Theming & Token)

Theming : 사용자 인터페이스(UI)의 기초 디자인을 수정하는 것 Token : 디자인 시스템에서 사용되는 기본 디자인 요소. (eg. colors, fonts, shadow, Button, Container...)

재정의한 테마 상속하기 : extendTheme

기본적으로 모든 Chakra UI 의 구성 요소들은 기본 테마를 가지고 있습니다. (Chakra-ui theme 보기)

프로젝트를 시작하기 전 디자인 요구 사항에 맞게 테마를 새로 지정해주는 작업은 필수적입니다. Tokplate에서는 src/styles/theme 에서 커스텀 테마를 정의한 후 extendTheme를 사용하여 기본 테마의 설정된 값들을 재정의(override) 해주고 있습니다.

물론 재정의 뿐만아니라 새로운 값을 추가 할 수도 있습니다. Tokplate에서는 textStyles라는 새로운 값을 추가하여 fontSize, fontWeight, lineHeight 들을 가지는 규격화된 Text 사이즈를 사용하고 있습니다. (src/styles/theme/textStyles.ts)

import { extendTheme } from '@chakra-ui/react';

// Component style overrides
import components from './components';
// Foundational style overrides
import foundations from './foundations';
// Global style overrides
import styles from './styles';
// TextStyles
import textStyles from './textStyles';

const overrides = {
  ...foundations,
  components,
  styles,
  textStyles,
};

export default extendTheme(overrides);

재정의한 테마 적용하기: ChakraProvider

Tokplate는 Provider에 관련된 컴포넌트들을 애플리케이션을 감싸는 HOC(withApiiProvider)을 생성해 관리하고 있습니다. (src/contexts/app/app.provider.tsx)

<ChakraProvider/>에 styles/theme 경로에서 재정의한 테마를 import하여 적용하게 되는 원리입니다.

// src/contexts/app/app.provider.tsx
import theme from 'styles/theme';

function withAppProvider(AppComponent: React.FC<AppProps>) {
  return function WrappedAppComponent(props: AppProps) {
    return (
      //<RTKProvider store={store}>
        //<QueryClientProvider client={queryClient}>
          <ChakraProvider resetCSS theme={theme}>
            <Fonts />
            <AppComponent {...props} />
          </ChakraProvider>
        //</QueryClientProvider>
      //</RTKProvider>
    );
  };
}

export default withAppProvider;

재정의한 테마 입력하기: Chakra Cli

Chakra UI에서는 Chakra UI CLI를 사용하여 재정의한 테마 속성을 바로 입력할 수 있습니다.

package.json의 script에 설정된 theme 명령어를 입력하면 chakra-cli 가 실행되어 지정된 theme경로를 스캔한 후node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts 경로에서 지정한 값들을 생성합니다.

1. Setting

// src/styles/theme/textStyles.ts
const textStyles = {
  some_text: {
    fontSize: ['26px', '26px', '35px'],
    lineHeight: ['38px', '38px', '52px'],
  },
  
};
export default textStyles;

2. Applying (with Cli)

yarn theme

next-init.2.0의 package.json에 설정되어있는 script 명령어를 실행시켜 줍니다.

// package.json
  "scripts": {
    "theme": "chakra-cli tokens src/styles/theme",
    "theme:watch": "chakra-cli tokens src/styles/theme --watch",
    "theme:open": "code -r node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts",
  },

2. Theme open

yarn theme:open

적용한 값을 확인합니다.

// node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts

export interface ThemeTypings extends BaseThemeTypings {
 textStyles:
    | 'ExtraLarge'
    | 'TitleLarge'
    | 'Title'
    | 'TextLarge'
    | 'Text'
    | 'TextSmall'
    | 'Button'
    | 'ButtonSmall'
    | 'TextActive'
    | 'TextActiveSmall'
    | 'sm'
    | 'md'
    | 'lg'
    | 'some_text' // 적용한 토큰 확인
    | (string & {});
}

4. Theme usage

tok-docs-theme-usage

Next

똑플레이트의 Foundation 과 적용 과정을 이해하셨다면, 기초작업부터 같이 설정해 봅시다.

@referece

• Chakra UI - Installation

• Chakra UI - useTheme