feat: show detail score

apps/admin/src/entities/member/api/getScore.ts

@@ -0,0 +1,18 @@
+import instance from "@repo/api";
+import { AxiosError } from "axios";
+import { toast } from "sonner";
+import type { ScoreResponse } from "../model/score";
+
+export const getScore = async (
+  id: string
+): Promise<ScoreResponse | undefined> => {
+  try {
+    const res = await instance.get(`/score/${id}`);
+    return res.data as ScoreResponse;
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      toast.error("점수 정보를 불러오는데 실패했습니다");
+    }
+  }
+  return undefined;
+};

apps/admin/src/entities/member/model/score.ts

@@ -0,0 +1,9 @@
+export interface ScoreResponse {
+  totalScore: number;
+  scores: Score[];
+}
+
+export interface Score {
+  categoryName: string;
+  value: number;
+}

apps/admin/src/entities/member/model/useGetScore.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { getScore } from "../api/getScore";
+import type { ScoreResponse } from "./score";
+
+export const useGetScore = (id: string) => {
+  return useQuery<ScoreResponse | undefined>({
+    queryKey: ["score", id],
+    queryFn: () => getScore(id),
+    enabled: !!id,
+  });
+};

apps/admin/src/entities/member/ui/scoreModal.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@repo/shared/button";
+import Card from "@repo/shared/card";
+import List from "@repo/shared/list";
+import { useGetScore } from "../model/useGetScore";
+import { getCategoryName } from "@repo/utils/handleCategory";
+
+interface ScoreModalProps {
+  close: () => void;
+  show: boolean;
+  id: string;
+}
+
+export default function ScoreModal({ show, close, id }: ScoreModalProps) {
+  const { data } = useGetScore(id as string);
+  if (!show) return null;
+  return (
+    <div className="fixed inset-0 z-10 bg-[rgba(17,17,17,0.2)] flex items-center justify-center">
+      <div className="gap-6 flex flex-col bg-white z-20 rounded-[1.25rem] px-[2.45rem] py-[2.25rem] max-sm:w-[20.5rem]">
+        <h3 className="text-tropicalblue-700 text-titleSmall">부분점수</h3>
+        <List className="p-0">
+          {data &&
+            data?.scores.map((v) => {
+              return (
+                <Card
+                  key={v.categoryName}
+                  front={
+                    (() => {
+                      const transformedCategoryName = getCategoryName(v.categoryName).replace(/^[^-]*-/, "");
+                      return transformedCategoryName.length > 20
+                        ? transformedCategoryName.slice(0, 20) + "..."
+                        : transformedCategoryName;
+                    })()
+                  }
+                  id={v.categoryName}
+                  back={v.value}
+                />
+              );
+            })}
+        </List>
+        <Button variant="skyblue" onClick={close} label="뒤로가기" />
+      </div>
+    </div>
+  );
+}

apps/admin/src/widgets/member/ui/information.tsx

@@ -2,11 +2,13 @@
 
 import { Button } from "@repo/shared/button";
 import { useRouter } from "next/navigation";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 import { useMember } from "@/entities/member/model/memberContext";
+import ScoreModal from "@/entities/member/ui/scoreModal";
 
 export default function Information() {
+  const [modal, setModal] = useState(false);
   const R = useRouter();
   const { member: student } = useMember();
 
@@ -18,6 +20,13 @@ export default function Information() {
     R.push(`/score/${student?.email}`);
   }, [R, student?.email]);
 
+  const open = useCallback(() => {
+    setModal(true);
+  }, []);
+  const close = useCallback(() => {
+    setModal(false);
+  }, []);
+
   if (student === undefined) {
     return <p className="text-center m-8">로딩중...</p>;
   }
@@ -31,19 +40,23 @@ export default function Information() {
             <span className="text-body1 text-gray-600">{student.name}</span>
             <small className="text-body2 text-gray-600">{`${student.grade}학년 ${student.classNumber}반 ${student.number}번`}</small>
           </div>
-          <div className="text-tropicalblue-700 mt-[1.25rem] md:mb-[2.56rem] sm:mb-[1.75rem] mb-[3rem] text-titleMedium h-[32rem] max-md:h-[10rem] max-lg:h-[10rem] flex items-center justify-center rounded-[0.75rem] bg-white">
+          <div
+            onClick={open}
+            className="text-tropicalblue-700 cursor-pointer mt-[1.25rem] md:mb-[2.56rem] sm:mb-[1.75rem] mb-[3rem] text-titleMedium h-[32rem] max-md:h-[10rem] max-lg:h-[10rem] flex items-center justify-center rounded-[0.75rem] bg-white"
+          >
             {student.totalScore + "점"}
           </div>
         </div>
-        <div className="flex flex-col gap-[0.75rem]">
-          <Button
-            label="글 보러가기"
-            variant="blue"
-            onClick={handleCheckPost}
-          />
-          <Button label="점수 관리" variant="skyblue" onClick={handleScore} />
-        </div>
       </div>
+      <div className="flex flex-col gap-[0.75rem]">
+        <Button label="글 보러가기" variant="blue" onClick={handleCheckPost} />
+        <Button label="점수 관리" variant="skyblue" onClick={handleScore} />
+      </div>
+      <ScoreModal
+        show={modal}
+        id={student?.email?.split("@")[0]?.slice(1) as string}
+        close={close}
+      />
     </div>
   );
 }

packages/shared/src/list.tsx

@@ -6,7 +6,7 @@ import { Filtered } from "./filtered.tsx";
 
 interface ListProps {
   children: React.ReactNode;
-  title: string;
+  title?: string;
   className?: string;
   isFilter?: boolean;
   onClick?: () => void;
@@ -25,7 +25,7 @@ const List = ({
         <h4
           className={`${className ?? ""} text-tropicalblue-700 text-titleSmall`}
         >
-          {title}
+          {title ?? ""}
         </h4>
         {isFilter ? (
           <span className="cursor-pointer" onClick={onClick}>