init: design system 세팅

[bongtta]

#️⃣ Related Issue

Closes #11

☀️ New-insight

• TailwindCSS 사용 시, vscode에서 @tailwind 관련 경고(Unknown at rule @tailwind)가 발생할 수 있습니다.
  이 오류는 Tailwind 전처리를 알지 못하는 기본 CSS Linter로 인해 발생하는데,
  vscode 설정에서 css.lint.unknownAtRules를 ignore로 바꾸면 경고가 뜨지 않습니다.
  설정 방법:

  • Command + , (설정 열기)
  • css.lint.unknownAtRules 검색
  • 값을 "ignore"로 변경

• Tailwind v4부터는 tailwind.config.js 없이도 동작 가능하며, postcss 기반 구성만으로도 tailwind를 사용할 수 있습니다.

• @layer는 base, components, utilities 3단계로 구분되어 작동합니다.
  그 중 @layer utilities는 사용자 정의 클래스들을 Tailwind의 유틸리티 클래스처럼 동작하게 만들어주며, 이를 통해 기존 디자인 시스템의 CSS 변수를 활용한 커스텀 클래스들을 손쉽게 확장할 수 있습니다.

💎 PR Point

1. Tailwind 기반 글로벌 스타일을 설정했습니다
   • reset.css : 브라우저 기본 스타일 제거
   • theme.css : 디자인 시스템의 컬러 / 타이포그래피 변수 및 유틸리티 클래스 정의
   • global.css : Pretendard 폰트, Tailwind import, 글로벌 레이아웃 속성 정의
2. 파일별 역할을 명확히 분리하고, @layer를 활용해 Tailwind의 작동 구조에 맞게 스타일을 설정했습니다
3. Tailwind v4에서 요구하는 방식에 맞추어 postcss.config.js, vite.config.ts를 설정했습니다.
4. 폰트의 경우, 맥북에 pretendard가 기본적으로 설정되어 있어서 확실히 적용이 되었는지 모르겠습니다.. 윈도우에서 확인 한 번만 부탁드립니다!
   테스트코드:

// App.tsx
const App = () => {
  return (
    <div className="p-8 space-y-6">
      <h1 className="title_24_sb">반가워요, 메잇볼에서</h1>
      <p className="body_16_m">닉네임</p>
      <p className="cap_14_m text-week-red">추가 색상 테스트</p>
      <div className="w-40 h-20 shadow-1 bg-sub-900" />
      <div className="w-40 h-20 shadow-1 bg-main-1000" />
    </div>
  );
};

export default App;

📸 Screenshot

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Tailwind CSS 및 관련 플러그인, PostCSS가 프로젝트에 추가되어 유틸리티 기반 스타일링이 가능해졌습니다.
  • 글로벌, 리셋, 테마 CSS 파일이 도입되어 일관된 디자인 시스템과 팀/브랜드 컬러, 타이포그래피, 그림자, 블러 등 다양한 유틸리티 클래스가 제공됩니다.

• Style

  • Pretendard 폰트가 외부 CDN을 통해 적용되어 전체 폰트 스타일이 개선되었습니다.
  • 기본 레이아웃 및 요소 스타일이 글로벌 CSS와 리셋 CSS로 통일되었습니다.

• Chores

  • 패키지 매니저가 pnpm으로 명시되었고, 종속성 및 설정이 Tailwind CSS 환경에 맞게 업데이트되었습니다.