♻️ Refactor: my-review의 탭 동작 수정 #144
Conversation
Walkthrough이번 변경사항은 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/app/(crew)/my-page/_components/review-tabs.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't determine the plugin "react-hooks" uniquely.
Please remove the "plugins" setting from either config or remove either plugin installation. If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🪛 Biomesrc/app/(crew)/my-page/_components/review-tabs.tsx[error] 25-28: The catch clause that only rethrows the original error is useless. An unnecessary catch clause can be confusing. (lint/complexity/noUselessCatch) 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: 2
🧹 Outside diff range and nitpick comments (6)
src/app/(crew)/my-page/page.tsx (1)
1-1: 'use client' 지시문이 필요한지 검토가 필요합니다.리다이렉션만 수행하는 컴포넌트의 경우 서버 컴포넌트로 구현하는 것이 더 효율적일 수 있습니다. Next.js의 서버 컴포넌트에서도 리다이렉션이 가능합니다.
다음과 같이 변경을 고려해보세요:
-'use client'; - -import { redirect } from 'next/navigation'; +import { redirect } from 'next/navigation'; export default function MyPage() { redirect('/my-page/reviewable'); }src/app/(crew)/my-page/layout.tsx (3)
1-2: 일관된 import 경로 스타일 사용 권장현재 import 문에서 절대 경로와 상대 경로가 혼용되고 있습니다. 코드의 일관성과 유지보수를 위해 동일한 스타일의 경로를 사용하는 것이 좋습니다.
다음과 같이 수정하는 것을 제안드립니다:
import ProfileCardContainer from '@/src/app/(crew)/my-page/_components/profile-card/container'; -import ReviewTabs from './_components/review-tabs'; +import ReviewTabs from '@/src/app/(crew)/my-page/_components/review-tabs';
11-11: 불필요한 빈 div 요소 제거목적이 없는 빈 div 요소가 있습니다. 레이아웃이나 스타일링에 필요하지 않다면 제거하는 것이 좋습니다.
- <div />
4-14: 컴포넌트 개선 제안다음 사항들을 고려해보시면 좋을 것 같습니다:
- 에러 바운더리 추가로 컴포넌트 실패 처리
- 로딩 상태 처리 추가
- 반복되는 Tailwind 클래스를 상수나 컴포넌트로 추출
에러 바운더리 예시:
import { ErrorBoundary } from 'react-error-boundary'; export default function MyPage() { return ( <ErrorBoundary fallback={<ErrorFallback />}> <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11"> {/* ... */} </div> </ErrorBoundary> ); }src/app/(crew)/my-page/_components/review-tabs.tsx (2)
9-13: 탭 설정을 상수 파일로 분리하는 것을 고려해보세요.탭 설정을 별도의 상수 파일로 분리하면 다음과 같은 이점이 있습니다:
- 설정의 재사용성 향상
- 유지보수성 개선
- 설정 변경 시 중앙 관리 가능
+ // src/constants/tabs.ts + export const MY_PAGE_TABS = [ + { label: '작성 가능한 리뷰', id: 'available-review', route: '/my-page/reviewable' }, + { label: '작성한 리뷰', id: 'my-review', route: '/my-page/my-review' }, + ] as const; - const myPageTabs = [ - { label: '작성 가능한 리뷰', id: 'available-review', route: '/my-page/reviewable' }, - { label: '작성한 리뷰', id: 'my-review', route: '/my-page/my-review' }, - ]; + const myPageTabs = MY_PAGE_TABS;
24-44: 무한 스크롤 구현 계획을 이슈로 트래킹하면 좋겠습니다.주석 처리된 무한 스크롤 구현 코드가 있습니다. 이 기능의 구현 계획을 GitHub 이슈로 생성하여 트래킹하는 것이 좋겠습니다.
이슈 생성을 도와드릴까요? 다음과 같은 내용으로 이슈를 만들 수 있습니다:
- 제목: "리뷰 탭에 무한 스크롤 기능 구현"
- 설명: 구현해야 할 기능 명세와 참고 사항
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
src/app/(crew)/my-page/_components/review-section.tsx(0 hunks)src/app/(crew)/my-page/_components/review-tabs.tsx(1 hunks)src/app/(crew)/my-page/layout.tsx(1 hunks)src/app/(crew)/my-page/my-review/page.tsx(1 hunks)src/app/(crew)/my-page/page.tsx(1 hunks)src/app/(crew)/my-page/reviewable/page.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/(crew)/my-page/_components/review-section.tsx
✅ Files skipped from review due to trivial changes (2)
- src/app/(crew)/my-page/my-review/page.tsx
- src/app/(crew)/my-page/reviewable/page.tsx
🔇 Additional comments (2)
src/app/(crew)/my-page/page.tsx (1)
6-6: 즉시 리다이렉션의 사용자 경험 검토가 필요합니다.
사용자가 /my-page로 직접 접근했을 때 즉시 리다이렉션되는 것이 혼란을 줄 수 있습니다.
다음 사항들을 확인해주세요:
- SEO에 미치는 영향
- 브라우저 히스토리 관리
- 사용자에게 리다이렉션 이유를 설명하는 UI 필요 여부
다음과 같은 대안을 고려해보세요:
- 메인 페이지에서 기본 컨텐츠를 표시하고 탭 네비게이션을 통해 이동하게 하기
- 리다이렉션 전에 로딩 상태나 안내 메시지 표시하기
src/app/(crew)/my-page/_components/review-tabs.tsx (1)
1-7: 필요한 의존성들이 올바르게 임포트되었습니다!
클라이언트 컴포넌트 지시문과 필요한 훅들이 적절하게 임포트되어 있습니다.
| const handleTabClick = (id: string) => { | ||
| setCurrentTab(id); | ||
|
|
||
| const selectedTab = myPageTabs.find((tab) => tab.id === id); | ||
| if (selectedTab?.route) { | ||
| router.push(selectedTab.route); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
라우팅 에러 처리를 추가하는 것이 좋겠습니다.
현재 라우팅 실패에 대한 에러 처리가 없습니다. 사용자 경험 향상을 위해 에러 처리를 추가하는 것을 추천드립니다.
const handleTabClick = (id: string) => {
setCurrentTab(id);
const selectedTab = myPageTabs.find((tab) => tab.id === id);
if (selectedTab?.route) {
- router.push(selectedTab.route);
+ try {
+ router.push(selectedTab.route);
+ } catch (error) {
+ console.error('탭 이동 중 오류가 발생했습니다:', error);
+ // TODO: 사용자에게 에러 알림 표시
+ }
}
};Committable suggestion skipped: line range outside the PR's diff.
| return ( | ||
| <div className="mt-12 flex flex-col"> | ||
| <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3> | ||
| <Divider mt={16} mb={24} size={2} /> | ||
| <div className="flex justify-start"> | ||
| <Tabs | ||
| variant="review" | ||
| tabs={myPageTabs} | ||
| activeTab={currentTab} | ||
| onTabClick={handleTabClick} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 개선을 위한 aria 속성 추가가 필요합니다.
스크린 리더 사용자를 위해 탭 컴포넌트에 적절한 aria 레이블을 추가하면 좋겠습니다.
<div className="mt-12 flex flex-col">
- <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3>
+ <h3 className="text-2xl font-semibold text-gray-900" id="review-section-title">나의 리뷰 모아보기</h3>
<Divider mt={16} mb={24} size={2} />
- <div className="flex justify-start">
+ <div className="flex justify-start" role="tablist" aria-labelledby="review-section-title">
<Tabs
variant="review"
tabs={myPageTabs}
activeTab={currentTab}
onTabClick={handleTabClick}
+ aria-label="리뷰 탭 네비게이션"
/>
</div>
</div>📝 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.
| return ( | |
| <div className="mt-12 flex flex-col"> | |
| <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3> | |
| <Divider mt={16} mb={24} size={2} /> | |
| <div className="flex justify-start"> | |
| <Tabs | |
| variant="review" | |
| tabs={myPageTabs} | |
| activeTab={currentTab} | |
| onTabClick={handleTabClick} | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="mt-12 flex flex-col"> | |
| <h3 className="text-2xl font-semibold text-gray-900" id="review-section-title">나의 리뷰 모아보기</h3> | |
| <Divider mt={16} mb={24} size={2} /> | |
| <div className="flex justify-start" role="tablist" aria-labelledby="review-section-title"> | |
| <Tabs | |
| variant="review" | |
| tabs={myPageTabs} | |
| activeTab={currentTab} | |
| onTabClick={handleTabClick} | |
| aria-label="리뷰 탭 네비게이션" | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } |
🔖 Issue Ticket
Ticket
✍️ Description
마이 페이지의 ReviewSection 컴포넌트를 ReviewTabs로 수정하고
my-page 폴더 아래에 각 탭마다 라우팅 될 reviewable과 my-review 폴더를 만들었습니다.
✅ Checklist
PR
Test
Summary by CodeRabbit
ReviewTabs컴포넌트 추가: 사용자 리뷰 및 작성 가능한 모임을 위한 탭 인터페이스 제공.MyPage레이아웃 컴포넌트 추가: 사용자 프로필 및 리뷰 탭을 포함하는 구조화된 레이아웃 제공.MyReviewPage및ReviewableGatheringsPage컴포넌트 추가: 각각 '내 리뷰 목록' 및 '작성 가능한 모임 목록' 표시.ReviewSection컴포넌트 제거: 리뷰 표시 및 작성 기능 제거.MyPage컴포넌트 수정: UI 요소 렌더링에서/my-page/reviewable로 리디렉션으로 변경.