대표 스킬/포지션이 지정되지 않은 사용자에 대해 일부 서비스 이용 막기 ( issue #311 ) #313
Conversation
Walkthrough프로젝트 상세 페이지에서 사용자가 대표 스킬/포지션을 지정하지 않은 경우, "프로젝트 함께하기" 버튼 클릭 시 모달을 띄우고 내 프로필 페이지로 이동하는 로직이 추가되었습니다. 관련 스타일 및 상수, 사용자 데이터 타입도 이에 맞게 확장되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectDetail
participant Modal
participant Router
User->>ProjectDetail: "프로젝트 함께하기" 클릭
ProjectDetail->>ProjectDetail: hasRequiredTags 확인
alt hasRequiredTags == true
ProjectDetail->>Router: 지원 페이지로 이동
else hasRequiredTags == false
ProjectDetail->>Modal: 모달 열기 (대표 스킬/포지션 미지정 안내)
User->>Modal: 확인 클릭
Modal->>ProjectDetail: onConfirm 콜백 실행
ProjectDetail->>Router: 내 프로필 페이지로 이동
end
Assessment against linked issues
Suggested labels
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 skipped from review as they are similar to previous changes (2)
⏰ 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 (7)
src/hooks/user/ProjectHooks/useCreateProject.ts (1)
30-33: 에러 로깅 수준 표준화
onError콜백에서console.error(error)로 변경하여 로깅 심각도가 일관성 있게 관리됩니다.
- 디버깅 시 추가 정보를 얻을 수 있도록 콘솔 메시지에 컨텍스트를 포함하는 것을 고려해보세요.
예:console.error('useCreateProject onError:', error)src/api/http.api.ts (1)
32-34: 요청 인터셉터 에러 로깅 강화
console.error('interceptors request error:', error)로 변경하여 로깅 심각도가 적절히 반영되었습니다.
- 로깅을 전문 로거(예: Winston, Bunyan)로 교체하여 로그 레벨 관리 및 통합 모니터링을 고려해보세요.
src/models/manageMyProject.ts (1)
22-22: 평가 기능을 위한 속성 추가를 승인합니다.
canEvaluate속성이 추가되어 프로젝트 평가 기능의 조건부 렌더링을 지원하는 것은 좋은 설계입니다.가독성 향상을 위해 JSDoc 주석 추가를 고려해보세요:
skills: SkillTag[]; + /** 프로젝트 평가 가능 여부 */ canEvaluate: boolean;src/components/user/manageProjects/Card.tsx (1)
21-28: 평가 버튼 조건부 렌더링이 올바르게 구현되었습니다.
project.canEvaluate조건에 따른 평가 버튼 렌더링 로직이 정확합니다. 라우트 구성도 적절합니다.단,
keyprop은 배열 렌더링이 아닌 경우 불필요합니다.다음과 같이 불필요한
keyprop을 제거할 수 있습니다:- <S.EvaluateButton - key={project.id} - to={`${ROUTES.evaluation}/${project.id}`} - > + <S.EvaluateButton to={`${ROUTES.evaluation}/${project.id}`}>src/components/user/mypage/joinedProject/Project.styled.ts (1)
144-144: 불필요한 빈 스타일 컴포넌트 제거 고려
SkillArea가 빈 스타일 컴포넌트로 정의되어 있습니다. 현재는 스타일링이 없으므로 일반div사용을 고려하거나, 향후 스타일링 계획이 있다면 주석으로 의도를 명시해주세요.-export const SkillArea = styled.div``; +export const SkillArea = styled.div``; // TODO: 스킬 영역 관련 스타일링 추가 예정src/components/user/mypage/joinedProject/Project.tsx (1)
34-41: SkillArea 래퍼 필요성 검토스킬 아이콘들을
SkillArea로 감싸고 있지만, 해당 컴포넌트가 빈 스타일 정의를 가지고 있어 불필요해 보입니다.스타일링이 필요하지 않다면 일반 div 사용을 고려해보세요:
- <S.SkillArea> + <div> {skillsShow.map((skill) => ( <img key={skill.id} src={skill.img} /> ))} {project.skills.length > maxSkills && ( <EllipsisHorizontalIcon width='20' height='20' /> )} - </S.SkillArea> + </div>src/hooks/user/evaluationHooks/useGetEvaluation.ts (1)
24-28: 훅 내 사이드 이펙트 설계 검토useEffect를 통해 데이터가 없을 때 모달을 자동으로 열고 네비게이션하는 로직이 구현되어 있습니다. 이런 사이드 이펙트는 훅의 재사용성을 제한할 수 있습니다.
사이드 이펙트를 컴포넌트 레벨로 이동하여 훅의 순수성을 유지하는 것을 고려해보세요:
const useGetCompletedEvaluation = ({ projectId }: { projectId: number }) => { // ... query logic only return { memberList: data, isLoading, isFetching, isError, + hasNoData: !data }; };그리고 컴포넌트에서:
const { memberList, hasNoData } = useGetCompletedEvaluation({ projectId }); useEffect(() => { if (hasNoData) { handleModalOpen(MODAL_MESSAGE.noMemberToEvaluate, () => navigate(-1)); } }, [hasNoData]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
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)src/pages/user/projectDetail/ProjectDetail.tsx(3 hunks)src/store/authStore.ts(2 hunks)
💤 Files with no reviewable changes (2)
- src/components/user/mypage/myProfile/profile/Profile.tsx
- src/components/user/customerService/inquiry/Inquiry.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-30)
🔇 Additional comments (27)
src/components/common/header/Notification/Notification.styled.ts (1)
29-29: height 속성 오타 수정 확인
오류가 있던fix-content가 CSS 표준값인fit-content로 올바르게 변경되었습니다. 이로써 컴포넌트 높이가 컨텐츠 크기에 맞춰 조정됩니다.src/hooks/user/CommentHooks/usePutComment.ts (1)
15-17: 에러 로깅 방식 일관성 확인
console.error(error)로 변경함으로써 다른 훅들과 동일한 심각도 레벨의 로깅이 적용되었습니다.src/hooks/user/CommentHooks/usePostComment.ts (1)
16-18: 에러 로깅 방식 일관성 확인
onError에서console.error(error)를 사용하여 로깅 레벨을 표준화한 점이 적절합니다.src/hooks/user/ProjectHooks/useUpdateProject.ts (1)
31-34: 에러 로깅 수준 표준화
onError콜백에서console.error(error)로 변경된 것을 확인했습니다. 다른 훅들과 일관된 로깅 전략입니다.src/hooks/user/CommentHooks/usePatchReply.ts (1)
21-21: 에러 로깅 개선이 적절합니다.
console.log에서console.error로 변경한 것은 좋은 개선사항입니다. 에러 로깅에 적절한 메서드를 사용하여 디버깅과 로그 필터링이 더 쉬워집니다.src/store/authStore.ts (1)
9-9: 사용자 데이터 모델에 필수 태그 플래그 추가가 적절합니다.
hasRequiredTags속성을 추가하여 대표 스킬/포지션 설정 여부를 추적하는 것은 PR 목적에 부합합니다.기본값을
true로 설정한 것에 대해 확인이 필요합니다. 이는 기존 사용자들이 즉시 제한되지 않는다는 의미인데, 보안/제약 관점에서는 더 제한적인 기본값false가 적절할 수도 있습니다.기본값
true선택의 이유를 확인해주세요. 기존 사용자 경험을 고려한 것인지, 아니면 다른 이유가 있는지 궁금합니다.Also applies to: 27-27
src/constants/user/modalMessage.ts (1)
28-29: 새로운 모달 메시지 추가가 적절합니다.PR 목적에 부합하는 모달 메시지들이 추가되었습니다:
noTagsData: 대표 스킬/포지션 미설정 사용자에게 표시할 메시지로 PR 목적에 직접적으로 부합noMemberToEvaluate: 평가 기능 관련 메시지메시지 텍스트가 명확하고 기존 메시지들과 일관성을 유지합니다.
src/models/userProject.ts (1)
12-12: 프로젝트 평가 기능을 위한 플래그 추가가 적절합니다.
canEvaluate속성을 추가하여 프로젝트별 평가 가능 여부를 추적하는 것은 좋은 접근입니다. 이를 통해 UI에서 평가 버튼을 조건부로 렌더링할 수 있습니다.이 변경사항은 PR의 주요 목적(대표 스킬/포지션 미설정 사용자 제한)보다는 평가 기능과 더 관련이 있어 보입니다만, 전체적인 사용자 경험 개선의 일부로 이해됩니다.
src/hooks/user/ProjectHooks/useApplyProject.ts (1)
38-38: 에러 로깅 방식 개선 완료!
console.log에서console.error로 변경한 것은 좋은 개선사항입니다. 이를 통해 브라우저 개발자 도구에서 에러를 더 명확하게 구분하고 식별할 수 있습니다.src/components/user/mypage/joinedProject/MyJoinProjects.styled.ts (1)
48-48: CSS 선택자 개선이 잘 되었습니다!일반 하위 선택자(
a)에서 직접 자식 선택자(& > a)로 변경한 것은 좋은 개선사항입니다. 이를 통해 중첩된 앵커 요소에 의한 의도하지 않은 스타일 적용을 방지할 수 있습니다.src/hooks/user/useNotification.ts (1)
65-65: 에러 로깅 일관성 개선 완료!EventSource의
onerror핸들러에서console.error를 사용하는 것이 적절합니다. 네트워크 연결 관련 에러를 더 명확하게 식별할 수 있게 되었습니다.src/components/user/mypage/joinedProject/MyJoinProjects.tsx (1)
30-30: 변경사항이 올바르게 구현되었습니다.프로젝트 데이터의
canEvaluate속성을Project컴포넌트에 prop으로 전달하는 변경사항이 정확합니다. 이를 통해Project컴포넌트에서 평가 관련 UI 요소를 조건부로 렌더링할 수 있게 됩니다.src/components/user/manageProjects/Card.tsx (1)
5-5: ROUTES 임포트가 적절히 추가되었습니다.평가 버튼의 라우팅을 위해 필요한 상수를 올바르게 임포트했습니다.
src/pages/user/evaluation/Evaluation.tsx (3)
6-7: 모달 컴포넌트 임포트가 적절히 추가되었습니다.평가 데이터가 없을 때 사용자에게 더 나은 피드백을 제공하기 위한 모달 기능이 추가되었습니다.
12-18: useModal 훅 통합 및 평가 훅 API 변경이 올바르게 구현되었습니다.모달 상태 관리를 위한 훅 사용과
useGetCompletedEvaluation훅의 API 변경이 적절합니다. 객체 형태의 매개변수로projectId와handleModalOpen콜백을 전달하는 방식이 확장성 측면에서 좋습니다.
24-34: 평가할 멤버가 없을 때의 UI 개선이 잘 구현되었습니다.단순한 텍스트 표시 대신 모달을 사용하여 사용자 경험을 향상시켰습니다. 모달의 상태 관리와 이벤트 핸들러 연결이 적절합니다.
src/components/user/manageProjects/Card.styled.ts (4)
1-1: Link 임포트가 적절히 추가되었습니다.새로운
EvaluateButton스타일드 컴포넌트에서 사용하기 위해 필요한 임포트입니다.
35-35: ButtonWrapper 레이아웃 변경이 적절합니다.
justify-content를space-between으로 변경하여 평가 버튼과 모집 종료 라벨을 양쪽 끝에 배치하는 것이 적절한 레이아웃 개선입니다.
94-107: EvaluateButton 스타일드 컴포넌트가 잘 구현되었습니다.평가 버튼의 스타일링이 일관성 있게 정의되었고, 태블릿 반응형 디자인도 적절히 고려되었습니다. 색상, 패딩, 폰트 크기 등이 UI 디자인 시스템과 일치합니다.
1-107: PR 목적과 실제 코드 변경사항 간의 불일치가 있습니다.PR 제목과 목적은 "대표 스킬/포지션이 지정되지 않은 사용자에 대해 일부 서비스 이용 막기"라고 되어 있으나, 실제 코드 변경사항은 프로젝트 평가 기능 추가에 관한 내용입니다.
다음 중 하나를 확인해 주세요:
- PR 설명이 잘못되었는지
- 실제 구현해야 할 기능이 누락되었는지
- 다른 PR의 코드가 포함되었는지
Likely an incorrect or invalid review comment.
src/components/user/mypage/joinedProject/Project.styled.ts (1)
146-160: 평가 버튼 스타일링 승인
EvaluateButton컴포넌트의 스타일링이 잘 구성되어 있습니다. 반응형 디자인과 일관된 테마 사용이 적절합니다.src/pages/user/projectDetail/ProjectDetail.tsx (3)
23-24: useModal 훅 사용법 승인
handleConfirm콜백을 포함한 useModal 훅 사용이 적절합니다. 모달 상태 관리와 확인 액션 처리가 잘 구현되었습니다.
110-116: 모달 컴포넌트 통합 승인Fragment 내에서 모달 컴포넌트가 적절히 통합되었습니다.
onConfirmprop 전달을 통한 확인 액션 처리가 올바르게 구현되었습니다.
44-50:Details
✅ Verification successful
필수 태그 확인 로직 검증 필요
대표 스킬/포지션 미설정 사용자에 대한 접근 제한 로직이 PR 목표에 맞게 구현되었습니다. 하지만
hasRequiredTags속성의 정확성을 확인해야 합니다.다음 스크립트로
hasRequiredTags속성이 authStore에서 올바르게 정의되고 사용되는지 확인해주세요:
🏁 Script executed:
#!/bin/bash # Description: authStore에서 hasRequiredTags 속성 정의 확인 # hasRequiredTags 속성 정의 검색 rg -A 5 -B 5 "hasRequiredTags" # authStore 파일에서 hasRequiredTags 관련 로직 확인 ast-grep --pattern $'interface $_ { $$$ hasRequiredTags: $_ $$$ }'Length of output: 2085
🏁 Script executed:
#!/bin/bash # Print the content of authStore.ts to inspect logic for setting hasRequiredTags sed -n '1,200p' src/store/authStore.tsLength of output: 1985
hasRequiredTags 속성 검증 완료
authStore.ts에서
hasRequiredTags는UserData인터페이스에boolean으로 정의되어 있으며,
로그인 시storeLogin(accessToken, refreshToken, userData)호출을 통해 API에서 전달된 실제 값으로 설정됩니다.
또한zustand의persist기능으로 리하이드레이션 시 저장된userData값이 복원되므로 초기값(true)이 잘못 적용되지 않습니다.
따라서 ProjectDetail의 필수 태그 확인 로직은 의도대로 동작함을 확인했습니다.src/components/user/mypage/joinedProject/Project.tsx (2)
9-9: Optional prop 타입 정의 승인
canEvaluateoptional boolean prop이 적절히 정의되었습니다. 인터페이스 확장이 올바르게 구현되었습니다.
42-49: 평가 버튼 조건부 렌더링 승인
canEvaluateprop을 기반으로 한 평가 버튼의 조건부 렌더링이 올바르게 구현되었습니다. 라우팅 경로 사용도 적절합니다.src/hooks/user/evaluationHooks/useGetEvaluation.ts (1)
8-16: 인터페이스 정의 및 매개변수 구조 승인객체 매개변수 방식으로 훅 시그니처를 개선한 것이 좋습니다. 인터페이스 정의도 명확하게 되어 있습니다.
src/components/common/header/Notification/Notification.styled.ts
Outdated
Show resolved
Hide resolved
| content: form.content.trim() !== '', | ||
| }; | ||
|
|
||
| console.log(isCategoryOpen); |
src/hooks/user/useNotification.ts
Outdated
| eventSource.addEventListener('alarm', (e) => { | ||
| const event = e as MessageEvent; | ||
| try { | ||
| console.log(JSON.parse(event.data)); |
구현내용
연관이슈
close #311
Summary by CodeRabbit
신규 기능
스타일