Fix/168/stories docs #175
Fix/168/stories docs #175
Conversation
Walkthrough이 PR에서는 여러 컴포넌트의 Storybook 설정과 관련된 변경 사항이 포함되어 있습니다. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (23)
src/components/common/skeleton/profile-skeleton/index.tsx (1)
6-6: 반응형 디자인이 적절하게 구현되었습니다만, 태블릿과 데스크톱 크기를 최적화할 수 있습니다.현재 구현은 잘 작동하지만, 태블릿(md)과 데스크톱(lg) 크기가 동일합니다. 불필요한 중복을 제거하여 코드를 더 간결하게 만들 수 있습니다.
다음과 같이 수정하는 것을 고려해보세요:
-<Skeleton circle className="h-20 w-20 md:h-30 md:w-30 lg:h-30 lg:w-30" /> +<Skeleton circle className="h-20 w-20 md:h-30 md:w-30" />src/components/common/button/like-btn.stories.tsx (1)
8-18: 컴포넌트 문서화가 잘 되어있습니다!parameters 설정과 한글 문서화가 명확하게 작성되어 있습니다. 다만, 컴포넌트의 props에 대한 설명도 추가하면 좋을 것 같습니다.
다음과 같이 props 설명을 추가하는 것을 제안드립니다:
docs: { description: { component: `찜하기 버튼은 약속 카드에서 약속을 찜할 때 사용됩니다. 버튼을 눌러 찜한 상태 / 찜하지 않은 상태를 나타냅니다. + +Props: +- id: 약속 카드의 고유 식별자 +- isLiked: 찜하기 상태 (true: 찜한 상태, false: 찜하지 않은 상태) +- size: 버튼 크기 (기본값: 40px) `, }, },src/components/common/progress-bar/progress-bar.stories.tsx (1)
9-16: 문서화가 잘 되어있습니다만, 사용 예시를 추가하면 좋을 것 같습니다.컴포넌트의 목적이 명확하게 설명되어 있습니다. 하지만 개발자들의 이해를 돕기 위해 구체적인 사용 사례나 예시를 추가하면 더 좋을 것 같습니다.
다음과 같이 description을 보완하는 것을 제안드립니다:
parameters: { layout: 'fullscreen', docs: { description: { - component: '프로그래스바는 특정 기준 대비 현재 상태를 시각적으로 표현할 때 사용됩니다.', + component: '프로그래스바는 특정 기준 대비 현재 상태를 시각적으로 표현할 때 사용됩니다. 예시: 회원가입 진행률, 파일 업로드 진행상태, 목표 달성률 등을 표시할 때 활용할 수 있습니다.', }, }, },src/components/common/button/button.stories.tsx (1)
8-14: 문서화를 더욱 보완하면 좋을 것 같습니다.다음 사항들을 추가로 문서화하면 좋을 것 같습니다:
- 각 props에 대한 상세 설명
- 반응형 동작 방식에 대한 예시
- 접근성(웹 접근성) 관련 기능 설명
다음과 같이 parameters 섹션을 확장하는 것을 제안드립니다:
parameters: { layout: 'fullscreen', docs: { subtitle: '기본이 되는 버튼 컴포넌트 입니다.', description: { - component: 'filled, outlined, disabled 세가지 스타일이 있습니다.', + component: ` + filled, outlined, disabled 세가지 스타일이 있습니다. + + ### Props + - className: 버튼 스타일 클래스 ('btn-filled', 'btn-outlined', 'btn-disabled') + - children: 버튼 내부 컨텐츠 + - onClick: 클릭 이벤트 핸들러 + - type: 버튼 타입 (button, submit, reset) + + ### 반응형 동작 + - sm: 최소 너비 24px + - md: 최소 너비 32px + - lg: 최소 너비 40px + + ### 접근성 + - 키보드 탐색 가능 + - ARIA 레이블 지원 + `, }, }, },src/components/common/review-list/review-card-list.tsx (1)
20-23: 빈 상태 UI 개선이 잘 이루어졌습니다!시맨틱 마크업과 명확한 텍스트 계층 구조를 사용하여 사용자 경험이 향상되었습니다.
접근성 향상을 위해 다음과 같은 작은 개선을 제안드립니다:
<section className="py-16 text-center"> - <h3 className="text-xl font-bold text-blue-500">남긴 리뷰가 없습니다</h3> + <h3 className="text-xl font-bold text-blue-500" role="status" aria-live="polite">남긴 리뷰가 없습니다</h3> <p className="mt-4 text-gray-600">크루에 가입하고 약속을 잡아보세요🙌</p> </section>스크린 리더 사용자를 위해 상태 변경을 알려주는
role="status"와aria-live="polite"속성을 추가하면 좋을 것 같습니다.src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx (1)
41-54: 스토리 데이터 개선이 필요합니다.다음 사항들을 개선하면 좋을 것 같습니다:
- Pinterest 이미지 URL은 안정적이지 않을 수 있습니다. 프로젝트 내부 또는 더 안정적인 CDN의 이미지를 사용하는 것이 좋습니다.
- participants 데이터의 일관성이 필요합니다. 일부 사용자만 프로필 이미지가 있고 나머지는 비어있습니다.
다음과 같이 수정하는 것을 제안드립니다:
imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg', participants: [ - { id: 1, nickname: '유저1', profileImageUrl: '' }, - { id: 2, nickname: '유저2', profileImageUrl: '' }, - { - id: 3, - nickname: '유저3', - profileImageUrl: 'https://i.pinimg.com/736x/97/5a/3c/975a3c645d344216e8ea346c084fba04.jpg', - }, + { id: 1, nickname: '유저1', profileImageUrl: '/images/profile-1.jpg' }, + { id: 2, nickname: '유저2', profileImageUrl: '/images/profile-2.jpg' }, + { id: 3, nickname: '유저3', profileImageUrl: '/images/profile-3.jpg' }, ],src/components/common/profile/profiles.stories.tsx (1)
Line range hint
65-67: Five 스토리의 속성명을 수정해야 합니다.마지막 객체에서
imageUrl속성을 사용하고 있는데, 이는 다른 프로필 데이터와 일치하지 않습니다.다음과 같이 수정해주세요:
- profiles: [...sampleProfiles, { id: 5, nickname: 'Extra', imageUrl: null }], + profiles: [...sampleProfiles, { id: 5, nickname: 'Extra', profileImageUrl: null }],src/app/(crew)/my-page/_components/profile-card/container.tsx (3)
15-15: 로딩 상태 처리 최적화 제안
userLoading과!user조건을 하나로 통합하여 코드를 더 간결하게 만들 수 있습니다.다음과 같이 수정하는 것을 고려해보세요:
- if (userLoading) return <ProfileSkeleton />; - if (!user) return <ProfileSkeleton />; + if (userLoading || !user) return <ProfileSkeleton />;
Line range hint
17-35: 파일 업로드 처리 개선 제안파일 처리 로직에 대한 몇 가지 개선사항이 있습니다:
- 파일 입력 생성 로직을 별도 함수로 분리
- 더 구체적인 에러 메시지 추가
- 파일 형식 검증 추가
다음과 같은 리팩토링을 제안합니다:
const createFileInput = () => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.png,.jpg,.jpeg'; return input; }; const validateFile = (file: File) => { const validTypes = ['image/jpeg', 'image/png']; if (!validTypes.includes(file.type)) { toast.error('PNG 또는 JPG 형식의 이미지만 업로드 가능합니다.'); return false; } if (file.size > 5 * 1024 * 1024) { toast.error('5MB 이하의 파일만 업로드 가능합니다.'); return false; } return true; }; const handleEdit = () => { const input = createFileInput(); input.onchange = async (event) => { const file = (event.target as HTMLInputElement)?.files?.[0]; if (file && validateFile(file)) { try { await updateUserProfile(file); toast.success('프로필 이미지가 업데이트되었습니다.'); await refetchUser(); } catch (error) { toast.error('파일 업로드 중 오류가 발생했습니다. 다시 시도해 주세요.'); } } }; input.click(); };
Line range hint
17-50: 접근성 개선 필요현재 구현에서 접근성 관련 개선이 필요한 부분이 있습니다:
- 스크린 리더 사용자를 위한 ARIA 레이블 추가
- 키보드 접근성 개선
- 로딩 상태에 대한 명확한 피드백
다음과 같은 개선사항을 제안합니다:
const handleEdit = () => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.png,.jpg,.jpeg'; input.setAttribute('aria-label', '프로필 이미지 업로드'); // 업로드 진행 상태 표시 const handleUpload = async (file: File) => { toast.loading('이미지를 업로드하는 중입니다...', { role: 'status', 'aria-live': 'polite' }); try { await updateUserProfile(file); toast.success('프로필 이미지가 업데이트되었습니다.', { role: 'alert' }); await refetchUser(); } catch (error) { toast.error('업로드 실패. 다시 시도해 주세요.', { role: 'alert' }); } }; input.onchange = (event) => { const file = (event.target as HTMLInputElement)?.files?.[0]; if (file) handleUpload(file); }; input.click(); };src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx (1)
8-12: 스토리북 문서화 개선 제안문서화가 잘 되어있지만, 다음과 같은 추가 개선사항을 고려해보시기 바랍니다:
description필드를 추가하여 컴포넌트의 상세 사용법 설명component섹션에 props 인터페이스 문서화- 컴포넌트의 접근성(a11y) 관련 정보 추가
예시:
parameters: { docs: { subtitle: '크루 디테일 페이지에서 크루의 리뷰 정보를 알 수 있는 컴포넌트 입니다.', + description: '이 컴포넌트는 평점 표시, 총 평가 수, 평균 평점을 시각적으로 표현합니다.', + component: { + props: { + reviewRateInfo: { + description: '리뷰 평점 정보를 포함하는 객체', + required: true + } + } + } }, },src/components/common/gathering-card/gathering-card.stories.tsx (1)
51-56: 스토리 데이터의 일관성 개선이 필요합니다.세 가지 스토리(
Default,PastEvent,LikedEvent)가 동일한 데이터를 사용하고 있어 각 상태의 차이점을 명확하게 보여주지 못합니다.각 스토리의 특성을 더 잘 보여줄 수 있도록 다음과 같이 데이터를 다양화하는 것을 제안합니다:
// PastEvent - title: '서핑모임', + title: '종료된 등산 모임', - currentCount: 1, + currentCount: 5, - totalCount: 5, + totalCount: 5, // LikedEvent - title: '서핑모임', + title: '찜한 독서 모임', - currentCount: 1, + currentCount: 3, - totalCount: 5, + totalCount: 8,Also applies to: 64-69
src/app/(crew)/my-favorite/_components/gathering-list/liked-list-container.tsx (1)
56-61: 빈 상태 UI 개선이 잘 되었습니다!시맨틱 HTML을 사용하고 명확한 메시지를 제공하여 사용자 경험이 향상되었습니다. 다만, 접근성 향상을 위해 이모지에 대한 처리를 추가하면 좋을 것 같습니다.
다음과 같이 수정하는 것을 제안드립니다:
<section className="py-16 text-center"> <h3 className="text-xl font-bold text-blue-500">찜한 약속이 없습니다</h3> - <p className="mt-4 text-gray-600">약속을 찜해보세요🙌</p> + <p className="mt-4 text-gray-600">약속을 찜해보세요<span role="img" aria-label="환영">🙌</span></p> </section>src/components/common/review-list/review-card-list.stories.tsx (2)
22-76: 타입 정의 추가를 제안드립니다
MyReviewData의 구조가 복잡한데, 타입 정의를 추가하면 데이터 구조를 더 명확하게 이해할 수 있을 것 같습니다.interface Review { crewId: number; crewName: string; gatheringName: string; id: number; rate: number; comment: string; createdAt: string; gatheringLocation: string; } interface ReviewPage { content: Review[]; hasNext: boolean; } interface ReviewData { pages: ReviewPage[]; pageParams: any[]; } const MyReviewData: ReviewData = { // ... existing data };
78-80: 스토리 케이스 추가를 제안드립니다현재는 기본적인 데이터 표시만 있는데, 로딩 상태나 에러 상태 등 다양한 상황의 스토리 케이스를 추가하면 좋을 것 같습니다.
export const Loading: Story = { render: () => <ReviewCardList data={undefined} refetch={() => {}} />, }; export const Empty: Story = { render: () => <ReviewCardList data={{ pages: [], pageParams: [] }} refetch={() => {}} />, };src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx (2)
9-9: 목업 데이터 개선이 필요합니다.여러 모임에서 동일한 이미지 URL이 반복적으로 사용되고 있습니다. 각 모임의 특성에 맞는 고유한 이미지를 사용하는 것이 좋겠습니다.
- imageUrl: 'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D', + imageUrl: '/* 각 모임 특성에 맞는 고유한 이미지 URL */',Also applies to: 21-21, 32-32, 43-43
86-86: crewId prop에 대한 설명이 필요합니다.새로 추가된
crewIdprop의 용도와 필요성에 대한 설명을 문서에 추가해 주세요.parameters: { docs: { subtitle: '크루 디테일 페이지 에서 볼 수 있는 약속 카드 리스트입니다.', description: { component: ' 데스크탑에서는 캐러셀, 이하의 사이즈에서는 드래그로 이동 가능합니다.', + props: { + crewId: '크루를 식별하기 위한 고유 ID입니다.' + } }, }, },src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (1)
74-76: 빈 상태 UI가 개선되었습니다! 👍빈 상태 메시지의 디자인이 사용자 친화적으로 개선되었습니다. 중앙 정렬, 색상 대비, 이모지 사용이 적절합니다.
접근성 향상을 위해 다음과 같은 작은 개선을 제안드립니다:
- <p className="text-xl font-bold text-blue-500">아직 등록된 약속이 없어요</p> + <h2 className="text-xl font-bold text-blue-500">아직 등록된 약속이 없어요</h2>의미론적으로 더 적절한
h2태그를 사용하면 스크린 리더 사용자들의 탐색이 더욱 용이해질 것 같습니다.src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx (2)
28-115: 테스트 데이터의 품질 개선이 필요합니다.다음과 같은 개선사항을 제안드립니다:
- 중복된 리뷰 내용이 있습니다 (id: 5, 6의 리뷰 내용이 동일).
- 프로필 이미지 URL이 일관성이 없습니다 (일부는 빈 문자열, 일부는 URL 존재).
다음과 같이 개선하는 것을 추천드립니다:
- comment: '조금 아쉬웠지만 새로운 경험이었습니다.', + comment: '다른 사람들과 소통하는 방식이 좋았습니다.',그리고 프로필 이미지의 경우, 기본 이미지 URL을 설정하는 것이 좋을 것 같습니다:
- profileImageUrl: '', + profileImageUrl: 'https://default-profile-image.url',
Line range hint
116-139: 페이지네이션 구현의 개선사항을 제안드립니다.현재 구현은 잘 작동하지만, 다음과 같은 개선사항을 고려해보시면 좋을 것 같습니다:
- 페이지당 아이템 수(6)를 상수로 분리
- 엣지 케이스에 대한 처리 추가
다음과 같이 개선하는 것을 추천드립니다:
+const ITEMS_PER_PAGE = 6; + function RenderReviewPagination() { const [currentPage, setCurrentPage] = useState(1); - const itemsPerPage = 6; + const itemsPerPage = ITEMS_PER_PAGE; // 페이지에 맞는 리뷰 데이터 가져오기 const totalItems = CrewReviewData.data.length; const totalPages = Math.ceil(totalItems / itemsPerPage); + // 엣지 케이스 처리 + if (totalItems === 0) { + return <CrewReviewList reviews={[]} totalPages={0} currentPage={1} onPageChange={setCurrentPage} />; + } + const currentReviews = CrewReviewData.data.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage, );src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx (2)
78-83: 중복된 모임 데이터를 다양화하는 것이 좋겠습니다.
서핑모임이 여러 번 반복되어 있고 동일한 이미지와 데이터가 사용되고 있습니다. 다음과 같이 개선하면 좋겠습니다:
- 각기 다른 모임 제목과 이미지 사용
- 다양한 날짜와 시간대 사용
- 다양한 참가자 수 설정
Also applies to: 114-119
42-47: 테스트 데이터의 날짜를 더 현실적으로 구성하면 좋겠습니다.모든 모임 날짜가 2024년 12월로 설정되어 있습니다. 다음과 같이 개선하면 좋겠습니다:
- 과거/현재/미래 날짜 포함
- 다양한 월과 요일 포함
- 마감된 모임 케이스 포함
Also applies to: 96-101, 123-128, 132-137
src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx (1)
Line range hint
1-182: 스토리북 문서 구조에 대한 제안현재 스토리들이 잘 구성되어 있지만, 몇 가지 개선사항을 제안드립니다:
- 각 스토리에 대한 개별 설명 추가:
export const Default: Story = { + parameters: { + docs: { + description: '비회원이 크루 상세 페이지를 볼 때의 화면입니다.', + }, + }, args: { // ... }, };
- argTypes에 각 props에 대한 설명 추가:
argTypes: { - handleJoinClick: { action: '참여 버튼 클릭' }, + handleJoinClick: { + action: '참여 버튼 클릭', + description: '크루 참여 버튼 클릭 시 호출되는 핸들러', + table: { + type: { summary: '() => void' }, + }, + }, // ... 다른 props에도 동일하게 적용 },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (22)
src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx(0 hunks)src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx(6 hunks)src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx(2 hunks)src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx(1 hunks)src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx(4 hunks)src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx(1 hunks)src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx(1 hunks)src/app/(crew)/crew/detail/[id]/_components/review-section.tsx(1 hunks)src/app/(crew)/crew/detail/[id]/page.tsx(1 hunks)src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx(4 hunks)src/app/(crew)/my-favorite/_components/gathering-list/liked-list-container.tsx(1 hunks)src/app/(crew)/my-page/_components/profile-card/container.tsx(1 hunks)src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx(2 hunks)src/components/common/button/button.stories.tsx(1 hunks)src/components/common/button/like-btn.stories.tsx(1 hunks)src/components/common/gathering-card/gathering-card.stories.tsx(2 hunks)src/components/common/profile/profiles.stories.tsx(2 hunks)src/components/common/progress-bar/progress-bar.stories.tsx(1 hunks)src/components/common/review-list/review-card-list.stories.tsx(1 hunks)src/components/common/review-list/review-card-list.tsx(1 hunks)src/components/common/skeleton/profile-skeleton/index.tsx(1 hunks)src/mock/review-data.ts(0 hunks)
💤 Files with no reviewable changes (2)
- src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx
- src/mock/review-data.ts
✅ Files skipped from review due to trivial changes (2)
- src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
- src/app/(crew)/crew/detail/[id]/_components/review-section.tsx
🔇 Additional comments (17)
src/components/common/button/button.stories.tsx (1)
8-14: 문서화 개선이 잘 이루어졌습니다!
parameters 섹션의 추가로 컴포넌트의 목적과 스타일이 명확하게 설명되어 있습니다.
src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx (1)
10-16: 문서화가 잘 되어있습니다!
컴포넌트의 용도와 기능이 명확하게 설명되어 있습니다.
src/components/common/profile/profiles.stories.tsx (2)
5-14: 문서화가 잘 되어있습니다! 👍
컴포넌트의 용도와 사용처가 명확하게 설명되어 있으며, 타이틀도 적절하게 수정되었습니다.
27-47: 샘플 데이터의 속성명이 일관되게 적용되었습니다.
imageUrl에서 profileImageUrl로의 변경이 잘 이루어졌습니다.
src/app/(crew)/crew/detail/[id]/page.tsx (2)
Line range hint 1-47: 전반적인 구현이 잘 되어있습니다! 👍
- TypeScript 타입 정의가 명확합니다
- 동적 임포트를 통한 성능 최적화가 잘 되어있습니다
- 반응형 디자인이 적절하게 구현되어 있습니다
- 코드 구조가 깔끔하고 이해하기 쉽습니다
40-40: 마진 값 변경이 레이아웃 일관성에 미치는 영향 검토 필요
마진 값이 변경되었는데, 이는 다른 섹션들과의 간격 일관성에 영향을 미칠 수 있습니다. 특히 GatheringListSection과의 간격을 고려하여 사용자 경험에 부정적인 영향이 없는지 확인해주세요.
✅ Verification successful
마진 값이 다른 섹션들과 일관성을 유지하고 있음을 확인했습니다
검증 결과, 변경된 마진 값(my-7 md:my-11 lg:my-16)은 다음과 같은 이유로 적절합니다:
- 크루 상세 페이지의 다른 섹션들도 동일한 마진 값을 사용하고 있습니다
- 반응형 디자인에 맞춰 모바일, 태블릿, 데스크톱 각각에 대한 마진 값이 체계적으로 적용되어 있습니다
GatheringListSection과의 간격도 일관성 있게 유지되고 있습니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 다른 섹션들의 마진 값을 확인하여 일관성 검증
# 마진 클래스 사용 패턴 검색
rg -A 2 'className=".*m[tby]-[0-9].*"' 'src/app/(crew)'
Length of output: 8425
src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx (1)
Line range hint 1-83: 구현이 잘 되어있습니다!
다음과 같은 긍정적인 부분들이 눈에 띕니다:
- TypeScript 타입 정의가 명확하게 되어있음
- 다양한 시나리오(기본, 높은 평점, 낮은 평점)에 대한 테스트 케이스가 잘 구성되어 있음
- 스토리북 컴포넌트 문서화 규칙을 잘 준수하고 있음
src/components/common/gathering-card/gathering-card.stories.tsx (2)
11-17: 문서화가 잘 되어있습니다! 👍
컴포넌트의 용도와 사용처가 명확하게 설명되어 있습니다.
38-43: 날짜 데이터 형식 검토가 필요합니다.
dateTime 값이 미래 날짜(2024-12-10)로 설정되어 있습니다. 스토리북의 예제 데이터는 현재 시점을 기준으로 하는 것이 좋습니다.
다음 스크립트로 컴포넌트에서 날짜 처리 방식을 확인해보겠습니다:
src/components/common/review-list/review-card-list.stories.tsx (1)
7-14: 문서화가 잘 되어있습니다!
컴포넌트의 용도와 표시되는 정보가 명확하게 설명되어 있습니다.
src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx (1)
59-64: 문서화가 잘 되어있습니다! 👍
컴포넌트의 용도와 반응형 동작이 명확하게 설명되어 있어 좋습니다. 특히 화면 크기에 따른 인터랙션 방식의 차이를 명시한 것이 유용합니다.
src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx (1)
11-12: 문서화가 잘 되어있습니다!
컴포넌트의 목적을 명확하게 설명하는 한글 부제목이 추가되었습니다.
src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx (1)
13-18: 문서화가 잘 되어있습니다! 👍
컴포넌트의 목적과 페이지네이션 동작이 명확하게 설명되어 있습니다.
src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx (4)
8-14: 문서화 개선이 잘 이루어졌습니다! 👍
컴포넌트의 목적과 동작을 명확하게 설명하는 문서가 추가되었습니다. 특히 사용자 역할에 따른 케밥 메뉴의 차이점을 명시한 것이 좋습니다.
33-33: Default 스토리의 데이터가 일관성 있게 업데이트되었습니다.
모든 스토리에서 동일한 테마(스키 모임)로 데이터가 통일되어 있어 좋습니다. 특히:
- 제목과 소개가 스키 테마에 맞게 변경됨
- 참여자 수가 현실적인 값으로 조정됨
- 이미지가 스키와 관련된 이미지로 업데이트됨
Also applies to: 37-37, 38-38, 42-42, 47-47
116-116: IsCaptain 스토리의 데이터 일관성 확인이 필요합니다.
Default 스토리와 동일한 데이터로 업데이트되었으나, crewMembers 배열에는 여전히 'John'이라는 이름이 사용되고 있습니다. Default 스토리에서는 '스키조아'로 변경되었습니다.
데이터의 일관성을 위해 captain의 nickname도 '스키조아'로 변경하는 것이 좋을 것 같습니다.
Also applies to: 120-120, 122-122, 125-125, 126-126
147-147: IsMember 스토리도 동일한 데이터 일관성 검토가 필요합니다.
IsCaptain 스토리와 동일한 이슈가 있습니다. crewMembers 배열의 nickname이 일관성이 없습니다.
captain의 nickname을 '스키조아'로 통일하는 것을 고려해주세요.
Also applies to: 151-151, 153-153, 156-156, 157-157
| // 기본적으로 찜하지 않은 상태 | ||
| export const Default: Story = { | ||
| args: { | ||
| id: 1, | ||
| isLiked: false, // 기본적으로 찜하지 않은 상태 | ||
| isLiked: false, | ||
| }, | ||
| }; | ||
|
|
||
| // 찜한 상태로 시작, 사이즈 작음 | ||
| export const Liked: Story = { | ||
| args: { | ||
| id: 2, | ||
| isLiked: true, // 찜한 상태로 시작 | ||
| isLiked: true, | ||
| size: 32, | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
스토리 테스트 케이스 보완이 필요합니다.
현재 기본 상태와 찜한 상태의 스토리만 정의되어 있습니다. 다양한 사이즈와 상호작용 테스트 케이스를 추가하면 좋을 것 같습니다.
다음과 같은 테스트 케이스 추가를 제안드립니다:
// 작은 사이즈 (찜하지 않은 상태)
export const SmallSize: Story = {
args: {
id: 3,
isLiked: false,
size: 24,
},
};
// 큰 사이즈 (찜한 상태)
export const LargeSize: Story = {
args: {
id: 4,
isLiked: true,
size: 48,
},
};
// 클릭 이벤트 테스트를 위한 스토리
export const WithClickHandler: Story = {
args: {
id: 5,
isLiked: false,
},
play: async ({ canvasElement }) => {
// 클릭 이벤트 테스트 로직 추가
},
};| id: 7, | ||
| rate: 3, | ||
| comment: '사람이 너무 많아요', | ||
| createdAt: '2024-10-31T00:56', |
There was a problem hiding this comment.
날짜 형식의 일관성이 필요합니다
다른 리뷰들은 2024-10-31T10:09:12.306+09:00 형식을 사용하는데, 이 리뷰만 2024-10-31T00:56 형식을 사용하고 있습니다.
- createdAt: '2024-10-31T00:56',
+ createdAt: '2024-10-31T00:56:00.000+09:00',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| createdAt: '2024-10-31T00:56', | |
| createdAt: '2024-10-31T00:56:00.000+09:00', |
| dateTime: '2024-12-10T08:00:00.000', | ||
| location: '서울 강남구 삼성동', | ||
| currentCount: 1, | ||
| totalCount: 5, | ||
| imageUrl: | ||
| 'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f', | ||
| imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg', |
There was a problem hiding this comment.
💡 Codebase verification
프로젝트 내부의 샘플 이미지로 교체가 필요합니다
프로젝트에 이미 /public/assets/images 경로에 적절한 샘플 이미지들이 준비되어 있습니다:
/public/assets/images/crew-sample/crew-sample-[1-3].jpg/public/assets/images/gathering-sample/gathering-sample-[1-3].jpg
스토리북 테스트용으로 이러한 내부 이미지들을 사용하면 다음과 같은 장점이 있습니다:
- 안정적인 테스트 환경 보장
- 라이센스 문제 해결
- 빠른 로딩 속도
- 오프라인 개발 환경 지원
아래 파일들의 Pinterest 이미지 URL을 프로젝트 내부 이미지로 교체해주세요:
src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsxsrc/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsxsrc/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsxsrc/components/common/gathering-card/gathering-card.stories.tsxsrc/components/common/profile/Profile.stories.tsxsrc/components/common/profile/profiles.stories.tsx
🔗 Analysis chain
이미지 URL을 프로젝트 내부 리소스로 변경하는 것이 좋겠습니다.
현재 Pinterest의 이미지 URL을 사용하고 있는데, 이는 다음과 같은 문제가 있을 수 있습니다:
- 외부 의존성으로 인한 테스트 불안정성
- 이미지 접근성 문제 가능성
- 라이센스 문제 가능성
프로젝트 내부의 목업 이미지를 사용하거나 안정적인 테스트용 이미지 서비스(예: picsum.photos)를 사용하는 것을 추천드립니다.
Also applies to: 74-74, 83-83, 101-101, 110-110, 119-119, 128-128, 137-137
Let me verify if there are any local assets or mock images in the project that could be used instead of Pinterest URLs.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 이미지 URL 접근성 확인
for url in $(rg -o 'https://i\.pinimg\.com/[^ "]*' | sort -u); do
echo "Checking $url"
curl -sI "$url" | head -n1
done
Length of output: 8896
Script:
#!/bin/bash
# Check for image assets in the project
fd -e jpg -e jpeg -e png -e gif -e webp
# Check if there's a mock or test data directory
fd -t d "(mock|test|fixture|asset|public)"
Length of output: 926
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/components/common/profile/Profile.stories.tsx (2)
9-14: 문서화 개선을 위한 제안컴포넌트 문서화가 잘 되어있지만, 다음 사항들을 추가하면 더욱 완성도 높은 문서가 될 것 같습니다:
- 각 size 옵션(
small,header,large,full)별 사용 사례editable속성이 true일 때의 동작 방식imageUrl속성의 권장 이미지 크기나 형식docs: { subtitle: '프로필 이미지를 나타냅니다.', description: { - component: '사이즈별 기본 프로필 이미지, 편집가능한 경우가 있습니다.', + component: '사이즈별 기본 프로필 이미지를 표시하는 컴포넌트입니다.\n\n' + + '### 사이즈 옵션\n' + + '- small: 작은 프로필 (예: 댓글)\n' + + '- header: 헤더용 프로필\n' + + '- large: 큰 프로필 (예: 프로필 페이지)\n' + + '- full: 전체 크기 프로필\n\n' + + '### 편집 기능\n' + + '`editable` 속성이 true일 경우 이미지 업로드/변경이 가능합니다.\n\n' + + '### 이미지 가이드라인\n' + + '- 권장 크기: 500x500px\n' + + '- 지원 형식: JPG, PNG', }, },
Line range hint
19-27: 스토리북 구성 개선 제안현재 구성은 잘 되어있지만, 다음과 같은 개선사항들을 고려해보시면 좋을 것 같습니다:
- 접근성 테스트를 위한 설정 추가
- argTypes의 체계적인 그룹화
argTypes: { + // 크기 설정 size: { control: { type: 'select' }, options: ['small', 'header', 'large', 'full'], + description: '프로필 이미지의 크기를 설정합니다', + table: { + category: '표시 옵션', + }, }, + // 이미지 설정 imageUrl: { - control: 'text' + control: 'text', + description: '프로필 이미지 URL', + table: { + category: '데이터', + }, }, + // 기능 설정 editable: { - control: 'boolean' + control: 'boolean', + description: '이미지 편집 가능 여부', + table: { + category: '기능', + }, }, onClick: { action: 'clicked' }, }, + parameters: { + ...parameters, + a11y: { + config: { + rules: [ + { + id: 'image-alt', + enabled: true, + }, + ], + }, + }, + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/components/common/button/like-btn.stories.tsx(1 hunks)src/components/common/profile/Profile.stories.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/common/button/like-btn.stories.tsx
🔖 Issue Ticket
#168
✍️ Description
✅ Checklist
PR
Test
Summary by CodeRabbit
릴리스 노트
새로운 기능
LikedList와ReviewCardList컴포넌트의 비어있는 상태에 대한 사용자 인터페이스가 개선되었습니다.ProfileCard에서 사용자 데이터 로딩 상태에 대한 피드백이 향상되었습니다.버그 수정
GatheringListSection에서 모임이 없을 때의 메시지 표시 방식이 개선되었습니다.문서화
스타일