[Feat] 리뷰/응원한 스토리 없을 때 보이는 페이지 구현 #76
Conversation
dbstj0403
added
Feat
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough이 변경사항은 "리뷰"와 "응원" 섹션에 빈 상태일 때를 위한 조건부 렌더링을 도입합니다. 데이터 배열이 비어 있거나 정의되지 않은 경우, 리스트 대신 플레이스홀더 UI와 안내 메시지를 표시합니다. 또한, 관련 SVG 이미지 임포트와 헤더 컨테이너에 마진이 추가되었습니다. Changes
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 0
🔭 Outside diff range comments (1)
src/pages/myPageDetail/MyPageDetailPage.jsx (1)
39-47: 🛠️ Refactor suggestion"찜" 섹션에도 빈 상태 처리가 필요합니다.
"리뷰"와 "응원" 섹션에는 빈 상태 처리가 구현되었지만, "찜" 섹션에는 구현되지 않았습니다. 일관성을 위해 "찜" 섹션에도 동일한 패턴을 적용하세요.
다음과 같이 "찜" 섹션에도 조건부 렌더링을 추가하세요:
{kind === "찜" && ( <div className="flex justify-between items-center px-5"> <div className="flex gap-2 items-center"> <img src={heart} className="w-8 h-8" /> <p className="h3">저장한 장소</p> </div> - <p className="b5 text-gray-9">총 0개</p> + <p className="b5 text-gray-9">총 {heartsData?.length || 0}개</p> </div> )} // 그리고 이 부분에 heartsData에 대한 조건부 렌더링 추가 {kind === "찜" && ( {heartsData?.length > 0 ? ( heartsData.map((item) => ( // 해당 데이터를 표시하는 컴포넌트 )) ) : ( <div className="flex flex-col justify-center items-center mt-36"> <img src={noResult} /> <p className="h4 text-gray-9 text-center py-8"> 아직 저장한 장소가 <br /> 없어요 </p> </div> )} )}
🧹 Nitpick comments (4)
src/pages/myPageDetail/MyPageDetailPage.jsx (4)
62-74: 리뷰 섹션의 빈 상태 처리 구현 완료.리뷰 데이터가 없을 때 사용자에게 적절한 피드백을 제공하는 조건부 렌더링이 잘 구현되었습니다.
Fragment가 불필요하게 사용되고 있습니다. 다음과 같이 Fragment를 제거하세요:
{kind === "리뷰" && ( - <> {reviewsData?.length > 0 ? ( reviewsData.map((item, idx) => ( <ReviewItem data={item} key={idx} /> )) ) : ( <div className="flex flex-col justify-center items-center mt-36"> <img src={noResult} /> <p className="h4 text-gray-9 text-center py-8"> 아직 작성한 리뷰가 <br /> 없어요 </p> </div> )} - </> )}
78-94: 응원 섹션의 빈 상태 처리 구현 완료.응원 데이터가 없을 때 사용자에게 적절한 피드백을 제공하는 조건부 렌더링이 잘 구현되었습니다.
Fragment가 불필요하게 사용되고 있습니다. 다음과 같이 Fragment를 제거하세요:
{kind === "응원" && ( - <> {cheersData?.length > 0 ? ( cheersData.map((item) => ( <StoryItem item={item} key={item.storyId} /> )) ) : ( <div className="flex flex-col justify-center items-center mt-36"> <img src={noResult} /> <p className="h4 text-gray-9 text-center py-8"> 아직 응원한 이야기가 <br /> 없어요 </p> </div> )} - </> )}
62-94: 반복되는 코드 패턴을 컴포넌트로 분리하세요."리뷰"와 "응원" 섹션에서 빈 상태 UI가 반복되고 있습니다. 코드 재사용성과 유지보수를 위해 이 부분을 별도의 컴포넌트로 추출하는 것이 좋습니다.
다음과 같이 빈 상태를 위한 컴포넌트를 생성하고 사용하세요:
// EmptyState 컴포넌트 추가 const EmptyState = ({ message }) => ( <div className="flex flex-col justify-center items-center mt-36"> <img src={noResult} /> <p className="h4 text-gray-9 text-center py-8"> {message} <br /> 없어요 </p> </div> ); // 리뷰 섹션에서 사용 {kind === "리뷰" && ( {reviewsData?.length > 0 ? ( reviewsData.map((item, idx) => ( <ReviewItem data={item} key={idx} /> )) ) : ( <EmptyState message="아직 작성한 리뷰가" /> )} )} // 응원 섹션에서 사용 {kind === "응원" && ( {cheersData?.length > 0 ? ( cheersData.map((item) => ( <StoryItem item={item} key={item.storyId} /> )) ) : ( <EmptyState message="아직 응원한 이야기가" /> )} )}🧰 Tools
🪛 Biome (1.9.4)
[error] 63-81: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
62-65: 인덱스 기반 키 사용을 재검토하세요.
reviewsData배열을 렌더링할 때 배열 인덱스를 키로 사용하고 있습니다. 가능하다면, 아이템의 고유 식별자(ID)를 키로 사용하는 것이 React의 재조정 메커니즘에 더 적합합니다.
reviewsData객체에 고유 ID가 있다면 다음과 같이 변경하세요:-reviewsData.map((item, idx) => ( - <ReviewItem data={item} key={idx} /> +reviewsData.map((item) => ( + <ReviewItem data={item} key={item.id} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/myPageDetail/MyPageDetailPage.jsx(3 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/pages/myPageDetail/MyPageDetailPage.jsx
[error] 63-81: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
🔇 Additional comments (2)
src/pages/myPageDetail/MyPageDetailPage.jsx (2)
8-8: SVG 가져오기 구현 완료.빈 상태 UI를 위한 noResult SVG 파일을 성공적으로 가져왔습니다.
31-31: 마진 추가로 레이아웃 개선.헤더 컨테이너에 수직 마진(my-2)을 추가하여 시각적 간격이 개선되었습니다.
shroqkf
changed the title
🌟 어떤 이유로 MR를 하셨나요?
📝 세부 내용 - 왜 해당 MR이 필요한지 작업 내용을 자세하게 설명해주세요
📸 작업 화면 스크린샷
X