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 (
|
|
๐storybook: https://67206cc6ff9d7a05a3528ff8-hxbhgwwnma.chromatic.com/ |
![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', |
| 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
|
๐storybook: https://67206cc6ff9d7a05a3528ff8-wssqfnetjh.chromatic.com/ |
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
yulrang
left a comment
yulrang
left a comment
There was a problem hiding this comment.
๊ณ ์๋ง์ผ์ จ์ต๋๋ค ใ ใ
minkyung5x5
left a comment
minkyung5x5
left a comment
There was a problem hiding this comment.
์ด์ ๋งํฌ์๋ฌ์๋ ์๋์ผ๋ก ๋๋ ๊ฑฐ ์ด์ ์์์ด์......์๊ณ ํ์ จ์ต๋๋ค!!!
|
๐storybook: https://67206cc6ff9d7a05a3528ff8-stvxbygcab.chromatic.com/ |
|
๐storybook: https://67206cc6ff9d7a05a3528ff8-umvoavjtqi.chromatic.com/ |
๐ Issue Ticket
#168
โ๏ธ Description
โ Checklist
PR
Test
Summary by CodeRabbit
๋ฆด๋ฆฌ์ค ๋ ธํธ
์๋ก์ด ๊ธฐ๋ฅ
LikedList์ReviewCardList์ปดํฌ๋ํธ์ ๋น์ด์๋ ์ํ์ ๋ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๊ฐ ๊ฐ์ ๋์์ต๋๋ค.ProfileCard์์ ์ฌ์ฉ์ ๋ฐ์ดํฐ ๋ก๋ฉ ์ํ์ ๋ํ ํผ๋๋ฐฑ์ด ํฅ์๋์์ต๋๋ค.๋ฒ๊ทธ ์์
GatheringListSection์์ ๋ชจ์์ด ์์ ๋์ ๋ฉ์์ง ํ์ ๋ฐฉ์์ด ๊ฐ์ ๋์์ต๋๋ค.๋ฌธ์ํ
์คํ์ผ