[feature] Common 컴포넌트 스토리 파일 적용#225
Conversation
Summary by CodeRabbit
Walkthrough이번 PR에서는 Storybook 설정과 관련 스토리 구성 파일에 대해 업데이트가 이루어졌습니다. Changes
Assessment against linked issues
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
@coderabbitai review |
|
@seongwon030: I'll review your PR now which focuses on applying story files to common components and fixing path recognition issues. I'll provide feedback on the changes shortly. ✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/src/components/common/Header/Header.stories.tsx (1)
32-38: 데스크톱 뷰포트 설정이 잘 적용되었습니다.Desktop 스토리에서 데스크톱 뷰포트 설정을 적용한 점이 좋습니다. 다양한 화면 크기에서 컴포넌트를 테스트할 수 있도록 했습니다.
태블릿과 모바일 뷰포트를 위한 추가 스토리를 고려해보세요. PR 목표에 태블릿과 모바일 뷰를 위한 Storybook 적용이 언급되어 있으므로, 다음과 같이 추가할 수 있습니다:
+export const Tablet: Story = { + parameters: { + viewport: { + defaultViewport: 'tablet', + }, + }, +}; + +export const Mobile: Story = { + parameters: { + viewport: { + defaultViewport: 'mobile', + }, + }, +};frontend/src/components/common/Button/Button.stories.tsx (1)
52-83: 다양한 버튼 스타일 및 기능 시연여러 종류의 버튼(너비 지정, 긴 텍스트, 애니메이션과 너비 조합)에 대한 스토리를 통해 Button 컴포넌트의 다양한 활용 방법을 보여주고 있습니다. 각 스토리에 대한 주석도 명확하여 이해하기 쉽습니다.
개선 제안: Footer 컴포넌트 스토리처럼 태블릿과 모바일 뷰포트에 대한 스토리도 추가하면 더 일관된 접근이 될 것 같습니다. Button 컴포넌트가 반응형 디자인에 민감하다면 이를 고려해 보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
frontend/.storybook/main.ts(2 hunks)frontend/.storybook/preview.ts(2 hunks)frontend/package.json(2 hunks)frontend/src/components/StoryBookButton/MyButton.stories.tsx(0 hunks)frontend/src/components/StoryBookButton/MyButton.tsx(0 hunks)frontend/src/components/common/Button/Button.stories.tsx(1 hunks)frontend/src/components/common/Footer/Footer.stories.tsx(1 hunks)frontend/src/components/common/Header/Header.stories.tsx(1 hunks)frontend/src/components/common/Header/Header.tsx(1 hunks)
💤 Files with no reviewable changes (2)
- frontend/src/components/StoryBookButton/MyButton.stories.tsx
- frontend/src/components/StoryBookButton/MyButton.tsx
🔇 Additional comments (17)
frontend/src/components/common/Header/Header.tsx (1)
5-5: 경로 변경이 올바르게 적용되었습니다.로고 이미지의 경로가
/logos/하위 디렉토리에서 직접/images/폴더로 변경되었습니다. 이미지 파일 구조 개선에 맞춰 적절하게 수정되었습니다.frontend/.storybook/preview.ts (2)
2-2: Storybook 뷰포트 애드온 임포트가 추가되었습니다.반응형 디자인 테스트를 위한
@storybook/addon-viewport의INITIAL_VIEWPORTS가 적절하게 임포트되었습니다.
12-15: 뷰포트 설정이 적절하게 구성되었습니다.Storybook 파라미터에 뷰포트 설정이 추가되어 반응형 디자인 테스트가 가능해졌습니다. 기본 뷰포트로 'responsive'를 설정한 것이 적절합니다.
frontend/package.json (2)
42-42: Storybook 뷰포트 애드온 의존성이 추가되었습니다.반응형 디자인 테스트를 위한
@storybook/addon-viewport패키지가 적절하게 추가되었습니다.다른 Storybook 패키지들과의 버전 호환성을 확인해보세요. 다른 Storybook 패키지들은 ^8.5.0 버전인데 반해, 이 패키지는 ^8.6.7 버전입니다. 호환성 문제가 발생할 수 있습니다.
66-66: path 모듈 의존성이 추가되었습니다.빌드 구성에서 파일 경로를 처리하기 위한
path모듈이 추가되었습니다.frontend/src/components/common/Header/Header.stories.tsx (4)
1-6: Header 컴포넌트의 스토리 파일이 적절한 의존성으로 추가되었습니다.Header 컴포넌트 스토리를 위한 필요한 모든 의존성들이 잘 임포트되었습니다.
BrowserRouter와SearchProvider를 포함시켜 컴포넌트가 제대로 작동할 수 있는 환경을 구성한 점이 좋습니다.
7-23: 스토리북 메타 설정이 잘 구성되었습니다.Header 컴포넌트를 위한 메타 설정이 잘 구성되었습니다:
- 적절한 계층 구조를 가진 타이틀 설정 ('Components/Common/Header')
- 전체 화면 레이아웃 설정
- 컴포넌트 동작에 필요한
BrowserRouter와SearchProvider데코레이터 설정- autodocs 태그를 통한 자동 문서화 활성화
TypeScript
satisfies키워드를 활용하여 타입 안전성도 확보하였습니다.
25-26: 메타 객체 내보내기 및 스토리 타입 정의가 적절합니다.메타 객체를 내보내고
StoryObj타입을 활용하여 스토리 타입을 올바르게 정의하였습니다.
28-30: 기본 스토리 설정이 적절합니다.인자 없이 기본 Header 컴포넌트를 보여주는 Default 스토리가 잘 구성되었습니다.
frontend/.storybook/main.ts (3)
2-3: 필요한 모듈 import 추가경로 처리를 위한
path와fileURLToPath모듈을 추가한 것은 좋은 접근입니다. 이는 Webpack 설정에서 절대 경로를 사용하기 위한 준비 단계로 적절합니다.
8-8: 반응형 테스트를 위한 addon 추가
@storybook/addon-viewport를 추가한 것은 PR 목표에 맞게 태블릿 및 모바일 뷰에서 컴포넌트를 테스트할 수 있도록 하는 좋은 선택입니다.
19-30: Webpack alias 설정 추가
webpackFinal설정을 통해@별칭을 추가한 것은 스토리 파일에서 컴포넌트를 절대 경로로 임포트하는 문제를 효과적으로 해결합니다. 기존 alias 설정을 유지하면서 새 설정을 추가하는 방식도 적절합니다.이 설정은 PR 목표에서 언급된 "절대 경로 인식 문제 해결"에 정확히 부합합니다.
frontend/src/components/common/Footer/Footer.stories.tsx (3)
1-17: Footer 컴포넌트를 위한 메타데이터 설정Storybook의 타입스크립트 지원을 활용한 메타데이터 설정이 잘 구성되어 있습니다.
satisfies Meta<typeof Footer>구문을 사용하여 타입 안전성을 확보한 것도 좋은 접근입니다.
18-20: 기본 Footer 스토리 구성기본 스토리 설정이 간결하게 구성되어 있습니다. 필요한 경우
args에 추가적인 속성을 전달할 수 있도록 확장 가능한 구조입니다.
22-36: 반응형 테스트를 위한 Viewport 설정태블릿과 모바일 버전의 Footer를 위한 스토리를 적절하게 구성하였습니다.
ipad와iphone6뷰포트를 사용하여 다양한 화면 크기에서 컴포넌트가 어떻게 보이는지 확인할 수 있습니다.이는 PR 목표에서 언급된 "태블릿 및 모바일 뷰 적용"에 정확히 부합합니다.
frontend/src/components/common/Button/Button.stories.tsx (2)
1-32: Button 컴포넌트 스토리 메타데이터 구성Button 컴포넌트의 메타데이터와
argTypes가 상세하게 구성되어 있습니다. 각 속성에 대한 설명을 통해 컴포넌트 사용자에게 명확한 정보를 제공하고 있습니다.특히
width,children,animated,onClick속성에 대한 상세한 설명이 포함되어 있어 문서화 측면에서도 매우 훌륭합니다.
33-50: 기본 버튼과 애니메이션 버튼 스토리기본 버튼과 애니메이션 버튼에 대한 스토리가 잘 구성되어 있습니다. 각 버튼의 클릭 이벤트도 로깅 함수를 통해 적절히 처리되고 있습니다.
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
common 컴포넌트 스토리북 추가 좋습니다!👏
다른 컴포넌트도 천천히 추가해봅시다!!
3 participants
#️⃣연관된 이슈
📝작업 내용
main.ts, preview.ts 수정
story 파일 추가
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항