feat: change order complete toast

src/_app/modules/wrapper/Wrapper.tsx

 import { useContext, useEffect, useRef } from "react";
 
+import { STATUS } from "../../../common/constants";
 import Socket from "../../../common/instances/Socket";
 import { BSContext } from "../../../contexts/bottom-sheet";
 import { ToastContext } from "../../../contexts/toast";
 
+
 import S from './Wrapper.module.css';
 
 import type { GFCWithProp } from "../../../common/types/fc";
+import type { OrderedItemModel } from "../../../pages/admin-page/config/type";
 import type { CartItemPostModel } from "../../../pages/cart-page/config/type";
+import type { MenuPageModel } from "../../../pages/menu-page/config/type";
 import type { ReactNode , MutableRefObject } from "react";
 
 
-interface Props { children: ReactNode; }
+type ShopInfo = MenuPageModel['shop'];
+
 
+interface Props { children: ReactNode; }
 
 // NEEDED TO USE CONTEXTS
 const Wrapper: GFCWithProp<Props> = ({ connector, children }) => {
@@ -25,9 +31,16 @@ const Wrapper: GFCWithProp<Props> = ({ connector, children }) => {
     
         if (!socket.current) socket.current = new Socket();
     
-        socket.current!.onOrder((d: CartItemPostModel) => {
+        socket.current!.onOrder(async (d: OrderedItemModel) => {
+            if (d.status !== STATUS.COMPLETED) return;
+            
+            const shopInfo = await connector.current!.get<ShopInfo>(`/shop/${d.shopId}`);
+            
             setToastItem({
-                id: '', title: d.shopId, description: d.waitingCount.toString(), goto: ''
+                id: '',
+                title: `${shopInfo.name} 주문이 준비되었습니다`,
+                description: `대기번호: ${d.waitingCount}번`,
+                goto: ''
             });
         });
     

src/pages/main-page/modules/shop-box/ShopBox.tsx

@@ -26,9 +26,8 @@ const ShopBox: FC<Props> = ({ icon, name, location, openStatus }) => {
         navigator(APP_ROUTE.MAIN);
     }, []);
 	
-    // TODO:: openStatus UI
     return (
-        <div className={[S['container'], openStatus ? S['not-open'] : ''].join(' ')}>
+        <div className={[S['container'], openStatus ? '' : S['not-open']].join(' ')}>
             <img className={S['icon']} src={icon} alt={`${icon}icon`} />
             <div className={S['text-box']}>
                 <span className={S['title']}>{name}</span>