diff --git a/apps/nowait-admin/src/global.css b/apps/nowait-admin/src/global.css index 4dcc4ebb..890fc499 100644 --- a/apps/nowait-admin/src/global.css +++ b/apps/nowait-admin/src/global.css @@ -124,3 +124,7 @@ body, mask-image: linear-gradient(to right, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%); } + +textarea { + resize: none; +} diff --git a/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx b/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx index cb5e7c74..fdd11fd0 100644 --- a/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx +++ b/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx @@ -8,6 +8,7 @@ import NoticeEditor from "./components/NoticeEditor"; import editOrderIcon from "../../assets/edit_order_icon.svg"; import ToggleSwitch from "../AdminHome/components/ToggleSwitch"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +import MenuModal from "./components/menuModal"; const BoothSection = ({ boothName, @@ -162,6 +163,24 @@ const dummyMenus = [ const MenuSection = () => { const [editMode, setEditMode] = useState(false); const [menus, setMenus] = useState(dummyMenus); + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [selectedMenu, setSelectedMenu] = useState(null); + + const openEditModal = (menu: any) => { + setSelectedMenu(menu); + setIsEditModalOpen(true); + }; + + const handleAddMenu = (newMenu: any) => { + setMenus((prev) => [...prev, newMenu]); + }; + + const handleEditMenu = (updated: any) => { + setMenus((prev) => + prev.map((menu) => (menu.name === selectedMenu.name ? updated : menu)) + ); + }; const toggleSoldOut = (index: number) => { const updatedMenus = [...menus]; @@ -189,7 +208,10 @@ const MenuSection = () => { > {editMode ? "편집 완료" : "순서 편집"} - @@ -226,7 +248,10 @@ const MenuSection = () => { {...(editMode ? provided.dragHandleProps : {})} >
-
+
!editMode && openEditModal(menu)} + > {
+ {isAddModalOpen && ( + setIsAddModalOpen(false)} + onSubmit={handleAddMenu} + /> + )} + {isEditModalOpen && selectedMenu && ( + setIsEditModalOpen(false)} + onSubmit={handleEditMenu} + /> + )}
); }; diff --git a/apps/nowait-admin/src/pages/AdminBooth/components/menuModal.tsx b/apps/nowait-admin/src/pages/AdminBooth/components/menuModal.tsx new file mode 100644 index 00000000..20e5d566 --- /dev/null +++ b/apps/nowait-admin/src/pages/AdminBooth/components/menuModal.tsx @@ -0,0 +1,191 @@ +import { useState } from "react"; +import placeholderIcon from "../../../assets/image_placeholder.svg"; +import closeIcon from "../../../assets/close.svg"; +interface MenuModalProps { + isEdit: boolean; + initialData?: { + name: string; + adminName: string; + price: string; + description: string; + isRepresentative: boolean; + image?: File; + }; + onClose: () => void; + onSubmit: (data: any) => void; +} + +const MenuModal = ({ + isEdit, + initialData, + onClose, + onSubmit, +}: MenuModalProps) => { + const [name, setName] = useState(initialData?.name || ""); + const [adminName, setAdminName] = useState(initialData?.adminName || ""); + const [price, setPrice] = useState(initialData?.price || ""); + const [description, setDescription] = useState( + initialData?.description || "" + ); + const [isRepresentative, setIsRepresentative] = useState( + initialData?.isRepresentative || false + ); + const [image, setImage] = useState(initialData?.image || null); + + const handleSubmit = () => { + onSubmit({ name, adminName, price, description, isRepresentative, image }); + onClose(); + }; + + return ( +
+
+
+

+ {isEdit ? "메뉴 편집하기" : "새 메뉴 추가하기"} +

+ 닫기 +
+ + {/* 대표 메뉴 토글 */} +
+ 대표 메뉴 설정 + +
+ + {/* 메뉴명 */} +
+
+ +
+ setName(e.target.value)} + maxLength={20} + className="w-full h-[52px] border border-[#DDDDDD] bg-black-5 bg-black-5 focus:bg-white px-4 py-2 border rounded-lg text-sm" + placeholder="메뉴명을 입력해주세요" + /> +

+ 0 ? "text-black" : "text-gray-400" + }`} + > + {name.length} + {" "} + / 20 +

+ {/* 이미지 업로드 */} +
+
+ +
+ + {/* 관리자용 메뉴명 */} +
+ +
+ setAdminName(e.target.value)} + maxLength={10} + className="w-full h-[52px] border border-[#DDDDDD] bg-black-5 bg-black-5 focus:bg-white px-4 py-2 border rounded-lg text-sm" + placeholder="주문 확인에 용이한 메뉴명으로 설정해주세요." + /> +

+ 0 ? "text-black" : "text-gray-400" + }`} + > + {adminName.length} + {" "} + / 10 +

+
+
+ + {/* 가격 */} +
+ + setPrice(e.target.value)} + className="w-full h-[52px] border border-[#DDDDDD] bg-black-5 bg-black-5 focus:bg-white px-4 py-2 border rounded-lg text-sm" + placeholder="가격을 입력해주세요" + /> +
+ + {/* 메뉴 소개 */} +
+ +