[dev] mock api 작성

src/adminPage/features/comment/index.jsx

@@ -1,70 +1,91 @@
 import { useState } from "react";
+import { fetchServer } from "@common/dataFetch/fetchServer";
 
 export default function AdminComment() {
   const [formString, setFormString] = useState("");
   const [isSpread, setIsSpread] = useState(false);
-  const searchList = [
-    {
-      id: "HD_2409_01",
-      name: "이벤트",
-    },
-    {
-      id: "HD_2409_02",
-      name: "이벤트",
-    },
-    {
-      id: "HD_2409_03",
-      name: "이벤트",
-    },
-  ];
+  const [searchList, setSearchList] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  function autoCorrect() {
+    fetchServer(`/api/v1/admin/events/hints?search=${formString}`)
+      .then((res) => {
+        setSearchList(res);
+        setIsSpread(true);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
 
   function onChangeForm(e) {
     const filteredString = e.target.value.replace(/[^0-9]/g, "");
 
     if (!filteredString) {
       setFormString("");
-    } else if (filteredString.length <= 4) {
-      setFormString("HD_" + filteredString);
     } else if (filteredString.length <= 6) {
+      setFormString("HD_" + filteredString);
+    } else if (filteredString.length <= 9) {
       setFormString(
-        "HD_" + filteredString.slice(0, 4) + "_" + filteredString.slice(4),
+        "HD_" + filteredString.slice(0, 6) + "_" + filteredString.slice(6),
       );
+    } else return;
+
+    if (filteredString.length >= 6) {
+      autoCorrect();
+    } else setIsSpread(false);
+  }
+
+  function onKeyDownForm(e) {
+    if (!isSpread) return;
+    switch (e.key) {
+      case "ArrowUp":
+        setSelectedIndex((idx) => idx - 1);
+        break;
+      case "ArrowDown":
+        setSelectedIndex((idx) => idx + 1);
+        break;
     }
   }
 
-  function searchComment(e, eventId) {
+  function searchComment(e) {
     e.preventDefault();
 
-    if (eventId) console.log(eventId + " 검색");
-    else console.log(formString + " 검색");
+    console.log(formString + " 검색");
   }
 
   return (
     <form onSubmit={searchComment} className="relative mt-10 flex">
       <input
         type="text"
         inputMode="numeric"
+        onKeyDown={onKeyDownForm}
         onChange={onChangeForm}
-        onFocus={() => setIsSpread(true)}
-        onBlur={() => setIsSpread(false)}
         value={formString}
-        placeholder="ID (숫자 6자리)"
-        className={`outline outline-1 outline-neutral-500 px-4 py-2 w-full ${isSpread ? "rounded-t-md" : "rounded-md"}`}
+        placeholder="ID (숫자 9자리)"
+        className={`z-10 outline outline-1 outline-neutral-500 px-4 py-2 w-full ${isSpread ? "rounded-t-md" : "rounded-md"}`}
       />
 
       <div
-        className={`absolute top-full outline outline-1 w-full outline-neutral-500 rounded-b-md px-3 py-2 flex flex-col gap-2 ${!isSpread && "hidden"}`}
+        className={`absolute max-h-40 top-full outline outline-1 overflow-y-auto w-full outline-neutral-500 rounded-b-md px-3 py-2 flex flex-col gap-2 ${!isSpread && "hidden"}`}
       >
-        {searchList.map((evt) => (
+        {searchList.map((evt, index) => (
           <li
             key={evt.id}
+            onMouseEnter={() => setSelectedIndex(index)}
             onMouseDown={() => setFormString(evt.id)}
-            className="list-none w-full hover:bg-blue-200 rounded px-1 flex"
+            className={`list-none w-full rounded px-1 flex ${selectedIndex === index && "bg-blue-200"}`}
           >
             <span className="w-40">{evt.id}</span>
             <span>{evt.name}</span>
           </li>
         ))}
+
+        <span
+          className={`${searchList.length && "hidden"} text-neutral-300 text-body-s`}
+        >
+          일치하는 검색 결과가 없습니다.
+        </span>
       </div>
 
       <img

src/adminPage/features/comment/mock.js

@@ -0,0 +1,40 @@
+import { http, HttpResponse } from "msw";
+
+const sampleEventList = [
+  {
+    id: "HD_240909_001",
+    name: "이벤트1",
+  },
+  {
+    id: "HD_240909_002",
+    name: "이벤트2",
+  },
+  {
+    id: "HD_240909_003",
+    name: "이벤트3",
+  },
+  {
+    id: "HD_240909_004",
+    name: "이벤트4",
+  },
+  {
+    id: "HD_240909_005",
+    name: "이벤트5",
+  },
+  {
+    id: "HD_240909_006",
+    name: "이벤트6",
+  },
+  {
+    id: "HD_240909_007",
+    name: "이벤트7",
+  },
+];
+
+const handlers = [
+  http.get("/api/v1/admin/events/hints", () =>
+    HttpResponse.json(sampleEventList),
+  ),
+];
+
+export default handlers;

src/adminPage/mock.js

@@ -1,7 +1,8 @@
 import { setupWorker } from "msw/browser";
 import authHandler from "@admin/auth/mock.js";
+import commentHandler from "./features/comment/mock.js";
 
 // mocking은 기본적으로 각 feature 폴더 내의 mock.js로 정의합니다.
 // 새로운 feature의 mocking을 추가하셨으면, mock.js의 setupWorker 내부 함수에 인자를 spread 연산자를 이용해 추가해주세요.
 // 예시 : export default setupWorker(...authHandler, ...questionHandler, ...articleHandler);
-export default setupWorker(...authHandler);
+export default setupWorker(...authHandler, ...commentHandler);

src/adminPage/pages/CommentsPage.jsx

@@ -4,7 +4,7 @@ import AdminComment from "../features/comment";
 export default function CommentsPage() {
   return (
     <Container>
-      <div className="flex flex-col w-full h-dvh p-20">
+      <div className="flex flex-col w-full p-20">
         <span className="text-title-l">기대평</span>
 
         <AdminComment />