diff --git a/src/adminPage/App.jsx b/src/adminPage/App.jsx index 76e51fc0..32c60e5b 100644 --- a/src/adminPage/App.jsx +++ b/src/adminPage/App.jsx @@ -9,6 +9,7 @@ import ProtectedRoute from "./pages/ProtectedRoute.jsx"; import RootRoute from "./pages/RootRoute.jsx"; import CommentsPage from "./pages/CommentsPage.jsx"; import CommentsIDPage from "./pages/CommentsIDPage.jsx"; +import UsersPage from "./pages/UsersPage.jsx"; import ServerTimeInitializer from "./shared/serverTime/ServerTimeInitializer.jsx"; import Modal from "@common/modal/modal.jsx"; @@ -31,6 +32,7 @@ function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/adminPage/features/comment/index.jsx b/src/adminPage/features/comment/index.jsx index fec05d12..f55f36ef 100644 --- a/src/adminPage/features/comment/index.jsx +++ b/src/adminPage/features/comment/index.jsx @@ -20,18 +20,13 @@ export default function AdminComment() { } function onChangeForm(e) { - let newString = e.target.value.replace(/[^0-9]/g, ""); + const newString = e.target.value.replace(/[^0-9]/g, ""); + const filteredFormString = formString.replace(/[^0-9]/g, ""); - if (!newString) { - newString = ""; - } else if (newString.length <= 6) { - newString = "HD_" + newString; - } else if (newString.length <= 9) { - newString = "HD_" + newString.slice(0, 6) + "_" + newString.slice(6); - } else return; + if (newString.length > 9) return; - if (newString !== formString) { - if (newString.length >= 9) { + if (newString !== filteredFormString) { + if (newString.length >= 6) { setSelectedEvent(-1); setIsSpread(true); autoCorrect(newString); @@ -39,18 +34,20 @@ export default function AdminComment() { setIsSpread(false); } } - setFormString(newString); + if (!newString) { + setFormString(""); + } else if (newString.length <= 6) { + setFormString("HD_" + newString); + } else { + setFormString("HD_" + newString.slice(0, 6) + "_" + newString.slice(6)); + } } function searchEvent(e, eventId) { e.preventDefault(); - const eventIDRegex = /^HD_\d{6}_\d{3}$/; const searchID = eventId ?? formString; - - if (eventIDRegex.test(searchID)) { - navigate(`/comments/${searchID}`); - } + navigate(`/comments/${searchID}`); } function onKeyDown(e) { diff --git a/src/adminPage/features/users/Loading.jsx b/src/adminPage/features/users/Loading.jsx new file mode 100644 index 00000000..40e4ff40 --- /dev/null +++ b/src/adminPage/features/users/Loading.jsx @@ -0,0 +1,9 @@ +import Spinner from "@common/components/Spinner"; + +export default function Loading() { + return ( +
+ +
+ ); +} diff --git a/src/adminPage/features/users/Users.jsx b/src/adminPage/features/users/Users.jsx new file mode 100644 index 00000000..9ad1ad0f --- /dev/null +++ b/src/adminPage/features/users/Users.jsx @@ -0,0 +1,39 @@ +import { useQuery } from "@common/dataFetch/getQuery.js"; +import { fetchServer } from "@common/dataFetch/fetchServer.js"; +import Pagination from "@admin/components/Pagination"; +import { useState } from "react"; + +export default function Comments({ searchString, category }) { + searchString; + const [page, setPage] = useState(1); + const data = useQuery( + "admin-users", + () => + fetchServer(`/api/v1/admin/event-users?page=${page - 1}&search=${searchString}&size=15`) + .then((res) => { + console.log(category); + return res; + }) + .catch((e) => { + console.log(e); + }), + [page, searchString], + ); + + return ( +
+ {data.users.map((user) => ( +
+ {user.userName} + {user.phoneNumber} + {user.frameId} +
+ ))} + + +
+ ); +} diff --git a/src/adminPage/features/users/index.jsx b/src/adminPage/features/users/index.jsx new file mode 100644 index 00000000..bb4afb49 --- /dev/null +++ b/src/adminPage/features/users/index.jsx @@ -0,0 +1,65 @@ +import Suspense from "@common/components/Suspense"; +import Loading from "./Loading.jsx"; +import Users from "./Users.jsx"; +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(); + setSearchString(formString); + } + + return ( +
+
+ 검색 문자열: + {searchString} +
+ +
+ setFormString(e.target.value)} + placeholder="유저 성명 검색" + className="bg-neutral-50 focus:bg-white w-full px-4 py-2 rounded-lg text-body-s" + /> + +
+ + + 검색 +
+
+ +
+ 성명 + 전화번호 + 이벤트 frameId +
+ + }> + + +
+ ); +} diff --git a/src/adminPage/features/users/mock.js b/src/adminPage/features/users/mock.js new file mode 100644 index 00000000..7005b05d --- /dev/null +++ b/src/adminPage/features/users/mock.js @@ -0,0 +1,23 @@ +import { http, HttpResponse } from "msw"; +import getRandomString from "@common/mock/getRandomString"; + +function getRandomUsers() { + let users = []; + const num = 15; + for (let i = 0; i < num; i++) { + users = [ + ...users, + { + id: i, + userName: getRandomString(3), + phoneNumber: "010-0000-0000", + frameId: "event-test", + }, + ]; + } + return { users: users, totalPage: 15 }; +} + +const handlers = [http.get("/api/v1/admin/event-users", () => HttpResponse.json(getRandomUsers()))]; + +export default handlers; diff --git a/src/adminPage/mock.js b/src/adminPage/mock.js index 51502b59..dd937ea3 100644 --- a/src/adminPage/mock.js +++ b/src/adminPage/mock.js @@ -5,6 +5,7 @@ import serverTimeHandler from "@admin/serverTime/mock.js"; import eventSearchHandler from "./features/eventList/mock.js"; import eventCreateHandler from "./features/eventEdit/mock.js"; import drawHandler from "./features/eventDetail/drawButton/mock.js"; +import usersHandler from "./features/users/mock.js"; // mocking은 기본적으로 각 feature 폴더 내의 mock.js로 정의합니다. // 새로운 feature의 mocking을 추가하셨으면, mock.js의 setupWorker 내부 함수에 인자를 spread 연산자를 이용해 추가해주세요. @@ -16,4 +17,5 @@ export default setupWorker( ...commentHandler, ...eventCreateHandler, ...drawHandler, + ...usersHandler, ); diff --git a/src/adminPage/pages/UsersPage.jsx b/src/adminPage/pages/UsersPage.jsx new file mode 100644 index 00000000..85ec1a52 --- /dev/null +++ b/src/adminPage/pages/UsersPage.jsx @@ -0,0 +1,16 @@ +import Container from "@admin/components/Container.jsx"; +import Users from "../features/users"; + +function UsersPage() { + return ( + +
+ 유저 조회 + + +
+ + ); +} + +export default UsersPage; diff --git a/src/adminPage/shared/components/NavBar.jsx b/src/adminPage/shared/components/NavBar.jsx index 12451c45..c3f91b22 100644 --- a/src/adminPage/shared/components/NavBar.jsx +++ b/src/adminPage/shared/components/NavBar.jsx @@ -18,9 +18,15 @@ function NavBar() { events + 기대평 + + + 유저 + + {isLogin && LOGOUT} diff --git a/src/common/constants.js b/src/common/constants.js index c4f3acf8..8d5ab06c 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -1,4 +1,4 @@ -export const EVENT_FCFS_ID = "HD_240808_002"; +export const EVENT_FCFS_ID = "HD240821_001"; export const EVENT_DRAW_ID = "HD_240808_001"; export const EVENT_ID = "the-new-ioniq5"; export const EVENT_START_DATE = new Date(2024, 8, 9);