⚙️ 프로젝트 추가 설정

[Legitgoons]

작업 이유

• 프로젝트 추가 설정

작업 사항

1️⃣ eslint 추가 설정

• import order, fsd/import, @tanstack/query 3가지 패키지를 추가로 설치, 설정했습니다.

2️⃣ tanstack-query 설정

• QueryProvider.tsx 파일에 설정했습니다.
• react query devtools도 함께 설정했습니다.

3️⃣ tailwind css 설정

font 설정

• woff2 subset font를 기본 font로 설정하고, woff subset font를 fallback font로 사용했습니다.
• Figma에 정의된 대로 font를 선언해서 사용할 수 있도록 했습니다.
  • text + Figma에 정의된 font name + font size의 첫 글자를 입력해서 사용할 수 있습니다.

  <div className="text-h1b">Hello World</div>;

const createFontSize = (
  size: string,
  fontWeight: string,
  lineHeight: string = '130%',
): [string, { letterSpacing: string; lineHeight: string; fontWeight: string | number }] => [
  size,
  { letterSpacing: '-0.03em', lineHeight, fontWeight },
];
//...
fontSize: {
  h1b: createFontSize('24px', 'bold'),
  h1s: createFontSize('24px', '600'),
  h2s: createFontSize('20px', '600'),
  h3b: createFontSize('16px', 'bold', '140%'),
  h3s: createFontSize('16px', '600', '140%'),
  h4s: createFontSize('14px', '600'),
  h4m: createFontSize('14px', '500'),
  b1s: createFontSize('12px', '600'),
  b1m: createFontSize('12px', '500'),
  b1r: createFontSize('12px', '400', '140%'),
  b2s: createFontSize('11px', '600'),
  b2m: createFontSize('11px', '500'),
  b2r: createFontSize('11px', '400'),
  b3m: createFontSize('9px', '500'),
  b4m: createFontSize('8px', '500'),
},

리뷰어가 중점적으로 확인해야 하는 부분

• �Eslint가 정상적으로 작동하는지
• query devtools가 정상적으로 작동하는지
• font가 정상적으로 적용되는지
  
  

발견한 이슈

• 현재 Local 개발 환경에서 eslint가 정상적으로 작동하지 않는 이슈가 있습니다. 혹시 다른 분들도 같은 이슈가 발생하신다면 review에 남겨주시면 감사드리겠습니다.
  • 병준님 덕분에 무사히 해결했습니다😉

[BangDori]

eslint 설정하신다구 고생하셨습니다! 리뷰 확인 부탁드려요~

[suhwan2004]

eslint, msw 이슈때문에 고생 많습니다... 든든합니다! 간단하게 리뷰 남겨두었어요

[BangDori]

고생하셨습니당~ eslint alias 설정만 확인 부탁드려요!