+ {data.comments.map((comment) => (
+
checkComment(comment.id)}
+ className="w-full py-1 grid grid-cols-[1fr_5fr_15fr] bg-neutral-50 items-center hover:bg-blue-100"
+ >
+
checkComment(comment.id)}
+ checked={checkedComments.has(comment.id)}
+ className="w-4 h-4 place-self-center"
+ />
+
+
+ {formatDate(comment.createdAt, "YY-MM-DD")}
+
+ {formatDate(comment.createdAt, "hh:mm:ss")}
+
+
+
{comment.content}
+
+ ))}
+
+
+
+ {num}개의 기대평을 삭제하시겠습니까?
+
+ }
+ onConfirm={mutation}
+ />
+ );
+
+ function deleteComments() {
+ if (!num) return;
+ openModal(deleteConfirmModal);
+ }
+
+ return (
+
+ );
+}
diff --git a/packages/adminPage/src/features/comment/id/Loading.jsx b/packages/adminPage/src/features/comment/id/Loading.jsx
new file mode 100644
index 00000000..40e4ff40
--- /dev/null
+++ b/packages/adminPage/src/features/comment/id/Loading.jsx
@@ -0,0 +1,9 @@
+import Spinner from "@common/components/Spinner";
+
+export default function Loading() {
+ return (
+
+
+
+ );
+}
diff --git a/packages/adminPage/src/features/comment/id/index.jsx b/packages/adminPage/src/features/comment/id/index.jsx
new file mode 100644
index 00000000..557155c6
--- /dev/null
+++ b/packages/adminPage/src/features/comment/id/index.jsx
@@ -0,0 +1,85 @@
+import Suspense from "@common/components/Suspense";
+import Loading from "./Loading.jsx";
+import Comments from "./Comments.jsx";
+import { useState } from "react";
+import DeleteButton from "./DeleteButton.jsx";
+
+export default function AdminCommentID({ eventId }) {
+ const [checkedComments, setCheckedComments] = useState(new Set());
+ const [formString, setFormString] = useState("");
+ const [searchString, setSearchString] = useState("");
+ const [allId, setAllId] = useState([]);
+
+ function selectAll() {
+ if (allId.every((id) => checkedComments.has(id))) {
+ setCheckedComments((oldSet) => {
+ const newSet = new Set(oldSet);
+ allId.forEach((id) => {
+ newSet.delete(id);
+ });
+ return newSet;
+ });
+ } else {
+ setCheckedComments((oldSet) => new Set([...oldSet, ...allId]));
+ }
+ }
+
+ function searchComment(e) {
+ e.preventDefault();
+ setSearchString(formString);
+ }
+
+ return (
+
+
+
+ 검색 이벤트:
+ {eventId}
+ 검색 문자열:
+ {searchString}
+
+
+
+
+
+
+
+
+
+ 선택
+
+ 작성 시간
+ 기대평 내용
+
+
+
}>
+
+
+
+
이벤트 명
+
{name}
+
이벤트 ID
+
{eventId}
+
이벤트 프레임
+
{eventFrameId}
+
이벤트 기간
+
+ {formatDate(startTime, "YYYY-MM-DD hh:mm")} ~ {formatDate(endTime, "YYYY-MM-DD hh:mm")} (
+
+
+
+ )
+
+
+ 이벤트 요약
+
+
{description}
+
이벤트 URL
+
+
+ {url}
+
+
+
이벤트 종류
+
+
{eventType === "fcfs" ? "선착순" : "추첨"}
+ {eventType === "draw" && (
+
+
+
+
+
+ )}
+
+
{grade}등
+ {count}명
+ {prizeInfo}
+
+ );
+}
+
+export default EventDrawMetadataItem;
diff --git a/packages/adminPage/src/features/eventDetail/draw/EventDrawPolicyItem.jsx b/packages/adminPage/src/features/eventDetail/draw/EventDrawPolicyItem.jsx
new file mode 100644
index 00000000..c259151a
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/draw/EventDrawPolicyItem.jsx
@@ -0,0 +1,12 @@
+import { POLICY_ENUM } from "@admin/constants.js";
+
+function EventDrawPolicyItem({ action, score }) {
+ return (
+ <>
+ {POLICY_ENUM[action]}
+ {score}
+
+ );
+}
+
+export default EventDrawPolicyItem;
diff --git a/packages/adminPage/src/features/eventDetail/draw/index.jsx b/packages/adminPage/src/features/eventDetail/draw/index.jsx
new file mode 100644
index 00000000..e1de4d4c
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/draw/index.jsx
@@ -0,0 +1,45 @@
+import EventDrawMetadataItem from "./EventDrawMetadataItem.jsx";
+import EventDrawPolicyItem from "./EventDrawPolicyItem.jsx";
+import tableStyle from "../tableStyle.js";
+
+function EventDrawDataRenderer({ data }) {
+ const gridCommonStyle = "grid px-2 gap-4 justify-items-center";
+ const metadataGridStyle = `${gridCommonStyle} grid-cols-[3rem_6rem_1fr]`;
+ const policyGridStyle = `${gridCommonStyle} grid-cols-[3fr_1fr]`;
+ const headerStyle = `h-10 bg-neutral-50 rounded-lg text-black items-center font-bold text-center
+ *:relative *:w-full *:after:h-full *:after:absolute *:after:-right-2 *:after:border-r *:after:border-neutral-200`;
+ const titleStyle = "text-center font-bold self-start h-10 flex justify-center items-center";
+ return (
+ <>
+
+ 당첨 인원수
+
+
+
+ {data.metadata.map((data) => (
+
+ ))}
+
+
점수 정책
+
+
+
+ {data.policies.map((data) => (
+
+ ))}
+
+
+ 에러남
}>
+
+
+
+
+
+ }
+ >
+
+
+
+
+ );
+}
+
+function DrawButton() {
+ const { eventId } = useParams();
+ const [drawState, setDrawState] = useState("BEFORE_END");
+ const interval = useRef(null);
+ const timeout = useRef(null);
+
+ useEffect(() => {
+ fetchServer(`/api/v1/admin/draw/${eventId}/status`)
+ .then(({ status }) => setDrawState(status))
+ .catch(() => {
+ setDrawState("ERROR");
+ });
+ }, [eventId]);
+
+ useEffect(() => {
+ return () => {
+ clearInterval(interval.current);
+ clearTimeout(timeout.current);
+ };
+ }, []);
+
+ async function onSubmit() {
+ function shortPooling() {
+ fetchServer(`/api/v1/admin/draw/${eventId}/status`)
+ .then(({ status }) => {
+ setDrawState(status);
+ if (status !== "IS_DRAWING") {
+ clearInterval(interval.current);
+ }
+ })
+ .catch(() => {
+ setDrawState("ERROR");
+ clearInterval(interval.current);
+ });
+ }
+
+ try {
+ await fetchServer(`/api/v1/admin/draw/${eventId}/draw`, { method: "post" });
+ setDrawState("IS_DRAWING");
+ openModal();
+ timeout.current = setTimeout(() => {
+ shortPooling();
+ interval.current = setInterval(shortPooling, 5000);
+ }, 500);
+ } catch {
+ openModal();
+ }
+ }
+
+ switch (drawState) {
+ case "BEFORE_END":
+ return null;
+ case "AVAILABLE":
+ return (
+
+ );
+ case "IS_DRAWING":
+ return (
+ 추첨 진행중...
+ );
+ case "COMPLETE":
+ return (
+
+ );
+ default:
+ return 에러
;
+ }
+}
+
+export default DrawButton;
diff --git a/packages/adminPage/src/features/eventDetail/drawButton/DrawButtonHolder.jsx b/packages/adminPage/src/features/eventDetail/drawButton/DrawButtonHolder.jsx
new file mode 100644
index 00000000..d24010b1
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/drawButton/DrawButtonHolder.jsx
@@ -0,0 +1,12 @@
+import useServerTimeStore from "@admin/serverTime/store.js";
+import DrawButton from "./DrawButton.jsx";
+
+function DrawButtonHolder({ endTime }) {
+ const getServerTime = useServerTimeStore((store) => store.getData);
+ const serverTime = getServerTime();
+
+ if (new Date(endTime) < serverTime) return ;
+ return null;
+}
+
+export default DrawButtonHolder;
diff --git a/packages/adminPage/src/features/eventDetail/drawButton/DrawResultModal.jsx b/packages/adminPage/src/features/eventDetail/drawButton/DrawResultModal.jsx
new file mode 100644
index 00000000..3fd30b6d
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/drawButton/DrawResultModal.jsx
@@ -0,0 +1,78 @@
+import { Fragment, useMemo } from "react";
+import useScrollControl from "./useScrollControl.js";
+import { fetchServer } from "@common/dataFetch/fetchServer.js";
+import { useQuery } from "@common/dataFetch/getQuery.js";
+import { GroupMap, addHyphen } from "@common/utils.js";
+
+function mapResultSubsetGroup({ ranking, name, phoneNumber }) {
+ return (
+
+ {ranking}등
+ {name}
+ {addHyphen(phoneNumber)}
+
+ );
+}
+
+function DrawResultModal({ eventId }) {
+ const drawResultData = useQuery(`event-detail-draw-result-${eventId}`, () => {
+ return fetchServer(`/api/v1/admin/draw/${eventId}/winners`);
+ });
+ const { hullRef, mountMap, scrollTo, intersectState } = useScrollControl();
+
+ // render logic
+ const maxGrade = drawResultData.length === 0 ? 0 : drawResultData.at(-1).ranking;
+ const tableStyle =
+ "w-full grid grid-cols-[4rem_1fr_2fr] auto-rows-[minmax(2rem,auto)] gap-4 items-center justify-items-center";
+
+ const drawResultGroup = useMemo(() => {
+ const groupMap = new GroupMap();
+ for (let item of drawResultData) groupMap.set(item.ranking, item);
+ return groupMap;
+ }, [drawResultData]);
+
+ function mapResultGroup([key, subset]) {
+ return (
+ mountMap(ref, key)}
+ >
+ {subset.map(mapResultSubsetGroup)}
+
+ );
+ }
+
+ return (
+
+
당첨자
+
+ {Array.from({ length: maxGrade }, (_, i) => (
+
+ ))}
+
+
+
+ {drawResultData.length === 0 ? (
+
+ 저런! 참가자가 없군요!
+
+ ) : (
+
{[...drawResultGroup].map(mapResultGroup)}
+ )}
+
+
{id}
+ {formatDate(startTime, "M/DD")}
+
+ {formatDate(startTime, "hh:mm")} ~ {formatDate(endTime, "hh:mm")}
+
+ {participantCount}명
+ {prizeInfo}
+
+ );
+}
+
+export default EventFcfsDataItem;
diff --git a/packages/adminPage/src/features/eventDetail/fcfs/index.jsx b/packages/adminPage/src/features/eventDetail/fcfs/index.jsx
new file mode 100644
index 00000000..8b72924a
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/fcfs/index.jsx
@@ -0,0 +1,28 @@
+import EventFcfsDataItem from "./EventFcfsDataItem.jsx";
+
+function EventFcfsDataRenderer({ data }) {
+ const gridStyle =
+ "grid grid-cols-[1fr_3rem_1fr_5rem_3fr] gap-4 justify-center items-center text-body-m";
+ const headerStyle = `${gridStyle} min-h-12 py-2 bg-neutral-50 rounded-lg text-black font-bold text-center
+ *:relative *:w-full *:after:h-full *:after:absolute *:after:-right-2 *:after:border-r *:after:border-neutral-200
+ `;
+
+ return (
+
+
+
ID
+
날짜
+
이벤트 시간
+
당첨자 수
+
경품
+
+ {data.map((item) => (
+
+ ))}
+
+
+ );
+}
+
+export default EventFcfsDataRenderer;
diff --git a/packages/adminPage/src/features/eventDetail/index.jsx b/packages/adminPage/src/features/eventDetail/index.jsx
new file mode 100644
index 00000000..eddb1dcd
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/index.jsx
@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+import EventBaseDataRenderer from "./EventBaseDataRenderer.jsx";
+import EventFcfsDataRenderer from "./fcfs";
+import EventDrawDataRenderer from "./draw";
+import TitleContainer from "@admin/components/TitleContainer.jsx";
+import Button from "@common/components/Button.jsx";
+
+function EventDetail({ data }) {
+ return (
+
+
+ 이벤트 상세정보
+
+
+
+
+
+ {data.eventType === "fcfs" && }
+ {data.eventType === "draw" && }
+
+ );
+}
+
+export default EventDetail;
diff --git a/packages/adminPage/src/features/eventDetail/tableStyle.js b/packages/adminPage/src/features/eventDetail/tableStyle.js
new file mode 100644
index 00000000..d23a97fb
--- /dev/null
+++ b/packages/adminPage/src/features/eventDetail/tableStyle.js
@@ -0,0 +1,3 @@
+const tableStyle = "grid grid-cols-[6rem_1fr] auto-rows-[minmax(2rem,auto)] items-center gap-2";
+
+export default tableStyle;
diff --git a/packages/adminPage/src/features/eventEdit/DateTimeRangeInput.jsx b/packages/adminPage/src/features/eventEdit/DateTimeRangeInput.jsx
new file mode 100644
index 00000000..86b1dec0
--- /dev/null
+++ b/packages/adminPage/src/features/eventEdit/DateTimeRangeInput.jsx
@@ -0,0 +1,115 @@
+import { Input } from "@admin/components/SmallInput.jsx";
+import { formatDate } from "@common/utils.js";
+
+function dateToSplittedState(date) {
+ if (date === null || date === "" || date === undefined) return ["", ""];
+ return formatDate(date, "YYYY-MM-DD hh:mm").split(" ");
+}
+
+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 ${defaultTime}`) : new Date(timeValue);
+
+ date.setFullYear(y);
+ date.setMonth(m - 1);
+ date.setDate(d);
+ return date;
+}
+
+function applyTimeInputToDateObj(inputValue, timeValue) {
+ if (inputValue === "") return null;
+ const [h, m] = inputValue.split(":").map(Number);
+
+ let date = timeValue === null ? new Date() : new Date(timeValue);
+
+ date.setHours(h);
+ date.setMinutes(Math.round(m / 5) * 5);
+ return date;
+}
+
+function DateTimeRangeInput({
+ range = [null, null],
+ setRange,
+ wrapperClass,
+ inputClass,
+ required,
+} = {}) {
+ const [startDate, startTime] = dateToSplittedState(range[0]);
+ const [endDate, endTime] = dateToSplittedState(range[1]);
+
+ function setStartDate(value) {
+ if (value === "") return setRange([null, range[1]]);
+ let date = applyDateInputToDateObj(value, range[0]);
+ if (range[1] === null || date <= range[1]) setRange([date, range[1]]);
+ else setRange([range[1], range[1]]);
+ }
+
+ function setStartTime(value) {
+ if (value === "") return setRange([null, range[1]]);
+ let date = applyTimeInputToDateObj(value, range[0]);
+ if (range[1] === null || date <= range[1]) setRange([date, range[1]]);
+ else setRange([range[1], range[1]]);
+ }
+
+ function setEndDate(value) {
+ if (value === "") return setRange([range[0], null]);
+ 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]]);
+ }
+
+ function setEndTime(value) {
+ if (value === "") return setRange([range[0], null]);
+ let date = applyTimeInputToDateObj(value, range[1]);
+ if (range[0] === null || date >= range[0]) setRange([range[0], date]);
+ else setRange([range[0], range[0]]);
+ }
+
+ return (
+
+ );
+}
+
+export default DateTimeRangeInput;
diff --git a/packages/adminPage/src/features/eventEdit/DrawInput/DrawMetadataInput.jsx b/packages/adminPage/src/features/eventEdit/DrawInput/DrawMetadataInput.jsx
new file mode 100644
index 00000000..76b5eabf
--- /dev/null
+++ b/packages/adminPage/src/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 (
+
+
+
+ 등수* :{" "}
+
+
+
+
+
+
+ {[...metadata].map((data) => (
+
+ ))}
+
+
+
{grade}등
+
+ modify({ count: Number.isNaN(+value) ? 0 : +value })}
+ inputMode="numeric"
+ pattern="[0-9]+"
+ size="3"
+ placeholder="인원"
+ />
+ 명
+
+ modify({ prizeInfo: value })}
+ placeholder="경품 이름 입력"
+ />
+
+ );
+}
+
+export default DrawMetadataItemInput;
diff --git a/packages/adminPage/src/features/eventEdit/DrawInput/DrawPolicyInput.jsx b/packages/adminPage/src/features/eventEdit/DrawInput/DrawPolicyInput.jsx
new file mode 100644
index 00000000..b3fa77ba
--- /dev/null
+++ b/packages/adminPage/src/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 (
+
+
+
+ {[...policies].map(({ key, ...data }) => (
+
+ ))}
+
+
+
+ {children}
+
+ );
+}
+
+export default DrawSectionTitle;
diff --git a/packages/adminPage/src/features/eventEdit/DrawInput/index.jsx b/packages/adminPage/src/features/eventEdit/DrawInput/index.jsx
new file mode 100644
index 00000000..383d6b42
--- /dev/null
+++ b/packages/adminPage/src/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 (
+
+
+ 인원수 및 경품 설정
+
+
+
+ 정책 설정
+
+
+
+
+
+ 선착순
+
+
+ 추첨
+
+
+
+ {eventType === "fcfs" && }
+ {eventType === "draw" && }
+
+
+
+
+
+
+ );
+}
+
+export default BatchTimeUpdater;
diff --git a/packages/adminPage/src/features/eventEdit/FcfsInput/FcfsItemInput.jsx b/packages/adminPage/src/features/eventEdit/FcfsInput/FcfsItemInput.jsx
new file mode 100644
index 00000000..94825ca5
--- /dev/null
+++ b/packages/adminPage/src/features/eventEdit/FcfsInput/FcfsItemInput.jsx
@@ -0,0 +1,86 @@
+import { useContext } from "react";
+import { EventEditDispatchContext } from "../businessLogic/context.js";
+import { Input } from "@admin/components/SmallInput.jsx";
+import DateInput from "@admin/components/DateInput";
+import DeleteButton from "@admin/components/DeleteButton";
+import { formatDate, padNumber, getDayDifference } from "@common/utils.js";
+import fcfsInputGridStyle from "./tableStyle.js";
+import serverTimeStore from "@admin/serverTime/store.js";
+
+const MINUTE = 60;
+
+function minuteIntToString(min) {
+ const h = Math.floor(min / MINUTE) % 24;
+ const m = min % MINUTE;
+ return `${padNumber(h)}:${padNumber(m)}`;
+}
+
+function strToMinutes(str) {
+ const [h, m] = str.split(":").map(Number);
+ return h * MINUTE + m;
+}
+
+function FcfsItemInput({ uniqueKey, date, start, end, participantCount, prizeInfo }) {
+ const dispatch = useContext(EventEditDispatchContext);
+ const enableDateEdit = uniqueKey.startsWith("auto_made_");
+
+ function modify(value) {
+ dispatch({ type: "modify_fcfs_item", key: uniqueKey, value });
+ }
+
+ return (
+
+ );
+}
+
+export default FcfsItemInput;
diff --git a/packages/adminPage/src/features/eventEdit/FcfsInput/index.jsx b/packages/adminPage/src/features/eventEdit/FcfsInput/index.jsx
new file mode 100644
index 00000000..eb08091a
--- /dev/null
+++ b/packages/adminPage/src/features/eventEdit/FcfsInput/index.jsx
@@ -0,0 +1,39 @@
+import { useContext } from "react";
+import { EventEditContext, EventEditDispatchContext } from "../businessLogic/context.js";
+import BatchTimeUpdater from "./BatchTimeUpdater.jsx";
+import FcfsItemInput from "./FcfsItemInput.jsx";
+import Button from "@common/components/Button.jsx";
+import fcfsInputGridStyle from "./tableStyle.js";
+
+function FcfsInput() {
+ const { fcfs, startTime, endTime } = useContext(EventEditContext);
+ const dispatch = useContext(EventEditDispatchContext);
+
+ return (
+
+
+
+
+
날짜
+
오픈시간
+
종료시간
+
당첨자 수
+
경품
+
삭제
+
+ {[...fcfs].map((value) => (
+
+ ))}
+
+
+
+ {JSON.stringify(value, null, 2)}
+
+ }
+ />,
+ );
+ });
+ } else if (e.status === 401) {
+ openModal();
+ } else if (e.status < 500) {
+ openModal(
+
+ 클라이언트의 오류가 발생했습니다.
+
+ 에러 코드 : {e.status}
+
+ }
+ />,
+ );
+ } else {
+ openModal(
+
+ 서버의 오류가 발생했습니다.
+
+ 에러 코드 : {e.status}
+
+ }
+ />,
+ );
+ }
+ } else {
+ openModal();
+ }
+}
+
+function EventEditor({ initialData = null } = {}) {
+ const navigate = useNavigate();
+ const mode = useContext(EventEditModeContext);
+ const [state, dispatch] = useReducer(eventEditReducer, initialData, setDefaultState);
+ const submitMutate = useMutation(
+ mode === "create" ? "admin-event-list" : `admin-event-list/${state.eventId}`,
+ () =>
+ fetchServer(mode === "create" ? "/api/v1/admin/events" : "/api/v1/admin/events/edit", {
+ method: "post",
+ body: state,
+ }),
+ {
+ onSuccess: () => {
+ openModal(
+ ,
+ ).then(() => navigate(mode === "create" ? "/events" : `/events/${state.eventId}`));
+ },
+ onError: handleEventSubmitError,
+ },
+ );
+
+ const submitDisabled =
+ (state.eventType === "fcfs" && state.fcfs.size === 0) ||
+ (state.eventType === "draw" && state.draw.policies.size === 0);
+
+ function onSubmit(e) {
+ e.preventDefault();
+ if (submitDisabled) return;
+ submitMutate();
+ }
+
+ async function submitTempSave() {
+ try {
+ await fetchServer("/api/v1/admin/events/temp", {
+ method: "post",
+ body: state,
+ });
+ openModal();
+ } catch (e) {
+ handleEventSubmitError(e);
+ }
+ }
+
+ async function applyTempSave() {
+ try {
+ const data = await fetchServer("/api/v1/admin/events/temp").catch(
+ handleError(tempLoadErrorHandler),
+ );
+ if (
+ data.eventId === state.eventId ||
+ (state.eventId === undefined && !data.eventId.startsWith("HD"))
+ ) {
+ dispatch({ type: "apply_external_data", value: data });
+ } else {
+ openModal(
+
+ 임시저장된 데이터가 현재 작성 중인 데이터의 것이 아닙니다!
+
+ 임시저장 ID : {data.eventId || "새로 생성될 이벤트"}
+
+ }
+ />,
+ );
+ }
+ } catch (e) {
+ openModal();
+ }
+ }
+
+ const tempSaveConfirmModal = (
+
+ );
+ const tempLoadConfirmModal = (
+
+ 임시저장된 내용을 불러오겠습니까?
+
+ 작성 중인 내용은 대체됩니다.
+
+ }
+ onConfirm={applyTempSave}
+ />
+ );
+
+ return (
+
+ );
+}
+
+export default EventEditor;
diff --git a/packages/adminPage/src/features/eventEdit/mock.js b/packages/adminPage/src/features/eventEdit/mock.js
new file mode 100644
index 00000000..3599633c
--- /dev/null
+++ b/packages/adminPage/src/features/eventEdit/mock.js
@@ -0,0 +1,103 @@
+import { http, HttpResponse } from "msw";
+import { makeLorem } from "@common/mock/utils.js";
+
+function getEventsDetailMock() {
+ return new Map(
+ Array.from({ length: 100 }, (_, i) => {
+ const startTime = new Date(
+ Date.now() - 86400 * 120 * 1000 + Math.floor(Math.random() * 86400 * 60 * 1000),
+ );
+ const endTime = new Date(startTime.getTime() + Math.floor(Math.random() * 86400 * 10) * 1000);
+ const eventType = Math.random() > 0.5 ? "fcfs" : "draw";
+ const eventId = `HD_240808_${i.toString().padStart(3, "0")}`;
+
+ const result = {
+ name: makeLorem(3, 7),
+ description: makeLorem(5, 10),
+ eventType,
+ startTime,
+ endTime,
+ url: "https://www.naver.com/",
+ eventFrameId: "the-new-ioniq-5",
+ eventId,
+ };
+
+ if (eventType === "fcfs") {
+ const sliceStartTime = new Date(startTime);
+ sliceStartTime.setHours(0);
+ sliceStartTime.setMinutes(0);
+ sliceStartTime.setSeconds(0);
+ sliceStartTime.setMilliseconds(0);
+ result.fcfs = [
+ {
+ id: 0,
+ startTime: sliceStartTime,
+ endTime: new Date(sliceStartTime.valueOf() + 900 * 60 * 1000),
+ participantCount: 120,
+ prizeInfo: "string",
+ },
+ ];
+ } else {
+ result.draw = {
+ id: 0,
+ policies: [
+ {
+ id: 0,
+ action: "WriteComment",
+ score: 10,
+ },
+ ],
+ metadata: [
+ {
+ id: 0,
+ grade: 1,
+ count: 10,
+ prizeInfo: "자동차 세트",
+ },
+ {
+ id: 1,
+ grade: 2,
+ count: 100,
+ prizeInfo: "미니 선풍기",
+ },
+ ],
+ };
+ }
+
+ return [eventId, result];
+ }),
+ );
+}
+
+const dummyData = getEventsDetailMock();
+let tempData = null;
+
+const handlers = [
+ http.post("/api/v1/admin/events", async ({ request }) => {
+ const data = await request.json();
+ if (data.description === "")
+ return HttpResponse.json({ description: "디스크립션이 없습니다." }, { status: 400 });
+ tempData = null;
+ return new HttpResponse(null, { status: 201 });
+ }),
+ http.post("/api/v1/admin/events/temp", async ({ request }) => {
+ tempData = await request.json();
+ return new HttpResponse(null, { status: 201 });
+ }),
+ http.get("/api/v1/admin/events/temp", () => {
+ if (tempData === null) return HttpResponse.json(null, { status: 404 });
+ return HttpResponse.json(tempData);
+ }),
+ http.get("/api/v1/admin/events/:id", ({ params }) => {
+ if (!dummyData.has(params.id)) return HttpResponse.json(null, { status: 404 });
+ return HttpResponse.json(dummyData.get(params.id));
+ }),
+ http.post("/api/v1/admin/events/edit", async ({ request }) => {
+ const data = await request.json();
+ dummyData.set(data.eventId, data);
+ tempData = null;
+ return new HttpResponse(null, { status: 200 });
+ }),
+];
+
+export default handlers;
diff --git a/packages/adminPage/src/features/eventList/DeleteButton.jsx b/packages/adminPage/src/features/eventList/DeleteButton.jsx
new file mode 100644
index 00000000..8c35224c
--- /dev/null
+++ b/packages/adminPage/src/features/eventList/DeleteButton.jsx
@@ -0,0 +1,66 @@
+import { fetchServer, HTTPError } from "@common/dataFetch/fetchServer.js";
+import { useMutation } from "@common/dataFetch/getQuery.js";
+import ConfirmModal from "@admin/modals/ConfirmModal.jsx";
+import AlertModal from "@admin/modals/AlertModal.jsx";
+import Button from "@common/components/Button.jsx";
+import openModal from "@common/modal/openModal.js";
+
+function DeleteButton({ selected, reset }) {
+ const mutate = useMutation(
+ "admin-event-list",
+ () =>
+ fetchServer("/api/v1/admin/events", {
+ method: "delete",
+ body: {
+ eventIds: [...selected],
+ },
+ }),
+ {
+ onSuccess: () => {
+ openModal();
+ reset();
+ },
+ onError: async (e) => {
+ if (e instanceof HTTPError && e.status === 400) {
+ return openModal(
+ ,
+ );
+ }
+ if (e instanceof HTTPError && e.status === 404) {
+ return openModal();
+ }
+ return openModal();
+ },
+ },
+ );
+ const deleteConfirmModal = (
+
+ 이 동작은 다시 돌이킬 수 없습니다.
+
+
+ {selected.keys().next().value}
+ {selected.size > 1 && ` 외 ${selected.size - 1} 개의`} 이벤트를 삭제하시겠습니까?
+
+
+ }
+ onConfirm={mutate}
+ />
+ );
+
+ function onClick() {
+ openModal(deleteConfirmModal);
+ }
+ return (
+
+ );
+}
+
+export default DeleteButton;
diff --git a/packages/adminPage/src/features/eventList/Filter.jsx b/packages/adminPage/src/features/eventList/Filter.jsx
new file mode 100644
index 00000000..9bcb9bd6
--- /dev/null
+++ b/packages/adminPage/src/features/eventList/Filter.jsx
@@ -0,0 +1,55 @@
+import Checkbox from "@common/components/Checkbox.jsx";
+
+function Filter({ state, dispatch }) {
+ function changeFilter(target) {
+ return (value) => dispatch({ type: "set_filter", target, value });
+ }
+
+ const fieldsetStyle = "border border-neutral-200 rounded px-3 pb-3";
+ const labelStyle = "inline-flex items-center gap-1 text-body-s";
+
+ return (
+
+ {/*
*/}
+
+
+
+
+
+
+
+
{
+ dispatch({ type: "set_query", value });
+ resetCheck();
+ }}
+ />
+
+
+
+
+ Error
+ {data.map((item) => (
+
+ ))}
+
+ );
+}
+
+export default SearchResultBody;
diff --git a/packages/adminPage/src/features/eventList/table/SearchResultItem.jsx b/packages/adminPage/src/features/eventList/table/SearchResultItem.jsx
new file mode 100644
index 00000000..b5c010b8
--- /dev/null
+++ b/packages/adminPage/src/features/eventList/table/SearchResultItem.jsx
@@ -0,0 +1,44 @@
+import { Link } from "react-router-dom";
+
+import tableTemplateCol from "./tableStyle.js";
+import { useEventStatus } from "@admin/serverTime/EventStatus.js";
+import Button from "@common/components/Button.jsx";
+import Checkbox from "@common/components/Checkbox.jsx";
+import { formatDate } from "@common/utils.js";
+
+function SearchResultItem({ eventId, name, startTime, endTime, eventType, checked, setCheck }) {
+ const eventStatus = useEventStatus(startTime, endTime);
+
+ return (
+
+ );
+}
+
+export default SearchResultItem;
diff --git a/packages/adminPage/src/features/eventList/table/TableHeader.jsx b/packages/adminPage/src/features/eventList/table/TableHeader.jsx
new file mode 100644
index 00000000..50aeb618
--- /dev/null
+++ b/packages/adminPage/src/features/eventList/table/TableHeader.jsx
@@ -0,0 +1,44 @@
+import tableTemplateCol from "./tableStyle.js";
+import TableSorter from "./TableSorter.jsx";
+
+const headerData = [
+ { key: "eventId", name: "ID" },
+ { key: "name", name: "이벤트 명" },
+ { key: "startTime", name: "이벤트 오픈시간" },
+ { key: "endTime", name: "이벤트 종료시간" },
+ { key: "eventType", name: "종류" },
+];
+
+function TableHeader({ state, dispatch, checkSelect }) {
+ function changeSort(target) {
+ return (value) => dispatch({ type: "set_sort", target, value });
+ }
+
+ return (
+
+
+ {headerData.map(({ key, name }) => (
+
+ {name}
+
+ ))}
+
상태
+
상세
+
+
queryDispatch({ type: "set_page", value })}
+ maxPage={totalPages}
+ />
+
+
+
+ );
+}
diff --git a/packages/adminPage/src/features/users/Users.jsx b/packages/adminPage/src/features/users/Users.jsx
new file mode 100644
index 00000000..69c5f6bd
--- /dev/null
+++ b/packages/adminPage/src/features/users/Users.jsx
@@ -0,0 +1,41 @@
+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({ searchParams }) {
+ const [page, setPage] = useState(1);
+ const data = useQuery(
+ "admin-users",
+ () =>
+ fetchServer(
+ `/api/v1/admin/event-users?page=${page - 1}&search=${searchParams.get("search") ?? ""}&field=${searchParams.get("field") ?? "userName"}&size=15`,
+ )
+ .then((res) => {
+ return res;
+ })
+ .catch((e) => {
+ alert("통신 오류로 유저 목록 로드 실패.");
+ console.log(e);
+ return { users: [] };
+ }),
+ [page, searchParams],
+ );
+
+ return (
+
+ {data.users.map((user) => (
+
+ {user.userName}
+ {user.phoneNumber}
+ {user.frameId}
+
+ ))}
+
+
+
+
+ 검색 문자열:
+ {searchString}
+
+
+
+
+
+ 성명
+ 전화번호
+ 이벤트 frameId
+
+
+
}>
+
+
+
+ 유저 조회
+
+
+
+
+ );
+}
+
+export default UsersPage;
diff --git a/packages/adminPage/src/shared/auth/LoginSection.jsx b/packages/adminPage/src/shared/auth/LoginSection.jsx
new file mode 100644
index 00000000..4003359e
--- /dev/null
+++ b/packages/adminPage/src/shared/auth/LoginSection.jsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { login } from "./store.js";
+import { fetchServer, handleError } from "@common/dataFetch/fetchServer.js";
+import Input from "@common/components/Input.jsx";
+import Button from "@common/components/Button.jsx";
+
+const loginErrorHandler = {
+ 400: "잘못된 입력입니다!",
+ 401: "로그인에 실패했습니다!",
+};
+
+function LoginSection() {
+ const navigate = useNavigate();
+ const [id, setId] = useState("");
+ const [password, setPassword] = useState("");
+ const [errorMessage, setErrorMessage] = useState("");
+ async function onSubmit(e) {
+ e.preventDefault();
+ const config = { method: "post", body: { userName: id, password } };
+ setErrorMessage("");
+ fetchServer("/api/v1/admin/auth/signin", config)
+ .then(({ token }) => {
+ login(token);
+ navigate("/events", { replace: true });
+ })
+ .catch(handleError(loginErrorHandler))
+ .catch((e) => {
+ setId("");
+ setPassword("");
+ setErrorMessage(e.message);
+ });
+ }
+ return (
+
+ );
+}
+
+export default LoginSection;
diff --git a/packages/adminPage/src/shared/auth/mock.js b/packages/adminPage/src/shared/auth/mock.js
new file mode 100644
index 00000000..74b91375
--- /dev/null
+++ b/packages/adminPage/src/shared/auth/mock.js
@@ -0,0 +1,14 @@
+import { http, HttpResponse } from "msw";
+
+const handlers = [
+ http.post("/api/v1/admin/auth/signin", async ({ request }) => {
+ const { username, password } = await request.json();
+ if (username !== "admin" && password !== "password1!") {
+ return HttpResponse.json({ return: false }, { status: 401 });
+ }
+
+ return HttpResponse.json({ token: "test_token" });
+ }),
+];
+
+export default handlers;
diff --git a/packages/adminPage/src/shared/auth/store.js b/packages/adminPage/src/shared/auth/store.js
new file mode 100644
index 00000000..cb5ea08a
--- /dev/null
+++ b/packages/adminPage/src/shared/auth/store.js
@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import tokenSaver from "@common/dataFetch/tokenSaver.js";
+import { ADMIN_TOKEN_ID } from "@common/constants.js";
+
+const userStore = create(() => ({
+ initialized: false,
+ isLogin: false,
+}));
+
+export function login(token) {
+ tokenSaver.set(token);
+ userStore.setState(() => ({ isLogin: true, initialized: true }));
+}
+
+export function logout() {
+ tokenSaver.remove();
+ userStore.setState(() => ({ isLogin: false, initialized: true }));
+}
+
+export function initLoginState() {
+ tokenSaver.init(ADMIN_TOKEN_ID);
+ const token = tokenSaver.get(ADMIN_TOKEN_ID);
+ if (token === null) userStore.setState(() => ({ isLogin: false, initialized: true }));
+ else userStore.setState(() => ({ isLogin: true, initialized: true }));
+}
+
+export default userStore;
diff --git a/packages/adminPage/src/shared/components/Container.jsx b/packages/adminPage/src/shared/components/Container.jsx
new file mode 100644
index 00000000..38e4a8c4
--- /dev/null
+++ b/packages/adminPage/src/shared/components/Container.jsx
@@ -0,0 +1,16 @@
+import NavBar from "./NavBar.jsx";
+
+function Container({ children, shouldCenter = false }) {
+ return (
+
+
+
+ {children}
+
+
+ );
+}
+
+export default Container;
diff --git a/packages/adminPage/src/shared/components/DateInput/index.jsx b/packages/adminPage/src/shared/components/DateInput/index.jsx
new file mode 100644
index 00000000..a63735b0
--- /dev/null
+++ b/packages/adminPage/src/shared/components/DateInput/index.jsx
@@ -0,0 +1,25 @@
+import { formatDate } from "@common/utils.js";
+import style from "./style.module.css";
+
+export default function DateTextInput({ date, setDate, ...otherProps }) {
+ const text = date === null ? "" : formatDate(date, "YYYY-MM-DD");
+ const visibleText = date === null ? "-/--" : formatDate(date, "M/DD");
+ function onChange(e) {
+ const value = e.target.value;
+ setDate(value === "" ? null : new Date(value.replace(/-/g, "/")));
+ }
+ return (
+
+ );
+}
diff --git a/packages/adminPage/src/shared/components/DateInput/style.module.css b/packages/adminPage/src/shared/components/DateInput/style.module.css
new file mode 100644
index 00000000..f12410bf
--- /dev/null
+++ b/packages/adminPage/src/shared/components/DateInput/style.module.css
@@ -0,0 +1,24 @@
+.hiddenDateInput {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ background: transparent;
+ color: transparent;
+ z-index: -1;
+}
+
+.hiddenDateInput::active {
+ background: transparent;
+ color: transparent;
+}
+
+.hiddenDateInput::-webkit-calendar-picker-indicator {
+ width: 100%;
+ height: 999px;
+ background: transparent;
+ color: transparent;
+ cursor: pointer;
+}
diff --git a/packages/adminPage/src/shared/components/DeleteButton/close.svg b/packages/adminPage/src/shared/components/DeleteButton/close.svg
new file mode 100644
index 00000000..d1368fea
--- /dev/null
+++ b/packages/adminPage/src/shared/components/DeleteButton/close.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/adminPage/src/shared/components/DeleteButton/index.jsx b/packages/adminPage/src/shared/components/DeleteButton/index.jsx
new file mode 100644
index 00000000..265f5e8c
--- /dev/null
+++ b/packages/adminPage/src/shared/components/DeleteButton/index.jsx
@@ -0,0 +1,17 @@
+import CloseIcon from "./close.svg?react";
+
+function DeleteButton({ onClick, disabled }) {
+ return (
+
+ );
+}
+
+export default DeleteButton;
diff --git a/packages/adminPage/src/shared/components/NavBar.jsx b/packages/adminPage/src/shared/components/NavBar.jsx
new file mode 100644
index 00000000..c3f91b22
--- /dev/null
+++ b/packages/adminPage/src/shared/components/NavBar.jsx
@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router-dom";
+
+import NavBarItem from "./NavBarItem.jsx";
+import useAuthStore, { logout } from "@admin/auth/store.js";
+
+function NavBar() {
+ const navigate = useNavigate();
+ const isLogin = useAuthStore((store) => store.isLogin);
+ function onLogoutClick() {
+ logout();
+ navigate("/login");
+ }
+
+ return (
+
+ );
+}
+
+export default NavBar;
diff --git a/packages/adminPage/src/shared/components/NavBarItem.jsx b/packages/adminPage/src/shared/components/NavBarItem.jsx
new file mode 100644
index 00000000..eea56530
--- /dev/null
+++ b/packages/adminPage/src/shared/components/NavBarItem.jsx
@@ -0,0 +1,30 @@
+import { NavLink } from "react-router-dom";
+
+function NavBarItem({ to, onClick, disabled, children }) {
+ const commonStyle = `w-full h-full flex justify-center items-center
+ hover:border-2 hover:border-white
+ active:border-2 active:border-neutral-400`;
+
+ const commonTextStyle = `text-neutral-200 hover:text-white active:text-neutral-400 invalid:text-neutral-600`;
+
+ const navLink = (
+
+ `${commonStyle} ${disabled ? "pointer-events-none text-neutral-600" : ""} ${isActive ? "text-blue-400" : commonTextStyle}`
+ }
+ >
+ {children}
+
+ );
+
+ const button = (
+
+ );
+
+ return {to ? navLink : button};
+}
+
+export default NavBarItem;
diff --git a/packages/adminPage/src/shared/components/Pagination.jsx b/packages/adminPage/src/shared/components/Pagination.jsx
new file mode 100644
index 00000000..9ed91b97
--- /dev/null
+++ b/packages/adminPage/src/shared/components/Pagination.jsx
@@ -0,0 +1,53 @@
+import { clamp } from "@common/utils.js";
+
+function getPaginationItem(currentPage, maxPage, length) {
+ let prevDelta = length % 2 === 1 ? (length - 1) / 2 : length / 2 - 1;
+ let postDelta = length % 2 === 1 ? (length - 1) / 2 : length / 2;
+
+ if (maxPage < length) return Array.from({ length: maxPage }, (_, i) => i + 1);
+ if (currentPage - prevDelta <= 0) return Array.from({ length }, (_, i) => i + 1);
+ if (currentPage + postDelta > maxPage)
+ return Array.from({ length }, (_, i) => maxPage - length + i + 1);
+ return Array.from({ length }, (_, i) => currentPage - prevDelta + i);
+}
+
+function PaginationButton({ onClick, disabled, highlighted, children }) {
+ return (
+
+ );
+}
+
+function Pagination({ currentPage, setPage: _setPage, maxPage, length = 5 }) {
+ const setPage = (index) => () => _setPage(clamp(index, 1, maxPage));
+
+ return (
+
+
+ <<
+
+
+ <
+
+ {getPaginationItem(currentPage, maxPage, length).map((i) => (
+
+ {i}
+
+ ))}
+
maxPage}>
+ >
+
+
maxPage}>
+ >>
+
+
| 
| 
| 
|
| **Front-End** | **Front-End** | **Back-End** | **Back-End** |
@@ -14,21 +16,45 @@
[Convention](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%08%5BTeam-Convention%5D)
## Plan & Design Link
+[Plan & Design Link(Figma)](https://www.figma.com/design/XieJv765qFmU9dFuQAG7tQ/%EC%96%B4%EC%8D%B8%EC%98%A4%EB%A0%8C%EC%A7%80_Hand-off_%EC%B5%9C%EC%A2%85(07%2F24)?node-id=33-1157)
+
+## Schedule
+**Front-End**
+
+| 1주차 | 공통 커스텀 훅 및 인터랙션 인터페이스 추가, 메인 페이지의 인트로, 헤더, 차량 기본정보, QnA, 푸터 구현 |
+| --- | --- |
+| 2주차 | 인터랙션 페이지, 인터랙션 모달, 각각의 인터랙션 구현 |
+| 3주차 | 각각의 인터랙션 구현, 기대평 구현 |
+| 4주차 | 선착순 이벤트 구현, 시간 남을 시 어드민 페이지(로그인, 이벤트목록) 구현 |
+| 5주차 | 어드민 페이지(이벤트 등록수정, 이벤트 관리, 기대평 관리) 구현 및 리팩토링, 발표자료 제작 |
+
+**Back-End**
+
+| 1주차 | JPA Entity 구축, 배포 등 인프라 설정, 유저 로그인, 선착순 이벤트 프로토타입 구현 |
+| --- | --- |
+| 2주차 | 기대평, 어드민 시스템, 가중치 반영 추첨 구현 (+단위 테스트) |
+| 3주차 | 선착순 이벤트 최적화, 서비스 확장성 개선, 테스트코드 작성 |
+| 4주차 | 버그 수정, 부하 테스트 기반 서비스 최적화 |
+
+## Backlog
+### Front-End
+
+
+### Back-End
+
+
+## ERD
+
### Back-End
-- Spring Boot 3.2.2
-- Java 17
-- MySQL 8.0
-- Redis
-- AWS EC2
-- AssertJ
-- Docker
+
+
+## Issue & TroubleShooting
+[Issue & TroubleShooting](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%5BIssue-&-TroubleShooting%5D)
+
+## Project Archeitecture
diff --git a/index.html b/index.html
deleted file mode 100644
index 0c589ecc..00000000
--- a/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
-