feat : API에 프로젝트 이름 추가

Author: layout-SY

src/components/evaluation/EvaluationContent.tsx

@@ -1,16 +1,17 @@
 import * as S from './EvaluationContent.styled';
 import ScrollPreventor from '../common/modal/ScrollPreventor';
 import useEvaluationStep from '../../hooks/evaluationHooks/useEvaluationStep';
-import { apiMemberList } from '../../models/evaluation';
+import { MemberList } from '../../models/evaluation';
 import { optionLabels, questions } from '../../constants/evaluation';
-
 interface EvaluationContentProps {
   projectId: number;
-  memberList: apiMemberList[];
+  projectName: string;
+  memberList: MemberList[];
 }
 
 const EvaluationContent = ({
   projectId,
+  projectName,
   memberList,
 }: EvaluationContentProps) => {
   const {
@@ -27,7 +28,7 @@ const EvaluationContent = ({
     <ScrollPreventor>
       <S.Container>
         <S.SidebarLeft>
-          <S.ProjectName>프로젝트 이름</S.ProjectName>
+          <S.ProjectName>{projectName}</S.ProjectName>
           {notDone.map((name, idx) => (
             <S.ParticipantButton
               key={name.userId}
@@ -93,7 +94,9 @@ const EvaluationContent = ({
           {memberList
             .filter((memberData) => memberData.evaluated)
             .map((memberData) => (
-              <S.CompletedButton>{memberData.nickname}</S.CompletedButton>
+              <S.CompletedButton key={memberData.userId}>
+                {memberData.nickname}
+              </S.CompletedButton>
             ))}
         </S.SidebarRight>
       </S.Container>

src/hooks/evaluationHooks/useEvaluationStep.ts

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
-import { apiMemberList } from '../../models/evaluation';
+import { MemberList } from '../../models/evaluation';
 import { questions } from '../../constants/evaluation';
 import { usePostEvaluation } from './usePostEvaluation';
 
 interface useEvaluationStepProps {
   projectId: number;
-  memberList: apiMemberList[];
+  memberList: MemberList[];
 }
 
 const useEvaluationStep = ({
@@ -14,12 +14,8 @@ const useEvaluationStep = ({
 }: useEvaluationStepProps) => {
   const questionLength = questions.length;
   const [step, setStep] = useState<number>(0);
-  const [notDone, setNotDone] = useState<apiMemberList[]>([]);
-  const [progress, setProgress] = useState<Record<number, number[]>[]>(() =>
-    memberList.map((memberData) => ({
-      [memberData.userId]: Array(questionLength).fill(0),
-    }))
-  );
+  const [notDone, setNotDone] = useState<MemberList[]>([]);
+  const [progress, setProgress] = useState<Record<number, number[]>[]>([]);
   const [isNotFill, setIsNotFill] = useState<boolean>(false);
 
   const { createEvaluation } = usePostEvaluation(projectId);
@@ -75,7 +71,7 @@ const useEvaluationStep = ({
       createEvaluation({
         projectId: projectId,
         evaluateeId: user,
-        score: scores,
+        scores: scores,
       });
 
       setNotDone((prev) => prev.filter((e) => e.userId !== user));

src/models/evaluation.ts

@@ -5,6 +5,11 @@ export interface apiEvaluatedUser {
 }
 
 export interface apiMemberList {
+  projectName: string;
+  userData: MemberList[];
+}
+
+export interface MemberList {
   userId: number;
   nickname: string;
   evaluated: boolean;

src/pages/evaluation/Evaluation.tsx

@@ -2,23 +2,30 @@ import { useParams } from 'react-router-dom';
 import * as S from './Evaluation.styled';
 import useGetCompletedEvaluation from '../../hooks/evaluationHooks/useGetEvaluation';
 import EvaluationContent from '../../components/evaluation/EvaluationContent';
+import LoadingSpinner from '../../components/common/loadingSpinner/LoadingSpinner';
 
 const Evaluation = () => {
-  const projectId = Number(useParams().projectId);
+  const { projectId: projectIdParam } = useParams();
+  const projectId = Number(projectIdParam);
+
   const { memberList, isLoading, isFetching } =
     useGetCompletedEvaluation(projectId);
 
   if (isLoading || isFetching) {
-    return;
+    return <LoadingSpinner />;
   }
 
-  if (!memberList) {
+  if (!memberList.userData.length) {
     return <S.Container>평가할 멤버가 없습니다.</S.Container>;
   }
 
   return (
     <S.Container>
-      <EvaluationContent projectId={projectId} memberList={memberList!} />
+      <EvaluationContent
+        projectId={projectId}
+        projectName={memberList.projectName}
+        memberList={memberList.userData!}
+      />
     </S.Container>
   );
 };