From 70193d5d2d5b8e96f7df10d0956a4b67e34ec15d Mon Sep 17 00:00:00 2001
From: darkdulgi <daniel99285@gmail.com>
Date: Wed, 21 Aug 2024 14:45:06 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=96=B4=EB=93=9C=EB=AF=BC=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=A1=B0=ED=9A=8C=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=9C=84=ED=95=9C=20=EC=82=AC=EC=A0=84?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/adminPage/features/users/Users.jsx |  3 ++-
 src/adminPage/features/users/index.jsx | 35 ++++++++++++++++++--------
 src/adminPage/features/users/mock.js   |  1 +
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/adminPage/features/users/Users.jsx b/src/adminPage/features/users/Users.jsx
index c4c9d866..9ad1ad0f 100644
--- a/src/adminPage/features/users/Users.jsx
+++ b/src/adminPage/features/users/Users.jsx
@@ -3,7 +3,7 @@ import { fetchServer } from "@common/dataFetch/fetchServer.js";
 import Pagination from "@admin/components/Pagination";
 import { useState } from "react";
 
-export default function Comments({ searchString }) {
+export default function Comments({ searchString, category }) {
   searchString;
   const [page, setPage] = useState(1);
   const data = useQuery(
@@ -11,6 +11,7 @@ export default function Comments({ searchString }) {
     () =>
       fetchServer(`/api/v1/admin/event-users?page=${page - 1}&search=${searchString}&size=15`)
         .then((res) => {
+          console.log(category);
           return res;
         })
         .catch((e) => {
diff --git a/src/adminPage/features/users/index.jsx b/src/adminPage/features/users/index.jsx
index c45c3162..bb4afb49 100644
--- a/src/adminPage/features/users/index.jsx
+++ b/src/adminPage/features/users/index.jsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 export default function AdminCommentID() {
   const [formString, setFormString] = useState("");
   const [searchString, setSearchString] = useState("");
+  const [category, setCategory] = useState("name");
 
   function searchComment(e) {
     e.preventDefault();
@@ -14,9 +15,11 @@ export default function AdminCommentID() {
 
   return (
     <div className="relative flex flex-col w-full items-center">
-      <div className="absolute -top-6 flex gap-1 text-body-s self-start">
-        <span className={`pl-1 text-red-500 ${!searchString && "hidden"}`}>성명 검색 문자열:</span>
-        <span className={`text-red-500 italic ${!searchString && "hidden"}`}>{searchString}</span>
+      <div
+        className={`absolute -top-6 flex gap-1 text-body-s self-start ${!searchString && "hidden"}`}
+      >
+        <span className={`pl-1 text-red-500`}>검색 문자열:</span>
+        <span className={`text-red-500 italic`}>{searchString}</span>
       </div>
 
       <form onSubmit={searchComment} className="w-full relative">
@@ -28,12 +31,24 @@ export default function AdminCommentID() {
           className="bg-neutral-50 focus:bg-white w-full px-4 py-2 rounded-lg text-body-s"
         />
 
-        <img
-          onClick={searchComment}
-          src="/icons/search.png"
-          alt="검색"
-          className="cursor-pointer absolute top-1/2 -translate-y-1/2 right-4"
-        />
+        <div className="absolute top-1/2 -translate-y-1/2 right-4 flex gap-3">
+          <select
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            className="bg-transparent text-neutral-600"
+          >
+            <option value="name">성명</option>
+            <option value="phoneNumber">전화번호</option>
+            <option value="frameId">FrameId</option>
+          </select>
+
+          <img
+            onClick={searchComment}
+            src="/icons/search.png"
+            alt="검색"
+            className="cursor-pointer "
+          />
+        </div>
       </form>
 
       <div className="mt-3 py-1 w-full grid grid-cols-[1fr_1fr_2fr] bg-blue-50 place-items-center text-body-s select-none">
@@ -43,7 +58,7 @@ export default function AdminCommentID() {
       </div>
 
       <Suspense fallback={<Loading />}>
-        <Users searchString={searchString} />
+        <Users searchString={searchString} category={category} />
       </Suspense>
     </div>
   );
diff --git a/src/adminPage/features/users/mock.js b/src/adminPage/features/users/mock.js
index e7676a30..7005b05d 100644
--- a/src/adminPage/features/users/mock.js
+++ b/src/adminPage/features/users/mock.js
@@ -8,6 +8,7 @@ function getRandomUsers() {
     users = [
       ...users,
       {
+        id: i,
         userName: getRandomString(3),
         phoneNumber: "010-0000-0000",
         frameId: "event-test",