과제중이다.
마크업은 거의 안해보았는데, 이번기회에 마크업도 열심히 공부할 수 있도록 해야겠다.

피그마를 통한 협업

• assets를 다 받는다.
  - icon은 깨지지않도록 svg
  • 나머지는 특성에 맞는 이미지파일로 (참고)
• 눈으로 확인하여 큰 영역별로 나눈다.
  - 아토믹디자인을 적용한다면 베이스가되는 컴포넌트들부터 작성해야한다.
• 영역별로 상세 마크업을 진행한다.

Storybook 이슈

전역 스타일을 먹이는 방법

storybook을 별도의 애플리케이션이다.
프로젝트에서 전역스타일시트를 사용하고있다면, storybook에도 별도로 import 해주어야 한다.
.storybook/preview.js에 추가해주기만 하면 된다.

import "../src/assets/scss/index.scss"; // 전역 scss or css

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Typescript path 적용하는 방법

위와 같은 이치다.
별도의 앱 어플리케이션이다. 따라서 storybook을 위한 Webpack 설정이 별도로 존재하고있다.
tsconfig-paths-webpack-plugin 를 설치하여 .storybook/main.js에 적용해준다.

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  //...
  webpackFinal: async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};

포인터 이벤트 안먹게하기

select 위에 있는 버튼의 이벤트를 무시하고싶을 경우 아래 css를 사용하자

pointer-events: none;