Chore/#3 프로젝트 셋팅 - #4
Conversation
- path mappings in tsconfig 추가
- clsx로 조건부 클래스 처리 - tailwind-merge로 중복된 Tailwind 클래스 충돌 해결
- packages/ui/src/style.css에도 config 공유
- zustand 설치
WalkthroughThis change removes the entire Changes
Sequence Diagram(s)sequenceDiagram
participant App as Web App
participant QueryProvider as QueryProvider
participant QueryClient as QueryClient
participant ReactQueryDevtools as ReactQueryDevtools
App->>QueryProvider: Render with children
QueryProvider->>QueryClient: Create (per request/server, singleton/client)
QueryProvider->>ReactQueryDevtools: Render for debugging
QueryProvider-->>App: Provide QueryClient context to children
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/app/QueryClientProvider.tsx (1)
40-57: Solid QueryProvider implementation with one suggestion.The provider correctly uses the client management logic and includes helpful warnings about useState usage with suspense boundaries.
Consider conditionally rendering
ReactQueryDevtoolsonly in development:return ( <QueryClientProvider client={queryClient}> {children} - <ReactQueryDevtools /> + {process.env.NODE_ENV === 'development' && <ReactQueryDevtools />} </QueryClientProvider> )This prevents the devtools from being included in production builds.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
apps/docs/app/favicon.icois excluded by!**/*.icoapps/docs/public/circles.svgis excluded by!**/*.svgapps/docs/public/next.svgis excluded by!**/*.svgapps/docs/public/turborepo.svgis excluded by!**/*.svgapps/docs/public/vercel.svgis excluded by!**/*.svgapps/web/public/fonts/PretendardVariable.woff2is excluded by!**/*.woff2pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (18)
apps/docs/.gitignore(0 hunks)apps/docs/README.md(0 hunks)apps/docs/app/globals.css(0 hunks)apps/docs/app/layout.tsx(0 hunks)apps/docs/app/page.tsx(0 hunks)apps/docs/eslint.config.js(0 hunks)apps/docs/next-env.d.ts(0 hunks)apps/docs/next.config.ts(0 hunks)apps/docs/package.json(0 hunks)apps/docs/postcss.config.js(0 hunks)apps/docs/tsconfig.json(0 hunks)apps/web/app/QueryClientProvider.tsx(1 hunks)apps/web/app/layout.tsx(1 hunks)apps/web/package.json(1 hunks)packages/tailwind-config/shared-styles.css(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/styles.css(1 hunks)packages/ui/src/utils/cn.ts(1 hunks)
💤 Files with no reviewable changes (11)
- apps/docs/eslint.config.js
- apps/docs/next-env.d.ts
- apps/docs/postcss.config.js
- apps/docs/README.md
- apps/docs/tsconfig.json
- apps/docs/.gitignore
- apps/docs/app/globals.css
- apps/docs/next.config.ts
- apps/docs/app/page.tsx
- apps/docs/package.json
- apps/docs/app/layout.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/web/app/layout.tsx (1)
apps/web/app/QueryClientProvider.tsx (1)
QueryProvider(40-57)
🔇 Additional comments (15)
apps/web/package.json (2)
7-7: Port change looks good for consolidation.The port change from 3001 to 3000 aligns with the removal of the
apps/docsapplication and consolidates the development environment.
15-22: Dependencies compatible with React 19; please run a proper security audit
- @tanstack/react-query & @tanstack/react-query-devtools declare peerDependencies
{ react: '^18 || ^19' }, so they’re compatible with React 19- Other new packages (suspensive/react, motion, zustand) don’t list React peer deps and are broadly compatible
- To verify no security advisories, generate a lockfile (
npm i --package-lock-only) and then runnpm auditbefore mergingpackages/ui/src/styles.css (1)
3-3: LGTM! Centralizing Tailwind configuration.The import of the shared Tailwind configuration package follows the correct pattern and supports the centralized styling approach across the monorepo.
packages/ui/package.json (1)
36-40: Good utility dependencies for UI package.Verified that
motion@12.23.12’s peerDependencies include React and React-DOM^18.0.0 || ^19.0.0, and there are no known issues withclsx@2.1.1ortailwind-merge@3.3.1. No conflicts detected—approved for merge.apps/web/app/layout.tsx (3)
24-24: Language change aligns with Korean font choice.The language attribute change from 'en' to 'ko' is consistent with using the Pretendard font, which is optimized for Korean text.
26-26: React Query provider integration looks correct.The
QueryProviderwrapper properly integrates React Query context throughout the app, matching the implementation inQueryClientProvider.tsx.
12-16: Pretendard font file presence confirmed
- Confirmed
apps/web/public/fonts/PretendardVariable.woff2exists at the specified path.- LocalFont setup (
weight: '45 920',display: 'swap') is correctly configured.- React Query
QueryProviderintegration and language update look good.packages/tailwind-config/shared-styles.css (1)
4-14: Well-structured color palette for design system.The new color variables provide a clean, organized palette with good coverage (main accent, blue accent, and gray scale). The hex values are valid and the naming follows Tailwind conventions.
packages/ui/src/utils/cn.ts (3)
1-2: LGTM! Clean imports for the utility function.The imports are appropriate for a Tailwind CSS class merging utility -
clsxfor conditional concatenation andtailwind-mergefor conflict resolution.
4-18: Excellent documentation with comprehensive examples.The JSDoc documentation is thorough and demonstrates all the key use cases of the utility function, including conditional classes and conflict resolution. The Korean documentation aligns well with the project's locale.
19-21: Perfect implementation following best practices.The function correctly combines
clsxfor conditional class handling withtailwind-mergefor conflict resolution. The implementation order and type usage are spot-on.apps/web/app/QueryClientProvider.tsx (4)
1-4: Well-documented client directive usage.The
'use client'directive is correctly placed with clear explanation of why it's needed for the QueryClientProvider context usage.
5-10: Appropriate imports for React Query setup.All necessary React Query components are imported correctly, including the
isServerutility which is crucial for SSR handling.
12-22: Well-configured QueryClient factory.The factory function correctly sets up a QueryClient with appropriate SSR-friendly defaults. The 60-second staleTime prevents unnecessary refetching during client hydration.
24-38: Excellent SSR-aware client management.The implementation correctly handles the server/client distinction with singleton pattern for browsers and fresh instances for server requests. The detailed comments about React suspense are particularly valuable for maintainers.
1 participant
#️⃣연관된 이슈
📝작업 내용
프로젝트 초기 셋팅
스크린샷 (선택)
💬리뷰 요구사항(선택)
Summary by CodeRabbit
New Features
Enhancements
Dependency Updates
Chores