평가하기 페이지 구현 (issue #263) #285
Conversation
|
""" Walkthrough이 변경사항은 팀원 평가 기능을 신규로 도입합니다. 평가 페이지와 라우트, API 연동, 평가 전용 훅, 타입, 상수, 스타일 컴포넌트가 추가되었으며, 평가 진행 플로우와 레이아웃이 구현되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EvaluationPage
participant useGetCompletedEvaluation
participant EvaluationContent
participant useEvaluationStep
participant usePostEvaluation
participant API
User->>EvaluationPage: 접속 (projectId)
EvaluationPage->>useGetCompletedEvaluation: 멤버 평가 데이터 fetch
useGetCompletedEvaluation->>API: GET /evaluations/{projectId}/members
API-->>useGetCompletedEvaluation: 멤버 리스트 반환
useGetCompletedEvaluation-->>EvaluationPage: 멤버 리스트 전달
EvaluationPage->>EvaluationContent: 멤버 리스트, projectId 전달
User->>EvaluationContent: 팀원 선택, 질문 답변
EvaluationContent->>useEvaluationStep: 답변 선택 이벤트
User->>EvaluationContent: 제출 클릭
EvaluationContent->>useEvaluationStep: handleNextStep
useEvaluationStep->>usePostEvaluation: createEvaluation 호출
usePostEvaluation->>API: POST /evaluations
API-->>usePostEvaluation: 결과 반환
usePostEvaluation-->>useEvaluationStep: 완료 처리
useEvaluationStep-->>EvaluationContent: 다음 팀원 평가 or 종료
Assessment against linked issues
Suggested reviewers
Poem
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: 3
🧹 Nitpick comments (13)
src/constants/evaluation.ts (2)
1-8: 질문 문구의 일관성을 개선하세요.질문들 간에 문장 부호와 띄어쓰기가 일관되지 않습니다. 일부 문장은 물음표로 끝나고 일부는 그렇지 않으며, 띄어쓰기도 일관되지 않습니다.
다음과 같이 수정하는 것이 좋겠습니다:
export const questions = [ - '다른 팀원에 비해 비상한 아이디어가 있었나요?', - '맡은 파트를 책임감 있게 한다고 생각하시나요', - '기술력이 좋다고 생각 하시나요?', - '다른 팀원들과의 협업이 잘 이루어졌다 생각 하시나요?', - '문제에 직면 했을 때 끈기 있게 해결 하려고 하나요?', - '참여자가 프로젝트에 성실히 임했다 생각 하시나요?', + '다른 팀원에 비해 비상한 아이디어가 있었나요?', + '맡은 파트를 책임감 있게 한다고 생각하시나요?', + '기술력이 좋다고 생각하시나요?', + '다른 팀원들과의 협업이 잘 이루어졌다고 생각하시나요?', + '문제에 직면했을 때 끈기 있게 해결하려고 하나요?', + '참여자가 프로젝트에 성실히 임했다고 생각하시나요?', ] as const;
10-16: 옵션 라벨에 띄어쓰기를 추가하세요.현재 옵션 라벨들이 띄어쓰기 없이 작성되어 있어 가독성이 떨어집니다.
다음과 같이 수정하는 것이 좋겠습니다:
export const optionLabels = [ - '매우그렇다', - '그렇다', - '보통이다', - '그렇지않다', - '매우그렇지않다', + '매우 그렇다', + '그렇다', + '보통이다', + '그렇지 않다', + '매우 그렇지 않다', ] as const;src/pages/evaluation/Evaluation.styled.ts (1)
1-3: 스타일 컴포넌트 활용에 대한 제안현재 Container 스타일 컴포넌트가 비어있는데, 이는 의도적인지 확인해 주세요.
src/components/evaluation/EvaluationContent.styled.ts에 이미 Container가 정의되어 있어 혼란을 줄 수 있습니다.두 가지 접근 방식을 고려해 보세요:
- 이 컴포넌트에 명확한 스타일을 추가하거나
- 더 구체적인 이름을 사용하여 구분(예:
EvaluationPageContainer)import styled from 'styled-components'; -export const Container = styled.div``; +export const EvaluationPageContainer = styled.div` + width: 100%; + min-height: 100vh; + padding: 20px; +`;src/pages/evaluation/Evaluation.tsx (1)
19-22: 불필요한 non-null 단언 제거21번 줄에서
memberList!와 같이 불필요한 non-null 단언(!)을 사용하고 있습니다. 이미 15-17번 줄에서memberList가 null이 아님을 확인했으므로 이 단언은 필요하지 않습니다.다음과 같이 수정하세요:
return ( <S.Container> - <EvaluationContent projectId={projectId} memberList={memberList!} /> + <EvaluationContent projectId={projectId} memberList={memberList} /> </S.Container> );src/hooks/evaluationHooks/usePostEvaluation.ts (2)
23-25:async키워드 사용을 재검토하세요.
mutation.mutate는 Promise를 반환하지 않기 때문에createEvaluation함수에async키워드가 불필요합니다. 만약 이 함수가 await 가능하도록 의도했다면mutation.mutateAsync를 사용하는 것이 더 적절합니다.-const createEvaluation = async (userEvaluation: apiEvaluatedUser) => { +const createEvaluation = (userEvaluation: apiEvaluatedUser) => { mutation.mutate(userEvaluation); };또는 Promise를 반환하려면:
-const createEvaluation = async (userEvaluation: apiEvaluatedUser) => { - mutation.mutate(userEvaluation); +const createEvaluation = (userEvaluation: apiEvaluatedUser) => { + return mutation.mutateAsync(userEvaluation); };
9-21: 오류 처리 개선이 필요합니다.현재 오류가 발생하면 콘솔에만 로깅되고 사용자에게는 표시되지 않습니다. 사용자 경험을 향상시키기 위해 오류 메시지를 UI에 표시하는 방법을 고려해보세요.
src/api/evaluation.api.ts (2)
4-12: 반환 타입을 명시적으로 정의하세요.함수의 가독성과 문서화를 위해 명시적인 반환 타입을 추가하는 것이 좋습니다. 현재
postEvaluation함수는 숫자(상태 코드)를 반환하지만 타입이 명시되어 있지 않습니다.-export const postEvaluation = async (userEvaluation: apiEvaluatedUser) => { +export const postEvaluation = async (userEvaluation: apiEvaluatedUser): Promise<number> => { try { const response = await httpClient.post(`/evaluations`, userEvaluation); return response.status; } catch (e) { console.error(e); throw e; } };
14-22: 반환 타입을 명시적으로 정의하세요.
getEvaluation함수도 마찬가지로 명시적인 반환 타입이 필요합니다. API 응답에서 어떤 데이터가 반환되는지 명확하게 표시하면 더 좋을 것 같습니다.-export const getEvaluation = async (projectId: number) => { +export const getEvaluation = async (projectId: number): Promise<apiMemberList[]> => { try { const response = await httpClient.get(`/evaluations/${projectId}/members`); return response.data.data; } catch (e) { console.error(e); throw e; } };src/hooks/evaluationHooks/useGetEvaluation.ts (1)
5-10: 데이터 타입을 명시적으로 정의하세요.
useQuery에서 반환되는data의 타입이 명시되어 있지 않아 기본적으로any타입으로 추론됩니다. 타입 안전성을 높이기 위해 구체적인 타입 주석을 추가하는 것이 좋습니다.+import { apiMemberList } from '../../models/evaluation'; const useGetCompletedEvaluation = (id: number) => { - const { data, isLoading, isFetching, isError } = useQuery({ + const { data, isLoading, isFetching, isError } = useQuery<apiMemberList[]>({ queryKey: [ProjectMemberListEval.MemberListEval, id], queryFn: () => getEvaluation(id), staleTime: 1000 * 60 * 5, });src/models/evaluation.ts (3)
1-5: 인터페이스 이름에 PascalCase 사용을 권장합니다.TypeScript 컨벤션에 따르면 인터페이스 이름은 PascalCase로 작성하는 것이 일반적입니다. 현재
apiEvaluatedUser는 camelCase로 되어 있어ApiEvaluatedUser로 변경하는 것이 좋습니다.-export interface apiEvaluatedUser { +export interface ApiEvaluatedUser { projectId: number; evaluateeId: number; scores: number[]; }
7-11: 인터페이스 이름에 PascalCase 사용을 권장합니다.마찬가지로
apiMemberList인터페이스도 PascalCase로 변경하는 것이 좋습니다.-export interface apiMemberList { +export interface ApiMemberList { userId: number; nickname: string; evaluated: boolean; }
1-11: JSDoc 주석을 추가하여 문서화하세요.각 인터페이스에 JSDoc 주석을 추가하면 해당 인터페이스가 무엇을 나타내는지 더 명확하게 이해할 수 있습니다.
+/** + * 사용자 평가 데이터 제출 시 사용되는 인터페이스 + */ export interface apiEvaluatedUser { projectId: number; evaluateeId: number; scores: number[]; } +/** + * 평가 대상 프로젝트 멤버 정보를 나타내는 인터페이스 + */ export interface apiMemberList { userId: number; nickname: string; evaluated: boolean; }src/hooks/evaluationHooks/useEvaluationStep.ts (1)
49-63: 평가 옵션 선택 핸들러가 복잡해 보입니다.옵션 선택 핸들러는 기능적으로는 잘 작동하지만, progress 상태 구조가 Record<number, number[]>[] 형태로 복잡합니다. 이는 코드 가독성과 유지보수성을 저하시킬 수 있습니다.
다음과 같이 좀 더 직관적인 구조로 리팩토링을 고려해 보세요:
// 더 직관적인 상태 구조 제안 const [progress, setProgress] = useState<Record<number, number[]>>({}); // 초기화 로직 useEffect(() => { if (memberList.length === 0) return; const initialProgress = memberList .filter(m => !m.evaluated) .reduce((acc, m) => { acc[m.userId] = Array(questionLength).fill(0); return acc; }, {} as Record<number, number[]>); setProgress(initialProgress); // ... 나머지 코드 }, [memberList, questionLength]); // 옵션 선택 핸들러 간소화 const handleClickOption = (questionNumber: number, optionValue: number) => { const realValue = optionValue + 1; setProgress(prev => ({ ...prev, [user]: prev[user]?.map((v, i) => i === questionNumber ? realValue : v ) || [] })); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/api/evaluation.api.ts(1 hunks)src/components/evaluation/EvaluationContent.styled.ts(1 hunks)src/components/evaluation/EvaluationContent.tsx(1 hunks)src/constants/evaluation.ts(1 hunks)src/constants/routes.ts(1 hunks)src/hooks/evaluationHooks/useEvaluationStep.ts(1 hunks)src/hooks/evaluationHooks/useGetEvaluation.ts(1 hunks)src/hooks/evaluationHooks/usePostEvaluation.ts(1 hunks)src/hooks/queries/keys.ts(1 hunks)src/models/evaluation.ts(1 hunks)src/pages/evaluation/Evaluation.styled.ts(1 hunks)src/pages/evaluation/Evaluation.tsx(1 hunks)src/routes/AppRoutes.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/pages/evaluation/Evaluation.styled.ts (1)
src/components/evaluation/EvaluationContent.styled.ts (1)
Container(4-8)
src/hooks/evaluationHooks/useEvaluationStep.ts (3)
src/models/evaluation.ts (1)
apiMemberList(7-11)src/constants/evaluation.ts (1)
questions(1-8)src/hooks/evaluationHooks/usePostEvaluation.ts (1)
usePostEvaluation(6-34)
src/api/evaluation.api.ts (2)
src/models/evaluation.ts (1)
apiEvaluatedUser(1-5)src/api/http.api.ts (1)
httpClient(78-78)
src/hooks/evaluationHooks/usePostEvaluation.ts (3)
src/models/evaluation.ts (1)
apiEvaluatedUser(1-5)src/api/evaluation.api.ts (1)
postEvaluation(4-12)src/hooks/queries/keys.ts (1)
ProjectMemberListEval(42-44)
src/components/evaluation/EvaluationContent.tsx (2)
src/models/evaluation.ts (1)
apiMemberList(7-11)src/constants/evaluation.ts (2)
questions(1-8)optionLabels(10-16)
src/hooks/evaluationHooks/useGetEvaluation.ts (2)
src/hooks/queries/keys.ts (1)
ProjectMemberListEval(42-44)src/api/evaluation.api.ts (1)
getEvaluation(14-22)
🪛 Biome (1.9.4)
src/components/evaluation/EvaluationContent.tsx
[error] 96-98: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (26)
src/constants/routes.ts (1)
31-31: LGTM! 평가 페이지 라우트가 잘 추가되었습니다.새 평가 기능을 위한 라우트가 적절하게 추가되었습니다.
src/hooks/queries/keys.ts (2)
27-28: LGTM! 일관된 타입 정의 개선기존 상수 객체들에
as const타입 단언을 추가한 것은 좋은 개선입니다. 이로써 코드 전반에 걸쳐 일관된 타입 안전성이 보장됩니다.Also applies to: 31-32, 35-36, 39-40
42-44: LGTM! 평가 기능을 위한 쿼리 키 추가평가 기능을 위한
ProjectMemberListEval상수가 적절하게 추가되었습니다.src/routes/AppRoutes.tsx (2)
93-93: Evaluation 컴포넌트 import 잘 추가되었습니다.평가하기 페이지를 위한 lazy 로딩 컴포넌트 import가 적절하게 추가되었습니다. 앱의 성능 최적화를 위해 lazy 로딩을 사용한 것이 좋습니다.
349-362: 평가하기 페이지 라우트 구성이 잘 되었습니다.프로젝트 ID를 파라미터로 받는 평가 페이지 라우트가 적절히 구성되었습니다. 인증 보호(ProtectRoute), 에러 경계(QueryErrorBoundary), 로딩 상태(Suspense)와 레이아웃이 적절하게 적용되어 있어 기존 라우트 패턴을 일관되게 따르고 있습니다.
src/components/evaluation/EvaluationContent.tsx (7)
1-6: 필요한 모듈과 상수가 잘 import 되었습니다.스타일 컴포넌트, 스크롤 제어 컴포넌트, 평가 관련 훅 및 모델, 상수 등이 적절히 import 되었습니다.
7-10: 프롭스 인터페이스 정의가 명확합니다.컴포넌트에 필요한 프롭스가 명확하게 정의되어 있습니다.
projectId와memberList를 받아 처리하는 구조가 잘 설계되었습니다.
12-25: useEvaluationStep 훅 활용이 적절합니다.useEvaluationStep 커스텀 훅을 활용하여 상태와 핸들러 함수들을 적절히 분리하였습니다. 이를 통해 컴포넌트 코드가 간결해지고 로직이 잘 분리되었습니다.
26-40: 왼쪽 사이드바 구현이 잘 되었습니다.ScrollPreventor를 활용한 스크롤 제어와 왼쪽 사이드바의 평가 대상자 목록 표시가 적절히 구현되었습니다. 현재 선택된 사용자에 대한 시각적 피드백도
$active상태를 통해 잘 제공되고 있습니다.
41-59: 메인 컨텐츠 헤더와 오류 메시지 처리가 적절합니다.제목과 제출 버튼이 포함된 헤더 구성, 그리고 불완전한 평가 시 오류 메시지를 표시하는 로직이 잘 구현되어 있습니다. 사용자에게 명확한 피드백을 제공합니다.
60-89: 평가 질문과 옵션 구현이 잘 되었습니다.스크롤 영역 내에 질문과 평가 옵션을 표시하는 구조가 잘 구현되어 있습니다. 라디오 버튼을 활용한 선택 기능과 현재 선택된 값을 시각적으로 표시하는 기능이 적절합니다.
99-105: 컴포넌트 마무리와 내보내기가 잘 되었습니다.컴포넌트의 마무리와 내보내기 구문이 적절합니다.
src/hooks/evaluationHooks/useEvaluationStep.ts (8)
1-5: 필요한 모듈과 타입이 잘 import 되었습니다.React 훅, 평가 관련 모델, 상수, API 관련 훅이 적절히 import 되었습니다.
6-14: 훅 Props 인터페이스가 명확합니다.훅에 필요한 입력 인터페이스가 명확하게 정의되어 있고, 매개변수에 기본값도 적절히 설정되어 있습니다.
15-25: 상태 변수 초기화가 적절합니다.각 상태 변수(step, notDone, progress, isNotFill)의 초기화가 잘 되어 있으며, usePostEvaluation 훅을 사용하여 API 연동 준비도 적절합니다.
27-40: 멤버 리스트 변경 시 상태 초기화 로직이 잘 구현되었습니다.useEffect를 사용하여 memberList가 변경될 때 상태를 적절히 초기화하는 로직이 잘 구현되어 있습니다. 평가가 완료되지 않은 멤버만 필터링하고, 진행 상태와 단계를 리셋하는 처리가 적절합니다.
42-48: 사용자 선택 핸들러가 잘 구현되었습니다.현재 선택된 사용자의 userId를 추출하고, 왼쪽 사이드바에서 사용자 선택 시 상태를 업데이트하는 로직이 적절합니다.
64-83: 다음 단계 핸들러가 잘 구현되었습니다.다음 단계로 넘어갈 때 모든 질문에 답변했는지 확인하고, 완료 시 API를 호출하는 로직이 잘 구현되어 있습니다. 평가 완료 후 목록에서 해당 사용자를 제거하는 처리도 적절합니다.
85-88: 현재 점수 계산 로직이 잘 메모이제이션 되었습니다.useMemo를 사용하여 현재 사용자의 점수 배열을 최적화하여 계산하는 로직이 적절합니다. 불필요한 재계산을 방지하여 성능을 개선하고 있습니다.
90-101: 훅의 반환 값이 명확합니다.훅에서 필요한 상태와 핸들러 함수들을 명확하게 반환하고 있어, 컴포넌트에서 쉽게 사용할 수 있습니다.
src/components/evaluation/EvaluationContent.styled.ts (6)
1-8: 기본 컨테이너 스타일이 적절합니다.styled-components와 Button 컴포넌트를 import하고, 전체 컨테이너의 스타일이 적절하게 정의되어 있습니다. 전체 화면 높이를 사용하고 flex 레이아웃을 적용한 것이 좋습니다.
10-36: 왼쪽 사이드바와 참가자 버튼 스타일이 잘 정의되었습니다.반응형 디자인이 고려된 사이드바 스타일과 활성 상태에 따라 색상이 변경되는 참가자 버튼 스타일이 적절히 정의되어 있습니다. $active prop을 활용한 조건부 스타일링이 잘 구현되었습니다.
37-85: 메인 콘텐츠 영역 스타일이 잘 구성되어 있습니다.메인 콘텐츠, 헤더, 제목, 메시지 컨테이너, 오류 메시지, 제출 버튼의 스타일이 적절히 정의되어 있습니다. 반응형 미디어 쿼리를 사용하여 다양한 화면 크기에 대응하는 점이 좋습니다.
87-103: 스크롤 영역 스타일이 세심하게 정의되었습니다.스크롤 영역과 스크롤바 스타일이 상세하게 정의되어 있습니다. 커스텀 스크롤바 스타일링으로 사용자 경험을 향상시킨 점이 좋습니다.
105-154: 질문 블록과 라디오 버튼 스타일이 체계적으로 정의되었습니다.질문 블록, 헤더, 옵션 컨테이너와 라디오 버튼 관련 스타일이 잘 정의되어 있습니다. 특히 라디오 버튼의 시각적 표현을 커스텀하여 사용자 경험을 개선한 점이 좋습니다.
156-186: 오른쪽 사이드바와 완료 버튼 스타일이 잘 정의되었습니다.오른쪽 사이드바와 완료된 항목을 표시하는 버튼 스타일이 적절히 정의되어 있습니다. 활성 상태에 따른 스타일 변화와 호버 효과가 잘 구현되어 있습니다.
| const Evaluation = () => { | ||
| const projectId = Number(useParams().projectId); | ||
| const { memberList, isLoading, isFetching } = | ||
| useGetCompletedEvaluation(projectId); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
URL 매개변수 변환 시 오류 처리 추가
useParams().projectId를 숫자로 변환하는 과정에서 오류 처리가 없습니다. 유효하지 않은 projectId가 URL에 있을 경우 NaN이 발생할 수 있습니다.
다음과 같이 수정을 고려해보세요:
const Evaluation = () => {
- const projectId = Number(useParams().projectId);
+ const { projectId: projectIdParam } = useParams();
+ const projectId = Number(projectIdParam);
+
+ // 유효하지 않은 projectId 처리
+ if (isNaN(projectId) || projectId <= 0) {
+ return <S.Container>유효하지 않은 프로젝트 ID입니다.</S.Container>;
+ }
const { memberList, isLoading, isFetching } =
useGetCompletedEvaluation(projectId);📝 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.
| const Evaluation = () => { | |
| const projectId = Number(useParams().projectId); | |
| const { memberList, isLoading, isFetching } = | |
| useGetCompletedEvaluation(projectId); | |
| const Evaluation = () => { | |
| const { projectId: projectIdParam } = useParams(); | |
| const projectId = Number(projectIdParam); | |
| // 유효하지 않은 projectId 처리 | |
| if (isNaN(projectId) || projectId <= 0) { | |
| return <S.Container>유효하지 않은 프로젝트 ID입니다.</S.Container>; | |
| } | |
| const { memberList, isLoading, isFetching } = | |
| useGetCompletedEvaluation(projectId); |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/hooks/evaluationHooks/useEvaluationStep.ts (4)
6-9: 인터페이스 명명 규칙을 확인해주세요.React 훅의 인터페이스 네이밍 규칙에 따르면, 일반적으로 'use' 접두사가 있는 경우는 PascalCase로 작성합니다.
-interface useEvaluationStepProps { +interface UseEvaluationStepProps { projectId: number; memberList: MemberList[]; }
11-20: 상태 관리를 위한 초기 설정이 잘 구현되었습니다.평가 진행 상태를 관리하기 위한 여러 state 변수들이 적절히 정의되었습니다. 다만, 상태 구조를 약간 개선할 수 있는 부분이 있습니다.
progress상태의 구조가 배열 내 객체 형태로 복잡합니다. 이를 단일 객체로 관리하면 더 효율적일 수 있습니다:-const [progress, setProgress] = useState<Record<number, number[]>[]>([]); +const [progress, setProgress] = useState<Record<number, number[]>>({}); // 그리고 useEffect 내부 초기화도 변경: -setProgress( - memberList.map((m) => ({ - [m.userId]: Array(questionLength).fill(0), - })) -); +setProgress( + memberList.reduce((acc, m) => ({ + ...acc, + [m.userId]: Array(questionLength).fill(0), + }), {}) +);
38-39: 현재 평가 중인 사용자 접근 방식이 개선될 수 있습니다.배열 인덱스로 현재 사용자에 접근하는 방식은 잠재적인 문제를 일으킬 수 있습니다.
현재 사용자 ID를 직접 상태로 관리하는 것을 고려해보세요:
+const [currentUserId, setCurrentUserId] = useState<number | null>(null); useEffect(() => { if (memberList.length === 0) return; const filteredMembers = memberList.filter((m) => !m.evaluated); setNotDone(filteredMembers); + setCurrentUserId(filteredMembers.length > 0 ? filteredMembers[0].userId : null); // ... }, [memberList, questionLength]); -const user = notDone[step]?.userId; +const user = currentUserId;
45-59: 변수 이름을 좀 더 명확하게 지을 수 있습니다.
realValue라는 변수명은 왜 값에 1을 더하는지 명확하게 전달하지 못합니다.- const realValue = optionValue + 1; + const scoreValue = optionValue + 1; // UI는 0부터 시작하지만 점수는 1부터 저장또한,
progress상태 업데이트 로직이 복잡한데, 상태 구조를 단순화하면 이 로직도 간결해질 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/evaluation/EvaluationContent.tsx(1 hunks)src/hooks/evaluationHooks/useEvaluationStep.ts(1 hunks)src/models/evaluation.ts(1 hunks)src/pages/evaluation/Evaluation.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/evaluation/EvaluationContent.tsx
- src/models/evaluation.ts
- src/pages/evaluation/Evaluation.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/hooks/evaluationHooks/useEvaluationStep.ts (3)
src/models/evaluation.ts (1)
MemberList(12-16)src/constants/evaluation.ts (1)
questions(1-8)src/hooks/evaluationHooks/usePostEvaluation.ts (1)
usePostEvaluation(6-34)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (5)
src/hooks/evaluationHooks/useEvaluationStep.ts (5)
1-5: 필요한 모듈이 잘 임포트되었습니다.평가 기능 구현에 필요한 React 훅, 타입, 상수와 함께 API 연동을 위한 커스텀 훅이 잘 임포트되었습니다.
21-36: useEffect에서 초기화 로직이 잘 구현되었습니다.멤버 리스트가 변경될 때마다 평가할 멤버 필터링과 상태 초기화가 적절히 이루어지고 있습니다. 의존성 배열도 올바르게 설정되었습니다.
40-43: handleClickLeftUser 함수의 동작이 명확합니다.사용자가 평가할 다른 팀원을 선택할 때 상태를 적절히 업데이트합니다.
81-84: useMemo를 통한 최적화가 적절히 구현되었습니다.현재 사용자의 점수를 계산하는 로직이 useMemo로 최적화되었고, 의존성 배열도 올바르게 설정되었습니다.
86-98: 필요한 값과 핸들러가 잘 반환되어 있습니다.컴포넌트에서 필요로 하는 모든 상태와 핸들러가 적절히 반환되어 있습니다.
| const handleNextStep = () => { | ||
| if (user == null) return; | ||
|
|
||
| const record = progress.find((r) => user in r); | ||
| const scores = record ? record[user] : []; | ||
|
|
||
| if (scores.some((v) => v === 0)) { | ||
| setIsNotFill(true); | ||
| return; | ||
| } else { | ||
| setIsNotFill(false); | ||
| createEvaluation({ | ||
| projectId: projectId, | ||
| evaluateeId: user, | ||
| scores: scores, | ||
| }); | ||
|
|
||
| setNotDone((prev) => prev.filter((e) => e.userId !== user)); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
평가 제출 로직에 오류 처리를 추가하는 것이 좋겠습니다.
API 호출 결과에 대한 오류 처리가 없습니다. 사용자 경험 향상을 위해 오류 처리를 추가하는 것이 좋습니다.
const handleNextStep = () => {
if (user == null) return;
const record = progress.find((r) => user in r);
const scores = record ? record[user] : [];
if (scores.some((v) => v === 0)) {
setIsNotFill(true);
return;
} else {
setIsNotFill(false);
+ try {
createEvaluation({
projectId: projectId,
evaluateeId: user,
scores: scores,
});
+ setNotDone((prev) => prev.filter((e) => e.userId !== user));
+ } catch (error) {
+ // 오류 처리 로직 (예: 토스트 메시지 표시)
+ console.error('평가 제출 중 오류가 발생했습니다:', error);
+ }
- setNotDone((prev) => prev.filter((e) => e.userId !== user));
}
};또한, usePostEvaluation의 isLoading, isError 등의 상태를 활용하여 사용자에게 피드백을 제공하는 것이 좋습니다.
📝 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.
| const handleNextStep = () => { | |
| if (user == null) return; | |
| const record = progress.find((r) => user in r); | |
| const scores = record ? record[user] : []; | |
| if (scores.some((v) => v === 0)) { | |
| setIsNotFill(true); | |
| return; | |
| } else { | |
| setIsNotFill(false); | |
| createEvaluation({ | |
| projectId: projectId, | |
| evaluateeId: user, | |
| scores: scores, | |
| }); | |
| setNotDone((prev) => prev.filter((e) => e.userId !== user)); | |
| } | |
| }; | |
| const handleNextStep = () => { | |
| if (user == null) return; | |
| const record = progress.find((r) => user in r); | |
| const scores = record ? record[user] : []; | |
| if (scores.some((v) => v === 0)) { | |
| setIsNotFill(true); | |
| return; | |
| } else { | |
| setIsNotFill(false); | |
| try { | |
| createEvaluation({ | |
| projectId: projectId, | |
| evaluateeId: user, | |
| scores: scores, | |
| }); | |
| setNotDone((prev) => prev.filter((e) => e.userId !== user)); | |
| } catch (error) { | |
| // 오류 처리 로직 (예: 토스트 메시지 표시) | |
| console.error('평가 제출 중 오류가 발생했습니다:', error); | |
| } | |
| } | |
| }; |
🤖 Prompt for AI Agents
In src/hooks/evaluationHooks/useEvaluationStep.ts around lines 60 to 79, the
handleNextStep function calls createEvaluation without handling potential errors
from the API call. To fix this, add error handling logic to manage failures from
createEvaluation, such as using try-catch or promise catch blocks. Also, utilize
isLoading and isError states from usePostEvaluation to provide user feedback
during the evaluation submission process, like showing loading indicators or
error messages.
구현내용
연관이슈
close #263
Summary by CodeRabbit