Storybook MCP 로 컴포넌트 문서화를 자동화하고 AI Context로 활용하기 #10
Conversation
Summary of ChangesHello @toothlessdev, 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! 이 Pull Request는 Storybook과 AI 코딩 도구 간의 통합을 탐구하는 새로운 블로그 게시물을 도입합니다. 이 게시물은 개발자들이 Storybook MCP를 활용하여 컴포넌트 문서화를 자동화하고 AI가 UI 컴포넌트를 구조적으로 이해하도록 돕는 방법을 안내하여, AI 지원 개발 워크플로우를 향상시키는 것을 목표로 합니다. 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. 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
안녕하세요. Storybook MCP를 활용한 컴포넌트 문서화 자동화에 대한 PR 잘 보았습니다. 새로운 블로그 포스트를 통해 유용한 정보를 공유해주셔서 감사합니다. 코드 변경 사항에 대해 몇 가지 개선점을 제안 드립니다. 마크다운 파일에서는 시맨틱 마크업 개선을 위해 <br> 태그를 이용한 공백 추가와 인라인 스타일 사용을 지양하는 방향을 제안했습니다. 또한, data/posts.json 파일에서 포스트 순서가 변경된 점을 바탕으로, 생성 스크립트의 정렬 로직을 보다 안정적으로 개선할 수 있는 방법을 제시했습니다. 자세한 내용은 각 파일에 남긴 주석을 참고해주세요.
| Storybook MCP 설정법에 대해서만 빠르게 읽고 싶다면<br>하단 ["Storybook MCP 설정하기" 섹션](#storybook-mcp-설정하기) 로 바로 이동하세요. | ||
| ::: | ||
|
|
||
| <br><br> |
There was a problem hiding this comment.
<br><br> 태그를 사용하여 수직 간격을 추가하는 것은 시맨틱 마크업 원칙에 어긋날 수 있습니다. 여백은 CSS로 관리하는 것이 가장 좋습니다. 이 태그들을 제거하고, 필요한 경우 CSS를 통해 문단 간의 간격을 조정하는 것을 고려해보세요. 이렇게 하면 마크다운의 가독성을 높이고 스타일과 콘텐츠를 분리할 수 있습니다. 이 문제는 40, 107, 219번째 줄에서도 발견됩니다.
| <div style="display: flex; gap: 12px; margin-top: 10px; margin-bottom: 10px;"> | ||
| <img src="./img/storybook-mcp/1.png" style="width:50%; object-fit:cover; display:block;"/> | ||
| <img src="./img/storybook-mcp/2.png" style="width:50%; object-fit:cover; display:block;"/> | ||
| </div> |
There was a problem hiding this comment.
마크다운 파일 내에 인라인 스타일을 직접 사용하는 것은 유지보수를 어렵게 만들 수 있습니다. 스타일과 콘텐츠를 분리하기 위해, 관련 스타일을 별도의 CSS 파일에 클래스로 정의하고 마크다운에서는 해당 클래스를 div에 적용하는 것을 권장합니다. 예를 들어, .image-gallery { display: flex; gap: 12px; ... } 와 같은 클래스를 정의하여 사용할 수 있습니다. 이렇게 하면 스타일 재사용이 용이해지고, 마크다운 파일이 더 깔끔해집니다.
| { | ||
| "url": "/posts/React/build-react-1", | ||
| "url": "/posts/Web/indexed-db", | ||
| "frontmatter": { | ||
| "title": "DIY React 1 - JSX 마크업을 Virtual DOM 객체로 변환하기", | ||
| "title": "IndexedDB 를 TypeOrm 처럼 사용하기", | ||
| "createdAt": "2025-10-07T00:00:00.000Z", | ||
| "category": "React", | ||
| "description": "React의 핵심 개념과 동작 원리를 이해하기 위해, React를 직접 구현해보는 시리즈의 첫 번째 글입니다. 이번 글에서는 JSX 마크업을 Virtual DOM 객체로 변환하는 과정을 다룹니다." | ||
| "category": "Web", | ||
| "description": "IndexedDB 는 브라우저 내장 데이터베이스로, 대용량 데이터를 클라이언트에 저장할 수 있습니다. 이 글에서는 TypeOrm 스타일의 추상화를 통해 IndexedDB 를 더 쉽게 사용하는 방법을 소개합니다." | ||
| } | ||
| }, | ||
| { | ||
| "url": "/posts/Web/indexed-db", | ||
| "url": "/posts/React/build-react-1", | ||
| "frontmatter": { | ||
| "title": "IndexedDB 를 TypeOrm 처럼 사용하기", | ||
| "title": "DIY React 1 - JSX 마크업을 Virtual DOM 객체로 변환하기", | ||
| "createdAt": "2025-10-07T00:00:00.000Z", | ||
| "category": "Web", | ||
| "description": "IndexedDB 는 브라우저 내장 데이터베이스로, 대용량 데이터를 클라이언트에 저장할 수 있습니다. 이 글에서는 TypeOrm 스타일의 추상화를 통해 IndexedDB 를 더 쉽게 사용하는 방법을 소개합니다." | ||
| "category": "React", | ||
| "description": "React의 핵심 개념과 동작 원리를 이해하기 위해, React를 직접 구현해보는 시리즈의 첫 번째 글입니다. 이번 글에서는 JSX 마크업을 Virtual DOM 객체로 변환하는 과정을 다룹니다." | ||
| } | ||
| }, |
There was a problem hiding this comment.
이 JSON 파일은 스크립트로 자동 생성되는 것으로 보입니다. createdAt이 동일한 포스트("IndexedDB 를 TypeOrm 처럼 사용하기"와 "DIY React 1...")의 순서가 변경된 것을 확인했습니다. 이는 JavaScript의 sort() 메서드가 불안정(unstable)하기 때문일 수 있습니다. 생성 날짜가 같은 포스트의 순서가 의도치 않게 변경되는 것을 방지하려면, scripts/generate-posts.mjs 파일의 정렬 로직에 제목(title)과 같은 2차 정렬 기준을 추가하여 안정적인 정렬을 구현하는 것이 좋습니다.
No description provided.