From b1d7a8f4e0849da8386d19795e608b953789facc Mon Sep 17 00:00:00 2001 From: MinseoLee <mmmm@ajou.ac.kr> Date: Fri, 8 Dec 2023 22:38:02 +0900 Subject: [PATCH] feat: cannot access closed shop --- src/common/constants/index.js | 3 ++- src/pages/main-page/MainPage.tsx | 2 +- .../modules/shop-box/ShopBox.module.css | 4 ++++ .../main-page/modules/shop-box/ShopBox.tsx | 17 ++++++++++++++++- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/common/constants/index.js b/src/common/constants/index.js index aa92f57..d0aee68 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 ecbda5a..fd0deba 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 b5c6571..0b5b92c 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 347f556..e0ec993 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> -- GitLab