feat-fe: 지원자 평가 목록에서 개별 평가 삭제 기능 추가 (#968)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Seongjin Hong <[email protected]>

Author: github-actions[bot]

frontend/src/api/domain/evaluation.ts

@@ -37,6 +37,11 @@ const evaluationApis = {
       })}`,
       body: { evaluator, score, content },
     }),
+
+  delete: async ({ evaluationId }: { evaluationId: number }) =>
+    apiClient.delete({
+      path: `/${evaluationId}`,
+    }),
 };
 
 export default evaluationApis;

frontend/src/components/ApplicantModal/ApplicantEvalInfo/EvaluationCard/index.tsx

@@ -1,22 +1,56 @@
 import { EvaluationResult } from '@customTypes/applicant';
 import formatDate from '@utils/formatDate';
 
+import { evaluationMutations } from '@hooks/evaluations';
+
 import { HiOutlineClock } from 'react-icons/hi';
+import { HiOutlineTrash } from 'react-icons/hi2';
 import { FiUser } from 'react-icons/fi';
 
 import { EVALUATION_SCORE } from '../constants';
 import S from './style';
 
 interface EvaluationCardProps {
   evaluationResult: EvaluationResult;
+  processId: number;
+  applicantId: number;
+  evaluationId: number;
 }
 
-export default function EvaluationCard({ evaluationResult }: EvaluationCardProps) {
+export default function EvaluationCard({
+  evaluationResult,
+  processId,
+  applicantId,
+  evaluationId,
+}: EvaluationCardProps) {
   const createdDate = evaluationResult.createdDate ? formatDate(evaluationResult.createdDate) : '날짜 정보 없음';
 
+  const { mutate: deleteEvaluation, isPending: isDeletePending } = evaluationMutations.useDeleteEvaluation({
+    processId,
+    applicantId,
+  });
+
+  const handleClickDeleteButton = () => {
+    if (window.confirm('삭제하신 평가는 다시 복구할 수 없습니다.\n삭제하시겠습니까?')) {
+      deleteEvaluation({ evaluationId });
+    }
+  };
+
   return (
     <S.CardContainer>
-      <S.ResultFlag $score={evaluationResult.score}>{EVALUATION_SCORE[evaluationResult.score]}</S.ResultFlag>
+      <S.CardHeaderContainer>
+        <S.ResultFlag $score={evaluationResult.score}>{EVALUATION_SCORE[evaluationResult.score]}</S.ResultFlag>
+        <S.UtilButtonsContainer>
+          <S.DeleteButton
+            type="button"
+            onClick={handleClickDeleteButton}
+            disabled={isDeletePending}
+          >
+            <HiOutlineTrash width="1.2rem" />
+            삭제
+          </S.DeleteButton>
+        </S.UtilButtonsContainer>
+      </S.CardHeaderContainer>
       <S.ResultComment>{evaluationResult.content}</S.ResultComment>
       <S.EvaluatorDetailContainer>
         {evaluationResult.evaluator && (

frontend/src/components/ApplicantModal/ApplicantEvalInfo/EvaluationCard/style.ts

@@ -9,6 +9,44 @@ const CardContainer = styled.li`
   background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
 `;
 
+const CardHeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const UtilButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  gap: 0.4rem;
+`;
+
+const DeleteButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+
+  padding: 0.4rem 0.6rem;
+  border: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]};
+  border-radius: 0.4rem;
+
+  color: ${({ theme }) => theme.colors.text.block};
+  ${({ theme }) => theme.typography.common.small};
+  cursor: pointer;
+  transition: 0.3s ease;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.baseColors.redscale[300]};
+    color: ${({ theme }) => theme.baseColors.redscale[400]};
+  }
+`;
+
 const EvaluatorDetailContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -100,6 +138,9 @@ const ResultComment = styled.div`
 
 const S = {
   CardContainer,
+  CardHeaderContainer,
+  UtilButtonsContainer,
+  DeleteButton,
   EvaluatorDetailContainer,
   EvaluatorImagePlaceholder,
   EvaluatorDetail,

frontend/src/components/ApplicantModal/ApplicantEvalInfo/EvaluationForm/index.tsx

@@ -3,13 +3,13 @@ import { useState } from 'react';
 import Button from '@components/_common/atoms/Button';
 import InputField from '@components/_common/molecules/InputField';
 import TextField from '@components/_common/molecules/TextField';
+import Spinner from '@components/_common/atoms/Spinner';
+import StarRating from '@components/_common/molecules/StarRating';
 
 import { validateEvalContent, validateEvaluator } from '@domain/validations/evaluation';
-import useEvaluationMutation from '@hooks/useEvaluationMutation';
+import { evaluationMutations } from '@hooks/evaluations';
 import ValidationError from '@utils/errors/ValidationError';
 
-import Spinner from '@components/_common/atoms/Spinner';
-import StarRating from '@components/_common/molecules/StarRating';
 import { EVALUATION_CONTENT_MAX_LENGTH, EVALUATION_EVALUATOR_MAX_LENGTH } from '../constants';
 import S from './style';
 
@@ -35,7 +35,7 @@ export default function EvaluationForm({ processId, applicantId, onClose }: Eval
   const [formState, setFormState] = useState<EvaluationData>({ evaluator: '', score: 0, content: '' });
   const [contentErrorMessage, setContentErrorMessage] = useState<string | undefined>();
   const [evaluatorErrorMessage, setEvaluatorErrorMessage] = useState<string | undefined>();
-  const { mutate: submitNewEvaluation, isPending } = useEvaluationMutation({
+  const { mutate: submitNewEvaluation, isPending } = evaluationMutations.useCreateEvaluation({
     processId,
     applicantId,
     closeOnSuccess: onClose,
@@ -95,7 +95,7 @@ export default function EvaluationForm({ processId, applicantId, onClose }: Eval
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (window.confirm('평가를 등록한 후에는 수정하거나 삭제할 수 없습니다.\n등록하시겠습니까?')) {
+    if (window.confirm('등록된 평가는 수정이 불가능하며, 삭제 후 재작성만 가능합니다.\n이대로 등록하시겠습니까?')) {
       submitNewEvaluation({ processId, applicantId, ...formState });
     }
   };

frontend/src/components/ApplicantModal/ApplicantEvalInfo/index.tsx

@@ -1,18 +1,21 @@
 import { useState } from 'react';
-import useEvaluationQuery from '@hooks/useEvaluationQuery';
+
+import { evaluationQueries } from '@hooks/evaluations';
+
 import EvaluationForm from './EvaluationForm';
 import EvaluationAddButton from './EvaluationAddButton';
-import S from './style';
 import EvaluationCard from './EvaluationCard';
 
+import S from './style';
+
 interface ApplicantEvalInfoProps {
   applicantId: number;
   processId: number;
   isCurrentProcess: boolean;
 }
 
 export default function ApplicantEvalInfo({ applicantId, processId, isCurrentProcess }: ApplicantEvalInfoProps) {
-  const { evaluationList } = useEvaluationQuery({ applicantId, processId });
+  const { evaluationList } = evaluationQueries.useGetEvaluations({ processId, applicantId });
   const [isFormOpened, setIsFormOpened] = useState<boolean>(false);
 
   const renderFormSection = () => {
@@ -36,6 +39,9 @@ export default function ApplicantEvalInfo({ applicantId, processId, isCurrentPro
         {evaluationList.map((evaluationResult) => (
           <EvaluationCard
             key={evaluationResult.evaluationId}
+            evaluationId={evaluationResult.evaluationId}
+            processId={processId}
+            applicantId={applicantId}
             evaluationResult={evaluationResult}
           />
         ))}

frontend/src/hooks/evaluations.ts

@@ -0,0 +1,103 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+
+import { EvaluationResult } from '@customTypes/applicant';
+// import { useToast } from '@contexts/ToastContext';
+
+import evaluationApis from '@api/domain/evaluation';
+import QUERY_KEYS from '@hooks/queryKeys';
+
+interface DefaultQueryParams {
+  processId: number;
+  applicantId: number;
+}
+
+interface UseCreateEvaluationMutationParams extends DefaultQueryParams {
+  closeOnSuccess: () => void;
+}
+
+interface CreateMutationParams extends DefaultQueryParams {
+  evaluator: string;
+  score: number;
+  content: string;
+}
+
+function useEvaluationQuery({ processId, applicantId }: DefaultQueryParams) {
+  return useQuery<{ evaluations: EvaluationResult[] }>({
+    queryKey: [QUERY_KEYS.EVALUATION, processId, applicantId],
+    queryFn: () => evaluationApis.get({ processId, applicantId }),
+    enabled: !!processId && !!applicantId,
+  });
+}
+
+function useEvaluationQueryInvalidation() {
+  const queryClient = useQueryClient();
+  const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
+
+  return (processId: number, applicantId: number) => {
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.EVALUATION, processId, applicantId] });
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
+  };
+}
+
+export const evaluationQueries = {
+  useGetEvaluations: ({ processId, applicantId }: DefaultQueryParams) => {
+    const { data, error, isLoading } = useEvaluationQuery({ processId, applicantId });
+
+    const evaluations = data?.evaluations || [];
+
+    const evaluationList: EvaluationResult[] = evaluations.map((e) => ({
+      evaluationId: e.evaluationId,
+      evaluator: e.evaluator ?? undefined,
+      score: e.score,
+      content: e.content,
+      createdDate: e.createdDate ?? undefined,
+    }));
+
+    return {
+      evaluations,
+      evaluationList,
+      error,
+      isLoading,
+    };
+  },
+};
+
+export const evaluationMutations = {
+  useCreateEvaluation: ({ processId, applicantId, closeOnSuccess }: UseCreateEvaluationMutationParams) => {
+    const invalidateQueries = useEvaluationQueryInvalidation();
+    /**
+     * 지원자 상세 모달이 <dialog>로 구현되어, 모달이 toast 메시지를 덮는 문제가 남아있습니다.
+     * 모달이 <div> 기반으로 재구현될 때까지 toast 메시지 코드를 주석 처리합니다.
+     * - 25/01/08 아르
+     */
+    // const toast = useToast();
+
+    return useMutation({
+      mutationFn: (params: CreateMutationParams) => evaluationApis.create(params),
+      onSuccess: () => {
+        invalidateQueries(processId, applicantId);
+        closeOnSuccess();
+        // toast.success('지원자에 대한 평가가 등록되었습니다.');
+      },
+    });
+  },
+
+  useDeleteEvaluation: ({ processId, applicantId }: DefaultQueryParams) => {
+    const invalidateQueries = useEvaluationQueryInvalidation();
+    /**
+     * 지원자 상세 모달이 <dialog>로 구현되어, 모달이 toast 메시지를 덮는 문제가 남아있습니다.
+     * 모달이 <div> 기반으로 재구현될 때까지 toast 메시지 코드를 주석 처리합니다.
+     * - 25/01/08 아르
+     */
+    // const toast = useToast();
+
+    return useMutation({
+      mutationFn: ({ evaluationId }: { evaluationId: number }) => evaluationApis.delete({ evaluationId }),
+      onSuccess: () => {
+        invalidateQueries(processId, applicantId);
+        // toast.success('지원자에 대한 해당 평가가 삭제되었습니다.');
+      },
+    });
+  },
+};

frontend/src/hooks/useEvaluationMutation/index.ts

@@ -31,6 +31,20 @@ const evaluationHandlers = [
       statusText: 'Created',
     });
   }),
+
+  http.delete(`${EVALUATIONS}/:evaluationId`, async ({ params }) => {
+    if (!params.evaluationId) {
+      return new Response(null, {
+        status: 400,
+        statusText: 'Evaluation Id Not Found',
+      });
+    }
+
+    return new Response(null, {
+      status: 204,
+      statusText: 'No Content',
+    });
+  }),
 ];
 
 export default evaluationHandlers;