[Feat] 어드민 UI 구현

admin/src/components/Layout/index.tsx

@@ -1,15 +1,12 @@
 import { Outlet } from "react-router-dom";
-import { RushEventContext } from "@/contexts/rushEventContext";
 import Header from "../Header";
 
 export default function Layout() {
     return (
         <div className="overflow-hidden h-screen">
             <Header />
             <div className="mb-[80px]">
-                <RushEventContext>
-                    <Outlet />
-                </RushEventContext>
+                <Outlet />
             </div>
         </div>
     );

admin/src/components/SelectForm/index.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+
+interface SelectFormProps {
+    header: ReactNode;
+    data: ReactNode[][];
+}
+
+export default function SelectForm({ header, data }: SelectFormProps) {
+    return (
+        <div className="relative sm:rounded-lg w-[730px] border">
+            <div className="overflow-y-auto h-full">
+                <table className="w-full text-sm rtl:text-right text-gray-500 text-center">
+                    <thead className="sticky top-0 z-[5] text-gray-700 bg-gray-50">
+                        <tr>
+                            <th colSpan={2} className="px-6 py-3 h-body-2-medium">
+                                {header}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.map((tableData, idx) => (
+                            <tr key={`table-data-${idx}`} className="bg-white border-b">
+                                {tableData.map((dataNode, idx) => (
+                                    <td
+                                        key={`${header}-data-${idx}`}
+                                        className="px-6 py-4 h-body-2-regular"
+                                    >
+                                        {dataNode}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

admin/src/components/Table/index.tsx

@@ -3,11 +3,12 @@ import { ReactNode } from "react";
 interface TableProps {
     headers: ReactNode[];
     data: ReactNode[][];
+    height?: string | number;
 }
 
-export default function Table({ headers, data }: TableProps) {
+export default function Table({ headers, data, height = 600 }: TableProps) {
     return (
-        <div className="relative sm:rounded-lg w-[1560px] h-[600px] border">
+        <div className="relative sm:rounded-lg w-[1560px] border" style={{ height }}>
             <div className="overflow-y-auto h-full">
                 <table className="w-full text-sm rtl:text-right text-gray-500 text-center">
                     <thead className="sticky top-0 z-[5] text-gray-700 bg-gray-50">

admin/src/components/TextField/index.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+
+interface TextFieldProps extends ComponentProps<"textarea"> {}
+
+export default function TextField({ ...restProps }: TextFieldProps) {
+    return (
+        <textarea
+            className="resize-none focus:outline-none w-full text-black"
+            spellCheck={false}
+            {...restProps}
+        />
+    );
+}

admin/src/constants/lottery.ts

@@ -0,0 +1,9 @@
+export const LOTTERY_HEADER = [
+    "시작 날짜",
+    "시작 시간",
+    "종료 날짜",
+    "종료 시간",
+    "활성화 기간",
+    "추첨 당첨 인원 수",
+    "진행 상태",
+];

admin/src/constants/rush.ts

@@ -1,7 +1,13 @@
-export const RUSH_SECTION = {
-    EVENT_LIST: "event_list",
-    APPLICANT_LIST: "applicant_list",
-    SELECTION_MANAGE: "selection_manage",
-    GIFT_MANAGE: "gift_manage",
-};
-export type RushSectionType = (typeof RUSH_SECTION)[keyof typeof RUSH_SECTION];
+export const EVENT_LIST_HEADER = [
+    "ID",
+    "이벤트 진행 날짜",
+    "오픈 시간",
+    "종료 시간",
+    "활성화 시간",
+    "선택지 관리",
+    "경품 관리",
+    "선착순 당첨 인원 수",
+    "진행 상태",
+    "참여자 리스트 보기",
+    "관리",
+];

admin/src/contexts/rushEventContext.tsx

@@ -4,13 +4,16 @@ import {
     RushEventAction,
     RushEventDispatchType,
     RushEventStateType,
+    RushPrizeType,
 } from "@/types/rush";
 
 export const RushEventStateContext = createContext<RushEventStateType | null>(null);
 export const RushEventDispatchContext = createContext<RushEventDispatchType | null>(null);
 
 const initialState: RushEventStateType = {
     rushList: [],
+    selectOptions: [],
+    prize: {} as RushPrizeType,
 };
 
 const casperCustomReducer = (
@@ -20,7 +23,10 @@ const casperCustomReducer = (
     switch (action.type) {
         case RUSH_ACTION.SET_EVENT_LIST:
             return { ...state, rushList: action.payload };
-
+        case RUSH_ACTION.SET_OPTION:
+            return { ...state, selectOptions: action.payload };
+        case RUSH_ACTION.SET_PRIZE:
+            return { ...state, prize: action.payload };
         default:
             return state;
     }