Merge pull request #118 from team-incube/fix/evaluation

fix: 심사 페이지 변경 사항 반영

Author: bae080311

src/entities/evaluation/api/saveScore.ts

@@ -1,4 +1,6 @@
 import instance from "@/shared/lib/axios";
+import { AxiosError } from "axios";
+import { toast } from "sonner";
 
 export const saveScore = async (
   team_id: number,
@@ -12,8 +14,18 @@ export const saveScore = async (
       completion_expression,
       creativity_composition,
     });
+    if (res.status === 200) {
+      toast.success("심사가 저장되었습니다");
+    }
     return res;
   } catch (error) {
-    throw error;
+    const axiosError = error as AxiosError;
+    const errorMessage =
+      axiosError?.response?.data &&
+      typeof axiosError.response.data === "object" &&
+      "message" in axiosError.response.data
+        ? (axiosError.response.data as { message: string }).message
+        : "심사 실패했습니다.";
+    throw new Error(errorMessage);
   }
 };

src/entities/evaluation/const/max.ts

@@ -0,0 +1,5 @@
+export const MAX = {
+  perform: 30,
+  compleition: 40,
+  creativity: 30,
+} as const;

src/entities/evaluation/ui/Dropdown/index.tsx

@@ -1,167 +1,99 @@
 "use client";
 
-import { CheckIcon } from "@/shared/asset/svg/CheckIcon";
-import { Button } from "@/shared/ui";
-import { useCallback, useEffect, useState } from "react";
-import CustomDropdown from "../Dropdown";
 import { Score } from "@/views/evaluation/model/score";
-import { saveScore } from "../../api/saveScore";
-import { toast } from "sonner";
-import { colors } from "@/shared/utils/color";
 import { cn } from "@/shared/utils/cn";
-
-type Label = "completion_expression" | "creativity_composition" | "stage_manner_performance";
-
-type ValueType = {
-  write: boolean;
-  max: number;
-  show: boolean;
-  label: Label;
-};
-
-const scores: ValueType[] = [
-  { write: false, max: 40, show: false, label: "completion_expression" },
-  { write: false, max: 30, show: false, label: "creativity_composition" },
-  { write: false, max: 30, show: false, label: "stage_manner_performance" },
-];
+import { Button } from "@/shared/ui";
+import DownArrow from "@/shared/asset/svg/DownArrow";
+import UpArrow from "@/shared/asset/svg/UpArrow";
+import { useCallback, useState } from "react";
+import { saveScore } from "../../api/saveScore";
+import { MAX } from "../../const/max";
 
 export default function EvaluationCard({
-  judge_id,
   stage_manner_performance,
   completion_expression,
   creativity_composition,
-  total_score,
   team_id,
   team_name,
-  is_judged,
   is_performed,
 }: Score) {
-  const [values, setValues] = useState<ValueType[]>(scores);
-  const [scoreValues, setScoreValues] = useState<Record<Label, number>>({
-    completion_expression: 0,
-    creativity_composition: 0,
-    stage_manner_performance: 0,
-  });
-  const [variant, setVariant] = useState<"submitted" | "active" | "disabled">("active");
+  const [perform, setPerform] = useState(stage_manner_performance);
+  const [compleition, setCompleition] = useState(completion_expression);
+  const [creativity, setCreativity] = useState(creativity_composition);
 
-  useEffect(() => {
-    setScoreValues({
-      completion_expression: Number(completion_expression) || 0,
-      creativity_composition: Number(creativity_composition) || 0,
-      stage_manner_performance: Number(stage_manner_performance) || 0,
-    });
-    if (is_judged) {
-      setVariant("submitted");
-      return;
-    } else if (!is_performed) {
-      setVariant("disabled");
+  const handleUp = useCallback((evaluationType: "perform" | "compleition" | "creativity") => {
+    switch (evaluationType) {
+      case "perform":
+        setPerform(prev => Math.min(prev + 1, MAX.perform));
+        break;
+      case "compleition":
+        setCompleition(prev => Math.min(prev + 1, MAX.compleition));
+        break;
+      case "creativity":
+        setCreativity(prev => Math.min(prev + 1, MAX.creativity));
+        break;
     }
-  }, [
-    judge_id,
-    stage_manner_performance,
-    completion_expression,
-    creativity_composition,
-    total_score,
-    team_id,
-    is_judged,
-    is_performed,
-  ]);
+  }, []);
 
-  const handleSave = useCallback(async () => {
-    const { completion_expression, creativity_composition, stage_manner_performance } = scoreValues;
-    const res = await saveScore(
-      team_id,
-      Number(stage_manner_performance) || 0,
-      Number(completion_expression) || 0,
-      Number(creativity_composition) || 0,
-    );
-    if (res.status === 200) {
-      toast.success("심사 내용이 저장되었습니다");
-      setVariant("submitted");
-    } else {
-      toast.error("심사 내용 저장에 실패하였습니다");
-      setVariant("active");
+  const handleDown = useCallback((evaluationType: "perform" | "compleition" | "creativity") => {
+    switch (evaluationType) {
+      case "perform":
+        setPerform(prev => Math.max(prev - 1, 0));
+        break;
+      case "compleition":
+        setCompleition(prev => Math.max(prev - 1, 0));
+        break;
+      case "creativity":
+        setCreativity(prev => Math.max(prev - 1, 0));
+        break;
     }
-  }, [team_id, scoreValues]);
-
-  const changeActive = useCallback(() => {
-    setVariant("active");
   }, []);
 
+  const handleSave = useCallback(() => {
+    saveScore(team_id, perform, compleition, creativity);
+  }, [team_id, perform, compleition, creativity]);
+
   return (
-    <ul
+    <div
       className={cn(
-        "w-full text-body3b flex py-14 border items-center rounded-md border-gray-100 border-solid justify-between px-24 pl-[80px]",
+        "text-body1b grid grid-cols-6 py-14 border text-gray-300 mx-24 rounded-md border-gray-100 border-solid items-center text-center",
         !is_performed && "bg-#E9E9E9",
       )}
     >
-      <li className="text-main-600">{team_id + ". " + team_name}</li>
-      {values.map((v, i) => {
-        return v.write ? (
-          <input
-            className="w-[46.53px]"
-            key={v.label}
-            max={v.max}
-            min={0}
-            type="number"
-            value={scoreValues[v.label]}
-            onChange={e => {
-              const val = e.target.value === "" ? 0 : Number(e.target.value);
-
-              if (!Number.isNaN(val) && val <= v.max && val >= 0) {
-                setScoreValues(prev => ({ ...prev, [v.label]: val }));
-              }
-            }}
-            onBlur={() => {
-              setValues(prev =>
-                prev.map((item, idx) =>
-                  idx === i
-                    ? {
-                        ...item,
-                        write: false,
-                        show: false,
-                      }
-                    : item,
-                ),
-              );
-            }}
-            autoFocus
-          />
-        ) : (
-          <CustomDropdown
-            key={v.label}
-            value={scoreValues[v.label]}
-            max={v.max}
-            isOpen={v.show}
-            onToggle={() => {
-              setValues(prev =>
-                prev.map((item, idx) => (idx === i ? { ...item, show: !item.show } : item)),
-              );
-            }}
-            onSelect={selectedValue => {
-              setScoreValues(prev => ({ ...prev, [v.label]: Number(selectedValue) }));
-              setValues(prev =>
-                prev.map((item, idx) =>
-                  idx === i ? { ...item, write: false, show: false } : item,
-                ),
-              );
-            }}
-            onDoubleClick={() => {
-              setValues(prev =>
-                prev.map((item, idx) => (idx === i ? { ...item, write: true, show: false } : item)),
-              );
-            }}
-          />
-        );
-      })}
-      <Button
-        onClick={variant === "submitted" ? changeActive : handleSave}
-        variant={variant === "submitted" ? "third" : "default"}
-        className={cn("py-12 px-16 gap-12 w-[126px] justify-center flex items-center")}
-      >
-        <CheckIcon color={variant === "submitted" ? colors.main[600] : "white"} />
-        {Object.values(scoreValues).reduce((sum, n) => sum + Number(n || 0), 0)}
-      </Button>
-    </ul>
+      <div className="text-main-600 text-center">{team_id + ". " + team_name}</div>
+      <div className="flex items-center justify-center gap-8">
+        <span className="ml-12">{compleition}</span>
+        <div onClick={() => handleDown("compleition")}>
+          <DownArrow height={36} width={37} />
+        </div>
+        <div onClick={() => handleUp("compleition")}>
+          <UpArrow />
+        </div>
+      </div>
+      <div className="flex items-center justify-center gap-8">
+        <span className="ml-12">{creativity}</span>
+        <div onClick={() => handleDown("creativity")}>
+          <DownArrow height={36} width={37} />
+        </div>
+        <div onClick={() => handleUp("creativity")}>
+          <UpArrow />
+        </div>
+      </div>
+      <div className="flex items-center justify-center gap-8">
+        <span className="ml-12">{perform}</span>
+        <div onClick={() => handleDown("perform")}>
+          <DownArrow height={36} width={37} />
+        </div>
+        <div onClick={() => handleUp("perform")}>
+          <UpArrow />
+        </div>
+      </div>
+      <div className="text-main-600 text-center">{perform + compleition + creativity}</div>
+      <div className="w-full flex justify-center px-24 gap-24">
+        <Button onClick={handleSave} className="text-body2b w-1/2">
+          저장
+        </Button>
+      </div>
+    </div>
   );
 }

src/entities/evaluation/ui/EvaluationCard/index.tsx

@@ -1,28 +1,29 @@
 export default function Standard() {
   return (
-    <ul
-      className="bg-gray-50 px-[40px
-
-    ] w-full mt-24 mb-[41px] text-body3b items-center flex justify-around text-center py-24"
-    >
-      <li>팀명</li>
-      <li>
+    <div className="bg-gray-50 px-[40px] w-full mt-24 mb-20 text-body2b grid grid-cols-6 text-center py-24 items-center">
+      <div>
+        연번
+        <br />
+        (심사번호)
+      </div>
+      <div>
         완성도 및 표현력
         <br /> (40)
-      </li>
-      <li>
+      </div>
+      <div>
         창의력과 구성
         <br />
         (30)
-      </li>
-      <li>
+      </div>
+      <div>
         무대매너 및 퍼포먼스 등<br />
         (30)
-      </li>
-      <li>
+      </div>
+      <div>
         계<br />
         (100)
-      </li>
-    </ul>
+      </div>
+      <div>저장</div>
+    </div>
   );
 }

src/entities/evaluation/ui/Standard/index.tsx

@@ -0,0 +1,18 @@
+import { SvgProps } from "@/shared/model/SvgProps";
+
+export default function UpArrow({ height = 36, width = 37, color = "#7A7A7A" }: SvgProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 37 36"
+      fill="none"
+    >
+      <path
+        d="M12.68 22.0649L18.5 16.2449L24.32 22.0649C24.4589 22.2038 24.6237 22.3139 24.8052 22.3891C24.9866 22.4642 25.1811 22.5029 25.3775 22.5029C25.5739 22.5029 25.7684 22.4642 25.9498 22.3891C26.1313 22.3139 26.2961 22.2038 26.435 22.0649C26.5739 21.926 26.684 21.7611 26.7592 21.5797C26.8343 21.3983 26.873 21.2038 26.873 21.0074C26.873 20.811 26.8343 20.6165 26.7592 20.4351C26.684 20.2536 26.5739 20.0888 26.435 19.9499L19.55 13.0649C19.4112 12.9258 19.2464 12.8155 19.0649 12.7402C18.8835 12.665 18.6889 12.6262 18.4925 12.6262C18.296 12.6262 18.1015 12.665 17.9201 12.7402C17.7386 12.8155 17.5738 12.9258 17.435 13.0649L10.55 19.9499C10.4109 20.0887 10.3006 20.2535 10.2253 20.435C10.1501 20.6164 10.1113 20.8109 10.1113 21.0074C10.1113 21.2038 10.1501 21.3984 10.2253 21.5798C10.3006 21.7613 10.4109 21.9261 10.55 22.0649C11.135 22.6349 12.095 22.6499 12.68 22.0649Z"
+        fill={color}
+      />
+    </svg>
+  );
+}