Merge branch 'develop' into feature/add-signup-page

.github/ISSUE_TEMPLATE/BUG-REPORT.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: Bug
+assignees: ''
+---
+
+<!-- Template from tui.chart -->
+## Describe the bug
+A clear and concise description of what the bug is.
+
+## To Reproduce
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Expected behavior
+A clear and concise description of what you expected to happen.
+
+## Screenshot
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+
+**Desktop:**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone:**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]

.github/workflows/LINT_CHECK.yml

@@ -26,3 +26,5 @@ jobs:
         run: yarn
       - name: Check lint
         run: yarn lint
+      - name: Type Check
+        run: yarn typecheck

package.json

@@ -31,7 +31,8 @@
     "eject": "react-scripts eject",
     "lint": "yarn lint:eslint && yarn lint:stylelint",
     "lint:eslint": "eslint src/ --ext .tsx,.ts",
-    "lint:stylelint": "stylelint \"src/**/*.scss\" --config .stylelint.json"
+    "lint:stylelint": "stylelint \"src/**/*.scss\" --config .stylelint.json",
+    "typecheck": "tsc --project tsconfig.json"
   },
   "eslintConfig": {
     "extends": [

src/api/shop/index.ts

@@ -3,6 +3,7 @@ import { MenuInfoRes } from 'model/shopInfo/menuCategory';
 import { ShopListRes } from 'model/shopInfo/allShopInfo';
 import { accessClient, client } from 'api';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
+import { NewMenu } from 'model/shopInfo/newMenu';
 
 export const getMyShopList = async () => {
   const { data } = await accessClient.get<MyShopListRes>('/owner/shops');
@@ -24,4 +25,6 @@ export const getShopList = async () => {
   return ShopListRes.parse(data);
 };
 
+export const addMenu = (shopId:number, param: NewMenu) => accessClient.post(`/owner/shops/${shopId}/menus`, param);
+
 export const postShop = (data: OwnerShop) => accessClient.post('/owner/shops', data);

src/api/uploadFile/Uploadfile.ts

@@ -0,0 +1,9 @@
+import { accessClient } from 'api';
+
+export const uploadFile = (formData: FormData) => accessClient.post('/OWNERS/upload/file', formData, {
+  headers: { 'Content-Type': 'multipart/form-data' },
+});
+
+export const uploadFiles = (formData: FormData) => accessClient.post('/OWNERS/upload/files', formData, {
+  headers: { 'Content-Type': 'multipart/form-data' },
+});

src/model/File/index.ts

@@ -0,0 +1,13 @@
+import z from 'zod';
+
+export const File = z.object({
+  fileURL: z.string(),
+});
+
+export type File = z.infer<typeof File>;
+
+export const Files = z.object({
+  fileURLs: z.array(File),
+});
+
+export type Files = z.infer<typeof Files>;

src/model/shopInfo/newMenu.ts

@@ -0,0 +1,19 @@
+import z from 'zod';
+
+export const OptionPrice = z.object({
+  option: z.string(),
+  price: z.number(),
+});
+export type OptionPrice = z.infer<typeof OptionPrice>;
+
+export const NewMenu = z.object({
+  category_ids: z.array(z.number()),
+  description: z.string().nullable(),
+  image_urls: z.array(z.string()),
+  is_single: z.boolean(),
+  name: z.string(),
+  option_prices: z.array(OptionPrice.nullable()),
+  single_price: z.number(),
+});
+
+export type NewMenu = z.infer<typeof NewMenu>;

src/page/AddMenu/components/AddMenuImgModal/index.tsx

@@ -1,53 +1,39 @@
+import React from 'react';
 import { createPortal } from 'react-dom';
-import { ReactComponent as CancleIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
+import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
+import useMenuImageUpload from 'page/AddMenu/hook/useMenuImageUpload';
 import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
   isOpen: boolean;
-  onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+  closeModal: (event?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 
-export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalProps) {
+export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) {
+  const { imgRef, saveImgFile } = useMenuImageUpload(closeModal);
+
+  const handleFileChange = () => {
+    saveImgFile();
+  };
+
+  const triggerFileInput = () => {
+    imgRef.current?.click();
+  };
+
   if (!isOpen) return null;
 
   return createPortal(
-    <div
-      className={styles.modal}
-      onClick={onCancel}
-      onKeyDown={onCancel}
-      role="button"
-      tabIndex={0}
-    >
-      <div
-        className={styles.content}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-        role="presentation"
-      >
-        <button
-          type="button"
-          className={styles['cancel-button']}
-          onClick={onCancel}
-        >
-          <CancleIcon className={styles.cancelIcon} />
+    <div className={styles.modal} onClick={closeModal} onKeyDown={closeModal} role="button" tabIndex={0}>
+      <div className={styles.content} onClick={(e) => e.stopPropagation()} role="presentation">
+        <button type="button" className={styles['cancel-button']} onClick={closeModal}>
+          <CancelIcon className={styles.cancelIcon} />
         </button>
         <span className={styles['content__main-text']}>이미지 추가</span>
-        <span className={styles['content__sub-text']}>메뉴 사진을 추가 할 수 있습니다.</span>
+        <span className={styles['content__sub-text']}>메뉴 사진을 추가할 수 있습니다.</span>
         <div className={styles['content__button-container']}>
-          <button
-            type="button"
-            className={styles['content__album-button']}
-            onClick={onCancel}
-          >
-            사진 앨범
-          </button>
-          <button
-            type="button"
-            className={styles['content__camera-button']}
-            onClick={onCancel}
-          >
-            카메라 촬영
-          </button>
+          <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFileChange} ref={imgRef} />
+          <button type="button" className={styles['content__album-button']} onClick={triggerFileInput}>사진 앨범</button>
+          <button type="button" className={styles['content__camera-button']} onClick={closeModal}>카메라 촬영</button>
         </div>
       </div>
     </div>,

src/page/AddMenu/components/GoMyShop/index.tsx

@@ -5,9 +5,10 @@ import styles from './GoMyShopModal.module.scss';
 interface CheckModalProps {
   isOpen: boolean;
   onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+  onConfirm: () => void;
 }
 
-export default function GoMyShopModal({ isOpen, onCancel }: CheckModalProps) {
+export default function GoMyShopModal({ isOpen, onCancel, onConfirm }: CheckModalProps) {
   if (!isOpen) return null;
   return createPortal(
     <div
@@ -29,6 +30,7 @@ export default function GoMyShopModal({ isOpen, onCancel }: CheckModalProps) {
           <button
             type="button"
             className={styles['content__goMyShop-button']}
+            onClick={onConfirm}
           >
             내 상점으로
           </button>

src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss

@@ -63,6 +63,18 @@ $button-text-color: #252525;
   }
 }
 
+.category-text-container {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.category-text {
+  font-size: 20px;
+  font-weight: 500;
+}
+
 .mobile {
   &__container {
     width: 100%;
@@ -120,4 +132,11 @@ $button-text-color: #252525;
       cursor: pointer;
     }
   }
+
+  &__category-text-container {
+    margin-top: 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 }