[feat] 어드민 이벤트 생성/수정 기능 구현 (resolve #29)

src/adminPage/App.jsx

@@ -26,11 +26,7 @@ function App() {
       <Routes>
         <Route element={<ProtectedRoute />}>
           <Route exact path="/events/create" element={<EventsCreatePage />} />
-          <Route
-            exact
-            path="/events/:eventId/edit"
-            element={<EventsEditPage />}
-          />
+          <Route exact path="/events/:eventId/edit" element={<EventsEditPage />} />
           <Route path="/events/:eventId" element={<EventsDetailPage />} />
           <Route path="/events" element={<EventsPage />} />
           <Route path="/comments/:eventId" element={<CommentsIDPage />} />

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

@@ -1,22 +1,16 @@
 import { useQuery } from "@common/dataFetch/getQuery.js";
 import { fetchServer } from "@common/dataFetch/fetchServer.js";
 
-export default function Comments({
-  eventId,
-  checkedComments,
-  setCheckedComments,
-  page,
-  setAllId,
-}) {
+export default function Comments({ eventId, checkedComments, setCheckedComments, page, setAllId }) {
   const data = useQuery(
     eventId,
     () =>
-      fetchServer(
-        `/api/v1/admin/comments?eventId=${eventId}&page=${page}&size=15`,
-      ).then(({ comments }) => {
-        setAllId(comments.map((comment) => comment.id));
-        return comments;
-      }),
+      fetchServer(`/api/v1/admin/comments?eventId=${eventId}&page=${page}&size=15`).then(
+        ({ comments }) => {
+          setAllId(comments.map((comment) => comment.id));
+          return comments;
+        },
+      ),
     [page],
   );
 
@@ -64,9 +58,7 @@ export default function Comments({
           <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>
+            <span className="text-neutral-500">{getTime(comment.createdAt)}</span>
           </div>
 
           <span className="text-body-s">{comment.content}</span>

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

@@ -4,11 +4,7 @@ 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,
-}) {
+export default function DeleteButton({ eventId, checkedComments, setCheckedComments }) {
   const num = checkedComments.size;
   const mutation = useMutation(eventId, () =>
     fetchServer("/api/v1/admin/comments", {
@@ -18,9 +14,7 @@ export default function DeleteButton({
       },
     })
       .then(() => {
-        openModal(
-          <AlertModal title="삭제" description="기대평이 삭제되었습니다." />,
-        );
+        openModal(<AlertModal title="삭제" description="기대평이 삭제되었습니다." />);
         setCheckedComments(new Set());
       })
       .catch((e) => {

src/adminPage/features/comment/index.jsx

@@ -27,9 +27,7 @@ export default function AdminComment() {
     } else if (filteredString.length <= 6) {
       setFormString("HD_" + filteredString);
     } else if (filteredString.length <= 9) {
-      setFormString(
-        "HD_" + filteredString.slice(0, 6) + "_" + filteredString.slice(6),
-      );
+      setFormString("HD_" + filteredString.slice(0, 6) + "_" + filteredString.slice(6));
     } else return;
 
     if (filteredString.length >= 6) {
@@ -73,9 +71,7 @@ export default function AdminComment() {
           </li>
         ))}
 
-        <span
-          className={`${searchList.length && "hidden"} text-neutral-300 text-body-s`}
-        >
+        <span className={`${searchList.length && "hidden"} text-neutral-300 text-body-s`}>
           일치하는 검색 결과가 없습니다.
         </span>
       </div>

src/adminPage/features/comment/mock.js

@@ -1,7 +1,6 @@
 import { http, HttpResponse } from "msw";
 import getRandomString from "@common/mock/getRandomString";
 
-
 function getSampleEventList() {
   const len = 10;
   let eventList = [];
@@ -35,12 +34,8 @@ function getSampleCommentList() {
 }
 
 const handlers = [
-  http.get("/api/v1/admin/events/hints", () =>
-    HttpResponse.json(getSampleEventList()),
-  ),
-  http.get("/api/v1/admin/comments", () =>
-    HttpResponse.json(getSampleCommentList()),
-  ),
+  http.get("/api/v1/admin/events/hints", () => HttpResponse.json(getSampleEventList())),
+  http.get("/api/v1/admin/comments", () => HttpResponse.json(getSampleCommentList())),
   http.delete("/api/v1/admin/comments", () => HttpResponse.json(true)),
 ];
 

src/adminPage/features/eventEdit/DateTimeRangeInput.jsx

@@ -6,12 +6,11 @@ function dateToSplittedState(date) {
   return formatDate(date, "YYYY-MM-DD hh:mm").split(" ");
 }
 
-function applyDateInputToDateObj(inputValue, timeValue) {
+function applyDateInputToDateObj(inputValue, timeValue, defaultTime = "00:00") {
   if (inputValue === "") return null;
   const [y, m, d] = inputValue.split("-").map(Number);
 
-  let date =
-    timeValue === null ? new Date("1970.1.1 00:00") : new Date(timeValue);
+  let date = timeValue === null ? new Date(`1970.1.1 ${defaultTime}`) : new Date(timeValue);
 
   date.setFullYear(y);
   date.setMonth(m - 1);
@@ -56,7 +55,7 @@ function DateTimeRangeInput({
 
   function setEndDate(value) {
     if (value === "") return setRange([range[0], null]);
-    let date = applyDateInputToDateObj(value, range[1]);
+    let date = applyDateInputToDateObj(value, range[1], "23:55");
     if (range[0] === null || date >= range[0]) setRange([range[0], date]);
     else setRange([range[0], range[0]]);
   }

src/adminPage/features/eventEdit/DrawInput/DrawMetadataInput.jsx

@@ -0,0 +1,45 @@
+import { useContext } from "react";
+import { EventEditContext, EventEditDispatchContext } from "../businessLogic/context.js";
+import DrawMetadataItemInput from "./DrawMetadataItemInput.jsx";
+
+function DrawMetadataInput() {
+  const {
+    draw: { metadata },
+  } = useContext(EventEditContext);
+  const dispatch = useContext(EventEditDispatchContext);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-left items-center gap-2 h-10 text-body-l">
+        <span className="font-bold">
+          등수<sup className="text-red-500">*</sup> :{" "}
+        </span>
+        <select
+          className="w-24 h-full text-body-l font-medium"
+          value={metadata.size}
+          onChange={(e) => dispatch({ type: "modify_draw_total_grade", value: +e.target.value })}
+        >
+          {Array.from({ length: 10 }, (_, i) => (
+            <option value={i + 1} key={`select-grades-${i}`}>
+              {i + 1}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="grid grid-cols-[3rem_6rem_1fr] gap-4 font-bold items-center">
+          <div className="text-center">등수</div>
+          <div className="text-center">인원 수</div>
+          <div className="text-center">경품</div>
+        </div>
+        <div className="grid grid-cols-[3rem_6rem_1fr] gap-4 gap-y-2 font-regular items-center">
+          {[...metadata].map((data) => (
+            <DrawMetadataItemInput key={data.grade} {...data} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DrawMetadataInput;

src/adminPage/features/eventEdit/DrawInput/DrawMetadataItemInput.jsx

@@ -0,0 +1,34 @@
+import { useContext } from "react";
+import { EventEditDispatchContext } from "../businessLogic/context.js";
+import { Input } from "@admin/components/SmallInput.jsx";
+
+function DrawMetadataItemInput({ grade, count, prizeInfo }) {
+  const dispatch = useContext(EventEditDispatchContext);
+  const modify = (value) =>
+    dispatch({ type: "modify_draw_grade_item", value: { grade, ...value } });
+
+  return (
+    <>
+      <div className="text-center font-medium">{grade}등</div>
+      <div className="text-center">
+        <Input
+          text={count}
+          required
+          setText={(value) => modify({ count: Number.isNaN(+value) ? 0 : +value })}
+          inputMode="numeric"
+          pattern="[0-9]+"
+          size="3"
+          placeholder="인원"
+        />
+        명
+      </div>
+      <Input
+        text={prizeInfo}
+        setText={(value) => modify({ prizeInfo: value })}
+        placeholder="경품 이름 입력"
+      />
+    </>
+  );
+}
+
+export default DrawMetadataItemInput;

src/adminPage/features/eventEdit/DrawInput/DrawPolicyInput.jsx

@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { EventEditContext, EventEditDispatchContext } from "../businessLogic/context.js";
+import DrawPolicyItemInput from "./DrawPolicyItemInput.jsx";
+import Button from "@common/components/Button.jsx";
+
+function DrawPolicyInput() {
+  const {
+    draw: { policies },
+  } = useContext(EventEditContext);
+  const dispatch = useContext(EventEditDispatchContext);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-[3fr_1fr_3rem] gap-4 items-center font-bold">
+        <div className="text-center">액션</div>
+        <div className="text-center">배율</div>
+        <div className="text-center">삭제</div>
+      </div>
+      <div className="grid grid-cols-[3fr_1fr_3rem] gap-4 gap-y-2 items-center font-medium">
+        {[...policies].map(({ key, ...data }) => (
+          <DrawPolicyItemInput key={key} uniqueKey={key} {...data} />
+        ))}
+      </div>
+      <Button onClick={() => dispatch({ type: "add_draw_policy" })}>+ 추가하기</Button>
+    </div>
+  );
+}
+
+export default DrawPolicyInput;

src/adminPage/features/eventEdit/DrawInput/DrawPolicyItemInput.jsx

@@ -0,0 +1,44 @@
+import { useContext } from "react";
+import { EventEditDispatchContext } from "../businessLogic/context.js";
+import { Input } from "@admin/components/SmallInput.jsx";
+import DeleteButton from "@admin/components/DeleteButton";
+
+const POLICY_ENUM = [
+  ["WriteComment", "기대평 작성"],
+  ["ParticipateEvent", "이벤트 참여"],
+];
+
+function DrawPolicyItemInput({ action, score, uniqueKey }) {
+  const dispatch = useContext(EventEditDispatchContext);
+  const modify = (value) => dispatch({ type: "modify_draw_policy", key: uniqueKey, value });
+
+  return (
+    <>
+      <select
+        className="invalid:text-neutral-400"
+        value={action}
+        required
+        onChange={(e) => modify({ action: e.target.value })}
+      >
+        <option value="">-정책을 설정하세요-</option>
+        {POLICY_ENUM.map(([key, text]) => (
+          <option value={key} key={key}>
+            {text}
+          </option>
+        ))}
+      </select>
+      <Input
+        text={score}
+        required
+        setText={(value) => modify({ score: Number.isNaN(+value) ? 0 : +value })}
+        inputMode="numeric"
+        pattern="[0-9]+"
+        size="6"
+        placeholder="점수 배율"
+      />
+      <DeleteButton onClick={() => dispatch({ type: "delete_draw_policy", key: uniqueKey })} />
+    </>
+  );
+}
+
+export default DrawPolicyItemInput;

src/adminPage/features/eventEdit/DrawInput/DrawSectionTitle.jsx

@@ -0,0 +1,9 @@
+function DrawSectionTitle({ children }) {
+  return (
+    <p className="font-bold text-body-l relative after:w-80 after:h-px after:absolute after:-bottom-1 after:left-0 after:border-b after:border-neutral-200">
+      {children}
+    </p>
+  );
+}
+
+export default DrawSectionTitle;

src/adminPage/features/eventEdit/DrawInput/index.jsx

@@ -0,0 +1,20 @@
+import DrawSectionTitle from "./DrawSectionTitle.jsx";
+import DrawMetadataInput from "./DrawMetadataInput.jsx";
+import DrawPolicyInput from "./DrawPolicyInput.jsx";
+
+function DrawInput() {
+  return (
+    <div className="w-full flex flex-col items-center gap-10">
+      <div className="flex flex-col gap-3 w-full max-w-[800px]">
+        <DrawSectionTitle>인원수 및 경품 설정</DrawSectionTitle>
+        <DrawMetadataInput />
+      </div>
+      <div className="flex flex-col gap-6 w-full max-w-[800px]">
+        <DrawSectionTitle>정책 설정</DrawSectionTitle>
+        <DrawPolicyInput />
+      </div>
+    </div>
+  );
+}
+
+export default DrawInput;