From 803ab6ffa1d81509e7907fd70d1f22de06815293 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Mon, 22 Jan 2024 16:56:03 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95,=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B3=B5=ED=86=B5=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponMain/index.tsx | 2 + src/components/modal/index.tsx | 117 ++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 src/components/modal/index.tsx diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index f5f71575..a6f25535 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -8,6 +8,7 @@ import { CouponWait } from '../CouponItem'; import couponListState from '@recoil/atoms/couponListState'; +import Modal from '@components/modal'; const CouponMain = () => { const coupons = useRecoilValue(couponListState); @@ -15,6 +16,7 @@ const CouponMain = () => { return ( + {coupons?.content.map((coupon, index) => { switch (coupon.coupon_status) { case '노출 ON': diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx new file mode 100644 index 00000000..e4548333 --- /dev/null +++ b/src/components/modal/index.tsx @@ -0,0 +1,117 @@ +import styled from '@emotion/styled'; +import theme from '@styles/theme'; +import { useState } from 'react'; + +export interface ModalProps { + modalText: string; + subText: boolean; + onConfirmClick(): void; +} + +const Modal = ({ modalText, subText, onConfirmClick }: ModalProps) => { + const [isShowModal, setIsShowModal] = useState(true); + const [isShowSubText, setIsSubText] = useState(true); + + const handleModalClose = () => { + setIsShowModal(false); + }; + + const handleConfirmClick = () => { + onConfirmClick; + handleModalClose(); + }; + + return isShowModal ? ( + + + {modalText} + {isShowSubText && {subText}} + + 확인 + 취소 + + + + ) : null; +}; + +export default Modal; + +const ModalContainer = styled.div` + position: fixed; + z-index: 1; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background: var(--Back-Ground, rgba(66, 66, 66, 0.5)); +`; + +const ModalWrap = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-40%, -50%); + + width: 517px; + height: 228px; + + border-radius: 16px; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + background: var(--Main-Color-White, #fff); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +`; + +const ModalText = styled.div` + margin-top: 69px; + + color: #404446; + font-size: 15px; + font-weight: 500; + line-height: 22px; /* 146.667% */ +`; + +const ModalSubText = styled.div` + color: #da1e28; + font-size: 15px; + font-weight: 700; + line-height: 22px; +`; + +const ButtonWrap = styled.div` + display: flex; + gap: 16px; + + margin-top: 38px; + margin-bottom: 33px; +`; + +const ConfirmButton = styled.button` + width: 158px; + height: 44px; + + border-radius: 12px; + border: none; + + color: ${theme.colors.white}; + background: #1a2849; + cursor: pointer; +`; +const CancelButton = styled.button` + width: 158px; + height: 44px; + + border-radius: 12px; + border: none; + + color: ${theme.colors.white}; + background: #b1b1b1; + cursor: pointer; +`; From 23af3b842f96b3db78a4ac13c533cccfaff61cd3 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Mon, 22 Jan 2024 17:02:56 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20api=20url=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 9 ++++++--- src/components/CouponList/CouponMain/index.tsx | 2 -- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 0cb1ee03..b2697f6b 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -13,9 +13,12 @@ const getCouponList = async ( status, title }; - const response = await instance.get(`/v1/coupons/${accommodationId}`, { - params - }); + const response = await instance.get( + `/v1/accommodations/${accommodationId}/coupons`, + { + params + } + ); return response.data; }; diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index a6f25535..f5f71575 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -8,7 +8,6 @@ import { CouponWait } from '../CouponItem'; import couponListState from '@recoil/atoms/couponListState'; -import Modal from '@components/modal'; const CouponMain = () => { const coupons = useRecoilValue(couponListState); @@ -16,7 +15,6 @@ const CouponMain = () => { return ( - {coupons?.content.map((coupon, index) => { switch (coupon.coupon_status) { case '노출 ON': From 8c094125009dc1092b9db7adf563d93edce23c77 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Mon, 22 Jan 2024 17:11:23 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20setIsShowSubText=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=98=88=EC=A0=95=20(=EB=B9=8C=EB=93=9C=EC=8B=9C?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=EB=A1=9C=20=EC=A7=80=EC=9B=8C=EB=91=A0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index e4548333..75dcd309 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -10,7 +10,7 @@ export interface ModalProps { const Modal = ({ modalText, subText, onConfirmClick }: ModalProps) => { const [isShowModal, setIsShowModal] = useState(true); - const [isShowSubText, setIsSubText] = useState(true); + const [isShowSubText] = useState(true); const handleModalClose = () => { setIsShowModal(false);