[Init] vanilla extract css 세팅

[1jiwoo27]

📌 Related Issue

• Closes [Init] Vanilla Extract css 세팅 #7

✅ Checklist

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📚 Tasks

• vanilla extract css 세팅
• global css, reset css 세팅

Summary by CodeRabbit

• 신규 기능

  • 앱 전역 CSS 리셋과 글로벌 스타일 도입으로 브라우저 간 일관된 화면 제공
  • 기본 테마 토큰과 레이아웃 컨테이너 스타일 추가로 가독성과 시각적 일관성 향상

• 리팩터

  • 문자열 따옴표, 세미콜론 등 코드 포맷 정리로 일관성 개선

• 작업

  • 빌드 설정을 CSS-in-JS 흐름을 지원하도록 업데이트
  • 개발 도구 구성에 새 플러그인 추가 및 설정 정비

[Copilot]

Pull Request Overview

This PR sets up Vanilla Extract CSS in the project to replace the existing CSS setup. It configures the build tooling, adds global styles and CSS reset functionality, and integrates the new styling system into the application entry point.

• Configures Vanilla Extract CSS plugin in Vite build configuration
• Implements comprehensive CSS reset styles using Vanilla Extract
• Sets up global styles with responsive design variables and layout utilities

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
vite.config.ts	Adds Vanilla Extract plugin configuration and updates import style
src/styles/reset.css.ts	Implements comprehensive CSS reset using Vanilla Extract globalStyle
src/styles/global.css.ts	Defines global styles, CSS variables, and reusable style utilities
src/app/main.tsx	Updates imports to use new CSS setup and removes old index.css
package.json	Adds Vanilla Extract dependencies

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[coderabbitai]

Walkthrough

Vanilla Extract CSS-in-TS is added: new dependencies, Vite plugin integration, and two new style files (reset and global). The app entry now imports these styles. No exported APIs changed; edits include formatting updates.

Changes

Cohort / File(s)	Summary
Build dependencies package.json	Added @vanilla-extract/css and @vanilla-extract/vite-plugin to dependencies.
Vite configuration vite.config.ts	Imported and registered vanillaExtractPlugin() alongside react() in plugins array; formatting normalized.
Global styles (new) src/styles/global.css.ts, src/styles/reset.css.ts	Introduced Vanilla Extract global styles: CSS variables, base layout, scrollbar styling, and a comprehensive reset. Exported rootStyle, noRootShadow.
App entry imports src/app/main.tsx	Added imports for reset.css.ts and global.css.ts; standardized quotes and minor formatting.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant Dev as Developer
    participant Vite as Vite Dev/Build
    participant VE as vanilla-extract Plugin
    participant App as App Code

    Dev->>Vite: Start dev/build
    Vite->>VE: Initialize plugin
    Vite->>App: Resolve modules
    App-->>Vite: Import reset.css.ts, global.css.ts
    Vite->>VE: Transform .css.ts files
    VE-->>Vite: Emit CSS artifacts + JS mappings
    Vite-->>Dev: Serve/bundle with generated CSS applied

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	PR 제목 “[Init] vanilla extract css 세팅”은 Vanilla Extract CSS 설정이라는 주요 변경사항을 명확히 나타내고 있어 변경 내용과 부합합니다.
Linked Issues Check	✅ Passed	패키지 설치, Vite 설정에서 vanillaExtractPlugin 추가, global.css.ts와 reset.css.ts 파일 생성으로 linked issue #7의 Vanilla Extract CSS 설정, 전역 및 리셋 CSS 구성 요구사항을 모두 충족합니다.
Out of Scope Changes Check	✅ Passed	주로 Vanilla Extract 설정 관련 파일과 의존성 변경으로 구성되어 있으며 형식 변경(문자열 따옴표 표준화, 세미콜론 추가) 외에 목표 범위를 벗어난 기능 변경은 포함되어 있지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch init/vanilla-extract/#7

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (3)

vite.config.ts (1)

3-7: LGTM! Vanilla Extract 플러그인이 올바르게 통합되었습니다.

플러그인 설정이 정확합니다. 필요시 디버깅을 위해 identifiers 옵션을 추가할 수 있습니다 (예: vanillaExtractPlugin({ identifiers: 'debug' })).

src/styles/global.css.ts (1)

38-38: boxShadow를 테마 변수로 관리하는 것을 고려하세요.

고정된 색상값 대신 CSS 변수나 테마 토큰으로 관리하면 다크 모드 등 테마 전환 시 유리합니다.

예시:

 globalStyle(":root", {
   vars: {
     "--min-width": "375px",
     "--max-width": "430px",
     "--height": "100dvh",
+    "--shadow-color": "rgba(0, 0, 0, 0.08)",
   },
 });

 export const rootStyle = style({
   display: "flex",
   flexDirection: "column",
   width: "100%",
   margin: "0 auto",
   minHeight: "100dvh",
   minWidth: "var(--min-width)",
   maxWidth: "var(--max-width)",
-  boxShadow: "0 0 20px rgba(0, 0, 0, 0.08)",
+  boxShadow: "0 0 20px var(--shadow-color)",
 });

src/styles/reset.css.ts (1)

280-281: placeholder 색상을 CSS 변수로 관리하는 것을 고려하세요.

하드코딩된 색상값(#9ca3af) 대신 CSS 변수를 사용하면 일관성 있는 컬러 시스템 관리에 유리합니다.

global.css.ts의 :root에 변수 추가:

globalStyle(":root", {
  vars: {
    "--min-width": "375px",
    "--max-width": "430px",
    "--height": "100dvh",
    "--placeholder-color": "#9ca3af",
  },
});

reset.css.ts에서 사용:

 globalStyle("input::placeholder, textarea::placeholder", {
   opacity: "1" /*1 */,
-  color: "#9ca3af" /*2 */,
+  color: "var(--placeholder-color)" /*2 */,
 });

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3232ad0 and b1db1be.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• package.json (1 hunks)
• src/app/main.tsx (1 hunks)
• src/styles/global.css.ts (1 hunks)
• src/styles/reset.css.ts (1 hunks)
• vite.config.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/app/main.tsx (1)

src/app/App.tsx (1)

• App (4-23)

🔇 Additional comments (3)

src/app/main.tsx (1)

4-5: LGTM! 올바른 CSS 임포트 순서입니다.

reset CSS를 global CSS보다 먼저 임포트하여 적절한 스타일 캐스케이드를 보장하고 있습니다.

src/styles/global.css.ts (1)

30-39: LGTM! 레이아웃 스타일이 잘 구성되었습니다.

모바일 우선 반응형 레이아웃 스타일이 적절합니다. CSS 변수를 활용하여 유지보수성도 좋습니다.

src/styles/reset.css.ts (1)

1-331: LGTM! 포괄적이고 잘 구성된 CSS 리셋입니다.

모던 CSS 리셋 패턴을 따르며 브라우저 기본 스타일을 효과적으로 정규화합니다. 주석도 명확하여 각 규칙의 목적을 이해하기 쉽습니다.