diff --git a/src/common/constants/index.js b/src/common/constants/index.js index aa92f57a45ba48ffdc1f7ee704cebfffa56169e6..d0aee68863b310fe3b3edc751cbc959ddce98009 100644 --- a/src/common/constants/index.js +++ b/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({ diff --git a/src/pages/main-page/MainPage.tsx b/src/pages/main-page/MainPage.tsx index ecbda5ab5333127b5d0681cd23eeddc7eff2e7a4..fd0debac8a9de38fcf002a2d5dddd3adc7aa31d2 100644 --- a/src/pages/main-page/MainPage.tsx +++ b/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} /> diff --git a/src/pages/main-page/modules/shop-box/ShopBox.module.css b/src/pages/main-page/modules/shop-box/ShopBox.module.css index b5c6571836619331925e7678c5cd703fbfb55d13..0b5b92cf2c4b8582f5a0767987506d17beef7214 100644 --- a/src/pages/main-page/modules/shop-box/ShopBox.module.css +++ b/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; +} diff --git a/src/pages/main-page/modules/shop-box/ShopBox.tsx b/src/pages/main-page/modules/shop-box/ShopBox.tsx index 347f5562f5bdaa4388185c43bc0a52e4de96d23e..e0ec9930c42725912b1378031b9c484f6488ae8a 100644 --- a/src/pages/main-page/modules/shop-box/ShopBox.tsx +++ b/src/pages/main-page/modules/shop-box/ShopBox.tsx @@ -1,3 +1,9 @@ +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>