유저페이지 카테고리 분리, 공지사항 상세 인피티니 삭제, FAQ 더보기 애니메이션 추가 (#isseu 302) #304
Conversation
|
""" Walkthrough이번 변경에서는 userPage의 프로젝트 관련 기능이 개선되었습니다. 참여한 프로젝트와 기획한 프로젝트를 별도의 API로 분리하여 각각 조회하도록 수정되었고, 이에 따라 UI와 라우트, 관련 컴포넌트 및 타입 정의가 업데이트되었습니다. 공지사항 디테일 데이터의 staleTime, gcTime 옵션도 제거되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UserPage
participant UserProjects
participant useGetUserProjectList
participant API
User->>UserPage: 메뉴에서 '참여 프로젝트' 또는 '기획 프로젝트' 선택
UserPage->>UserProjects: 해당 경로로 이동
UserProjects->>useGetUserProjectList: 프로젝트 종류(참여/기획) 및 userId 전달
useGetUserProjectList->>API: getUserJoinedProjectList 또는 getUserManagedProjectList 호출
API-->>useGetUserProjectList: 프로젝트 리스트 반환
useGetUserProjectList-->>UserProjects: 데이터, 로딩 상태, 타이틀 반환
UserProjects-->>User: 프로젝트 리스트 렌더링
Assessment against linked issues
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
npm warn config production Use 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ 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: 1
🧹 Nitpick comments (3)
src/pages/user/customerService/faq/FAQ.styled.ts (1)
41-62: 애니메이션 효과가 적절하게 구현되었습니다.ShowMoreSpan 컴포넌트에 bounce 애니메이션을 추가한 방식이 잘 구현되었습니다. 몇 가지 의견을 드리자면:
- 애니메이션 속도(0.4s)와 변위(-3px)가 적절합니다. 과도하지 않고 사용자 경험에 도움이 될 것 같습니다.
- keyframes를 분리하여 재사용 가능하게 만드는 것도 고려해볼 수 있습니다.
keyframes를 분리하여 재사용성을 높이는 방법도 고려해볼 수 있습니다:
+const bounceAnimation = keyframes` + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-3px); + } + 100% { + transform: translateY(0); + } +`; export const ShowMoreSpan = styled.span` width: 100%; padding: 1.2rem 0; display: flex; justify-content: center; gap: 0.5rem; - @keyframes bounce { - 0% { - transform: translateY(0); - } - 50% { - transform: translateY(-3px); - } - 100% { - transform: translateY(0); - } - } &:hover { - animation: bounce 0.4s infinite; + animation: ${bounceAnimation} 0.4s infinite; } `;src/hooks/user/useGetUserProjectList.ts (1)
10-17: 조건부 분기 로직 간소화 가능합니다.현재 코드는 분기 처리가 잘 되어 있지만, 불필요한 삼항 연산자 사용이 있습니다.
다음과 같이 간소화할 수 있습니다:
- const isJoinedPage = location.pathname.includes('joined') ? true : false; + const isJoinedPage = location.pathname.includes('joined');🧰 Tools
🪛 Biome (1.9.4)
[error] 13-13: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
src/components/user/userPage/userProjectList/UserProjectList.tsx (1)
27-35: 불필요한 옵셔널 체이닝이 있습니다.이미 24번 줄에서
userProjectData && userProjectData.length > 0조건을 확인했기 때문에 27번 줄의userProjectData?.map옵셔널 체이닝은 불필요합니다.- {userProjectData?.map((project) => ( + {userProjectData.map((project) => (
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/api/userpage.api.ts(3 hunks)src/components/user/userPage/joinedProject/UserJoinProject.tsx(0 hunks)src/components/user/userPage/userProjectList/UserProjectList.tsx(1 hunks)src/constants/user/routes.ts(1 hunks)src/hooks/queries/user/keys.ts(1 hunks)src/hooks/user/useGetNoticeDetail.ts(0 hunks)src/hooks/user/useGetUserProjectList.ts(1 hunks)src/hooks/user/useUserInfo.ts(1 hunks)src/models/userProject.ts(1 hunks)src/pages/user/customerService/faq/FAQ.styled.ts(1 hunks)src/pages/user/customerService/faq/FAQ.tsx(1 hunks)src/pages/user/mypage/MyPage.tsx(1 hunks)src/pages/user/userpage/UserPage.tsx(1 hunks)src/routes/AppRoutes.tsx(3 hunks)
💤 Files with no reviewable changes (2)
- src/hooks/user/useGetNoticeDetail.ts
- src/components/user/userPage/joinedProject/UserJoinProject.tsx
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/pages/user/mypage/MyPage.tsx (1)
src/constants/user/routes.ts (1)
ROUTES(1-32)
src/models/userProject.ts (1)
src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/pages/user/userpage/UserPage.tsx (1)
src/constants/user/routes.ts (1)
ROUTES(1-32)
src/hooks/user/useGetUserProjectList.ts (3)
src/models/userProject.ts (1)
ApiUserProject(28-30)src/hooks/queries/user/keys.ts (1)
userInfoKey(16-20)src/api/userpage.api.ts (2)
getUserJoinedProjectList(16-27)getUserManagedProjectList(29-40)
src/components/user/userPage/userProjectList/UserProjectList.tsx (4)
src/hooks/user/useGetUserProjectList.ts (1)
useGetUserProjectList(10-27)src/components/common/loadingSpinner/LoadingSpinner.styled.ts (1)
Spinner(21-28)src/constants/user/routes.ts (1)
ROUTES(1-32)src/components/common/noContent/NoContent.tsx (1)
NoContent(14-30)
src/api/userpage.api.ts (2)
src/api/http.api.ts (1)
httpClient(78-78)src/models/userProject.ts (1)
ApiUserProject(28-30)
🪛 Biome (1.9.4)
src/hooks/user/useGetUserProjectList.ts
[error] 13-13: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
🔇 Additional comments (22)
src/pages/user/customerService/faq/FAQ.tsx (1)
60-63: 더보기 버튼에 애니메이션 처리가 잘 적용되었습니다.ShowMoreSpan 컴포넌트로 텍스트와 아이콘을 감싸서 호버 시 애니메이션 효과를 적용한 접근 방식이 좋습니다. 사용자 경험이 향상될 것으로 보입니다.
src/hooks/queries/user/keys.ts (1)
19-19: 새 쿼리 키 추가가 적절합니다.
userManagedList키 추가는 유저가 관리하는 프로젝트 목록을 가져오는 기능을 지원하는 변경사항입니다. 이는 PR의 목적인 유저 페이지 카테고리 분리와 잘 일치합니다.src/pages/user/mypage/MyPage.tsx (1)
23-23: 경로 업데이트가 올바르게 적용되었습니다.기존
mypageJoinedProjects대신joinedProjects로 경로 키가 변경되었습니다. 이는src/constants/user/routes.ts의 변경사항과 일치하며, 전체 애플리케이션에서 일관된 라우팅 네이밍 컨벤션을 유지합니다.src/hooks/user/useUserInfo.ts (1)
5-5: API 임포트 경로가 적절합니다.
getUserInfo함수 임포트가 명확하게 되어 있습니다.useUserJoinedProjectList훅이 제거된 것은 프로젝트 관련 데이터 가져오기에 대한 리팩토링의 일부로서 적절합니다.src/pages/user/userpage/UserPage.tsx (2)
19-22: 참여 프로젝트 메뉴 경로가 올바르게 업데이트 되었습니다.
ROUTES.userJoinedProject대신ROUTES.joinedProjects를 사용하도록 경로가 올바르게 변경되었습니다. 이는 전체 애플리케이션의 라우팅 네이밍 컨벤션과 일치합니다.
23-26: 기획 프로젝트 메뉴 추가가 적절합니다.유저 페이지에 기획 프로젝트 메뉴가 추가되어 카테고리 분리가 완성되었습니다. 아이콘과 경로 설정이 참여 프로젝트 메뉴와 일관성 있게 구성되어 있습니다.
src/models/userProject.ts (1)
28-30: 새로운 인터페이스 추가가 잘 되었습니다.
ApiUserProject인터페이스가 추가되어 사용자 프로젝트 데이터를 더 단순한 구조로 표현하고 있습니다. 이를 통해 참여한 프로젝트와 기획한 프로젝트를 일관된 방식으로 처리할 수 있게 되었습니다.src/api/userpage.api.ts (3)
2-2: 타입 임포트 업데이트가 적절합니다.이전
ApiSelectUserProject대신 새로운ApiUserProject타입을 임포트하여 코드 일관성을 유지했습니다.
18-19: API 엔드포인트 변경이 잘 이루어졌습니다.참여한 프로젝트 목록을 가져오는 엔드포인트가
/user/${id}/project에서 더 명확한/user/${id}/participated로 변경되었습니다. 이는 사용자 프로젝트 분리 개념과 잘 맞습니다.
29-40: 새로운 API 함수 추가가 적절합니다.기획한 프로젝트 목록을 가져오는
getUserManagedProjectList함수가 추가되었습니다. 에러 처리와 로깅이 일관되게 구현되었고, 기존 API 패턴을 잘 따르고 있습니다.src/hooks/user/useGetUserProjectList.ts (3)
1-9: 임포트 구성이 적절합니다.필요한 모든 의존성을 가져오고 있으며, 임포트 그룹화가 잘 되어 있습니다.
18-24: 쿼리 키 설정이 적절하지 않을 수 있습니다.쿼리 키에
userInfoKey.userManagedList를 사용하고 있지만,isJoinedPage가true일 때는 조인된 프로젝트를 가져옵니다. 조인된 프로젝트와 관리된 프로젝트에 대해 서로 다른 쿼리 키를 사용하는 것이 더 정확할 수 있습니다.다음과 같이 수정하여 케이스별로 정확한 쿼리 키를 사용하는 것이 좋습니다:
const { data, isLoading } = useQuery<ApiUserProject>({ - queryKey: [userInfoKey.userManagedList, userId, isJoinedPage], + queryKey: [ + isJoinedPage + ? userInfoKey.userJoinedList + : userInfoKey.userManagedList, + userId + ], queryFn: () => isJoinedPage ? getUserJoinedProjectList(Number(userId)) : getUserManagedProjectList(Number(userId)), });
25-27: 반환 구조가 잘 정의되어 있습니다.필요한 데이터, 로딩 상태, 그리고 제목을 적절히 반환하고 있어 컴포넌트에서 쉽게 사용할 수 있습니다.
src/constants/user/routes.ts (1)
14-15: 경로 상수명 변경이 일관성 있게 적용되었습니다.
joinedProjects와managedProjects로 경로 상수명이 변경되어 전체 PR의 목적인 사용자 페이지 카테고리 분리와 일치합니다. 이는 UI 컴포넌트와 API 호출 분리에도 반영되었습니다.src/components/user/userPage/userProjectList/UserProjectList.tsx (4)
1-8: 코드 가져오기 및 구성이 명확합니다.모든 필요한 컴포넌트와 훅들이 적절하게 가져와져 있습니다. 마이페이지의 스타일 컴포넌트를 재사용하는 것은 일관성 측면에서 좋은 접근입니다.
10-12: 훅 사용이 적절합니다.
useGetUserProjectList훅을 통해 경로에 따라 적절한 프로젝트 데이터를 가져오는 방식이 효율적입니다. 구조 분해 할당으로 필요한 데이터를 명확하게 추출하고 있습니다.
13-16: 로딩 상태 처리가 잘 되어 있습니다.데이터 로딩 중에는 스피너를 표시하여 사용자에게 시각적 피드백을 제공하는 좋은 UX 패턴입니다.
19-42: 프로젝트 목록 표시 로직이 잘 구현되어 있습니다.프로젝트 데이터 존재 여부에 따라 적절히 다른 UI를 렌더링하는 조건부 렌더링이 잘 적용되어 있습니다. 빈 목록일 경우
NoContent컴포넌트를 표시하여 사용자에게 적절한 피드백을 제공합니다.src/routes/AppRoutes.tsx (4)
95-97: 새 컴포넌트 임포트가 적절하게 추가되었습니다.기존의 분리된 컴포넌트를 통합된
UserProjects컴포넌트로 대체하는 좋은 리팩토링입니다. 레이지 로딩 패턴을 유지하여 성능 최적화를 고려했습니다.
269-270: 경로 상수 업데이트가 일관성 있게 적용되었습니다.마이페이지의 경로가
ROUTES.joinedProjects로 업데이트되어 전체 애플리케이션에서 경로 네이밍이 일관되게 유지됩니다.
325-331: 사용자 페이지에 분리된 카테고리 라우트가 잘 구현되었습니다.이제 사용자 페이지에서 참여한 프로젝트와 기획한 프로젝트를 별도의 라우트로 구분하면서도 동일한
UserProjects컴포넌트를 재사용하는 좋은 구조입니다. 이는 코드 중복을 줄이고 유지보수성을 높입니다.
245-332: 경로 구조와 접근 제어가 잘 구현되었습니다.사용자 페이지와 마이페이지 모두
ProtectRoute를 통해 인증된 사용자만 접근할 수 있도록 하고, 중첩된 라우트를 통해 관련 기능을 논리적으로 그룹화하여 사용자 경험과 코드 구조가 개선되었습니다.
src/components/user/userPage/userProjectList/UserProjectList.tsx
Outdated
Show resolved
Hide resolved
YouD0313
changed the title
구현내용
유저페이지 카테고리 분리, ui 수정 공통 컴포넌트 사용 커스텀훅 조건문 분기처리하여 api 사용
공지사항 상세보기에 조회수 기능을 위해 인피니티 삭제
FAQ 더보기 버튼에서 더보기 문구가 움직이는 애니메이션 추가
연관이슈
close #302
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터
기타