[feat] 어드민 기대평 페이지 구현

src/adminPage/features/comment/id/Comments.jsx

@@ -43,7 +43,7 @@ export default function Comments({
   }
 
   return (
-    <div className="mt-3 mb-5 flex flex-col gap-1 w-full">
+    <div className="mt-1 mb-5 flex flex-col gap-1 w-full">
       {data.map((comment) => (
         <div
           key={comment.id}
@@ -56,7 +56,7 @@ export default function Comments({
             className="w-4 h-4 place-self-center"
           />
 
-          <div className="place-self-center flex items-center gap-1 text-body-m">
+          <div className="place-self-center flex items-center gap-1 text-body-s">
             <span>{getDate(comment.createdAt)}</span>
 
             <span className="text-neutral-500">{getTime(comment.createdAt)}</span>

src/adminPage/features/comment/id/DeleteButton.jsx

@@ -0,0 +1,59 @@
+import { useMutation } from "@common/dataFetch/getQuery.js";
+import openModal from "@common/modal/openModal.js";
+import { fetchServer } from "@common/dataFetch/fetchServer.js";
+import ConfirmModal from "@admin/modals/ConfirmModal.jsx";
+import AlertModal from "@admin/modals/AlertModal.jsx";
+
+export default function DeleteButton({
+  eventId,
+  checkedComments,
+  setCheckedComments,
+}) {
+  const num = checkedComments.size;
+  const mutation = useMutation(eventId, () =>
+    fetchServer("/api/v1/admin/comments", {
+      method: "DELETE",
+      body: {
+        commentIds: [...checkedComments],
+      },
+    })
+      .then(() => {
+        openModal(
+          <AlertModal title="삭제" description="기대평이 삭제되었습니다." />,
+        );
+        setCheckedComments(new Set());
+      })
+      .catch((e) => {
+        alert("삭제 실패");
+        console.log(e);
+      }),
+  );
+
+  const deleteConfirmModal = (
+    <ConfirmModal
+      title="삭제"
+      description={
+        <>
+          <span>이 동작은 다시 돌이킬 수 없습니다.</span>
+          <br />
+          <span>{num}개의 이벤트를 삭제하시겠습니까?</span>
+        </>
+      }
+      onConfirm={mutation}
+    />
+  );
+
+  function deleteComments() {
+    if (!num) return;
+    openModal(deleteConfirmModal);
+  }
+
+  return (
+    <button
+      onClick={deleteComments}
+      className="self-end px-5 py-1 bg-red-300 text-white hover:bg-red-500 rounded-lg"
+    >
+      삭제
+    </button>
+  );
+}

src/adminPage/features/comment/id/Loading.jsx

@@ -2,7 +2,7 @@ import Spinner from "@common/components/Spinner";
 
 export default function Loading() {
   return (
-    <div className="flex justify-center items-center w-full h-60 bg-slate-50">
+    <div className="flex justify-center items-center w-full h-[600px] bg-slate-50">
       <Spinner />
     </div>
   );

src/adminPage/features/comment/id/index.jsx

@@ -2,68 +2,40 @@ import Suspense from "@common/components/Suspense";
 import Loading from "./Loading.jsx";
 import Comments from "./Comments.jsx";
 import { useState } from "react";
-import { fetchServer } from "@common/dataFetch/fetchServer.js";
 import Pagination from "@admin/components/Pagination";
 
+import DeleteButton from "./DeleteButton.jsx";
+
 export default function AdminCommentID({ eventId }) {
   const [checkedComments, setCheckedComments] = useState(new Set());
   const [page, setPage] = useState(1);
   const [formString, setFormString] = useState("");
 
-  function selectAll() {
-
-  }
-
-  function deleteComments() {
-    const num = checkedComments.size;
-    if (!num) return;
-
-    if (
-      confirm(
-        `이 동작은 다시 돌이킬 수 없습니다.\n${num}개의 기대평을 삭제하시겠습니까?`,
-      )
-    ) {
-      fetchServer("/api/v1/admin/comments", {
-        method: "DELETE",
-        body: {
-          commentIds: [...checkedComments],
-        },
-      })
-        .then(() => {
-          alert("기대평이 삭제되었습니다.");
-          setCheckedComments(new Set());
-          // Comments 컴포넌트 리렌더링
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    }
-  }
+  function selectAll() {}
 
   function searchComment(e) {
     e.preventDefault();
 
-    if(formString){
+    if (formString) {
       console.log(formString + "검색");
     }
   }
 
   return (
     <div className="flex flex-col w-full items-center">
-      <button
-        onClick={deleteComments}
-        className="self-end px-5 py-1 bg-red-300 text-white hover:bg-red-500 rounded-lg"
-      >
-        삭제
-      </button>
+      <DeleteButton
+        eventId={eventId}
+        checkedComments={checkedComments}
+        setCheckedComments={setCheckedComments}
+      />
 
-      <form onSubmit={searchComment} className="mt-5 w-full relative">
+      <form onSubmit={searchComment} className="mt-3 w-full relative">
         <input
           type="text"
           value={formString}
           onChange={(e) => setFormString(e.target.value)}
           placeholder="검색 단어 입력"
-          className="bg-neutral-50 focus:bg-white w-full px-4 py-2 rounded-lg"
+          className="bg-neutral-50 focus:bg-white w-full px-4 py-2 rounded-lg text-body-s"
         />
 
         <img
@@ -74,7 +46,7 @@ export default function AdminCommentID({ eventId }) {
         />
       </form>
 
-      <div className="mt-3 py-2 w-full grid grid-cols-[1fr_5fr_15fr] bg-blue-50 place-items-center">
+      <div className="mt-3 py-1 w-full grid grid-cols-[1fr_5fr_15fr] bg-blue-50 place-items-center text-body-s">
         <span onClick={selectAll}>선택</span>
         <span>작성 시간</span>
         <span>기대평 내용</span>

src/adminPage/pages/CommentsIDPage.jsx

@@ -8,7 +8,7 @@ export default function CommentsPage() {
   return (
     <Container>
       <div className="flex flex-col w-full p-20">
-        <span className="text-title-l pb-10">기대평</span>
+        <span className="text-title-l pb-5">기대평</span>
 
         <AdminCommentID eventId={eventId} />
       </div>