Merge pull request #38 from Project-Unifest/feature/introduce-queue-f…

…eature

Feature/introduce queue feature

mocks/api/constants/booths.ts

@@ -34,20 +34,23 @@ export const booths: Booth[] = [
         price: 5000,
         imgUrl:
           "https://content.foodspring.co.kr/vendor/1781/images/101_4100052181_r.png",
+        menuStatus: null,
       },
       {
         id: 1,
         name: "타코야끼",
         price: 4500,
         imgUrl:
           "https://thenaum.cdn-nhncommerce.com/data/goods/18/01/03/1000001570/1000001570_add3_023.jpg",
+        menuStatus: null,
       },
       {
         id: 2,
         name: "닭강정",
         price: 6000,
         imgUrl:
           "https://gwchild114.firstmall.kr/data/goods/1/2021/06/42952_tmp_bfbe39f750e2db665da61b3a2e3c74697887large.png",
+        menuStatus: null,
       },
     ],
     enabled: false,
@@ -71,34 +74,39 @@ export const booths: Booth[] = [
         price: 6000,
         imgUrl:
           "https://gwchild114.firstmall.kr/data/goods/1/2021/06/42952_tmp_bfbe39f750e2db665da61b3a2e3c74697887large.png",
+        menuStatus: null,
       },
       {
         id: 1,
         name: "파전",
         price: 12000,
         imgUrl:
           "https://recipe1.ezmember.co.kr/cache/recipe/2021/10/06/fc673b15bc044419eba3f16c02981bd01.jpg",
+        menuStatus: null,
       },
       {
         id: 2,
         name: "콘치즈",
         price: 5000,
         imgUrl:
           "https://roout.co.kr/m/p/u/CuAhLhz/labels/category%3A%EC%BD%98%EC%B9%98%EC%A6%88/i/HWBqoVuw1Qg.jpg",
+        menuStatus: null,
       },
       {
         id: 3,
         name: "소주",
         price: 5000,
         imgUrl:
           "https://img.khan.co.kr/news/2022/02/18/l_2022021801002225800200181.jpg",
+        menuStatus: null,
       },
       {
         id: 4,
         name: "주",
         price: 5000,
         imgUrl:
           "https://health.chosun.com/site/data/img_dir/2015/08/11/2015081101302_0.jpg",
+        menuStatus: null,
       },
     ],
     enabled: true,

mocks/api/constants/members.ts

@@ -37,20 +37,23 @@ export const member: Member = {
           price: 5000,
           imgUrl:
             "https://content.foodspring.co.kr/vendor/1781/images/101_4100052181_r.png",
+          menuStatus: null,
         },
         {
           id: 1,
           name: "타코야끼",
           price: 4500,
           imgUrl:
             "https://thenaum.cdn-nhncommerce.com/data/goods/18/01/03/1000001570/1000001570_add3_023.jpg",
+          menuStatus: null,
         },
         {
           id: 2,
           name: "닭강정",
           price: 6000,
           imgUrl:
             "https://gwchild114.firstmall.kr/data/goods/1/2021/06/42952_tmp_bfbe39f750e2db665da61b3a2e3c74697887large.png",
+          menuStatus: null,
         },
       ],
       enabled: false,
@@ -74,34 +77,39 @@ export const member: Member = {
           price: 6000,
           imgUrl:
             "https://gwchild114.firstmall.kr/data/goods/1/2021/06/42952_tmp_bfbe39f750e2db665da61b3a2e3c74697887large.png",
+          menuStatus: null,
         },
         {
           id: 1,
           name: "파전",
           price: 12000,
           imgUrl:
             "https://recipe1.ezmember.co.kr/cache/recipe/2021/10/06/fc673b15bc044419eba3f16c02981bd01.jpg",
+          menuStatus: null,
         },
         {
           id: 2,
           name: "콘치즈",
           price: 5000,
           imgUrl:
             "https://roout.co.kr/m/p/u/CuAhLhz/labels/category%3A%EC%BD%98%EC%B9%98%EC%A6%88/i/HWBqoVuw1Qg.jpg",
+          menuStatus: null,
         },
         {
           id: 3,
           name: "소주",
           price: 5000,
           imgUrl:
             "https://img.khan.co.kr/news/2022/02/18/l_2022021801002225800200181.jpg",
+          menuStatus: null,
         },
         {
           id: 4,
           name: "주",
           price: 5000,
           imgUrl:
             "https://health.chosun.com/site/data/img_dir/2015/08/11/2015081101302_0.jpg",
+          menuStatus: null,
         },
       ],
       enabled: true,

src/entities/booth/ui/Item.tsx

@@ -10,13 +10,17 @@ import {
 import Link from "next/link";
 
 import React, { ReactNode } from "react";
+import { number, string } from "zod";
 
-type ItemPropsType = Pick<Booth, "name"> &
-  Partial<Pick<Booth, "description" | "location" | "id">> & {
-    editButton: ReactNode;
-    deleteButton: ReactNode;
-    switchButton: ReactNode;
-  };
+interface ItemPropsType {
+  id: number;
+  name: string;
+  description: string;
+  location: string;
+  editButton: ReactNode;
+  deleteButton: ReactNode;
+  switchButton: ReactNode;
+}
 
 export function Item({
   id,

src/features/menu/ui/MenuItem.tsx

@@ -19,16 +19,16 @@ import { useAuthStore } from "@/src/shared/model/provider/auth-store-provider";
 import useAuthFetch from "@/src/shared/model/auth/useAuthFetchList";
 import { MenuItemState } from "@/src/shared/model/store/booth-edit-store";
 import { useBoothEditStore } from "@/src/shared/model/provider/booth-edit-store.provider";
-import { MenuItem } from "@/src/shared/lib/types";
+import { Product } from "@/src/shared/lib/types";
 
 interface MenuItemPropsType {
   boothId: number;
   id: number;
   name: string;
   price: number;
   imgUrl?: string;
-  state: MenuItemState;
-  edit: (id: number, menuProp: Partial<MenuItem>) => void;
+  menuStatus: MenuItemState | null;
+  edit: (id: number, menuProp: Partial<Product>) => void;
   add: () => void;
   remove: (id: number) => void;
 }
@@ -39,7 +39,7 @@ export function MenuCard({
   name,
   price,
   imgUrl,
-  state,
+  menuStatus,
   add,
   remove,
   edit,
@@ -48,7 +48,7 @@ export function MenuCard({
   const deleteAuthMemuItem = useAuthFetch(deleteMenuItem);
 
   const canBeRegistered = Boolean(
-    state === MenuItemState.DRAFT && name && price,
+    menuStatus === MenuItemState.DRAFT && name && price,
   );
 
   const handleChangeImage = async (event: ChangeEvent<HTMLInputElement>) => {

src/features/queue/ui/EnterButton.tsx

@@ -4,13 +4,12 @@ import React from "react";
 // TODO add handleClick event handler function
 
 interface EnterButtonPropsType {
-  id: number;
-  onEnter: (id: number) => void | Promise<void>;
+  onEnter: () => void | Promise<void>;
 }
 
-export default function Enter({ id, onEnter }: EnterButtonPropsType) {
+export default function EnterButton({ onEnter }: EnterButtonPropsType) {
   const handleClick = () => {
-    onEnter(id);
+    onEnter();
   };
   return (
     <Button size="square" state="outlined" shape="circle" onClick={handleClick}>

src/features/queue/ui/NotifyButton.tsx

@@ -2,13 +2,12 @@ import { Button } from "@/src/shared/ui/button";
 import React from "react";
 
 interface NotifyButtonPropsType {
-  id: number;
-  onNotify: (waitingId: number) => void | Promise<void>;
+  onNotify: () => void | Promise<void>;
 }
 
-export default function NotifyButton({ id, onNotify }: NotifyButtonPropsType) {
+export default function NotifyButton({ onNotify }: NotifyButtonPropsType) {
   const handleClick = () => {
-    onNotify(id);
+    onNotify();
   };
 
   return (

src/features/queue/ui/QueueTabs.tsx

@@ -3,22 +3,22 @@ import React, { useState } from "react";
 
 interface QueueTabsPropsType {
   activatedTab?: string;
-  onToggle: (tab: string) => void;
+  onToggle: (tab: "active" | "completed" | "canceled") => void;
 }
 
 export default function QueueTabs({
   activatedTab,
   onToggle,
 }: QueueTabsPropsType) {
-  const handleValueChange = (value: string) => {
+  const handleValueChange = (value: "active" | "completed" | "canceled") => {
     onToggle(value);
   };
 
   return (
     <Tabs
       defaultValue="queue"
       value={activatedTab}
-      onValueChange={handleValueChange}
+      onValueChange={handleValueChange as any}
     >
       <TabsList>
         <TabsTrigger value="active">웨이팅</TabsTrigger>

src/pages/booths/booth-detail.tsx

@@ -9,10 +9,21 @@ import PINContainer from "@/src/widgets/queue/ui/pin-container";
 import React from "react";
 
 interface BoothDetailPropsType {
-  booth: Booth;
+  booth: {
+    id: number;
+    name: string;
+    description: string;
+    location: string;
+    enabled: boolean;
+  };
 }
 
 export default function BoothDetail({ booth }: BoothDetailPropsType) {
+  // TODO change component to loading state
+  if (!booth) {
+    return <>페이지가 비어있어요.</>;
+  }
+
   return (
     <>
       <div className="mb-3">

src/shared/lib/types.ts

@@ -1,7 +1,7 @@
 import { MenuItemState } from "../model/store/booth-edit-store";
 
 export interface Product {
-  menuStatus?: MenuItemState;
+  menuStatus: MenuItemState | null;
   id: number;
   name: string;
   price: number;
@@ -27,8 +27,9 @@ export interface Member {
   id?: number;
   email: string;
   phoneNum: string;
-  booths: Booth[];
+  booths: (Required<Pick<Booth, "id" | "description">> & Omit<Booth, "id">)[];
   schoolId: number;
+  memberRole: string;
 }
 
 export const BoothCategory = {
@@ -44,13 +45,7 @@ export type BoothCategoryKeys =
   (typeof BoothCategory)[keyof typeof BoothCategory];
 
 export type BoothList = Booth[];
-export interface MenuItem {
-  id: number;
-  name: string;
-  price: number;
-  imgUrl?: string;
-  state: MenuItemState;
-}
+
 export enum AnimatedPathSegment {
   SET_NAME = "set-name",
   SET_CATEGORY = "set-category",

src/shared/model/store/booth-details-draft-store.ts

@@ -1,8 +1,12 @@
 import { devtools, persist } from "zustand/middleware";
 import { createStore } from "zustand/vanilla";
-import { Booth, BoothCategory } from "../../lib/types";
+import {
+  Booth,
+  BoothCategory,
+  BoothCategoryKeys,
+  Product,
+} from "../../lib/types";
 import { MenuItemState } from "./booth-edit-store";
-import { MenuItem } from "../../lib/types";
 
 export interface Position {
   latitude: number;
@@ -15,13 +19,13 @@ export type BoothDetailsDraftActions = {
   initialize: (booth: Booth) => void;
   setField: (boothProps: Partial<BoothDetailsDraftState>) => void;
   editName: (newName: string) => void;
-  editCategory: (newCategory: BoothCategory) => void;
+  editCategory: (newCategory: BoothCategoryKeys) => void;
   editDescription: (newDescription: string) => void;
   editPosition: (newPosition: Position) => void;
   editThumbnail: (url: string) => void;
   reset: () => void;
   addMenuItem: () => void;
-  editMenuItem: (id: number, menuProp: Partial<MenuItem>) => void;
+  editMenuItem: (id: number, menuProp: Partial<Product>) => void;
   removeMenuItem: (id: number) => void;
 };
 
@@ -44,7 +48,7 @@ export const defaultInitState = {
   latitude: CampusPosition.latitude,
   longitude: CampusPosition.longitude,
   menus: [],
-} satisfies BoothDetailsDraftState;
+} satisfies Omit<BoothDetailsDraftState, "id">;
 
 export const createBoothDetailsDraftStore =
   process.env.NODE_ENV === "development"
@@ -79,7 +83,7 @@ export const createBoothDetailsDraftStore =
                     id: crypto.getRandomValues(new Uint32Array(1))[0],
                     name: "",
                     price: 0,
-                    state: MenuItemState.DRAFT,
+                    menuStatus: MenuItemState.DRAFT,
                   },
                 ],
               })),
@@ -127,7 +131,7 @@ export const createBoothDetailsDraftStore =
                   id: crypto.getRandomValues(new Uint32Array(1))[0],
                   name: "",
                   price: 0,
-                  state: MenuItemState.DRAFT,
+                  menuStatus: MenuItemState.DRAFT,
                 },
               ],
             })),

src/shared/model/store/booth-draft-store.ts

@@ -1,6 +1,6 @@
 import { devtools, persist } from "zustand/middleware";
 import { createStore } from "zustand/vanilla";
-import { Booth, BoothCategory } from "../../lib/types";
+import { Booth, BoothCategory, BoothCategoryKeys } from "../../lib/types";
 
 export interface Position {
   latitude: number;
@@ -11,7 +11,7 @@ export type BoothDraftState = Booth;
 
 export type BoothDraftActions = {
   editName: (newName: string) => void;
-  editCategory: (newCategory: BoothCategory) => void;
+  editCategory: (newCategory: BoothCategoryKeys) => void;
   editDescription: (newDescription: string) => void;
   editPosition: (newPosition: Position) => void;
   reset: () => void;