내가 참여한/생성한 프로젝트에 평가하기 링크 추가 ( issue feat/#309 ) #312
Conversation
|
""" Walkthrough이 변경사항은 "참여한/생성한" 프로젝트 카드에 평가하기 버튼을 조건부로 노출하고, 평가 페이지에서 평가할 멤버가 없을 경우 모달을 띄운 후 이전 페이지로 이동하는 기능을 추가합니다. 관련 스타일, 모델, 상수, 훅, 페이지 컴포넌트가 수정 및 확장되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectCard
participant EvaluationPage
participant useGetCompletedEvaluation
participant Modal
User->>ProjectCard: 프로젝트 카드 조회
ProjectCard-->>User: canEvaluate가 true면 평가하기 버튼 노출
User->>EvaluationPage: 평가하기 버튼 클릭
EvaluationPage->>useGetCompletedEvaluation: 평가 대상 데이터 요청
useGetCompletedEvaluation-->>EvaluationPage: 평가 대상 데이터 반환
alt 평가 대상 없음
EvaluationPage->>Modal: MODAL_MESSAGE.noMemberToEvaluate로 모달 오픈
Modal-->>EvaluationPage: 확인 시 이전 페이지로 이동
else 평가 대상 존재
EvaluationPage-->>User: 평가 폼 렌더링
end
Assessment against linked issues
Possibly related PRs
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 (3)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used🧬 Code Graph Analysis (1)src/pages/user/projectDetail/ProjectDetail.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (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: 3
🧹 Nitpick comments (3)
src/components/user/manageProjects/Card.tsx (1)
21-28: 평가하기 버튼의 조건부 렌더링이 올바르게 구현되었습니다.
canEvaluate플래그에 따라 평가하기 버튼을 표시하는 로직이 적절히 구현되었습니다. 라우팅 경로 구성도 올바릅니다.다만
keyprop이 불필요합니다. 이 컴포넌트는 리스트 아이템이 아니므로key를 제거할 수 있습니다.- <S.EvaluateButton - key={project.id} - to={`${ROUTES.evaluation}/${project.id}`} - > + <S.EvaluateButton to={`${ROUTES.evaluation}/${project.id}`}>src/components/user/mypage/joinedProject/Project.tsx (1)
42-49: 평가 버튼의 불필요한 key 속성을 제거하세요.조건부 평가 버튼 렌더링이 잘 구현되었지만,
key속성이 불필요합니다.- <S.EvaluateButton - key={project.id} - to={`${ROUTES.evaluation}/${project.id}`} - > + <S.EvaluateButton to={`${ROUTES.evaluation}/${project.id}`}>
key속성은 리스트 렌더링 시에만 필요하며, 단일 조건부 렌더링에서는 불필요합니다.src/components/user/mypage/joinedProject/Project.styled.ts (1)
144-144: SkillArea 컴포넌트에 스타일을 추가하거나 제거를 고려하세요.빈 스타일 컴포넌트가 추가되었지만 실제 스타일이 정의되지 않았습니다.
필요에 따라 다음 중 하나를 선택하세요:
옵션 1: 스타일 추가 (레이아웃 목적이 있는 경우)
-export const SkillArea = styled.div``; +export const SkillArea = styled.div` + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.6rem; +`;옵션 2: 컴포넌트 제거 (단순 래퍼인 경우)
-export const SkillArea = styled.div``;그리고 TSX 파일에서 일반
div를 사용합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
src/api/http.api.ts(1 hunks)src/components/common/header/Notification/Notification.styled.ts(1 hunks)src/components/user/customerService/inquiry/Inquiry.tsx(0 hunks)src/components/user/manageProjects/Card.styled.ts(3 hunks)src/components/user/manageProjects/Card.tsx(2 hunks)src/components/user/mypage/joinedProject/MyJoinProjects.styled.ts(1 hunks)src/components/user/mypage/joinedProject/MyJoinProjects.tsx(1 hunks)src/components/user/mypage/joinedProject/Project.styled.ts(3 hunks)src/components/user/mypage/joinedProject/Project.tsx(2 hunks)src/components/user/mypage/myProfile/profile/Profile.tsx(0 hunks)src/constants/user/modalMessage.ts(1 hunks)src/hooks/user/CommentHooks/usePatchReply.ts(1 hunks)src/hooks/user/CommentHooks/usePostComment.ts(1 hunks)src/hooks/user/CommentHooks/usePutComment.ts(1 hunks)src/hooks/user/ProjectHooks/useApplyProject.ts(1 hunks)src/hooks/user/ProjectHooks/useCreateProject.ts(1 hunks)src/hooks/user/ProjectHooks/useUpdateProject.ts(1 hunks)src/hooks/user/evaluationHooks/useGetEvaluation.ts(1 hunks)src/hooks/user/useNotification.ts(1 hunks)src/models/manageMyProject.ts(1 hunks)src/models/userProject.ts(1 hunks)src/pages/user/evaluation/Evaluation.tsx(1 hunks)
💤 Files with no reviewable changes (2)
- src/components/user/customerService/inquiry/Inquiry.tsx
- src/components/user/mypage/myProfile/profile/Profile.tsx
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/components/user/manageProjects/Card.tsx (1)
src/constants/user/routes.ts (1)
ROUTES(1-32)
src/pages/user/evaluation/Evaluation.tsx (1)
src/hooks/useModal.ts (1)
useModal(3-36)
src/components/user/mypage/joinedProject/Project.tsx (2)
src/models/userProject.ts (1)
JoinedProject(4-13)src/constants/user/routes.ts (1)
ROUTES(1-32)
src/hooks/user/evaluationHooks/useGetEvaluation.ts (3)
src/hooks/queries/user/keys.ts (1)
ProjectMemberListEval(43-45)src/api/evaluation.api.ts (1)
getEvaluation(14-22)src/constants/user/modalMessage.ts (1)
MODAL_MESSAGE(1-29)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Run Chromatic
🔇 Additional comments (31)
src/components/common/header/Notification/Notification.styled.ts (1)
29-29:height속성값 오타 수정
유효하지 않은fix-content에서 올바른fit-content로 변경하신 것은 적절합니다.src/hooks/user/ProjectHooks/useCreateProject.ts (1)
30-33: 에러 로깅 표준화 확인
onError콜백에서console.error로 변경하여 심각도를 명확히 구분한 점이 적절합니다.src/hooks/user/CommentHooks/usePostComment.ts (1)
16-18: 에러 로깅 일관성 승인
onError핸들러에서console.error를 사용해 다른 훅들과 통일된 로그 레벨을 적용했습니다.src/hooks/user/CommentHooks/usePatchReply.ts (1)
20-22: 에러 로깅 레벨 업그레이드
onError에서console.error로 변경하여 오류 탐지·분석 시 가독성을 높였습니다.src/api/http.api.ts (1)
32-34: 요청 인터셉터 에러 로깅 개선
Axios 요청 인터셉터의 에러 로그를console.error로 변경해 심각도를 명확히 표현했습니다.src/hooks/user/ProjectHooks/useApplyProject.ts (1)
37-39: 에러 로깅 일관성 검증
onError콜백에서console.error를 활용해 다른 프로젝트 훅과 동일한 로깅 방식을 유지하고 있습니다.src/models/userProject.ts (1)
12-12: 새로운 평가 기능 지원을 위한 모델 확장이 적절합니다.
canEvaluate속성 추가가 평가 버튼의 조건부 렌더링을 위해 적절하게 구현되었습니다.src/constants/user/modalMessage.ts (1)
28-28: 평가 멤버 부재 시 사용자 경험을 위한 적절한 메시지 추가입니다.새로운 모달 메시지가 기존 패턴과 일관되게 추가되었으며, 평가할 멤버가 없는 상황에 대한 명확한 안내를 제공합니다.
src/hooks/user/useNotification.ts (1)
65-65: 에러 로깅 개선이 적절합니다.
console.log에서console.error로 변경하여 에러 가시성을 향상시키고 디버깅에 도움이 됩니다.src/hooks/user/CommentHooks/usePutComment.ts (1)
16-16: 에러 로깅 표준화가 잘 적용되었습니다.mutation의
onError콜백에서console.error사용으로 에러 처리가 개선되었습니다.src/hooks/user/ProjectHooks/useUpdateProject.ts (1)
33-33: 에러 로깅 개선 승인
console.log에서console.error로 변경한 것은 올바른 개선사항입니다. 에러 메시지가 개발자 도구에서 적절한 레벨로 표시되어 디버깅에 도움이 됩니다.src/models/manageMyProject.ts (1)
22-22: 평가 기능을 위한 인터페이스 확장 승인
canEvaluate속성 추가가 적절합니다. 이 부울 속성은 평가 기능의 조건부 렌더링을 위한 명확한 인터페이스 설계입니다.src/components/user/mypage/joinedProject/MyJoinProjects.tsx (1)
30-30: 평가 기능 props 전달 승인
canEvaluateprop을 Project 컴포넌트에 전달하는 로직이 적절합니다. 모델 데이터를 직접 전달하여 컴포넌트 간 데이터 흐름이 명확하고 일관성 있게 구현되었습니다.src/components/user/mypage/joinedProject/MyJoinProjects.styled.ts (1)
48-48: CSS 선택자 구체성 개선 승인CSS 선택자를
a에서& > a로 변경한 것은 좋은 개선사항입니다. 직접 자식 앵커 요소만 대상으로 하여 중첩된 요소들과의 스타일 충돌을 방지하고, 평가 버튼 등 새로운 인터랙티브 요소와의 호환성을 높입니다.src/components/user/manageProjects/Card.tsx (1)
5-5: 라우트 상수 import가 적절히 추가되었습니다.평가 페이지로의 링크 생성을 위해 필요한 import가 올바르게 추가되었습니다.
src/pages/user/evaluation/Evaluation.tsx (2)
6-7: 모달 관련 import가 적절히 추가되었습니다.Modal 컴포넌트와 useModal 훅이 올바르게 import되어 모달 기능을 지원합니다.
12-18: 모달 상태 관리와 훅 호출이 올바르게 구현되었습니다.useModal 훅을 통한 모달 상태 관리와 useGetCompletedEvaluation 훅의 새로운 파라미터 구조가 적절히 적용되었습니다.
src/components/user/manageProjects/Card.styled.ts (3)
1-1: Link import가 적절히 추가되었습니다.EvaluateButton 컴포넌트에서 사용할 react-router-dom의 Link가 올바르게 import되었습니다.
35-35: ButtonWrapper의 레이아웃이 적절히 수정되었습니다.
justify-content를space-between으로 변경하여 평가하기 버튼과 모집 종료 라벨을 양쪽 끝에 배치하는 것이 적절합니다.
94-107: EvaluateButton 스타일이 일관성 있게 구현되었습니다.평가하기 버튼의 스타일이 기존 RecruitmentEnd 버튼과 일관성을 유지하면서도 구별되는 색상을 사용하고 있습니다. 반응형 디자인도 적절히 고려되었습니다.
src/hooks/user/evaluationHooks/useGetEvaluation.ts (3)
4-6: 필요한 import들이 적절히 추가되었습니다.모달 처리와 네비게이션을 위한 import들이 올바르게 추가되었습니다.
13-16: 훅 시그니처 변경이 적절히 구현되었습니다.객체 파라미터를 받도록 변경하여 확장 가능성을 높였습니다. 인터페이스 이름 오타만 수정하면 됩니다.
-}: useGetCompletedEvaulationProps) => { +}: useGetCompletedEvaluationProps) => {
17-22: 쿼리 설정이 올바르게 업데이트되었습니다.navigate 훅 사용과 쿼리 키, 쿼리 함수의 projectId 사용이 적절합니다.
src/components/user/mypage/joinedProject/Project.tsx (4)
5-5: ROUTES 상수 임포트가 적절히 추가되었습니다.평가 페이지로의 라우팅을 위해 필요한 임포트가 올바르게 추가되었습니다.
9-9: 인터페이스에 옵션 속성이 적절히 추가되었습니다.
canEvaluate속성이 옵션으로 정의되어 기존 코드와의 호환성을 유지하면서 새로운 기능을 지원합니다.
12-12: 함수 시그니처가 올바르게 업데이트되었습니다.구조 분해 할당을 통해 새로운
canEvaluateprop을 받도록 적절히 수정되었습니다.
34-41: 스킬 영역 래핑이 적절히 구현되었습니다.기존 스킬 렌더링 로직을
SkillArea컴포넌트로 래핑하여 레이아웃 구조를 개선했습니다. 기존 로직이 그대로 유지되어 기능에 문제가 없습니다.src/components/user/mypage/joinedProject/Project.styled.ts (4)
1-1: Link 임포트가 적절히 추가되었습니다.EvaluateButton 스타일 컴포넌트를 위해 필요한 react-router-dom의 Link 임포트가 올바르게 추가되었습니다.
119-119: 레이아웃 개선을 위한 스타일 속성이 적절히 추가되었습니다.
justify-content: space-between을 추가하여 스킬 영역과 평가 버튼 사이의 공간 배치가 개선되었습니다.
134-135: 태블릿 뷰 이미지 크기 조정이 적절합니다.20px에서 27px로 이미지 크기를 증가시켜 태블릿 화면에서의 가독성을 개선했습니다.
146-160: 평가 버튼 스타일링이 잘 구현되었습니다.일관된 디자인 시스템을 따르며, 반응형 디자인이 적절히 적용되었습니다.
flex-shrink: 0과margin-left: auto를 통해 레이아웃이 올바르게 설정되었습니다.
| ], | ||
| }; | ||
|
|
||
| console.log(userInfoData.averageScores); |
| eventSource.addEventListener('alarm', (e) => { | ||
| const event = e as MessageEvent; | ||
| try { | ||
| console.log(JSON.parse(event.data)); |
구현내용
연관이슈
close #309
Summary by CodeRabbit
신규 기능
버그 수정
기타