스토리북 도입#21
Conversation
Summary of ChangesHello @Jieunsse, 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은 프로젝트에 Storybook을 성공적으로 통합하여 컴포넌트 기반 개발 워크플로우를 구축하는 것을 목표로 합니다. Storybook을 통해 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
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 잘 보았습니다. 전반적으로 스토리북 설정이 잘 추가되었지만, 몇 가지 개선점을 제안합니다.
가장 중요한 것은 package.json에 추가된 devDependencies의 버전들이 아직 출시되지 않은 미래 버전이라 의존성 설치가 불가능하다는 점입니다. 이 부분을 현재 안정적인 최신 버전으로 수정해야 합니다. dependencies 블록에 있는 일부 패키지들(next, react 등)도 동일한 문제가 있으니 함께 확인해주세요.
또한, 스토리북 설정을 간소화하고 가독성을 높이는 몇 가지 제안을 추가했습니다. 마지막으로, 프로젝트를 깔끔하게 유지하기 위해 스토리북 초기화 시 생성되는 예제 파일들(src/stories 경로)을 제거하는 것을 고려해보시는 것이 좋겠습니다.
| "storybook": "^10.2.3", | ||
| "@storybook/nextjs-vite": "^10.2.3", | ||
| "@chromatic-com/storybook": "^5.0.0", | ||
| "@storybook/addon-vitest": "^10.2.3", | ||
| "@storybook/addon-a11y": "^10.2.3", | ||
| "@storybook/addon-docs": "^10.2.3", | ||
| "vite": "^7.3.1", | ||
| "eslint-plugin-storybook": "^10.2.3", | ||
| "vitest": "^4.0.18", | ||
| "playwright": "^1.58.1", | ||
| "@vitest/browser-playwright": "^4.0.18", | ||
| "@vitest/coverage-v8": "^4.0.18" |
There was a problem hiding this comment.
추가된 devDependencies의 버전이 대부분 잘못되었습니다. storybook, vite, vitest, playwright 관련 패키지들의 버전이 아직 출시되지 않은 미래 버전으로 설정되어 있어 의존성 설치에 실패하게 됩니다. 현재 안정적인 최신 버전으로 수정해야 합니다. 예를 들어 storybook은 ^8.2.2, vite는 ^5.3.1 입니다.
| "storybook": "^10.2.3", | |
| "@storybook/nextjs-vite": "^10.2.3", | |
| "@chromatic-com/storybook": "^5.0.0", | |
| "@storybook/addon-vitest": "^10.2.3", | |
| "@storybook/addon-a11y": "^10.2.3", | |
| "@storybook/addon-docs": "^10.2.3", | |
| "vite": "^7.3.1", | |
| "eslint-plugin-storybook": "^10.2.3", | |
| "vitest": "^4.0.18", | |
| "playwright": "^1.58.1", | |
| "@vitest/browser-playwright": "^4.0.18", | |
| "@vitest/coverage-v8": "^4.0.18" | |
| "storybook": "^8.2.2", | |
| "@storybook/nextjs-vite": "^8.2.2", | |
| "@chromatic-com/storybook": "^1.6.1", | |
| "@storybook/addon-vitest": "^8.2.2", | |
| "@storybook/addon-a11y": "^8.2.2", | |
| "@storybook/addon-docs": "^8.2.2", | |
| "vite": "^5.3.1", | |
| "eslint-plugin-storybook": "^0.8.0", | |
| "vitest": "^1.6.0", | |
| "playwright": "^1.45.0", | |
| "@vitest/browser-playwright": "^1.4.0", | |
| "@vitest/coverage-v8": "^1.6.0" |
| addons: [ | ||
| '@chromatic-com/storybook', | ||
| '@storybook/addon-vitest', | ||
| '@storybook/addon-a11y', | ||
| '@storybook/addon-docs', | ||
| ], |
There was a problem hiding this comment.
스토리북의 핵심 기능을 모아놓은 @storybook/addon-essentials를 사용하는 것을 권장합니다. 이 애드온은 actions, controls, docs 등 필수적인 애드온들을 포함하고 있어 개별적으로 관리할 필요가 없게 해주고, 더 풍부한 개발 경험을 제공합니다. @storybook/addon-docs는 @storybook/addon-essentials에 포함되어 있으므로 대체할 수 있습니다. 이 애드온을 사용하려면 devDependencies에 추가해야 합니다.
| addons: [ | |
| '@chromatic-com/storybook', | |
| '@storybook/addon-vitest', | |
| '@storybook/addon-a11y', | |
| '@storybook/addon-docs', | |
| ], | |
| addons: [ | |
| '@storybook/addon-essentials', | |
| '@chromatic-com/storybook', | |
| '@storybook/addon-vitest', | |
| '@storybook/addon-a11y', | |
| ], |
| export default defineConfig([...nextVitals, ...nextTs, { | ||
| rules: { | ||
| 'prefer-const': 'error', | ||
|
|
||
| '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], | ||
| }, | ||
| '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], | ||
| }, | ||
|
|
||
| globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']), | ||
| ]); | ||
| }, globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']), ...storybook.configs["flat/recommended"]]); |
There was a problem hiding this comment.
ESLint 설정이 한 줄로 길게 작성되어 가독성이 떨어집니다. 각 설정을 별도의 줄로 나누어 작성하면 코드를 이해하고 유지보수하기 더 쉬워집니다.
| export default defineConfig([...nextVitals, ...nextTs, { | |
| rules: { | |
| 'prefer-const': 'error', | |
| '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], | |
| }, | |
| '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], | |
| }, | |
| globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']), | |
| ]); | |
| }, globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']), ...storybook.configs["flat/recommended"]]); | |
| export default defineConfig([ | |
| ...nextVitals, | |
| ...nextTs, | |
| { | |
| rules: { | |
| 'prefer-const': 'error', | |
| '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], | |
| }, | |
| }, | |
| globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']), | |
| ...storybook.configs['flat/recommended'], | |
| ]); |
1 participant
Summary
Issue
Scope
포함
특이사항