Conversation
- printWith를 120 에서 80으로 수정
Summary of ChangesHello @Dobbymin, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 프로젝트의 초기 개발 환경을 설정하고, 확장 가능하며 유지보수하기 쉬운 애플리케이션 구조를 구축하는 데 중점을 둡니다. 주요 변경 사항은 코드 품질 도구의 통합, React Query 및 Chakra UI와 같은 핵심 라이브러리 도입, 그리고 모듈화된 라우팅 및 UI 컴포넌트 구조를 포함합니다. 이는 향후 기능 개발을 위한 견고한 기반을 제공하며, 개발 효율성을 높이는 데 기여할 것입니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Ignored Files
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 프로젝트의 전체적인 구조를 설정하고 배포를 위한 기반을 마련하는 중요한 변경사항들을 포함하고 있습니다. Feature-Sliced Design에 기반한 폴더 구조, react-query, Chakra UI 등의 라이브러리 도입, 그리고 ESLint, Prettier, Husky를 이용한 코드 품질 관리 설정이 인상적입니다. 전반적으로 훌륭한 시작이지만, 몇 가지 개선할 점이 있어 리뷰를 남깁니다. 특히 react-router-dom 설정과 StrictMode 사용에 대한 부분을 확인해주시면 좋겠습니다.
| @@ -0,0 +1,17 @@ | |||
| import { BrowserRouter, Route, Routes } from "react-router"; | |||
There was a problem hiding this comment.
웹 애플리케이션에서는 react-router-dom 패키지를 사용해야 합니다. BrowserRouter, Route, Routes 컴포넌트는 react-router가 아닌 react-router-dom에서 export합니다. 이 부분이 수정되지 않으면 애플리케이션이 정상적으로 동작하지 않습니다.
이 변경과 함께 package.json의 의존성도 react-router에서 react-router-dom으로 변경해주세요.
| import { BrowserRouter, Route, Routes } from "react-router"; | |
| import { BrowserRouter, Route, Routes } from "react-router-dom"; |
| import { createRoot } from "react-dom/client"; | ||
|
|
||
| createRoot(document.getElementById('root')!).render( | ||
| <StrictMode> | ||
| <App /> | ||
| </StrictMode>, | ||
| ) | ||
| import App from "./App.tsx"; | ||
|
|
||
| createRoot(document.getElementById("root")!).render(<App />); |
There was a problem hiding this comment.
StrictMode가 제거되었습니다. StrictMode는 애플리케이션의 잠재적인 문제를 식별하는 데 도움이 되므로, 특히 개발 환경에서는 유지하는 것이 좋습니다. StrictMode를 다시 추가하는 것을 권장합니다.
| import { createRoot } from "react-dom/client"; | |
| createRoot(document.getElementById('root')!).render( | |
| <StrictMode> | |
| <App /> | |
| </StrictMode>, | |
| ) | |
| import App from "./App.tsx"; | |
| createRoot(document.getElementById("root")!).render(<App />); | |
| import { StrictMode } from "react"; | |
| import { createRoot } from "react-dom/client"; | |
| import App from "./App.tsx"; | |
| createRoot(document.getElementById("root")!).render( | |
| <StrictMode> | |
| <App /> | |
| </StrictMode> | |
| ); |
| pnpm run lint:fix | ||
| pnpm run tsc |
There was a problem hiding this comment.
lint-staged가 이미 staged된 파일에 대해 eslint --fix를 실행하도록 package.json에 설정되어 있습니다. pnpm run lint:fix는 전체 프로젝트에 대해 다시 lint를 실행하므로 중복되며 커밋 속도를 저하시킬 수 있습니다. lint-staged만으로 충분하므로 아래 두 라인을 제거하는 것이 좋습니다.
| msOverflowStyle: "none" /* IE and Edge */, | ||
| scrollbarWidth: "none" /* Firefox */, | ||
| }, | ||
| "html, body": {}, |
There was a problem hiding this comment.
html, body에 대한 스타일 객체가 비어있습니다. 불필요하므로 이 라인을 제거하는 것이 좋습니다.
There was a problem hiding this comment.
Pull request overview
This PR establishes a new baseline application structure (routing + layout + shared modules) and updates build/dev tooling (Vite/TS config, lint/format hooks, dependencies) to support deployment testing and the overall project scaffold.
Changes:
- Add app-level routing/providers (Chakra UI theme system + TanStack Query) and initial page/layout components.
- Introduce shared building blocks (route constants, API response types, query client, Chakra global styles/system config) and barrel exports.
- Update tooling: Vite/TS config for Emotion, ESLint/Prettier setup, Husky + lint-staged, dependency lockfile, and a GitHub Actions workflow.
Reviewed changes
Copilot reviewed 41 out of 53 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Switch to node:path and configure Emotion JSX import source; keeps @ alias to src/. |
| tsconfig.json | Reformats project references; includes Emotion jsxImportSource and @/* path mapping. |
| src/widgets/layout/ui/index.ts | Barrel export for layout UI. |
| src/widgets/layout/ui/RootLayout.tsx | Adds RootLayout using Chakra Flex/Box and Outlet. |
| src/widgets/layout/index.ts | Barrel export for widgets/layout. |
| src/widgets/layout/components/index.ts | Barrel export for layout components. |
| src/widgets/layout/components/header/index.ts | Barrel export for Header. |
| src/widgets/layout/components/header/Header.tsx | Adds basic Header component. |
| src/widgets/index.ts | Top-level widgets barrel export. |
| src/shared/types/index.ts | Types barrel export. |
| src/shared/types/api.type.ts | Adds ApiResponse<T> type. |
| src/shared/theme/index.ts | Theme barrel export. |
| src/shared/theme/global/index.ts | Global theme barrel export. |
| src/shared/theme/global/global-style.ts | Defines Chakra global styles (incl. scrollbar hiding). |
| src/shared/theme/config/style-system-config.ts | Creates Chakra v3 system config with global CSS. |
| src/shared/theme/config/index.ts | Barrel export for theme config. |
| src/shared/libs/query-client.ts | Introduces TanStack QueryClient defaults. |
| src/shared/libs/index.ts | Libs barrel export. |
| src/shared/index.ts | Shared layer barrel export (libs/constants/theme/types). |
| src/shared/constants/route-path.ts | Adds route path constants. |
| src/shared/constants/index.ts | Constants barrel export. |
| src/shared/assets/react.svg | Removes React logo asset. |
| src/pages/main/index.ts | Exports MainPage. |
| src/pages/main/MainPage.tsx | Adds placeholder Main page. |
| src/pages/index.ts | Pages barrel export. |
| src/main.tsx | Simplifies render; removes StrictMode and global CSS import. |
| src/index.css | Removes default Vite template CSS. |
| src/app/routes/index.ts | Routes barrel export. |
| src/app/routes/Router.tsx | Adds router with RootLayout + MainPage route. |
| src/app/providers/index.ts | Providers barrel export. |
| src/app/providers/components/index.ts | Providers components barrel export. |
| src/app/providers/components/ThemeProvider.tsx | Adds ChakraProvider wrapper with system config. |
| src/app/providers/components/QueryProvider.tsx | Adds QueryClientProvider and ReactQueryDevtools. |
| src/app/providers/ApplicationProviders.tsx | Composes Query + Theme providers. |
| src/app/index.ts | App barrel export. |
| src/App.tsx | Replaces Vite template with ApplicationProviders + Router. |
| src/App.css | Removes default Vite template CSS. |
| pnpm-lock.yaml | Updates lockfile for new dependencies (Emotion, Query, Axios, etc.). |
| package.json | Adds scripts (lint:fix/tsc/format) + lint-staged + husky prepare; adds deps. |
| eslint.config.js | Reformats and updates ESLint config to match Prettier style. |
| .prettierrc | Changes print width to 80; formats importOrder config. |
| .prettierignore | Starts ignoring *.config.js/ts (previously commented out). |
| .husky/pre-commit | Adds pre-commit hook commands (lint-staged + lint:fix + tsc). |
| .gitignore | Ignores .eslintcache. |
| .github/workflows/sync.yml | Adds workflow to run build.sh and push generated output to another repo. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| import { queryClient } from "@/shared"; | ||
|
|
||
| type Props = { | ||
| children: React.ReactNode; |
There was a problem hiding this comment.
React.ReactNode is referenced in the Props type but React isn’t imported, which will fail type-checking in typical TS/React setups. Import type React from "react" or use ReactNode from "react" instead.
| import { queryClient } from "@/shared"; | |
| type Props = { | |
| children: React.ReactNode; | |
| import type { ReactNode } from "react"; | |
| import { queryClient } from "@/shared"; | |
| type Props = { | |
| children: ReactNode; |
| npx lint-staged | ||
|
|
||
| pnpm run lint:fix | ||
| pnpm run tsc |
There was a problem hiding this comment.
This hook is missing a shebang / Husky bootstrap (e.g. #!/usr/bin/env sh and sourcing Husky’s helper). Without it, the hook can fail to execute on Unix with an “exec format error”.
| - name: creates output | ||
| run: sh ./build.sh |
There was a problem hiding this comment.
Workflow runs sh ./build.sh, but this repository doesn’t include build.sh, so this job will fail on every push to main. Either add the script (and ensure it creates the expected output/ dir) or remove/replace these steps with the actual build/publish process for this project.
| - name: creates output | |
| run: sh ./build.sh | |
| - name: Create output directory | |
| run: | | |
| mkdir -p output |
| {children} | ||
| <ReactQueryDevtools initialIsOpen={false} /> | ||
| </QueryClientProvider> |
There was a problem hiding this comment.
ReactQueryDevtools is mounted unconditionally, which will ship devtools code to production bundles and can expose query data in prod. Gate it behind import.meta.env.DEV (and optionally lazy-load it) so it only renders in development.
| "*": { | ||
| "&::-webkit-scrollbar": { | ||
| display: "none", | ||
| }, | ||
| msOverflowStyle: "none" /* IE and Edge */, |
There was a problem hiding this comment.
Global CSS hides scrollbars for all elements ("*"). This can reduce usability/accessibility (users lose a key affordance for scrollable regions) and makes overflow harder to discover. Consider scoping this to specific containers or providing an opt-out where visible scrollbars are needed.
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "tsc -b && vite build", |
There was a problem hiding this comment.
PR description currently contains placeholder content ("x" sections) and doesn’t explain the purpose/scope of the changes. Please update the PR description so reviewers can validate intent and deployment/test implications.
|
|
||
| type Props = { | ||
| children: React.ReactNode; |
There was a problem hiding this comment.
React.ReactNode is used in the Props type but React isn’t imported, which will cause a TypeScript error unless React is globally available (it typically isn’t with the automatic JSX runtime). Import type React from "react" or switch to ReactNode imported from "react".
| type Props = { | |
| children: React.ReactNode; | |
| import type { ReactNode } from "react"; | |
| type Props = { | |
| children: ReactNode; |
|
|
||
| type Props = { | ||
| children: React.ReactNode; |
There was a problem hiding this comment.
React.ReactNode is used for children but there is no React import, which will break TypeScript compilation. Import type React from "react" or use ReactNode from "react".
| type Props = { | |
| children: React.ReactNode; | |
| import type { ReactNode } from "react"; | |
| type Props = { | |
| children: ReactNode; |
| staleTime: 1000 * 60 * 3, | ||
| refetchOnMount: false, | ||
| refetchOnWindowFocus: false, | ||
| throwOnError: true, |
There was a problem hiding this comment.
throwOnError: true makes query errors throw during rendering; without an Error Boundary this can crash the UI instead of allowing per-screen error handling. Either add an app-level Error Boundary (or route-level error handling) or avoid setting throwOnError globally.
| npx lint-staged | ||
|
|
||
| pnpm run lint:fix | ||
| pnpm run tsc |
There was a problem hiding this comment.
The pre-commit flow runs lint-staged and then lint:fix, which re-lints/fixes the entire repo (not just staged files) and can introduce unstaged modifications that aren’t part of the commit. Consider running only lint-staged (via pnpm exec lint-staged) and pnpm run tsc, or ensure any fixes are restricted to staged files.
| npx lint-staged | |
| pnpm run lint:fix | |
| pnpm run tsc | |
| pnpm exec lint-staged | |
| pnpm run tsc |
1 participant
📝 요약 (Summary)
x
✅ 주요 변경 사항 (Key Changes)
x
💻 상세 구현 내용 (Implementation Details)
x
🚀 트러블 슈팅 (Trouble Shooting)
x
x
📸 스크린샷 (Screenshots)
x
#️⃣ 관련 이슈 (Related Issues)