메뉴상세에서 menu preview를 위한 모달 추가 (#58)

* feat: menu preview용 모달 컴포넌트 추가

* feat: menu에 previewModal 추가

src/pages/menu/components/menuPreviewModal/index.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { MenuPreviewModalProps } from './index.types';
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContent = styled.div`
+  background: #f5f5f5;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 420px;
+  padding: 36px;
+`;
+
+const MenuImageWrap = styled.div`
+  width: 100%;
+  height: 200px;
+  background: #c4c4c4;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 16px;
+  overflow: hidden;
+`;
+
+const MenuImage = styled.img`
+  width: 100%;
+`;
+
+const MenuTitle = styled.h2`
+  margin: 16px 0;
+  font-size: 24px;
+`;
+
+const MenuDescription = styled.p`
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+`;
+
+const OptionSection = styled.div`
+  margin: 16px 0;
+`;
+
+const OptionTitle = styled.div`
+  margin-bottom: 8px;
+  font-size: 16px;
+`;
+
+const OptionItem = styled.label`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const OptionCheckbox = styled.input`
+  margin-right: 8px;
+`;
+
+const Price = styled.span`
+  margin-left: auto;
+`;
+
+const CloseButton = styled.button`
+  width: 100%;
+  background: #6779ff;
+  color: #fff;
+  border: none;
+  padding: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 16px;
+`;
+
+const MenuPreviewModal: React.FC<MenuPreviewModalProps> = ({
+  onClose,
+  menuImage,
+  menuTitle,
+  menuDescription,
+  optionSections,
+}) => {
+  return (
+    <ModalOverlay>
+      <ModalContent>
+        <MenuImageWrap>
+          <MenuImage src={menuImage} alt={`preview_${menuTitle}`} />
+        </MenuImageWrap>
+        <MenuTitle>{menuTitle}</MenuTitle>
+        <MenuDescription>{menuDescription}</MenuDescription>
+
+        {optionSections.map((section, sectionIndex) => (
+          <OptionSection key={sectionIndex}>
+            <OptionTitle>
+              {section.title} ({section.requirement} - {section.type})
+            </OptionTitle>
+            {section.options.map((option, index) => (
+              <OptionItem key={index}>
+                <OptionCheckbox
+                  type="checkbox"
+                  defaultChecked={option.checked}
+                  disabled={section.type === '단일'}
+                />{' '}
+                {option.name} <Price>+ ₩{option.price}</Price>
+              </OptionItem>
+            ))}
+          </OptionSection>
+        ))}
+
+        <CloseButton onClick={onClose}>닫기</CloseButton>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+export default MenuPreviewModal;

src/pages/menu/components/menuPreviewModal/index.types.ts

@@ -0,0 +1,20 @@
+type Option = {
+  name: string;
+  price: number;
+  checked?: boolean;
+};
+
+type OptionSectionData = {
+  title: string;
+  requirement: string;
+  type: string;
+  options: Option[];
+};
+
+export type MenuPreviewModalProps = {
+  onClose: () => void;
+  menuImage: string;
+  menuTitle: string;
+  menuDescription: string;
+  optionSections: OptionSectionData[];
+};

src/pages/menu/detail.tsx

@@ -17,11 +17,13 @@ import type {
 } from 'api/modules/stores/types';
 import useMenuDetail from './hooks/useMenuDetail';
 import useMenuOption from './hooks/useMenuOption';
+import MenuPreviewModal from './components/menuPreviewModal';
 
 //TODO status 뭐로 추가하지?
 const MenuDetail = ({ data }: { data: MenuDetailInfo }) => {
   const { options } = data;
   const [isOptionModalOpen, setIsOptionModalOpen] = useState<boolean>(false);
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState<boolean>(false);
   const [selectedOptionToEdit, setSelectedOptionToEdit] = useState<{
     data: CreateMenuOptionGroupReq;
     index: number;
@@ -41,12 +43,29 @@ const MenuDetail = ({ data }: { data: MenuDetailInfo }) => {
   const handleCloseEditModal = () => setSelectedOptionToEdit(null);
   const handleOptionModalOpen = () => setIsOptionModalOpen((prev) => !prev);
 
+  const menuPreviewModel = {
+    menuImage: imageMetadata ? imageMetadata.src : originalImage,
+    menuTitle: data.name,
+    menuDescription: data.desc,
+    optionSections: data.options.map((optionGroup) => ({
+      title: optionGroup.title,
+      requirement: optionGroup.isRequired ? '필수' : '선택',
+      type: optionGroup.isMultiple ? '다중' : '단일',
+      options: optionGroup.details.map((detail) => ({
+        name: detail.name,
+        price: detail.price,
+        checked: false, // 기본값으로 false 설정
+      })),
+    })),
+  };
   return (
     <>
       <div css={[_container]}>
         <div css={_titleWrap}>
           <h2>Menu</h2>
-          <button css={_subButton}>미리보기</button>
+          <button css={_subButton} onClick={() => setIsPreviewModalOpen(true)}>
+            미리보기
+          </button>
         </div>
         <section css={_menuContainer}>
           <h3 css={_subtitle}>기본 정보</h3>
@@ -132,6 +151,12 @@ const MenuDetail = ({ data }: { data: MenuDetailInfo }) => {
           }}
         />
       )}
+      {isPreviewModalOpen && (
+        <MenuPreviewModal
+          onClose={() => setIsPreviewModalOpen(false)}
+          {...menuPreviewModel}
+        />
+      )}
     </>
   );
 };