From a06116e3497f0a0aa3ed70614eacc2d146267553 Mon Sep 17 00:00:00 2001
From: lybell <futireflugel@gmail.com>
Date: Fri, 16 Aug 2024 00:17:45 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A2=85=EB=A5=98=20=EC=84=A0=ED=83=9D=20=ED=83=AD=EB=B0=94=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/eventEdit/EventDetailInput.jsx   | 34 +++++++++++++++++++
 src/adminPage/features/eventEdit/index.jsx    |  7 ++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/adminPage/features/eventEdit/EventDetailInput.jsx

diff --git a/src/adminPage/features/eventEdit/EventDetailInput.jsx b/src/adminPage/features/eventEdit/EventDetailInput.jsx
new file mode 100644
index 00000000..428b633f
--- /dev/null
+++ b/src/adminPage/features/eventEdit/EventDetailInput.jsx
@@ -0,0 +1,34 @@
+function EventTypeSelector({selected, onClick, children})
+{
+	const selectorBaseStyle = `flex justify-center items-center px-8 py-2 rounded-t-lg text-body-m relative hover:bg-blue-50`;
+	const selectedStyle = `text-blue-400 font-bold after:w-full after:h-1 after:absolute after:-bottom-px after:border-b-2 after:border-blue-400`;
+	const unSelectedStyle = `text-neutral-800 hover:text-blue-400`;
+
+	return <button type="button" className={`${selectorBaseStyle} ${selected ? selectedStyle : unSelectedStyle}`} onClick={onClick}>{children}</button>
+}
+
+function EventDetailInput({state, dispatch, mode})
+{
+	function selectEventType(type)
+	{
+		return ()=>{
+			if(mode === "edit") return;
+			dispatch({type: "set_event_type", value:type});
+		}
+	}
+
+	return <div className="w-full">
+		<div className="flex w-full border-b border-neutral-200">
+			<EventTypeSelector selected={state.eventType === "fcfs"} onClick={selectEventType("fcfs")}>
+				선착순
+			</EventTypeSelector>
+			<EventTypeSelector selected={state.eventType === "draw"} onClick={selectEventType("draw")}>
+				추첨
+			</EventTypeSelector>
+		</div>
+		<div className="flex-grow flex justify-center items-center p-4">
+		</div>
+	</div>
+}
+
+export default EventDetailInput;
\ No newline at end of file
diff --git a/src/adminPage/features/eventEdit/index.jsx b/src/adminPage/features/eventEdit/index.jsx
index 872564bc..a1f214f1 100644
--- a/src/adminPage/features/eventEdit/index.jsx
+++ b/src/adminPage/features/eventEdit/index.jsx
@@ -2,6 +2,7 @@ import { useReducer } from "react";
 import { eventEditReducer, setDefaultState } from "./businessLogic/reducer.js";
 
 import EventBaseDataInput from "./EventBaseDataInput.jsx";
+import EventDetailInput from "./EventDetailInput.jsx";
 import Button from "@common/components/Button.jsx";
 
 function EventEditor({mode, initialData = null} = {}) {
@@ -27,6 +28,12 @@ function EventEditor({mode, initialData = null} = {}) {
     </div>
     <div className="w-full flex flex-col gap-3">
       <EventBaseDataInput state={state} dispatch={dispatch} mode={mode} />
+      <div className="grid grid-cols-[6rem_1fr] items-start gap-2">
+        <span className="py-2 text-center">
+          이벤트 종류<sup className="text-red-500">*</sup>
+        </span>
+        <EventDetailInput state={state} dispatch={dispatch} mode={mode} />
+      </div>
     </div>
   </form>
 }