feat: cannot access closed shop

src/common/constants/index.js

@@ -7,7 +7,8 @@ const CONFIRM = Object.freeze({
 
 const ALERT = Object.freeze({
     REQ_FAIL: '요청에 실패하였습니다',
-    REQ_WRONG: '잘못된 접근입니다'
+    REQ_WRONG: '잘못된 접근입니다',
+    CLOSED: '영업 중이 아닙니다'
 });
 
 const STATUS = Object.freeze({

src/pages/main-page/MainPage.tsx

@@ -33,7 +33,7 @@ const MainPage: GFC = ({ connector }) => {
             {
                 model?.length && model.map((d, i) => {
                     return (
-                        <Link to={`/menu/${d._id}`} key={`ShopBox-${i}`}>
+                        <Link to={d.openStatus ? `/menu/${d._id}` : ''} key={`ShopBox-${i}`}>
                             <ShopBox icon={d.icon} name={d.name}
                                 location={d.location} openStatus={d.openStatus}
                             />

src/pages/main-page/modules/shop-box/ShopBox.module.css

@@ -35,3 +35,7 @@
     -webkit-box-orient: vertical;
     word-break: keep-all;
 }
+
+.not-open {
+    opacity: 0.3;
+}

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

+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import APP_ROUTE from "../../../../_app/config/route";
+import { ALERT } from "../../../../common/constants";
+
 import S from './ShopBox.module.css';
 
 import type { MainPageData } from "../../config/type";
@@ -11,9 +17,18 @@ interface Props {
 }
 
 const ShopBox: FC<Props> = ({ icon, name, location, openStatus }) => {
+    const navigator = useNavigate();
+	
+    useEffect(() => {
+        if (openStatus) return;
+		
+        alert(ALERT.CLOSED);
+        navigator(APP_ROUTE.MAIN);
+    }, []);
+	
     // TODO:: openStatus UI
     return (
-        <div className={S['container']}>
+        <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>