From 9c2c7e233424b4a0fa055031a7e59884a6dae0fd Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Tue, 23 Jan 2024 23:56:40 +0900 Subject: [PATCH 01/28] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EB=AF=B8=EB=94=94=EC=96=B4=EC=BF=BC=EB=A6=AC=20nav=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 5 +- .../CouponList/CouponBanner/index.tsx | 4 ++ .../CouponList/CouponHeader/index.tsx | 4 ++ .../CouponList/CouponMain/index.tsx | 17 +++--- src/components/CouponList/CouponNav/index.tsx | 56 ++++++++++++++++++- src/hooks/queries/useCouponList.ts | 9 ++- src/types/couponList.ts | 6 ++ 7 files changed, 85 insertions(+), 16 deletions(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 1629e85a..754921c0 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -11,7 +11,8 @@ export const getCouponList = async ( accommodationId: number, date?: string, status?: string, - title?: string + title?: string, + page?: number ): Promise => { const params = { date, @@ -19,7 +20,7 @@ export const getCouponList = async ( title }; const response = await instance.get( - `/v1/accommodations/${accommodationId}/coupons`, + `/v1/accommodations/${accommodationId}/coupons?page=${page}`, { params } diff --git a/src/components/CouponList/CouponBanner/index.tsx b/src/components/CouponList/CouponBanner/index.tsx index b4e5ed1f..5dbf2ff7 100644 --- a/src/components/CouponList/CouponBanner/index.tsx +++ b/src/components/CouponList/CouponBanner/index.tsx @@ -34,6 +34,10 @@ export default CouponBanner; const BannerContainer = styled.div` margin: 20px 50px; + + @media (max-width: 900px) { + display: none; + } `; const TabBanner = styled.div` diff --git a/src/components/CouponList/CouponHeader/index.tsx b/src/components/CouponList/CouponHeader/index.tsx index 4fd530b4..b3bf00ab 100644 --- a/src/components/CouponList/CouponHeader/index.tsx +++ b/src/components/CouponList/CouponHeader/index.tsx @@ -34,6 +34,10 @@ const CouponHeaderContainer = styled.div` display: flex; justify-content: space-between; align-items: center; + + @media (max-width: 900px) { + display: none; + } `; const CouponHeaderWrapper = styled.div` diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index de9308ad..382ca5da 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -12,16 +12,6 @@ import couponListState from '@recoil/atoms/couponListState'; const CouponMain = () => { const coupons = useRecoilValue(couponListState); - // // 최근 등록일 기준으로 나열 - // const sortedCoupons = coupons?.content - // ? [...coupons.content].sort((a, b) => { - // const dateA = new Date(a.created_date).getTime(); - // const dateB = new Date(b.created_date).getTime(); - // return dateB - dateA; - // }) - // : []; - // console.log('recoil로 관리되는 쿠폰 리스트 ', coupons); - return ( {coupons?.content?.map(coupon => { @@ -69,4 +59,11 @@ const MainContainer = styled.div` display: flex; flex-flow: row wrap; gap: 36px; + + @media (max-width: 900px) { + margin: 0 5px; + display: flex; + justify-content: center; + align-items: center; + } `; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 930f522c..ab21732a 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import theme from '@styles/theme'; @@ -19,6 +19,8 @@ const CouponNav = () => { const headerAccommodation = useRecoilValue(headerAccommodationState); const setGlobalCoupons = useSetRecoilState(couponListState); const [searchAPI, setSearchAPI] = useState(''); + // const [page, setPage] = useState(1); + // const loadingRef = useRef(null); const handleDateClick = (period: string) => { setResisterDateClick(period); @@ -148,6 +150,10 @@ export default CouponNav; const TabContainer = styled.div` margin: 14px 50px; + + @media (max-width: 780px) { + margin: 14px 10px; + } `; const TabNavContainer = styled.div` @@ -158,6 +164,13 @@ const TabNavContainer = styled.div` flex-wrap: wrap; border-bottom: 1px solid #dde1e6; + + @media (max-width: 780px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } `; const TabWrap = styled.div` @@ -175,12 +188,20 @@ const TapItemWrapper = styled.div` align-items: center; cursor: pointer; + + @media (max-width: 780px) { + margin-right: 1px; + } `; const TabName = styled.div` font-size: 20px; font-weight: 700; color: #404446; + + @media (max-width: 780px) { + font-size: 11px; + } `; const TabCount = styled.div` @@ -200,6 +221,14 @@ const TabCount = styled.div` color: ${props => (props.$categoryTab ? theme.colors.white : '#404040')}; background: ${props => (props.$categoryTab ? '#404446' : '#F2F4F5')}; + + @media (max-width: 780px) { + font-size: 13px; + width: 41.019px; + height: 23.439px; + + margin: 0px 4px; + } `; const SearchWrap = styled.form` @@ -221,6 +250,16 @@ const SearchInput = styled.input` background: #f3f3f3; color: #646464; font-size: 14px; + + @media (max-width: 780px) { + width: 248px; + height: 37.123px; + + margin: 0px 13px 5px 0px; + padding-left: 33px; + + font-size: 11px; + } `; const SearchImg = styled.img` @@ -228,6 +267,13 @@ const SearchImg = styled.img` margin-top: 7px; margin-left: 20px; + + @media (max-width: 780px) { + margin-top: 10px; + margin-left: 10px; + width: 18px; + height: 18px; + } `; const SearchButton = styled.button` @@ -244,6 +290,10 @@ const SearchButton = styled.button` color: ${theme.colors.white}; background-color: #1a2849; cursor: pointer; + + @media (max-width: 780px) { + font-size: 14px; + } `; const TabBottomContainer = styled.div` @@ -285,6 +335,10 @@ const CouponDescription = styled.div` const ResisterPeriodWrap = styled.div` display: flex; align-items: center; + + @media (max-width: 1200px) { + display: none; + } `; const ResisterPeriodTitle = styled.div` diff --git a/src/hooks/queries/useCouponList.ts b/src/hooks/queries/useCouponList.ts index f2394b7f..2c6ea66b 100644 --- a/src/hooks/queries/useCouponList.ts +++ b/src/hooks/queries/useCouponList.ts @@ -4,11 +4,13 @@ import { CouponToggleCredential, CouponUpdateCredential } from '@/types/couponList'; + import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; + import { couponDeleteApi, couponToggleApi, @@ -21,11 +23,12 @@ export const useGetCouponList = ( accommodationId: number, date?: string, status?: string, - title?: string + title?: string, + page?: number ) => useSuspenseQuery({ - queryKey: ['CouponList', accommodationId, status, date, title], - queryFn: () => getCouponList(accommodationId, date, status, title) + queryKey: ['CouponList', accommodationId, status, date, title, page], + queryFn: () => getCouponList(accommodationId, date, status, title, page) }); // 쿠폰 수정 diff --git a/src/types/couponList.ts b/src/types/couponList.ts index 72d2a864..eb0588ad 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -37,6 +37,8 @@ export interface CouponInformationResponse { coupon_concat_title: string; discount_type: string; discount_value: number; + discount_flat_rate: number | null; + maximum_discount_price: number | null; customer_type: string; coupon_room_type: string; minimum_reservation_price: number; @@ -56,12 +58,15 @@ export interface CouponListProps { couponInfo: CouponInformationResponse; } +// 쿠폰 수정 export interface CouponUpdateCredential { coupon_number: string | undefined; accommodation_id: number; customer_type: string; discount_type: string; discount_value: number; + discount_flat_rate: number | null; + maximum_discount_price: number | null; coupon_room_type: string; register_all_room: false; register_rooms: string[]; @@ -71,6 +76,7 @@ export interface CouponUpdateCredential { exposure_end_date: string; } +// 쿠폰 삭제 export interface CouponDeleteCredential { coupon_number: string | undefined; } From e52bb79c1453e511719b5ef40495f46bfafca332 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 05:05:22 +0900 Subject: [PATCH 02/28] =?UTF-8?q?feat:=20=EC=BF=A0=ED=8F=B0=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 5 +- .../CouponItem/CouponExpired/index.tsx | 2 +- .../CouponItem/CouponExpose/index.tsx | 2 +- .../CouponItem/CouponStop/index.tsx | 2 +- .../CouponItem/CouponWait/index.tsx | 2 +- .../CouponList/CouponMain/index.tsx | 73 ++++++++++++++++++- src/components/CouponList/CouponNav/index.tsx | 62 +++++++++++++--- src/hooks/queries/useCouponList.ts | 7 +- src/pages/CouponList/index.tsx | 12 ++- src/types/couponList.ts | 3 +- 10 files changed, 144 insertions(+), 26 deletions(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 754921c0..1629e85a 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -11,8 +11,7 @@ export const getCouponList = async ( accommodationId: number, date?: string, status?: string, - title?: string, - page?: number + title?: string ): Promise => { const params = { date, @@ -20,7 +19,7 @@ export const getCouponList = async ( title }; const response = await instance.get( - `/v1/accommodations/${accommodationId}/coupons?page=${page}`, + `/v1/accommodations/${accommodationId}/coupons`, { params } diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 4a7e9ee1..9ec0e700 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -64,7 +64,7 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponInfo.coupon_room_types[0]}, {CouponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 30c73a95..29abde86 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -83,7 +83,7 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponInfo.coupon_room_types[0]}, {CouponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index de09f238..1352921d 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -78,7 +78,7 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponInfo.coupon_room_types[0]}, {CouponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index 95dcecea..7322b264 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -90,7 +90,7 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponInfo.coupon_room_types[0]}, {CouponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index 382ca5da..8d75c2ed 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -8,12 +8,22 @@ import { CouponWait } from '../CouponItem'; import couponListState from '@recoil/atoms/couponListState'; +import theme from '@styles/theme'; const CouponMain = () => { const coupons = useRecoilValue(couponListState); + console.log(coupons); return ( + + {} + {coupons?.content.length}개 + + 모든 쿠폰은 다운로드 후 14일까지 사용 가능하며, 등록 후 1년이 경과한 + 쿠폰은 조회되지 않습니다. + + {coupons?.content?.map(coupon => { switch (coupon.coupon_status) { case '노출 ON': @@ -61,9 +71,70 @@ const MainContainer = styled.div` gap: 36px; @media (max-width: 900px) { - margin: 0 5px; + margin: 20px 20px 0px 20px; + border-radius: 10px; + padding-bottom:30px; display: flex; justify-content: center; + gap: 27px; align-items: center; + background-color: ${theme.colors.white}; +`; + +const TabBottomWrap = styled.div` + display: none; + + @media (max-width: 630px) { + margin: 20px 28px -5px 28px; + display: flex; + align-items: center; + } +`; + +const SecondTabName = styled.div` + margin-right: 5px; + + color: #a4a4a4; + font-size: 14px; + font-weight: 700; + + @media (max-width: 630px) { + font-size: 11px; + font-weight: 700; + white-space: nowrap; + } +`; + +const SecondTabCount = styled.div` + margin-right: 19px; + + color: #1a2849; + font-size: 14px; + font-weight: 700; + + @media (max-width: 630px) { + leading-trim: both; + + text-edge: cap; + font-family: 'Noto Sans KR'; + font-size: 11px; + font-style: normal; + font-weight: 700; + white-space: nowrap; + } +`; + +const CouponDescription = styled.div` + color: #a4a4a4; + font-size: 14px; + font-style: normal; + font-weight: 700; + + @media (max-width: 630px) { + font-size: 10.5px; + font-style: normal; + font-weight: 400; + line-height: 14px; + width: 220px; } `; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index ab21732a..702abf7e 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -151,8 +151,13 @@ export default CouponNav; const TabContainer = styled.div` margin: 14px 50px; - @media (max-width: 780px) { - margin: 14px 10px; + @media (max-width: 630px) { + position: sticky; + top: 0; + z-index: 20; + margin: 0px; + background-color: ${theme.colors.white}; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2); } `; @@ -165,11 +170,12 @@ const TabNavContainer = styled.div` border-bottom: 1px solid #dde1e6; - @media (max-width: 780px) { + @media (max-width: 630px) { display: flex; flex-direction: column; justify-content: center; align-items: center; + border-bottom: none; } `; @@ -177,7 +183,6 @@ const TabWrap = styled.div` margin-bottom: 19px; display: flex; - flex-wrap: wrap; `; const TapItemWrapper = styled.div` @@ -189,7 +194,7 @@ const TapItemWrapper = styled.div` cursor: pointer; - @media (max-width: 780px) { + @media (max-width: 630px) { margin-right: 1px; } `; @@ -199,8 +204,9 @@ const TabName = styled.div` font-weight: 700; color: #404446; - @media (max-width: 780px) { + @media (max-width: 630px) { font-size: 11px; + white-space: nowrap; } `; @@ -222,7 +228,7 @@ const TabCount = styled.div` color: ${props => (props.$categoryTab ? theme.colors.white : '#404040')}; background: ${props => (props.$categoryTab ? '#404446' : '#F2F4F5')}; - @media (max-width: 780px) { + @media (max-width: 630px) { font-size: 13px; width: 41.019px; height: 23.439px; @@ -251,11 +257,11 @@ const SearchInput = styled.input` color: #646464; font-size: 14px; - @media (max-width: 780px) { + @media (max-width: 630px) { width: 248px; height: 37.123px; - margin: 0px 13px 5px 0px; + margin: 0px 13px 10px 0px; padding-left: 33px; font-size: 11px; @@ -268,7 +274,7 @@ const SearchImg = styled.img` margin-top: 7px; margin-left: 20px; - @media (max-width: 780px) { + @media (max-width: 630px) { margin-top: 10px; margin-left: 10px; width: 18px; @@ -291,7 +297,8 @@ const SearchButton = styled.button` background-color: #1a2849; cursor: pointer; - @media (max-width: 780px) { + @media (max-width: 630px) { + width: 70px; font-size: 14px; } `; @@ -302,11 +309,19 @@ const TabBottomContainer = styled.div` display: flex; align-items: center; justify-content: space-between; + + @media (max-width: 630px) { + display: none; + } `; const TabBottomWrap = styled.div` display: flex; align-items: center; + + @media (max-width: 630px) { + margin: 0px 28px; + } `; const SecondTabName = styled.div` @@ -315,6 +330,12 @@ const SecondTabName = styled.div` color: #a4a4a4; font-size: 14px; font-weight: 700; + + @media (max-width: 630px) { + font-size: 11px; + font-weight: 700; + white-space: nowrap; + } `; const SecondTabCount = styled.div` @@ -323,6 +344,17 @@ const SecondTabCount = styled.div` color: #1a2849; font-size: 14px; font-weight: 700; + + @media (max-width: 630px) { + leading-trim: both; + + text-edge: cap; + font-family: 'Noto Sans KR'; + font-size: 11px; + font-style: normal; + font-weight: 700; + white-space: nowrap; + } `; const CouponDescription = styled.div` @@ -330,6 +362,14 @@ const CouponDescription = styled.div` font-size: 14px; font-style: normal; font-weight: 700; + + @media (max-width: 630px) { + font-size: 10.5px; + font-style: normal; + font-weight: 400; + line-height: 14px; + width: 220px; + } `; const ResisterPeriodWrap = styled.div` diff --git a/src/hooks/queries/useCouponList.ts b/src/hooks/queries/useCouponList.ts index 2c6ea66b..623f4d2d 100644 --- a/src/hooks/queries/useCouponList.ts +++ b/src/hooks/queries/useCouponList.ts @@ -23,12 +23,11 @@ export const useGetCouponList = ( accommodationId: number, date?: string, status?: string, - title?: string, - page?: number + title?: string ) => useSuspenseQuery({ - queryKey: ['CouponList', accommodationId, status, date, title, page], - queryFn: () => getCouponList(accommodationId, date, status, title, page) + queryKey: ['CouponList', accommodationId, status, date, title], + queryFn: () => getCouponList(accommodationId, date, status, title) }); // 쿠폰 수정 diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index 6d8bcaee..72b4229c 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -4,16 +4,24 @@ import { CouponMain, CouponBanner } from '@components/CouponList'; +import styled from '@emotion/styled'; const CouponList = () => { return ( -
+ -
+ ); }; export default CouponList; + +const CouponListContainer = styled.div` + @media (max-width: 630px) { + min-height: 100vh; + background: #f2f3f5; + } +`; diff --git a/src/types/couponList.ts b/src/types/couponList.ts index eb0588ad..d16f81bd 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -40,7 +40,8 @@ export interface CouponInformationResponse { discount_flat_rate: number | null; maximum_discount_price: number | null; customer_type: string; - coupon_room_type: string; + coupon_room_types: string[]; + coupon_room_stay_more: boolean; minimum_reservation_price: number; coupon_use_condition_days: string; exposure_start_date: string; From a8439ed18f0e7355364bae0810f8e50ba0532672 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 17:19:08 +0900 Subject: [PATCH 03/28] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=93=B1=EB=A1=9D=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-catchphrase-rocket.svg | 2 +- .../icons/ic-couponlist-mobileregister.svg | 33 +++++++++++++ src/assets/icons/ic-couponlist-speaker.svg | 2 +- .../CouponList/CouponBanner/index.tsx | 4 +- .../CouponList/CouponHeader/index.tsx | 4 +- .../CouponList/CouponMain/index.tsx | 48 ++++++++++++++++--- src/components/CouponList/CouponNav/index.tsx | 28 +++++------ src/pages/CouponList/index.tsx | 2 +- 8 files changed, 96 insertions(+), 27 deletions(-) create mode 100644 src/assets/icons/ic-couponlist-mobileregister.svg diff --git a/src/assets/icons/ic-catchphrase-rocket.svg b/src/assets/icons/ic-catchphrase-rocket.svg index 7a6d56a4..acc99cfe 100644 --- a/src/assets/icons/ic-catchphrase-rocket.svg +++ b/src/assets/icons/ic-catchphrase-rocket.svg @@ -4,6 +4,6 @@ - + diff --git a/src/assets/icons/ic-couponlist-mobileregister.svg b/src/assets/icons/ic-couponlist-mobileregister.svg new file mode 100644 index 00000000..98a7ca4c --- /dev/null +++ b/src/assets/icons/ic-couponlist-mobileregister.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/ic-couponlist-speaker.svg b/src/assets/icons/ic-couponlist-speaker.svg index b19656ca..57a3909c 100644 --- a/src/assets/icons/ic-couponlist-speaker.svg +++ b/src/assets/icons/ic-couponlist-speaker.svg @@ -4,6 +4,6 @@ - + diff --git a/src/components/CouponList/CouponBanner/index.tsx b/src/components/CouponList/CouponBanner/index.tsx index 5dbf2ff7..fb418879 100644 --- a/src/components/CouponList/CouponBanner/index.tsx +++ b/src/components/CouponList/CouponBanner/index.tsx @@ -33,9 +33,9 @@ const CouponBanner = () => { export default CouponBanner; const BannerContainer = styled.div` - margin: 20px 50px; + margin: 20px 25px; - @media (max-width: 900px) { + @media (max-width: 656px) { display: none; } `; diff --git a/src/components/CouponList/CouponHeader/index.tsx b/src/components/CouponList/CouponHeader/index.tsx index b3bf00ab..2df1af54 100644 --- a/src/components/CouponList/CouponHeader/index.tsx +++ b/src/components/CouponList/CouponHeader/index.tsx @@ -28,14 +28,14 @@ const CouponHeader = () => { export default CouponHeader; const CouponHeaderContainer = styled.div` - margin: 56px 50px 0px; + margin: 36px 25px 0px; border-bottom: 1px solid #dde1e6; display: flex; justify-content: space-between; align-items: center; - @media (max-width: 900px) { + @media (max-width: 656px) { display: none; } `; diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index 8d75c2ed..379f1449 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { useNavigate } from 'react-router-dom'; import { CouponExpired, @@ -9,11 +10,16 @@ import { } from '../CouponItem'; import couponListState from '@recoil/atoms/couponListState'; import theme from '@styles/theme'; +import mobileRegister from '@assets/icons/ic-couponlist-mobileregister.svg'; const CouponMain = () => { + const navigate = useNavigate(); const coupons = useRecoilValue(couponListState); console.log(coupons); + const handleRegisterClick = () => {}; + navigate('/coupons/register'); + return ( @@ -56,6 +62,13 @@ const CouponMain = () => { ); } })} + + 모바일 등록 버튼 이미지 +

쿠폰 등록하기

+ ); }; @@ -63,12 +76,12 @@ const CouponMain = () => { export default CouponMain; const MainContainer = styled.div` - margin-left: 50px; + margin-left: 25px; margin-bottom: 30px; display: flex; flex-flow: row wrap; - gap: 36px; + gap: 25px; @media (max-width: 900px) { margin: 20px 20px 0px 20px; @@ -84,7 +97,7 @@ const MainContainer = styled.div` const TabBottomWrap = styled.div` display: none; - @media (max-width: 630px) { + @media (max-width: 656px) { margin: 20px 28px -5px 28px; display: flex; align-items: center; @@ -98,7 +111,7 @@ const SecondTabName = styled.div` font-size: 14px; font-weight: 700; - @media (max-width: 630px) { + @media (max-width: 656px) { font-size: 11px; font-weight: 700; white-space: nowrap; @@ -112,7 +125,7 @@ const SecondTabCount = styled.div` font-size: 14px; font-weight: 700; - @media (max-width: 630px) { + @media (max-width: 656px) { leading-trim: both; text-edge: cap; @@ -130,7 +143,7 @@ const CouponDescription = styled.div` font-style: normal; font-weight: 700; - @media (max-width: 630px) { + @media (max-width: 656px) { font-size: 10.5px; font-style: normal; font-weight: 400; @@ -138,3 +151,26 @@ const CouponDescription = styled.div` width: 220px; } `; + +const MobileRegister = styled.div` + display: none; + + @media (max-width: 656px) { + position: absolute; + bottom: 0; + left: 0; + margin-left: 15px; + margin-bottom: 15px; + display: flex; + cursor: pointer; + + p { + position: absolute; + color: ${theme.colors.white}; + font-size: 14px; + font-weight: 600; + margin-left: 68px; + margin-top: 23px; + } + } +`; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 702abf7e..f33769ac 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -149,9 +149,9 @@ const CouponNav = () => { export default CouponNav; const TabContainer = styled.div` - margin: 14px 50px; + margin: 14px 25px; - @media (max-width: 630px) { + @media (max-width: 656px) { position: sticky; top: 0; z-index: 20; @@ -170,7 +170,7 @@ const TabNavContainer = styled.div` border-bottom: 1px solid #dde1e6; - @media (max-width: 630px) { + @media (max-width: 656px) { display: flex; flex-direction: column; justify-content: center; @@ -194,7 +194,7 @@ const TapItemWrapper = styled.div` cursor: pointer; - @media (max-width: 630px) { + @media (max-width: 656px) { margin-right: 1px; } `; @@ -204,7 +204,7 @@ const TabName = styled.div` font-weight: 700; color: #404446; - @media (max-width: 630px) { + @media (max-width: 656px) { font-size: 11px; white-space: nowrap; } @@ -228,7 +228,7 @@ const TabCount = styled.div` color: ${props => (props.$categoryTab ? theme.colors.white : '#404040')}; background: ${props => (props.$categoryTab ? '#404446' : '#F2F4F5')}; - @media (max-width: 630px) { + @media (max-width: 656px) { font-size: 13px; width: 41.019px; height: 23.439px; @@ -257,7 +257,7 @@ const SearchInput = styled.input` color: #646464; font-size: 14px; - @media (max-width: 630px) { + @media (max-width: 656px) { width: 248px; height: 37.123px; @@ -274,7 +274,7 @@ const SearchImg = styled.img` margin-top: 7px; margin-left: 20px; - @media (max-width: 630px) { + @media (max-width: 656px) { margin-top: 10px; margin-left: 10px; width: 18px; @@ -297,7 +297,7 @@ const SearchButton = styled.button` background-color: #1a2849; cursor: pointer; - @media (max-width: 630px) { + @media (max-width: 656px) { width: 70px; font-size: 14px; } @@ -310,7 +310,7 @@ const TabBottomContainer = styled.div` align-items: center; justify-content: space-between; - @media (max-width: 630px) { + @media (max-width: 656px) { display: none; } `; @@ -319,7 +319,7 @@ const TabBottomWrap = styled.div` display: flex; align-items: center; - @media (max-width: 630px) { + @media (max-width: 656px) { margin: 0px 28px; } `; @@ -331,7 +331,7 @@ const SecondTabName = styled.div` font-size: 14px; font-weight: 700; - @media (max-width: 630px) { + @media (max-width: 656px) { font-size: 11px; font-weight: 700; white-space: nowrap; @@ -345,7 +345,7 @@ const SecondTabCount = styled.div` font-size: 14px; font-weight: 700; - @media (max-width: 630px) { + @media (max-width: 656px) { leading-trim: both; text-edge: cap; @@ -363,7 +363,7 @@ const CouponDescription = styled.div` font-style: normal; font-weight: 700; - @media (max-width: 630px) { + @media (max-width: 656px) { font-size: 10.5px; font-style: normal; font-weight: 400; diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index 72b4229c..bb61585b 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -20,7 +20,7 @@ const CouponList = () => { export default CouponList; const CouponListContainer = styled.div` - @media (max-width: 630px) { + @media (max-width: 656px) { min-height: 100vh; background: #f2f3f5; } From 61adecb71318e03824b1a0463af2a9712b9d6a50 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 17:23:56 +0900 Subject: [PATCH 04/28] =?UTF-8?q?fix:=20top3=20api=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponBanner/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CouponList/CouponBanner/index.tsx b/src/components/CouponList/CouponBanner/index.tsx index fb418879..76e71e3b 100644 --- a/src/components/CouponList/CouponBanner/index.tsx +++ b/src/components/CouponList/CouponBanner/index.tsx @@ -4,12 +4,12 @@ import theme from '@styles/theme'; import bannerIcon from '@assets/icons/ic-couponlist-speaker.svg'; import { useRecoilValue } from 'recoil'; import { headerAccommodationState } from '@recoil/index'; -// import { useGetCouponRanking } from '@hooks/queries/useGetCouponRanking'; +import { useGetCouponRanking } from '@hooks/index'; const CouponBanner = () => { const headerAccommodation = useRecoilValue(headerAccommodationState); const sigunguData = headerAccommodation.sigungu; - // const { data } = useGetCouponRanking(headerAccommodation.id); + const { data } = useGetCouponRanking(headerAccommodation.id); return ( @@ -22,7 +22,7 @@ const CouponBanner = () => { 이번 달 우리 지역 인기 쿠폰 {sigunguData}에서 가장 많이 사용된 쿠폰은? - {/* {data.first_coupon_title}쿠폰이에요! */} + {data.first_coupon_title}쿠폰이에요! From 7da18db3f935d04994ddc805f3de08cbff0fa0e1 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 17:30:23 +0900 Subject: [PATCH 05/28] =?UTF-8?q?feat:=20Intl.NumberFormat=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponItem/CouponExpired/index.tsx | 5 ++++- src/components/CouponList/CouponItem/CouponExpose/index.tsx | 5 ++++- src/components/CouponList/CouponItem/CouponStop/index.tsx | 5 ++++- src/components/CouponList/CouponItem/CouponWait/index.tsx | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 9ec0e700..3ac0846b 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -58,7 +58,10 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { 가격 - {couponInfo.minimum_reservation_price}원 이상 + {new Intl.NumberFormat().format( + couponInfo.minimum_reservation_price as number + )} + 원 이상 diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 29abde86..f6d8ad18 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -77,7 +77,10 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { 가격 - {couponInfo.minimum_reservation_price}원 이상 + {new Intl.NumberFormat().format( + couponInfo.minimum_reservation_price as number + )} + 원 이상 diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 1352921d..df7a1411 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -72,7 +72,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { 가격 - {couponInfo.minimum_reservation_price}원 이상 + {new Intl.NumberFormat().format( + couponInfo.minimum_reservation_price as number + )} + 원 이상 diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index 7322b264..a93ca183 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -84,7 +84,10 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { 가격 - {couponInfo.minimum_reservation_price}원 이상 + {new Intl.NumberFormat().format( + couponInfo.minimum_reservation_price as number + )} + 원 이상 From 368217ab9526c281f22dda317a70b377eb69e586 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 22:37:37 +0900 Subject: [PATCH 06/28] =?UTF-8?q?fix:=20register=20navigate=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponHeader/index.tsx | 4 ++++ src/components/CouponList/CouponMain/index.tsx | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/CouponList/CouponHeader/index.tsx b/src/components/CouponList/CouponHeader/index.tsx index 2df1af54..90ff492b 100644 --- a/src/components/CouponList/CouponHeader/index.tsx +++ b/src/components/CouponList/CouponHeader/index.tsx @@ -43,6 +43,10 @@ const CouponHeaderContainer = styled.div` const CouponHeaderWrapper = styled.div` display: flex; align-items: center; + + @media (max-width: 656px) { + display: flex; + } `; const CouponTitle = styled.div` diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index 379f1449..cfde0f32 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -17,8 +17,9 @@ const CouponMain = () => { const coupons = useRecoilValue(couponListState); console.log(coupons); - const handleRegisterClick = () => {}; - navigate('/coupons/register'); + const handleRegisterClick = () => { + navigate('/coupons/register'); + }; return ( From 0e53c3f1667183ea8c59362d9d511b28117235bc Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 04:00:58 +0900 Subject: [PATCH 07/28] =?UTF-8?q?feat:=20=ED=83=AD=20=EC=A0=84=EC=97=AD?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20recoil=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponMain/index.tsx | 4 +++- src/components/CouponList/CouponNav/index.tsx | 13 ++++++++++--- src/recoil/atoms/categoryTabState.ts | 12 ++++++++++++ 3 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 src/recoil/atoms/categoryTabState.ts diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index cfde0f32..8e6ea757 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -11,10 +11,12 @@ import { import couponListState from '@recoil/atoms/couponListState'; import theme from '@styles/theme'; import mobileRegister from '@assets/icons/ic-couponlist-mobileregister.svg'; +import categoryTabState from '@recoil/atoms/categoryTabState'; const CouponMain = () => { const navigate = useNavigate(); const coupons = useRecoilValue(couponListState); + const categoryTab = useRecoilValue(categoryTabState); console.log(coupons); const handleRegisterClick = () => { @@ -24,7 +26,7 @@ const CouponMain = () => { return ( - {} + {categoryTab.categoryTab} {coupons?.content.length}개 모든 쿠폰은 다운로드 후 14일까지 사용 가능하며, 등록 후 1년이 경과한 diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index f33769ac..a4189b20 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -11,6 +11,7 @@ import { ResisterDateStyleProps } from '@/types/couponList'; import { useGetCouponList } from '@hooks/queries/useCouponList'; +import categoryTabState from '@recoil/atoms/categoryTabState'; const CouponNav = () => { const [resisterDateClick, setResisterDateClick] = useState('1년'); @@ -18,6 +19,7 @@ const CouponNav = () => { const [searchText, setSearchText] = useState(''); const headerAccommodation = useRecoilValue(headerAccommodationState); const setGlobalCoupons = useSetRecoilState(couponListState); + const setGlobalCategoryTab = useSetRecoilState(categoryTabState); const [searchAPI, setSearchAPI] = useState(''); // const [page, setPage] = useState(1); // const loadingRef = useRef(null); @@ -29,6 +31,7 @@ const CouponNav = () => { const handleCategoryTab = (tab: string) => { setCategoryTab(tab); + setGlobalCategoryTab({ categoryTab: tab }); setSearchAPI(''); }; @@ -155,6 +158,7 @@ const TabContainer = styled.div` position: sticky; top: 0; z-index: 20; + margin: 0px; background-color: ${theme.colors.white}; box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2); @@ -171,11 +175,12 @@ const TabNavContainer = styled.div` border-bottom: 1px solid #dde1e6; @media (max-width: 656px) { + border-bottom: none; + display: flex; flex-direction: column; justify-content: center; align-items: center; - border-bottom: none; } `; @@ -205,8 +210,9 @@ const TabName = styled.div` color: #404446; @media (max-width: 656px) { - font-size: 11px; white-space: nowrap; + + font-size: 11px; } `; @@ -229,11 +235,12 @@ const TabCount = styled.div` background: ${props => (props.$categoryTab ? '#404446' : '#F2F4F5')}; @media (max-width: 656px) { - font-size: 13px; width: 41.019px; height: 23.439px; margin: 0px 4px; + + font-size: 13px; } `; diff --git a/src/recoil/atoms/categoryTabState.ts b/src/recoil/atoms/categoryTabState.ts new file mode 100644 index 00000000..22096c7e --- /dev/null +++ b/src/recoil/atoms/categoryTabState.ts @@ -0,0 +1,12 @@ +import { atom } from 'recoil'; + +export interface CategoryTab { + categoryTab: string; +} + +const categoryTabState = atom({ + key: 'categoryTabState', + default: { categoryTab: '전체' } +}); + +export default categoryTabState; From fe1de68fe39506fdf3f4cd17749dd59b668aaf97 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 05:08:52 +0900 Subject: [PATCH 08/28] =?UTF-8?q?fix:=20z-index=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 6 ++++-- .../CouponList/CouponItem/CouponExpired/index.tsx | 2 +- .../CouponList/CouponItem/CouponExpose/index.tsx | 2 +- src/components/CouponList/CouponItem/CouponWait/index.tsx | 2 +- src/components/CouponList/CouponNav/index.tsx | 4 +--- src/components/modal/index.tsx | 2 +- src/hooks/queries/useCouponList.ts | 7 ++++--- src/recoil/atoms/categoryTabState.ts | 4 +--- src/types/couponList.ts | 4 ++++ 9 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 1629e85a..64371048 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -11,12 +11,14 @@ export const getCouponList = async ( accommodationId: number, date?: string, status?: string, - title?: string + title?: string, + page?: number ): Promise => { const params = { date, status, - title + title, + page }; const response = await instance.get( `/v1/accommodations/${accommodationId}/coupons`, diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 3ac0846b..4f72c873 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -336,7 +336,7 @@ const RoomList = styled.div` position: absolute; top: 0; right: 0; - z-index: 1; + z-index: 50; width: 188px; height: 204px; diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index f6d8ad18..c73cb345 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -303,7 +303,7 @@ const RoomList = styled.div` position: absolute; top: 0; right: 0; - z-index: 1; + z-index: 50; width: 188px; height: 204px; diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index a93ca183..e9ede4bb 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -384,7 +384,7 @@ const RoomList = styled.div` position: absolute; top: 0; right: 0; - z-index: 1; + z-index: 50; width: 188px; height: 204px; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index a4189b20..ce69f021 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -21,8 +21,6 @@ const CouponNav = () => { const setGlobalCoupons = useSetRecoilState(couponListState); const setGlobalCategoryTab = useSetRecoilState(categoryTabState); const [searchAPI, setSearchAPI] = useState(''); - // const [page, setPage] = useState(1); - // const loadingRef = useRef(null); const handleDateClick = (period: string) => { setResisterDateClick(period); @@ -157,7 +155,7 @@ const TabContainer = styled.div` @media (max-width: 656px) { position: sticky; top: 0; - z-index: 20; + z-index: 50; margin: 0px; background-color: ${theme.colors.white}; diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index dd7717ad..d573cb81 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -42,7 +42,7 @@ export default Modal; const ModalContainer = styled.div` position: fixed; - z-index: 1; + z-index: 100; top: 0; left: 0; diff --git a/src/hooks/queries/useCouponList.ts b/src/hooks/queries/useCouponList.ts index 623f4d2d..2c6ea66b 100644 --- a/src/hooks/queries/useCouponList.ts +++ b/src/hooks/queries/useCouponList.ts @@ -23,11 +23,12 @@ export const useGetCouponList = ( accommodationId: number, date?: string, status?: string, - title?: string + title?: string, + page?: number ) => useSuspenseQuery({ - queryKey: ['CouponList', accommodationId, status, date, title], - queryFn: () => getCouponList(accommodationId, date, status, title) + queryKey: ['CouponList', accommodationId, status, date, title, page], + queryFn: () => getCouponList(accommodationId, date, status, title, page) }); // 쿠폰 수정 diff --git a/src/recoil/atoms/categoryTabState.ts b/src/recoil/atoms/categoryTabState.ts index 22096c7e..31737de0 100644 --- a/src/recoil/atoms/categoryTabState.ts +++ b/src/recoil/atoms/categoryTabState.ts @@ -1,8 +1,6 @@ import { atom } from 'recoil'; -export interface CategoryTab { - categoryTab: string; -} +import { CategoryTab } from '@/types/couponList'; const categoryTabState = atom({ key: 'categoryTabState', diff --git a/src/types/couponList.ts b/src/types/couponList.ts index d16f81bd..5578e802 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -88,6 +88,10 @@ export interface CouponToggleCredential { coupon_status: string; } +export interface CategoryTab { + categoryTab: string; +} + // HACK : 쿠폰 요청 타입 // export interface GetCouponListCredential { // accommodationId: number; From 809ef84e6bd051ec318c118c445294b0ba6a19d1 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 05:59:07 +0900 Subject: [PATCH 09/28] =?UTF-8?q?fix:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=ED=81=AC=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/index.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index d573cb81..52eea9eb 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -30,8 +30,8 @@ const Modal = ({ 삭제한 쿠폰은 복구할 수 없습니다. )} - 확인 취소 + 확인 @@ -49,7 +49,7 @@ const ModalContainer = styled.div` width: 100%; height: 100%; - background: var(--Back-Ground, rgba(66, 66, 66, 0.5)); + background: rgba(66, 66, 66, 0.5); `; const ModalWrap = styled.div` @@ -70,6 +70,13 @@ const ModalWrap = styled.div` background: var(--Main-Color-White, #fff); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + + @media (max-width: 900px) { + width: 336px; + height: 210px; + + transform: translate(-50%, -50%); + } `; const ModalText = styled.div` @@ -110,6 +117,11 @@ const ConfirmButton = styled.button` &:hover { background: #5f6980; } + + @media (max-width: 900px) { + width: 140px; + height: 40px; + } `; const CancelButton = styled.button` width: 158px; @@ -125,4 +137,9 @@ const CancelButton = styled.button` &:hover { background: #404446; } + + @media (max-width: 900px) { + width: 140px; + height: 40px; + } `; From b7e609dee5289dc489dbab1c8d93b7e7e6a06990 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 14:17:01 +0900 Subject: [PATCH 10/28] =?UTF-8?q?fix:=20=ED=86=A0=EA=B8=80=20api=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EC=8B=9C=EA=B0=84=20=EC=A7=80=EC=97=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 64371048..4ce762be 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -48,12 +48,25 @@ export const couponDeleteApi = async ( return response.data; }; -// 토클 on/off api +// // 토클 on/off api +// export const couponToggleApi = async (credential: CouponToggleCredential) => { +// const couponNumber = credential.coupon_number; +// const response = await instance.put( +// `/v1/coupons/${couponNumber}/expose`, +// credential +// ); +// return response.data; +// }; + export const couponToggleApi = async (credential: CouponToggleCredential) => { const couponNumber = credential.coupon_number; + + // 요청 전 1초 대기 + await new Promise(resolve => setTimeout(resolve, 150)); const response = await instance.put( `/v1/coupons/${couponNumber}/expose`, credential ); + return response.data; }; From 5f879bca283a7158629a50ffc8b8a10c26ad00e7 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 14:42:19 +0900 Subject: [PATCH 11/28] =?UTF-8?q?fix:=20=ED=86=A0=EA=B8=80=20setTimeout=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 4ce762be..17755f69 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -62,7 +62,7 @@ export const couponToggleApi = async (credential: CouponToggleCredential) => { const couponNumber = credential.coupon_number; // 요청 전 1초 대기 - await new Promise(resolve => setTimeout(resolve, 150)); + await new Promise(resolve => setTimeout(resolve, 500)); const response = await instance.put( `/v1/coupons/${couponNumber}/expose`, credential From b42a80a35688d27141118091c36cf7cbd08edeb2 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 17:05:49 +0900 Subject: [PATCH 12/28] =?UTF-8?q?fix:=20=EB=A3=B8=20=EA=B0=9D=EC=8B=A4=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20useRef=20=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponItem/CouponExpired/index.tsx | 7 +++++-- .../CouponList/CouponItem/CouponExpose/index.tsx | 7 +++++-- src/components/CouponList/CouponItem/CouponStop/index.tsx | 7 +++++-- src/components/CouponList/CouponItem/CouponWait/index.tsx | 7 +++++-- 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 4f72c873..60ffed78 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -79,7 +79,10 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { 전체 ) : ( <> - +
일부 객실
{ /> {isShowRoomList && ( - + 쿠폰 적용 객실 { 전체 ) : ( <> - +
일부 객실
{ /> {isShowRoomList && ( - + 쿠폰 적용 객실 { 전체 ) : ( <> - +
일부 객실
{ /> {isShowRoomList && ( - + 쿠폰 적용 객실 { 전체 ) : ( <> - +
일부 객실
{ /> {isShowRoomList && ( - + 쿠폰 적용 객실 Date: Thu, 25 Jan 2024 23:37:21 +0900 Subject: [PATCH 13/28] =?UTF-8?q?fix:=20=EC=BF=A0=ED=8F=B0=20=EC=A0=84?= =?UTF-8?q?=EC=97=AD=EC=83=81=ED=83=9C=EA=B4=80=EB=A6=AC=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 18 +++-- package.json | 2 + src/components/CouponList/CouponNav/index.tsx | 73 ++++++++++--------- src/pages/CouponList/index.tsx | 62 +++++++++++++++- 4 files changed, 112 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7720c097..87ad87de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "axios": "^1.6.5", "date-fns": "^2.0.0-alpha.27", "date-fns-tz": "^2.0.0", + "lodash": "^4.17.21", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.25.0", @@ -35,6 +36,7 @@ "@swc/jest": "^0.2.29", "@tanstack/eslint-plugin-query": "^5.17.7", "@types/jest": "^29.5.11", + "@types/lodash": "^4.14.202", "@types/react": "^18.2.43", "@types/react-datepicker": "^4.19.5", "@types/react-dom": "^18.2.17", @@ -2820,6 +2822,12 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==", + "dev": true + }, "node_modules/@types/node": { "version": "20.10.6", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz", @@ -6589,6 +6597,11 @@ "react": ">=16.13.1" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-hook-form": { "version": "7.49.3", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.3.tgz", @@ -6605,11 +6618,6 @@ "react": "^16.8.0 || ^17 || ^18" } }, - "node_modules/react-fast-compare": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 18b8e9e4..6b6d0ee5 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "axios": "^1.6.5", "date-fns": "^2.0.0-alpha.27", "date-fns-tz": "^2.0.0", + "lodash": "^4.17.21", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.25.0", @@ -38,6 +39,7 @@ "@swc/jest": "^0.2.29", "@tanstack/eslint-plugin-query": "^5.17.7", "@types/jest": "^29.5.11", + "@types/lodash": "^4.14.202", "@types/react": "^18.2.43", "@types/react-datepicker": "^4.19.5", "@types/react-dom": "^18.2.17", diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index ce69f021..7b5e7613 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -13,9 +13,33 @@ import { import { useGetCouponList } from '@hooks/queries/useCouponList'; import categoryTabState from '@recoil/atoms/categoryTabState'; -const CouponNav = () => { - const [resisterDateClick, setResisterDateClick] = useState('1년'); - const [categoryTab, setCategoryTab] = useState('전체'); +interface CouponNavProps { + all: number; + expiration: number; + exposure_off: number; + exposure_on: number; + length: number; + search: string; + onSearchChange: (value: string) => void; + registerDateClick: string; + onRegisterDateChange: (value: string) => void; + categoryTab: string; + onCategoryTabChange: (value: string) => void; +} + +const CouponNav = ({ + all, + expiration, + exposure_on, + exposure_off, + length, + search, + onSearchChange, + registerDateClick, + onRegisterDateChange, + categoryTab, + onCategoryTabChange +}: CouponNavProps) => { const [searchText, setSearchText] = useState(''); const headerAccommodation = useRecoilValue(headerAccommodationState); const setGlobalCoupons = useSetRecoilState(couponListState); @@ -23,18 +47,18 @@ const CouponNav = () => { const [searchAPI, setSearchAPI] = useState(''); const handleDateClick = (period: string) => { - setResisterDateClick(period); + onRegisterDateChange(period); setSearchAPI(''); }; const handleCategoryTab = (tab: string) => { - setCategoryTab(tab); + onCategoryTabChange(tab); setGlobalCategoryTab({ categoryTab: tab }); setSearchAPI(''); }; const handleSearchChange = (e: React.ChangeEvent) => { - setSearchText(e.target.value); + onSearchChange(e.target.value); }; const handleSearch = (e: React.FormEvent) => { @@ -43,49 +67,30 @@ const CouponNav = () => { setSearchText(''); }; - const { data: coupons } = useGetCouponList( - headerAccommodation.id, - resisterDateClick !== '1년' ? resisterDateClick : undefined, - categoryTab !== '전체' ? categoryTab : undefined, - searchAPI - ); - - useEffect(() => { - setGlobalCoupons(coupons); - }, [ - headerAccommodation.id, - resisterDateClick, - categoryTab, - searchAPI, - coupons - ]); - return ( handleCategoryTab('전체')}> 전체 - - {coupons.category.all} - + {all} handleCategoryTab('노출 ON')}> 노출 ON - {coupons?.category.exposure_on} + {exposure_on} handleCategoryTab('노출 OFF')}> 노출 OFF - {coupons?.category.exposure_off} + {exposure_off} handleCategoryTab('만료')}> 만료 - {coupons?.category.expiration} + {expiration} @@ -93,7 +98,7 @@ const CouponNav = () => { @@ -107,7 +112,7 @@ const CouponNav = () => { {categoryTab} - {coupons?.content.length}개 + {length}개 모든 쿠폰은 다운로드 후 14일까지 사용 가능하며, 등록 후 1년이 경과한 쿠폰은 조회되지 않습니다. @@ -116,7 +121,7 @@ const CouponNav = () => { 등록일 기준 최근 handleDateClick('1년')} > 1년 @@ -126,7 +131,7 @@ const CouponNav = () => { alt="centerIcon" /> handleDateClick('6개월')} > 6개월 @@ -136,7 +141,7 @@ const CouponNav = () => { alt="centerIcon" /> handleDateClick('3개월')} > 3개월 diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index bb61585b..3f1ac92c 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -5,14 +5,68 @@ import { CouponBanner } from '@components/CouponList'; import styled from '@emotion/styled'; +import { useGetCouponList } from '@hooks/queries/useCouponList'; +import { useCallback, useState } from 'react'; +import { debounce } from 'lodash'; +import { useRecoilValue } from 'recoil'; +import { headerAccommodationState } from '@recoil/index'; const CouponList = () => { + const [search, setSearch] = useState(''); + const [debouncePrefix, setDebouncePrefix] = useState(''); + const headerAccommodation = useRecoilValue(headerAccommodationState); + const [registerDateClick, setRegisterDateClick] = useState('1년'); + const [categoryTab, setCategoryTab] = useState('전체'); + + const { data: coupons } = useGetCouponList( + headerAccommodation.id, + registerDateClick !== '1년' ? registerDateClick : undefined, + categoryTab !== '전체' ? categoryTab : undefined, + debouncePrefix + ); + + const debounceOnChange = useCallback( + debounce((value: string) => { + setDebouncePrefix(value); + }, 500), + [] + ); + const handleChangeSearch = (value: string) => { + setSearch(value); + debounceOnChange(value); + }; + + const handleChangeDate = (value: string) => { + setRegisterDateClick(value); + }; + + const handleChangeCategory = (value: string) => { + setCategoryTab(value); + }; + + console.log(coupons); return ( - - - - + {coupons && ( + <> + + + + + + )} ); }; From 96229600b4cb72429c3191f4b003a0fa78f892ed Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 23:45:43 +0900 Subject: [PATCH 14/28] =?UTF-8?q?fix:=20coupon=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20props=EB=A1=9C=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponMain/index.tsx | 8 ++++++-- src/components/CouponList/CouponNav/index.tsx | 9 +-------- src/pages/CouponList/index.tsx | 2 +- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index 8e6ea757..e5f58919 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -12,10 +12,14 @@ import couponListState from '@recoil/atoms/couponListState'; import theme from '@styles/theme'; import mobileRegister from '@assets/icons/ic-couponlist-mobileregister.svg'; import categoryTabState from '@recoil/atoms/categoryTabState'; +import { CouponListResponse } from '@/types/couponList'; -const CouponMain = () => { +interface CouponMainProps { + coupons: CouponListResponse; +} + +const CouponMain = ({ coupons }: CouponMainProps) => { const navigate = useNavigate(); - const coupons = useRecoilValue(couponListState); const categoryTab = useRecoilValue(categoryTabState); console.log(coupons); diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 7b5e7613..71fece17 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -40,21 +40,16 @@ const CouponNav = ({ categoryTab, onCategoryTabChange }: CouponNavProps) => { - const [searchText, setSearchText] = useState(''); - const headerAccommodation = useRecoilValue(headerAccommodationState); - const setGlobalCoupons = useSetRecoilState(couponListState); const setGlobalCategoryTab = useSetRecoilState(categoryTabState); - const [searchAPI, setSearchAPI] = useState(''); const handleDateClick = (period: string) => { onRegisterDateChange(period); - setSearchAPI(''); }; const handleCategoryTab = (tab: string) => { onCategoryTabChange(tab); setGlobalCategoryTab({ categoryTab: tab }); - setSearchAPI(''); + onSearchChange(''); }; const handleSearchChange = (e: React.ChangeEvent) => { @@ -63,8 +58,6 @@ const CouponNav = ({ const handleSearch = (e: React.FormEvent) => { e.preventDefault(); - setSearchAPI(searchText); - setSearchText(''); }; return ( diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index 3f1ac92c..e57bdb44 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -64,7 +64,7 @@ const CouponList = () => { categoryTab={categoryTab} onCategoryTabChange={handleChangeCategory} /> - + )} From 793c2a32adb816b09ce1faae441deb4d5b61c5b4 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 00:57:53 +0900 Subject: [PATCH 15/28] =?UTF-8?q?modify:=20=EB=B6=88=ED=95=84=EC=9A=94=20i?= =?UTF-8?q?mport=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponMain/index.tsx | 1 - src/components/CouponList/CouponNav/index.tsx | 5 +---- src/pages/CouponList/index.tsx | 1 + 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index e5f58919..c71ea5fc 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -8,7 +8,6 @@ import { CouponStop, CouponWait } from '../CouponItem'; -import couponListState from '@recoil/atoms/couponListState'; import theme from '@styles/theme'; import mobileRegister from '@assets/icons/ic-couponlist-mobileregister.svg'; import categoryTabState from '@recoil/atoms/categoryTabState'; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 71fece17..27d25ba6 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -1,16 +1,13 @@ import styled from '@emotion/styled'; -import { useEffect, useRef, useState } from 'react'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import theme from '@styles/theme'; import searchIcon from '@assets/icons/ic-couponlist-search.svg'; import centerIcon from '@assets/icons/ic-couponlist-period-center.svg'; -import { couponListState, headerAccommodationState } from '@recoil/index'; import { CategoryTabStyleProps, ResisterDateStyleProps } from '@/types/couponList'; -import { useGetCouponList } from '@hooks/queries/useCouponList'; import categoryTabState from '@recoil/atoms/categoryTabState'; interface CouponNavProps { diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index e57bdb44..9b267c53 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -31,6 +31,7 @@ const CouponList = () => { }, 500), [] ); + const handleChangeSearch = (value: string) => { setSearch(value); debounceOnChange(value); From f9af63052a06d8a458dc8dbbd54d179cc4894fa7 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 04:36:36 +0900 Subject: [PATCH 16/28] =?UTF-8?q?fix:=20=EC=BF=A0=ED=8F=B0=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20substring=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponItem/CouponExpose/index.tsx | 7 ++++++- .../CouponList/CouponItem/CouponStop/index.tsx | 13 +++++++------ src/components/CouponList/CouponMain/index.tsx | 2 +- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 91e05ada..0e93cd79 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -30,6 +30,11 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { toggleUpdate(); }; + const filterTitle = + couponInfo.title.length > 10 + ? `${couponInfo.title.substring(0, 10)}...` + : couponInfo.title; + const toggleUpdate = async () => { try { await mutateAsync({ @@ -40,7 +45,7 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { showToast(
- {couponInfo.title} 쿠폰의 노출이 중단되었습니다. + {filterTitle} 쿠폰의 노출이 중단되었습니다. 실행 취소
, 2000 diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 8a0d76dc..745b48a0 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -18,7 +18,6 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { const roomListRef = useRef(null); const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); - useOutsideClick(roomListRef, () => setIsShowRoomList(false)); const handleRoomList = () => { @@ -30,6 +29,11 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { toggleUpdate(); }; + const filterTitle = + couponInfo.title.length > 10 + ? `${couponInfo.title.substring(0, 10)}...` + : couponInfo.title; + const toggleUpdate = async () => { try { await mutateAsync({ @@ -40,7 +44,7 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { showToast(
- {couponInfo.title} 쿠폰이 노출되었습니다. + {filterTitle} 쿠폰이 노출되었습니다. 실행 취소
, 2000 @@ -56,10 +60,7 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { coupon_number: couponInfo.coupon_number, coupon_status: '노출 OFF' }); - showToast( -
{couponInfo.title} 쿠폰의 노출이 중단되었습니다.
, - 2000 - ); + showToast(
{filterTitle} 쿠폰의 노출이 중단되었습니다.
, 2000); }; return ( diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index c71ea5fc..02c72c80 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -125,7 +125,7 @@ const SecondTabName = styled.div` `; const SecondTabCount = styled.div` - margin-right: 19px; + margin-right: 10px; color: #1a2849; font-size: 14px; From a9e3969107317e2f3c30101acf606a45db327e63 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 18:52:49 +0900 Subject: [PATCH 17/28] =?UTF-8?q?feat:=20=ED=95=98=EB=A3=A8=EB=A7=8C,=20?= =?UTF-8?q?=ED=8F=89=EC=9D=BC,=20=EC=A3=BC=EB=A7=90=20=EC=A1=B0=EA=B1=B4?= =?UTF-8?q?=EB=AC=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpired/index.tsx | 5 +++- .../CouponItem/CouponExpose/index.tsx | 5 +++- .../CouponItem/CouponStop/index.tsx | 5 +++- .../CouponItem/CouponWait/index.tsx | 5 +++- src/components/common/ToastContext/index.tsx | 15 ++++++++--- src/pages/CouponList/index.tsx | 25 +++++++++++++++++-- src/types/couponList.ts | 1 + src/utils/lib/couponCondition.ts | 12 ++++----- 8 files changed, 57 insertions(+), 16 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index aa41d224..f9cf6203 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -78,7 +78,10 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition( + couponInfo.coupon_use_condition_days, + couponInfo.coupon_use_condition_day_of_week + )} diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 0e93cd79..960a6f58 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -132,7 +132,10 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition( + couponInfo.coupon_use_condition_days, + couponInfo.coupon_use_condition_day_of_week + )} diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 745b48a0..86550650 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -117,7 +117,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition( + couponInfo.coupon_use_condition_days, + couponInfo.coupon_use_condition_day_of_week + )} diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index e6a8a170..783e6301 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -96,7 +96,10 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition( + couponInfo.coupon_use_condition_days, + couponInfo.coupon_use_condition_day_of_week + )} diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index 716fc116..c403ef3d 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -58,7 +58,7 @@ const ToastContainer = styled.div` border-radius: 5px; background: #404446; - font-size: 13px; + font-size: 15px; color: ${theme.colors.white}; span { @@ -71,10 +71,17 @@ const ToastContainer = styled.div` } @media (max-width: 900px) { - font-size: 10px; + padding: 10px 10px; + line-height: 20px; + + font-size: 13px; + span { - margin-left: 20px; - font-size: 10px; + display: block; + display: flex; + justify-content: center; + margin-left: 10px; + font-size: 13px; } } `; diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index 9b267c53..cb23a951 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -5,11 +5,11 @@ import { CouponBanner } from '@components/CouponList'; import styled from '@emotion/styled'; -import { useGetCouponList } from '@hooks/queries/useCouponList'; -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { debounce } from 'lodash'; import { useRecoilValue } from 'recoil'; import { headerAccommodationState } from '@recoil/index'; +import { useGetCouponList } from '@hooks/queries/useCouponList'; const CouponList = () => { const [search, setSearch] = useState(''); @@ -17,6 +17,7 @@ const CouponList = () => { const headerAccommodation = useRecoilValue(headerAccommodationState); const [registerDateClick, setRegisterDateClick] = useState('1년'); const [categoryTab, setCategoryTab] = useState('전체'); + const observerRef = useRef(null); const { data: coupons } = useGetCouponList( headerAccommodation.id, @@ -32,6 +33,25 @@ const CouponList = () => { [] ); + useEffect(() => { + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + console.log('감시 대상이 뷰포트에 들어왔습니다.'); + // 무한 스크롤 로직, 예: fetchMore 함수를 호출하여 데이터 추가 로드 + } + }); + }); + + if (observerRef.current) { + observer.observe(observerRef.current); + } + + return () => { + observer.disconnect(); + }; + }, []); // 의존성 배열에 필요한 상태 변수 추가 가능 + const handleChangeSearch = (value: string) => { setSearch(value); debounceOnChange(value); @@ -66,6 +86,7 @@ const CouponList = () => { onCategoryTabChange={handleChangeCategory} /> +
여기가 뷰포트에 들어오면 로딩합니다
)} diff --git a/src/types/couponList.ts b/src/types/couponList.ts index ae6ab973..642267f8 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -43,6 +43,7 @@ export interface CouponInformationResponse { coupon_room_types: string[]; minimum_reservation_price: number; coupon_use_condition_days: string; + coupon_use_condition_day_of_week: string; exposure_start_date: string; exposure_end_date: string; coupon_expiration: number; diff --git a/src/utils/lib/couponCondition.ts b/src/utils/lib/couponCondition.ts index bc39eec2..dacbd464 100644 --- a/src/utils/lib/couponCondition.ts +++ b/src/utils/lib/couponCondition.ts @@ -1,12 +1,12 @@ -export const couponCondition = (conditionDays: string): string => { - if (conditionDays.length === 1) { - return `${conditionDays}요일`; - } else if (conditionDays === '평일') { +export const couponCondition = (day: string, dayOfWeek: string): string => { + if (day === '하루만') { + return `${dayOfWeek}`; + } else if (day === '평일') { return '일~목'; - } else if (conditionDays === '주말') { + } else if (day === '주말') { return '금~토'; } - return conditionDays; + return day; }; export default couponCondition; From cc801a4a2a37ff7aa59d8de895b398162f9806b6 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 19:46:08 +0900 Subject: [PATCH 18/28] =?UTF-8?q?feat:=20toast=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpose/index.tsx | 18 +++++++--- src/components/common/ToastContext/index.tsx | 35 ++++++------------- 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 960a6f58..db756737 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -44,11 +44,14 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { console.log(couponInfo.coupon_number); showToast( -
- {filterTitle} 쿠폰의 노출이 중단되었습니다. - 실행 취소 -
, - 2000 + +
+ {filterTitle} 쿠폰의
+ 노출이 중단되었습니다. +
+

실행 취소

+ , + 1000000 ); } catch (error) { console.log(error); @@ -483,3 +486,8 @@ const RegisterDateValue = styled.div` font-style: normal; font-weight: 400; `; + +const ToastWrap = styled.div` + display: flex; + align-items: center; +`; diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index c403ef3d..dbc947bb 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -52,36 +52,23 @@ const ToastContainer = styled.div` bottom: 50px; left: 50%; transform: translateX(-50%); - white-space: nowrap; + line-height:20px; + + width: 336px; + height: 90px; + padding: 24px 28px; - padding: 15px 31px; border-radius: 5px; background: #404446; - font-size: 15px; color: ${theme.colors.white}; - span { - margin-left: 59px; - - color: #3182f6; - font-size: 15px; - text-decoration-line: underline; - cursor: pointer; - } - - @media (max-width: 900px) { - padding: 10px 10px; - line-height: 20px; - - font-size: 13px; - - span { - display: block; - display: flex; - justify-content: center; - margin-left: 10px; - font-size: 13px; + p { + color: #65a6eb; + font-size: 15px; + text-decoration-line: underline; + cursor: pointer; + margin-left:54px; } } `; From b9db2d7141c82860cf3f1484827f73665a8e7ede Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 20:12:09 +0900 Subject: [PATCH 19/28] =?UTF-8?q?fix:=20toast=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpose/index.tsx | 15 ++++++++-- .../CouponItem/CouponStop/index.tsx | 29 +++++++++++++++---- src/components/common/ToastContext/index.tsx | 9 ++++-- 3 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index db756737..eaa5ce57 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -51,7 +51,7 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => {

실행 취소

, - 1000000 + 2000 ); } catch (error) { console.log(error); @@ -64,7 +64,13 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { coupon_number: couponInfo.coupon_number, coupon_status: '노출 ON' }); - showToast(
{couponInfo.title} 쿠폰이 노출되었습니다.
, 2000); + showToast( + + {couponInfo.title} 쿠폰이
+ 노출되었습니다. + , + 2000 + ); }; // const retryToggleUpdate = async () => { @@ -489,5 +495,10 @@ const RegisterDateValue = styled.div` const ToastWrap = styled.div` display: flex; + justify-content: space-between; align-items: center; `; + +const ToastText = styled.div` + text-align: center; +`; diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 86550650..c23ab24e 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -43,10 +43,13 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { console.log(couponInfo.coupon_number); showToast( -
- {filterTitle} 쿠폰이 노출되었습니다. - 실행 취소 -
, + +
+ {filterTitle} 쿠폰이
+ 노출되었습니다. +
+

실행 취소

+ , 2000 ); } catch (error) { @@ -60,7 +63,13 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { coupon_number: couponInfo.coupon_number, coupon_status: '노출 OFF' }); - showToast(
{filterTitle} 쿠폰의 노출이 중단되었습니다.
, 2000); + showToast( + + {filterTitle} 쿠폰의 노출이
+ 중단되었습니다. + , + 2000 + ); }; return ( @@ -469,3 +478,13 @@ const RoomListItem = styled.div` text-overflow: ellipsis; } `; + +const ToastWrap = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + +const ToastText = styled.div` + text-align: center; +`; diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index dbc947bb..1f82df4e 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -52,23 +52,26 @@ const ToastContainer = styled.div` bottom: 50px; left: 50%; transform: translateX(-50%); - line-height:20px; width: 336px; - height: 90px; + padding: 24px 28px; + white-space: nowrap; border-radius: 5px; background: #404446; color: ${theme.colors.white}; + font-size:15px; + line-height:20px; + p { color: #65a6eb; font-size: 15px; text-decoration-line: underline; cursor: pointer; - margin-left:54px; + text-align: center; } } `; From 2c96dd63a03fa2884f66ef36a5eeab80d913e504 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 05:05:14 +0900 Subject: [PATCH 20/28] =?UTF-8?q?feat:=20=EC=9D=BC=EB=B6=80=20=EA=B0=9D?= =?UTF-8?q?=EC=8B=A4=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B7=B0=ED=8F=AC?= =?UTF-8?q?=ED=8A=B8=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EB=8B=A4?= =?UTF-8?q?=EB=A5=B4=EA=B2=8C=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpired/index.tsx | 36 +++++++++--- .../CouponItem/CouponExpose/index.tsx | 55 +++++++++++-------- .../CouponItem/CouponStop/index.tsx | 43 +++++++++++---- .../CouponItem/CouponWait/index.tsx | 36 +++++++++--- src/components/CouponList/CouponNav/index.tsx | 2 +- src/hooks/queries/useCouponList.ts | 4 +- src/types/couponList.ts | 4 ++ src/utils/lib/roomListPosition.ts | 41 ++++++++++++++ 8 files changed, 167 insertions(+), 54 deletions(-) create mode 100644 src/utils/lib/roomListPosition.ts diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index f9cf6203..213d40e0 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -5,11 +5,12 @@ import theme from '@styles/theme'; import rightIcon from '@assets/icons/ic-couponlist-right.svg'; import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { useCouponDelete, useOutsideClick } from '@hooks/index'; -import { CouponListProps } from '@/types/couponList'; +import { CouponListProps, RoomListProps } from '@/types/couponList'; import Modal from '@components/modal'; import { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; +import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; const CouponExpired = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); @@ -17,6 +18,8 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { const [isShowModal, setIsShowModal] = useState(false); const { mutateAsync } = useCouponDelete(); const { showToast } = useToast(); + const roomListStyleRef = useRef(null); + const [isBottom, setIsBottom] = useState(false); // RoomList가 하단에 닿았는지 여부를 나타내는 상태 useOutsideClick(roomListRef, () => setIsShowRoomList(false)); @@ -45,6 +48,9 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { setIsShowModal(false); }; + // 객실 리스트 스크롤에 따라 위치 조정 + useUpdateRoomListPosition({ isShowRoomList, roomListStyleRef, setIsBottom }); + return ( @@ -102,7 +108,10 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { /> {isShowRoomList && ( - + 쿠폰 적용 객실 ` position: absolute; - top: 0; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '0')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0' : 'auto')}; right: 0; z-index: 50; + transform: ${({ $isBottom }) => ($isBottom ? 'translateY(-100%)' : 'none')}; width: 188px; height: 204px; - margin-top: 150px; + margin-top: ${({ $isBottom }) => ($isBottom ? 'auto' : '150px')}; + margin-bottom: ${({ $isBottom }) => ($isBottom ? '-110px' : '150px')}; border-radius: 18px; - text-align: center; + text-align: center; background: #415574; &::before { content: ''; position: absolute; - top: -10px; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '-10px')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0px' : 'auto')}; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%) + ${({ $isBottom }) => ($isBottom ? 'translateY(100%)' : '')}; width: 0; height: 0; + border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 10px solid #415574; + border-top: ${({ $isBottom }) => + $isBottom ? '10px solid #415574' : 'none'}; + border-bottom: ${({ $isBottom }) => + $isBottom ? 'none' : '10px solid #415574'}; } `; diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index eaa5ce57..cfe1bb26 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import styled from '@emotion/styled'; import theme from '@styles/theme'; @@ -6,16 +6,24 @@ import toggleOnIcon from '@assets/icons/ic-couponlist-toggleOn.svg'; import toggleOffIcon from '@assets/icons/ic-couponlist-toggleOff.svg'; import rightIcon from '@assets/icons/ic-couponlist-right.svg'; import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; -import { CouponListProps, ToggleStyleProps } from '@/types/couponList'; +import { + CouponListProps, + RoomListProps, + ToggleStyleProps +} from '@/types/couponList'; import { useOutsideClick, useToggleChange } from '@hooks/index'; import couponCondition from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; +import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; const CouponExpose = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(true); const [isShowRoomList, setIsShowRoomList] = useState(false); const roomListRef = useRef(null); + const roomListStyleRef = useRef(null); + const [isBottom, setIsBottom] = useState(false); // RoomList가 하단에 닿았는지 여부를 나타내는 상태 + const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); @@ -73,19 +81,8 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { ); }; - // const retryToggleUpdate = async () => { - // try { - // setIsToggle(!isToggle); - // mutateAsync({ - // coupon_number: couponInfo.coupon_number, - // coupon_status: '노출 ON' - // }); - // console.log(isToggle); - // showToast(
{couponInfo.title} 쿠폰의 노출되었습니다.
, 3000); - // } catch (error) { - // console.log(error); - // } - // }; + // 객실 리스트 스크롤에 따라 위치 조정 + useUpdateRoomListPosition({ isShowRoomList, roomListStyleRef, setIsBottom }); return ( @@ -165,7 +162,10 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { /> {isShowRoomList && ( - + 쿠폰 적용 객실 ` position: absolute; - top: 0; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '0')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0' : 'auto')}; right: 0; z-index: 50; + transform: ${({ $isBottom }) => ($isBottom ? 'translateY(-100%)' : 'none')}; width: 188px; height: 204px; - margin-top: 150px; + margin-top: ${({ $isBottom }) => ($isBottom ? 'auto' : '150px')}; + margin-bottom: ${({ $isBottom }) => ($isBottom ? '-110px' : '150px')}; border-radius: 18px; - text-align: center; + text-align: center; background: #415574; &::before { content: ''; position: absolute; - top: -10px; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '-10px')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0px' : 'auto')}; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%) + ${({ $isBottom }) => ($isBottom ? 'translateY(100%)' : '')}; width: 0; height: 0; + border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 10px solid #415574; + border-top: ${({ $isBottom }) => + $isBottom ? '10px solid #415574' : 'none'}; + border-bottom: ${({ $isBottom }) => + $isBottom ? 'none' : '10px solid #415574'}; } `; diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index c23ab24e..49aaf9ca 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -6,11 +6,16 @@ import toggleOnIcon from '@assets/icons/ic-couponlist-toggleOn.svg'; import toggleOffIcon from '@assets/icons/ic-couponlist-toggleOff.svg'; import rightIcon from '@assets/icons/ic-couponlist-right.svg'; import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; -import { CouponListProps, ToggleStyleProps } from '@/types/couponList'; +import { + CouponListProps, + RoomListProps, + ToggleStyleProps +} from '@/types/couponList'; import { useOutsideClick, useToggleChange } from '@hooks/index'; import { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; +import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; const CouponStop = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(false); @@ -18,6 +23,9 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { const roomListRef = useRef(null); const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); + const roomListStyleRef = useRef(null); + const [isBottom, setIsBottom] = useState(false); // RoomList가 하단에 닿았는지 여부를 나타내는 상태 + useOutsideClick(roomListRef, () => setIsShowRoomList(false)); const handleRoomList = () => { @@ -72,6 +80,9 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { ); }; + // 객실 리스트 스크롤에 따라 위치 조정 + useUpdateRoomListPosition({ isShowRoomList, roomListStyleRef, setIsBottom }); + return ( @@ -150,7 +161,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { /> {isShowRoomList && ( - + 쿠폰 적용 객실 ` position: absolute; - top: 0; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '0')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0' : 'auto')}; right: 0; - z-index: 1; + z-index: 50; + transform: ${({ $isBottom }) => ($isBottom ? 'translateY(-100%)' : 'none')}; width: 188px; height: 204px; - margin-top: 150px; + margin-top: ${({ $isBottom }) => ($isBottom ? 'auto' : '150px')}; + margin-bottom: ${({ $isBottom }) => ($isBottom ? '-110px' : '150px')}; border-radius: 18px; - text-align: center; + text-align: center; background: #415574; &::before { content: ''; position: absolute; - top: -10px; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '-10px')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0px' : 'auto')}; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%) + ${({ $isBottom }) => ($isBottom ? 'translateY(100%)' : '')}; width: 0; height: 0; + border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 10px solid #415574; + border-top: ${({ $isBottom }) => + $isBottom ? '10px solid #415574' : 'none'}; + border-bottom: ${({ $isBottom }) => + $isBottom ? 'none' : '10px solid #415574'}; } `; diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index 783e6301..a2995f5d 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -7,10 +7,11 @@ import centerIcon from '@assets/icons/ic-couponlist-center.svg'; import rightIcon from '@assets/icons/ic-couponlist-right.svg'; import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { useCouponDelete, useOutsideClick } from '@hooks/index'; -import { CouponListProps } from '@/types/couponList'; +import { CouponListProps, RoomListProps } from '@/types/couponList'; import Modal from '@components/modal'; import { couponCondition } from '@utils/lib/couponCondition'; import couponRoomType from '@utils/lib/couponRoomType'; +import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; const CouponWait = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); @@ -18,6 +19,8 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { const roomListRef = useRef(null); const [modalType, setModalType] = useState(''); const navigate = useNavigate(); + const roomListStyleRef = useRef(null); + const [isBottom, setIsBottom] = useState(false); // RoomList가 하단에 닿았는지 여부를 나타내는 상태 const [modalContent, setModalContent] = useState({ modalText: '', subText: false @@ -63,6 +66,9 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { setIsShowModal(false); }; + // 객실 리스트 스크롤에 따라 위치 조정 + useUpdateRoomListPosition({ isShowRoomList, roomListStyleRef, setIsBottom }); + return ( @@ -120,7 +126,10 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { /> {isShowRoomList && ( - + 쿠폰 적용 객실 ` position: absolute; - top: 0; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '0')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0' : 'auto')}; right: 0; z-index: 50; + transform: ${({ $isBottom }) => ($isBottom ? 'translateY(-100%)' : 'none')}; width: 188px; height: 204px; - margin-top: 150px; + margin-top: ${({ $isBottom }) => ($isBottom ? 'auto' : '150px')}; + margin-bottom: ${({ $isBottom }) => ($isBottom ? '-110px' : '150px')}; border-radius: 18px; - text-align: center; + text-align: center; background: #415574; &::before { content: ''; position: absolute; - top: -10px; + top: ${({ $isBottom }) => ($isBottom ? 'auto' : '-10px')}; + bottom: ${({ $isBottom }) => ($isBottom ? '0px' : 'auto')}; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%) + ${({ $isBottom }) => ($isBottom ? 'translateY(100%)' : '')}; width: 0; height: 0; + border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 10px solid #415574; + border-top: ${({ $isBottom }) => + $isBottom ? '10px solid #415574' : 'none'}; + border-bottom: ${({ $isBottom }) => + $isBottom ? 'none' : '10px solid #415574'}; } `; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 27d25ba6..4630ae74 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -150,7 +150,7 @@ const TabContainer = styled.div` @media (max-width: 656px) { position: sticky; top: 0; - z-index: 50; + z-index: 60; margin: 0px; background-color: ${theme.colors.white}; diff --git a/src/hooks/queries/useCouponList.ts b/src/hooks/queries/useCouponList.ts index 2c6ea66b..ac4e0f28 100644 --- a/src/hooks/queries/useCouponList.ts +++ b/src/hooks/queries/useCouponList.ts @@ -1,3 +1,4 @@ +import { getCouponList } from './../../api/lib/getCouponList'; import { CouponDeleteCredential, CouponListResponse, @@ -14,8 +15,7 @@ import { import { couponDeleteApi, couponToggleApi, - couponUpdateApi, - getCouponList + couponUpdateApi } from 'src/api/lib/getCouponList'; // 쿠폰 조회 diff --git a/src/types/couponList.ts b/src/types/couponList.ts index 642267f8..6bbdbd0a 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -10,6 +10,10 @@ export interface CategoryTabStyleProps { $categoryTab: boolean; } +export interface RoomListProps { + $isBottom: boolean; +} + // api 쿠폰 리스트정보 응답 데이터 export interface CouponListResponse { content: CouponInformationResponse[]; diff --git a/src/utils/lib/roomListPosition.ts b/src/utils/lib/roomListPosition.ts new file mode 100644 index 00000000..6d7010ea --- /dev/null +++ b/src/utils/lib/roomListPosition.ts @@ -0,0 +1,41 @@ +import { RefObject, useEffect } from 'react'; + +export interface RoomListStyleProps { + isShowRoomList: boolean; + roomListStyleRef: RefObject; + setIsBottom: (isBottom: boolean) => void; +} + +// 커스텀 훅 정의 +export const useUpdateRoomListPosition = ({ + isShowRoomList, + roomListStyleRef, + setIsBottom +}: RoomListStyleProps) => { + const updateRoomListPosition = () => { + if (roomListStyleRef.current) { + const roomListRect = roomListStyleRef.current.getBoundingClientRect(); + const viewportHeight = window.innerHeight; + setIsBottom(roomListRect.bottom > viewportHeight); + } + }; + + useEffect(() => { + const handleResizeOrScroll = () => { + updateRoomListPosition(); + }; + + // 스크롤 및 창 크기 변경 이벤트에 리스너 추가 + window.addEventListener('scroll', handleResizeOrScroll); + window.addEventListener('resize', handleResizeOrScroll); + + // 컴포넌트 마운트 시 또는 isShowRoomList 상태 변경 시 위치 업데이트 + handleResizeOrScroll(); + + // 컴포넌트 언마운트 시 또는 의존성 배열 내 값이 변경될 때 이벤트 리스너 제거 + return () => { + window.removeEventListener('scroll', handleResizeOrScroll); + window.removeEventListener('resize', handleResizeOrScroll); + }; + }, [isShowRoomList]); // 의존성 배열에 isShowRoomList 추가 +}; From ac670f71ab3cb4b379c660bee8b4299932f7dbf9 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 19:08:30 +0900 Subject: [PATCH 21/28] =?UTF-8?q?feat:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 4 +-- .../CouponItem/CouponExpose/index.tsx | 30 +++++++++++-------- .../CouponItem/CouponStop/index.tsx | 30 +++++++++++-------- .../CouponList/CouponMain/index.tsx | 16 +++++----- src/hooks/queries/useCouponList.ts | 6 ++-- src/pages/CouponList/index.tsx | 30 +++++++++++++++---- src/utils/lib/roomListPosition.ts | 1 - 7 files changed, 72 insertions(+), 45 deletions(-) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 7d935507..8b5bc0bf 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -12,13 +12,13 @@ export const getCouponList = async ( date?: string, status?: string, title?: string, - page?: number + size?: number ): Promise => { const params = { date, status, title, - page + size }; const response = await instance.get( `/v1/accommodations/${accommodationId}/coupons`, diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index cfe1bb26..49bd07df 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -66,19 +66,23 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { } }; - const retryToggleUpdate = () => { - setIsToggle(!isToggle); - mutateAsync({ - coupon_number: couponInfo.coupon_number, - coupon_status: '노출 ON' - }); - showToast( - - {couponInfo.title} 쿠폰이
- 노출되었습니다. - , - 2000 - ); + const retryToggleUpdate = async () => { + try { + setIsToggle(!isToggle); + await mutateAsync({ + coupon_number: couponInfo.coupon_number, + coupon_status: '노출 ON' + }); + showToast( + + {couponInfo.title} 쿠폰이
+ 노출되었습니다. + , + 2000 + ); + } catch (error) { + console.log(error); + } }; // 객실 리스트 스크롤에 따라 위치 조정 diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 49aaf9ca..8ac3818b 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -65,19 +65,23 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { } }; - const retryToggleUpdate = () => { - setIsToggle(!isToggle); - mutateAsync({ - coupon_number: couponInfo.coupon_number, - coupon_status: '노출 OFF' - }); - showToast( - - {filterTitle} 쿠폰의 노출이
- 중단되었습니다. - , - 2000 - ); + const retryToggleUpdate = async () => { + try { + setIsToggle(!isToggle); + await mutateAsync({ + coupon_number: couponInfo.coupon_number, + coupon_status: '노출 OFF' + }); + showToast( + + {filterTitle} 쿠폰의 노출이
+ 중단되었습니다. + , + 2000 + ); + } catch (error) { + console.log(error); + } }; // 객실 리스트 스크롤에 따라 위치 조정 diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index 02c72c80..baf56458 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -11,7 +11,10 @@ import { import theme from '@styles/theme'; import mobileRegister from '@assets/icons/ic-couponlist-mobileregister.svg'; import categoryTabState from '@recoil/atoms/categoryTabState'; -import { CouponListResponse } from '@/types/couponList'; +import { + CouponInformationResponse, + CouponListResponse +} from '@/types/couponList'; interface CouponMainProps { coupons: CouponListResponse; @@ -20,7 +23,6 @@ interface CouponMainProps { const CouponMain = ({ coupons }: CouponMainProps) => { const navigate = useNavigate(); const categoryTab = useRecoilValue(categoryTabState); - console.log(coupons); const handleRegisterClick = () => { navigate('/coupons/register'); @@ -36,33 +38,33 @@ const CouponMain = ({ coupons }: CouponMainProps) => { 쿠폰은 조회되지 않습니다. - {coupons?.content?.map(coupon => { + {coupons?.content.map((coupon, index) => { switch (coupon.coupon_status) { case '노출 ON': return ( ); case '노출 OFF': return ( ); case '노출 대기중': return ( ); case '노출 기간 만료': return ( ); diff --git a/src/hooks/queries/useCouponList.ts b/src/hooks/queries/useCouponList.ts index ac4e0f28..de92c43e 100644 --- a/src/hooks/queries/useCouponList.ts +++ b/src/hooks/queries/useCouponList.ts @@ -24,11 +24,11 @@ export const useGetCouponList = ( date?: string, status?: string, title?: string, - page?: number + size?: number ) => useSuspenseQuery({ - queryKey: ['CouponList', accommodationId, status, date, title, page], - queryFn: () => getCouponList(accommodationId, date, status, title, page) + queryKey: ['CouponList', accommodationId, status, date, title, size], + queryFn: () => getCouponList(accommodationId, date, status, title, size) }); // 쿠폰 수정 diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index cb23a951..a5b1b7fa 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -10,6 +10,7 @@ import { debounce } from 'lodash'; import { useRecoilValue } from 'recoil'; import { headerAccommodationState } from '@recoil/index'; import { useGetCouponList } from '@hooks/queries/useCouponList'; +import { CouponListResponse } from '@/types/couponList'; const CouponList = () => { const [search, setSearch] = useState(''); @@ -18,12 +19,15 @@ const CouponList = () => { const [registerDateClick, setRegisterDateClick] = useState('1년'); const [categoryTab, setCategoryTab] = useState('전체'); const observerRef = useRef(null); + const [page, setPage] = useState(1); + const couponRef = useRef(null); const { data: coupons } = useGetCouponList( headerAccommodation.id, registerDateClick !== '1년' ? registerDateClick : undefined, categoryTab !== '전체' ? categoryTab : undefined, - debouncePrefix + debouncePrefix, + page * 10 ); const debounceOnChange = useCallback( @@ -33,12 +37,20 @@ const CouponList = () => { [] ); + useEffect(() => { + if (coupons) { + couponRef.current = coupons; + } + }, [coupons]); + useEffect(() => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { - console.log('감시 대상이 뷰포트에 들어왔습니다.'); - // 무한 스크롤 로직, 예: fetchMore 함수를 호출하여 데이터 추가 로드 + console.log(page); + if (couponRef.current && page <= couponRef.current.total_pages) { + setPage(prev => prev + 1); + } } }); }); @@ -50,7 +62,7 @@ const CouponList = () => { return () => { observer.disconnect(); }; - }, []); // 의존성 배열에 필요한 상태 변수 추가 가능 + }, [page]); // 의존성 배열에 필요한 상태 변수 추가 가능 const handleChangeSearch = (value: string) => { setSearch(value); @@ -59,13 +71,14 @@ const CouponList = () => { const handleChangeDate = (value: string) => { setRegisterDateClick(value); + setPage(1); }; const handleChangeCategory = (value: string) => { setCategoryTab(value); + setPage(1); }; - console.log(coupons); return ( {coupons && ( @@ -86,7 +99,7 @@ const CouponList = () => { onCategoryTabChange={handleChangeCategory} /> -
여기가 뷰포트에 들어오면 로딩합니다
+ )} @@ -101,3 +114,8 @@ const CouponListContainer = styled.div` background: #f2f3f5; } `; + +const ObserverContainer = styled.div` + width: 100%; + height: 10px; +`; diff --git a/src/utils/lib/roomListPosition.ts b/src/utils/lib/roomListPosition.ts index 6d7010ea..5984a879 100644 --- a/src/utils/lib/roomListPosition.ts +++ b/src/utils/lib/roomListPosition.ts @@ -6,7 +6,6 @@ export interface RoomListStyleProps { setIsBottom: (isBottom: boolean) => void; } -// 커스텀 훅 정의 export const useUpdateRoomListPosition = ({ isShowRoomList, roomListStyleRef, From c6e1d91895e89524cb4a756ed789f3f98e3f917d Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 19:36:19 +0900 Subject: [PATCH 22/28] =?UTF-8?q?feat:=20concatTitle=20=EC=A1=B0=EA=B1=B4?= =?UTF-8?q?=EB=AC=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpired/index.tsx | 9 +++++++- .../CouponItem/CouponExpose/index.tsx | 11 ++++++++-- .../CouponItem/CouponStop/index.tsx | 9 +++++++- .../CouponItem/CouponWait/index.tsx | 9 +++++++- src/types/couponList.ts | 1 + src/utils/lib/concatTitle.ts | 22 +++++++++++++++++++ 6 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 src/utils/lib/concatTitle.ts diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 213d40e0..4ca8beb0 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -11,6 +11,7 @@ import { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; +import concatTitle from '@utils/lib/concatTitle'; const CouponExpired = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); @@ -58,7 +59,13 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { {couponInfo.title} 기간만료 - {couponInfo.coupon_concat_title} + + {concatTitle({ + customer_type: couponInfo.customer_type, + discount_flat_rate: couponInfo.discount_flat_rate, + discount_flat_value: couponInfo.discount_flat_value + })} + diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 49bd07df..b107a02b 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import styled from '@emotion/styled'; import theme from '@styles/theme'; @@ -16,6 +16,7 @@ import couponCondition from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; +import concatTitle from '@utils/lib/concatTitle'; const CouponExpose = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(true); @@ -116,7 +117,13 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { )} - {couponInfo.coupon_concat_title} + + {concatTitle({ + customer_type: couponInfo.customer_type, + discount_flat_rate: couponInfo.discount_flat_rate, + discount_flat_value: couponInfo.discount_flat_value + })} + diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 8ac3818b..e241b060 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -16,6 +16,7 @@ import { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; +import concatTitle from '@utils/lib/concatTitle'; const CouponStop = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(false); @@ -115,7 +116,13 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { )} - {couponInfo.coupon_concat_title} + + {concatTitle({ + customer_type: couponInfo.customer_type, + discount_flat_rate: couponInfo.discount_flat_rate, + discount_flat_value: couponInfo.discount_flat_value + })} + diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index a2995f5d..4cadf7b0 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -12,6 +12,7 @@ import Modal from '@components/modal'; import { couponCondition } from '@utils/lib/couponCondition'; import couponRoomType from '@utils/lib/couponRoomType'; import { useUpdateRoomListPosition } from '@utils/lib/roomListPosition'; +import concatTitle from '@utils/lib/concatTitle'; const CouponWait = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); @@ -76,7 +77,13 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { {couponInfo.title} 노출대기 - {couponInfo.coupon_concat_title} + + {concatTitle({ + customer_type: couponInfo.customer_type, + discount_flat_rate: couponInfo.discount_flat_rate, + discount_flat_value: couponInfo.discount_flat_value + })} + diff --git a/src/types/couponList.ts b/src/types/couponList.ts index 6bbdbd0a..45ac31e6 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -42,6 +42,7 @@ export interface CouponInformationResponse { discount_type: string; discount_value: number; discount_flat_rate: number | null; + discount_flat_value: number | null; maximum_discount_price: number | null; customer_type: string; coupon_room_types: string[]; diff --git a/src/utils/lib/concatTitle.ts b/src/utils/lib/concatTitle.ts new file mode 100644 index 00000000..3bf5afeb --- /dev/null +++ b/src/utils/lib/concatTitle.ts @@ -0,0 +1,22 @@ +export interface ConcatTitleProps { + customer_type: string; + discount_flat_rate: number | null; + discount_flat_value: number | null; +} + +export const concatTitle = ({ + customer_type, + discount_flat_rate, + discount_flat_value +}: ConcatTitleProps) => { + if (discount_flat_rate !== null) { + return `${customer_type} ${discount_flat_rate}% 할인`; + } else if (discount_flat_value !== null) { + const formattedValue = new Intl.NumberFormat().format(discount_flat_value); + return `${customer_type} ${formattedValue}원 할인`; + } + + return null; +}; + +export default concatTitle; From 958e073d4cd14cba041cb0aa42342727f8d1e279 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 19:43:10 +0900 Subject: [PATCH 23/28] =?UTF-8?q?remove:=20=EC=9D=B4=EC=A0=84=20=EC=BF=A0?= =?UTF-8?q?=ED=8F=B0=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponOld/CouponExpired.tsx | 288 ---------------- .../CouponList/CouponOld/CouponExpose.tsx | 308 ------------------ .../CouponList/CouponOld/CouponStop.tsx | 305 ----------------- .../CouponList/CouponOld/CouponWait.tsx | 299 ----------------- 4 files changed, 1200 deletions(-) delete mode 100644 src/components/CouponList/CouponOld/CouponExpired.tsx delete mode 100644 src/components/CouponList/CouponOld/CouponExpose.tsx delete mode 100644 src/components/CouponList/CouponOld/CouponStop.tsx delete mode 100644 src/components/CouponList/CouponOld/CouponWait.tsx diff --git a/src/components/CouponList/CouponOld/CouponExpired.tsx b/src/components/CouponList/CouponOld/CouponExpired.tsx deleted file mode 100644 index 0ba20f8b..00000000 --- a/src/components/CouponList/CouponOld/CouponExpired.tsx +++ /dev/null @@ -1,288 +0,0 @@ -import styled from '@emotion/styled'; -import expiredIcon from '@assets/icons/CouponList/ic_expose_expired.svg'; - -const CouponExpired = () => { - return ( -
- - - - expiredIcon - 쿠폰 기간 만료 - - - - 적용 객실 - 전체 - - - - 크리스마스 이벤트1 - 모든 고객 10% 할인 - - - - - 다운로드 -

50

- - - 사용완료 -

50

- - - - -
가격 조건
-

300,000원 이상

- - -
일정 조건
-

2박 이상, 금~토

- - - - -
노출 일자
-

2023.12.01 ~ 2023.12.31

- - -
등록일
-
2023.12.01
- - - 삭제 - -
- ); -}; - -export default CouponExpired; - -const CouponHeader = styled.div` - width: 219px; - height: 77px; - - border-radius: 10.608px 10.608px 0px 0px; - - display: flex; - flex-direction: column; - justify-content: center; - - background: #b1b1b1; -`; - -const ExposeContainer = styled.div` - display: flex; - justify-content: space-between; - padding: 4px 10px; -`; - -const ExposeWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ExposeText = styled.div` - color: #e3e5e5; - - margin-left: 2px; - - font-size: 12px; -`; - -const RoomWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ApplyRoom = styled.div` - position: relative; - - width: 194px; - height: 31px; - - padding-top: 12px; - padding-left: 10px; - border-radius: 8px; - - background-color: ${props => props.theme.colors.white}; - - font-size: 10px; - color: #b1b1b1; -`; - -const RoomButton = styled.button` - position: absolute; - - width: 113px; - height: 23px; - - margin-left: 76px; - border-radius: 12px; - border: 1px solid #b1b1b1; - - background-color: transparent; - - color: #b1b1b1; - font-size: 11px; -`; - -const CouponNabWrap = styled.div` - width: 217px; - height: 72px; - - margin-left: 1px; - padding: 15px; - box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25); - border-bottom: 2px dashed #cdcfd0; - - background-color: ${props => props.theme.colors.white}; -`; - -const CouponTitle = styled.div` - color: #979c9e; - font-size: 13px; -`; - -const CouponCustomer = styled.div` - font-size: 16.997px; - font-weight: 700; - - margin-top: 5px; - color: #979c9e; -`; - -const CouponMain = styled.div` - width: 217px; - height: 245px; - - margin-left: 1px; - border-bottom: 1px dashed #b2b2b2; - - display: flex; - flex-direction: column; - align-items: center; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - background: #fafafb; -`; - -const CountWrap = styled.div` - display: flex; - margin-top: 10px; -`; - -const CountItemWrap = styled.div` - width: 79px; - height: 83px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 8px; - - border-radius: 12px; - - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - p { - color: #cdcfd0; - font-size: 18px; - font-weight: 700; - } -`; - -const CountItemText = styled.div` - font-size: 12px; - font-weight: 600; - color: #cdcfd0; - margin: 5px; -`; - -const ConditionWrap = styled.div` - width: 176px; - height: 56px; - - display: flex; - flex-direction: column; - padding: 16px 15px 13px 14px; - margin-top: 5px; - - border-radius: 12px; - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); -`; - -const ConditionWrapText = styled.div` - display: flex; - margin-top: 2px; - - div { - color: #cdcfd0; - font-size: 11px; - font-weight: 600; - margin-right: 10px; - } - - p { - color: #cdcfd0; - font-size: 11px; - font-weight: 400; - } -`; - -const ExposeDateContainer = styled.div` - margin-top: 20px; -`; - -const ExposeDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #cdcfd0; - font-size: 11px; - font-weight: 600; - margin-right: 3px; - } - - p { - color: #cdcfd0; - font-size: 12px; - font-weight: 700; - text-decoration-line: underline; - } -`; - -const RegisterDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #cdcfd0; - font-size: 9.724px; - font-weight: 400; - margin-top: 8px; - margin-right: 3px; - } -`; - -const DeleteButton = styled.button` - border: none; - - margin-left: 150px; - margin-top: -3px; - - font-size: 11px; - font-weight: 700; - color: #6c7072; - background: transparent; - cursor: pointer; -`; diff --git a/src/components/CouponList/CouponOld/CouponExpose.tsx b/src/components/CouponList/CouponOld/CouponExpose.tsx deleted file mode 100644 index d423a992..00000000 --- a/src/components/CouponList/CouponOld/CouponExpose.tsx +++ /dev/null @@ -1,308 +0,0 @@ -import exposeIcon from '@assets/icons/CouponList/ic_expose.svg'; -import toggleOnIcon from '@assets/icons/CouponList/ic_toggleOn.svg'; -import styled from '@emotion/styled'; - -const CouponExpose = () => { - return ( -
- - - - exposeIcon - 현재 노출 중 - - - ON - toggleOnIcon - - - - 적용 객실 - 전체 - - - - 크리스마스 이벤트1 - 모든 고객 10% 할인 - - - - - 다운로드 -

50

- - - 사용완료 -

50

- - - - -
가격 조건
-

300,000원 이상

- - -
일정 조건
-

2박 이상, 금~토

- - - - -
노출 일자
-

2023.12.01 ~ 2023.12.31

- - -
등록일
-
2023.12.01
- - - -
- ); -}; - -export default CouponExpose; - -const CouponHeader = styled.div` - width: 219px; - height: 77px; - - border-radius: 10.608px 10.608px 0px 0px; - - display: flex; - flex-direction: column; - justify-content: center; - - background: var( - --gradient, - linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%) - ); -`; - -const ExposeContainer = styled.div` - display: flex; - justify-content: space-between; - padding: 4px 10px; -`; - -const ExposeWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ExposeText = styled.div` - color: ${props => props.theme.colors.white}; - - margin-left: 2px; - - font-size: 12px; -`; - -const ToggleWrap = styled.div` - width: 48.229px; - height: 23.526px; - - border-radius: 17.68px; - border: 1px solid #e3e5e5; - - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 3px; - padding-left: 5px; - - background-color: ${props => props.theme.colors.white}; - cursor: pointer; -`; - -const ToggleText = styled.div` - font-size: 10px; - - color: ${props => props.theme.colors.pink500}; -`; - -const RoomWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ApplyRoom = styled.div` - position: relative; - - width: 194px; - height: 31px; - - padding-top: 12px; - padding-left: 10px; - border-radius: 8px; - - background-color: ${props => props.theme.colors.white}; - - font-size: 10px; - color: #404446; -`; - -const RoomButton = styled.button` - position: absolute; - - width: 113px; - height: 23px; - - margin-left: 76px; - border-radius: 12px; - border: 1px solid #ffadc8; - - background-color: transparent; - - color: ${props => props.theme.colors.pink500}; - font-size: 11px; -`; - -const CouponNabWrap = styled.div` - width: 217px; - height: 72px; - - margin-left: 1px; - padding: 15px; - box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25); - border-bottom: 2px dashed ${props => props.theme.colors.pink500}; - - background-color: ${props => props.theme.colors.white}; -`; - -const CouponTitle = styled.div` - color: #6c7072; - font-size: 13px; -`; - -const CouponCustomer = styled.div` - font-size: 16.997px; - font-weight: 700; - - margin-top: 5px; - color: #202325; -`; - -const CouponMain = styled.div` - width: 217px; - height: 245px; - - margin-left: 1px; - border-bottom: 1px dashed #b2b2b2; - - display: flex; - flex-direction: column; - align-items: center; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - background: #fafafb; -`; - -const CountWrap = styled.div` - display: flex; - margin-top: 10px; -`; - -const CountItemWrap = styled.div` - width: 79px; - height: 83px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 8px; - - border-radius: 12px; - - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - p { - color: #404446; - font-size: 18px; - font-weight: 700; - } -`; - -const CountItemText = styled.div` - font-size: 12px; - font-weight: 600; - color: #757676; - margin: 5px; -`; - -const ConditionWrap = styled.div` - width: 176px; - height: 56px; - - display: flex; - flex-direction: column; - padding: 16px 15px 13px 14px; - margin-top: 5px; - - border-radius: 12px; - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); -`; - -const ConditionWrapText = styled.div` - display: flex; - margin-top: 2px; - - div { - color: #404446; - font-size: 11px; - font-weight: 600; - margin-right: 10px; - } - - p { - color: #404446; - font-size: 11px; - font-weight: 400; - } -`; - -const ExposeDateContainer = styled.div` - margin-top: 18px; -`; - -const ExposeDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #404446; - font-size: 11px; - font-weight: 600; - margin-right: 3px; - } - - p { - color: ${props => props.theme.colors.pink500}; - font-size: 12px; - font-weight: 700; - text-decoration-line: underline; - } -`; - -const RegisterDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #757676; - font-size: 9.724px; - font-weight: 400; - margin-top: 8px; - margin-right: 3px; - } -`; diff --git a/src/components/CouponList/CouponOld/CouponStop.tsx b/src/components/CouponList/CouponOld/CouponStop.tsx deleted file mode 100644 index ade3bd13..00000000 --- a/src/components/CouponList/CouponOld/CouponStop.tsx +++ /dev/null @@ -1,305 +0,0 @@ -import styled from '@emotion/styled'; -import stopIcon from '@assets/icons/CouponList/ic_expose_stop.svg'; -import toggleOffIcon from '@assets/icons/CouponList/ic_toggleOff.svg'; -const CouponStop = () => { - const handleExpose = () => {}; - - return ( -
- - - - stopIcon - 쿠폰 노출 중지 - - - toggleOffIcon - OFF - - - - 적용 객실 - 전체 - - - - 크리스마스 이벤트1 - 모든 고객 10% 할인 - - - - - 다운로드 -

50

- - - 사용완료 -

50

- - - - -
가격 조건
-

300,000원 이상

- - -
일정 조건
-

2박 이상, 금~토

- - - - -
노출 일자
-

2023.12.01 ~ 2023.12.31

- - -
등록일
-
2023.12.01
- - - -
- ); -}; - -export default CouponStop; - -const CouponHeader = styled.div` - width: 219px; - height: 77px; - - border-radius: 10.608px 10.608px 0px 0px; - - display: flex; - flex-direction: column; - justify-content: center; - - background: #b1b1b1; -`; - -const ExposeContainer = styled.div` - display: flex; - justify-content: space-between; - padding: 4px 10px; -`; - -const ExposeWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ExposeText = styled.div` - color: #da1e28; - - margin-left: 2px; - - font-size: 12px; -`; - -const ToggleWrap = styled.div` - width: 48.229px; - height: 23.526px; - - border-radius: 17.68px; - border: 1px solid #e3e5e5; - - display: flex; - align-items: center; - padding-top: 3px; - padding-left: 2px; - - background-color: ${props => props.theme.colors.white}; - cursor: pointer; -`; - -const ToggleText = styled.div` - font-size: 10px; - - color: #cdcfd0; -`; - -const RoomWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ApplyRoom = styled.div` - position: relative; - - width: 194px; - height: 31px; - - padding-top: 12px; - padding-left: 10px; - border-radius: 8px; - - background-color: ${props => props.theme.colors.white}; - - font-size: 10px; - color: #404446; -`; - -const RoomButton = styled.button` - position: absolute; - - width: 113px; - height: 23px; - - margin-left: 76px; - border-radius: 12px; - border: 1px solid #6c7072; - - background-color: transparent; - - color: #6c7072; - font-size: 11px; -`; - -const CouponNabWrap = styled.div` - width: 217px; - height: 72px; - - margin-left: 1px; - padding: 15px; - box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25); - border-bottom: 2px dashed #cdcfd0; - - background-color: ${props => props.theme.colors.white}; -`; - -const CouponTitle = styled.div` - color: #6c7072; - font-size: 13px; -`; - -const CouponCustomer = styled.div` - font-size: 16.997px; - font-weight: 700; - - margin-top: 5px; - color: #202325; -`; - -const CouponMain = styled.div` - width: 217px; - height: 245px; - - margin-left: 1px; - border-bottom: 1px dashed #b2b2b2; - - display: flex; - flex-direction: column; - align-items: center; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - background: #fafafb; -`; - -const CountWrap = styled.div` - display: flex; - margin-top: 10px; -`; - -const CountItemWrap = styled.div` - width: 79px; - height: 83px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 8px; - - border-radius: 12px; - - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - p { - color: #404446; - font-size: 18px; - font-weight: 700; - } -`; - -const CountItemText = styled.div` - font-size: 12px; - font-weight: 600; - color: #757676; - margin: 5px; -`; - -const ConditionWrap = styled.div` - width: 176px; - height: 56px; - - display: flex; - flex-direction: column; - padding: 16px 15px 13px 14px; - margin-top: 5px; - - border-radius: 12px; - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); -`; - -const ConditionWrapText = styled.div` - display: flex; - margin-top: 2px; - - div { - color: #404446; - font-size: 11px; - font-weight: 600; - margin-right: 10px; - } - - p { - color: #404446; - font-size: 11px; - font-weight: 400; - } -`; - -const ExposeDateContainer = styled.div` - margin-top: 18px; -`; - -const ExposeDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #404446; - font-size: 11px; - font-weight: 600; - margin-right: 3px; - } - - p { - color: ${props => props.theme.colors.pink500}; - font-size: 12px; - font-weight: 700; - text-decoration-line: underline; - } -`; - -const RegisterDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #757676; - font-size: 9.724px; - font-weight: 400; - margin-top: 8px; - margin-right: 3px; - } -`; diff --git a/src/components/CouponList/CouponOld/CouponWait.tsx b/src/components/CouponList/CouponOld/CouponWait.tsx deleted file mode 100644 index 92ac74c0..00000000 --- a/src/components/CouponList/CouponOld/CouponWait.tsx +++ /dev/null @@ -1,299 +0,0 @@ -import styled from '@emotion/styled'; -import waitIcon from '@assets/icons/CouponList/ic_expose_wait.svg'; -import centerIcon from '@assets/icons/CouponList/ic_center.svg'; - -const CouponWait = () => { - return ( -
- - - - waitIcon - 쿠폰 노출 대기 - - - - 적용 객실 - 전체 - - - - 크리스마스 이벤트1 - 모든 고객 10% 할인 - - - - - 다운로드 -

50

- - - 사용완료 -

50

- - - - -
가격 조건
-

300,000원 이상

- - -
일정 조건
-

2박 이상, 금~토

- - - - -
노출 일자
-

2023.12.01 ~ 2023.12.31

- - -
등록일
-
2023.12.01
- - - - - centerIcon - - - -
- ); -}; - -export default CouponWait; - -const CouponHeader = styled.div` - width: 219px; - height: 77px; - - border-radius: 10.608px 10.608px 0px 0px; - - display: flex; - flex-direction: column; - justify-content: center; - - background: #b1b1b1; -`; - -const ExposeContainer = styled.div` - display: flex; - justify-content: space-between; - padding: 4px 10px; -`; - -const ExposeWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ExposeText = styled.div` - color: #202325; - - margin-left: 2px; - - font-size: 12px; -`; - -const RoomWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const ApplyRoom = styled.div` - position: relative; - - width: 194px; - height: 31px; - - padding-top: 12px; - padding-left: 10px; - border-radius: 8px; - - background-color: ${props => props.theme.colors.white}; - - font-size: 10px; - color: #404446; -`; - -const RoomButton = styled.button` - position: absolute; - - width: 113px; - height: 23px; - - margin-left: 76px; - border-radius: 12px; - border: 1px solid #6c7072; - - background-color: transparent; - - color: #6c7072; - font-size: 11px; -`; - -const CouponNabWrap = styled.div` - width: 217px; - height: 72px; - - margin-left: 1px; - padding: 15px; - box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25); - border-bottom: 2px dashed #cdcfd0; - - background-color: ${props => props.theme.colors.white}; -`; - -const CouponTitle = styled.div` - color: #6c7072; - font-size: 13px; -`; - -const CouponCustomer = styled.div` - font-size: 16.997px; - font-weight: 700; - - margin-top: 5px; - color: #202325; -`; - -const CouponMain = styled.div` - width: 217px; - height: 245px; - - margin-left: 1px; - border-bottom: 1px dashed #b2b2b2; - - display: flex; - flex-direction: column; - align-items: center; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - background: #fafafb; -`; - -const CountWrap = styled.div` - display: flex; - margin-top: 10px; -`; - -const CountItemWrap = styled.div` - width: 79px; - height: 83px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 8px; - - border-radius: 12px; - - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - p { - color: #404446; - font-size: 18px; - font-weight: 700; - } -`; - -const CountItemText = styled.div` - font-size: 12px; - font-weight: 600; - color: #757676; - margin: 5px; -`; - -const ConditionWrap = styled.div` - width: 176px; - height: 56px; - - display: flex; - flex-direction: column; - padding: 16px 15px 13px 14px; - margin-top: 5px; - - border-radius: 12px; - background-color: ${props => props.theme.colors.white}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); -`; - -const ConditionWrapText = styled.div` - display: flex; - margin-top: 2px; - - div { - color: #404446; - font-size: 11px; - font-weight: 600; - margin-right: 10px; - } - - p { - color: #404446; - font-size: 11px; - font-weight: 400; - } -`; - -const ExposeDateContainer = styled.div` - margin-top: 18px; -`; - -const ExposeDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #404446; - font-size: 11px; - font-weight: 600; - margin-right: 3px; - } - - p { - color: ${props => props.theme.colors.pink500}; - font-size: 12px; - font-weight: 700; - text-decoration-line: underline; - } -`; - -const RegisterDateWrap = styled.div` - display: flex; - align-items: center; - - div { - color: #757676; - font-size: 9.724px; - font-weight: 400; - margin-top: 8px; - margin-right: 3px; - } -`; - -const ButtonWrap = styled.div` - display: flex; - margin-left: 115px; - margin-top: -3px; - - button { - background: transparent; - border: none; - color: #6c7072; - font-size: 11px; - font-style: normal; - font-weight: 700; - cursor: pointer; - } -`; From bd45f48abea323ca16da8953e245a4b1a852442d Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 20:11:20 +0900 Subject: [PATCH 24/28] =?UTF-8?q?fix=20:=20=EB=82=A0=EC=A7=9C=20.=20?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20replace=20=ED=95=A8=EC=88=98=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpired/index.tsx | 19 +++++++++++++------ .../CouponItem/CouponExpose/index.tsx | 19 +++++++++++++------ .../CouponItem/CouponStop/index.tsx | 19 +++++++++++++------ .../CouponItem/CouponWait/index.tsx | 19 +++++++++++++------ src/components/CouponList/CouponNav/index.tsx | 2 -- src/utils/lib/couponCondition.ts | 9 +++++++-- 6 files changed, 59 insertions(+), 28 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 4ca8beb0..914a622f 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -24,6 +24,10 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { useOutsideClick(roomListRef, () => setIsShowRoomList(false)); + const formatDate = (dateString: string) => { + return dateString.replace(/-/g, '.'); + }; + const handleRoomList = () => { setIsShowRoomList(!isShowRoomList); }; @@ -91,10 +95,10 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition( - couponInfo.coupon_use_condition_days, - couponInfo.coupon_use_condition_day_of_week - )} + {couponCondition({ + day: couponInfo.coupon_use_condition_days, + dayOfWeek: couponInfo.coupon_use_condition_days + })} @@ -149,12 +153,15 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { 노출기간 - {couponInfo.exposure_start_date} ~ {couponInfo.exposure_end_date} + {formatDate(couponInfo.exposure_start_date)} ~{' '} + {formatDate(couponInfo.exposure_end_date)} 등록일 - {couponInfo.created_date} + + {formatDate(couponInfo.created_date)} + 삭제 diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index b107a02b..363a3fc7 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -28,6 +28,10 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); + const formatDate = (dateString: string) => { + return dateString.replace(/-/g, '.'); + }; + const handleRoomList = () => { setIsShowRoomList(!isShowRoomList); }; @@ -149,10 +153,10 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition( - couponInfo.coupon_use_condition_days, - couponInfo.coupon_use_condition_day_of_week - )} + {couponCondition({ + day: couponInfo.coupon_use_condition_days, + dayOfWeek: couponInfo.coupon_use_condition_days + })} @@ -207,12 +211,15 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { 노출기간 - {couponInfo.exposure_start_date} ~ {couponInfo.exposure_end_date} + {formatDate(couponInfo.exposure_start_date)} ~{' '} + {formatDate(couponInfo.exposure_end_date)} 등록일 - {couponInfo.created_date} + + {formatDate(couponInfo.created_date)} + diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index e241b060..af4d7dfc 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -29,6 +29,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { useOutsideClick(roomListRef, () => setIsShowRoomList(false)); + const formatDate = (dateString: string) => { + return dateString.replace(/-/g, '.'); + }; + const handleRoomList = () => { setIsShowRoomList(!isShowRoomList); }; @@ -148,10 +152,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition( - couponInfo.coupon_use_condition_days, - couponInfo.coupon_use_condition_day_of_week - )} + {couponCondition({ + day: couponInfo.coupon_use_condition_days, + dayOfWeek: couponInfo.coupon_use_condition_days + })} @@ -206,12 +210,15 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { 노출기간 - {couponInfo.exposure_start_date} ~ {couponInfo.exposure_end_date} + {formatDate(couponInfo.exposure_start_date)} ~ + {formatDate(couponInfo.exposure_end_date)} 등록일 - {couponInfo.created_date} + + {formatDate(couponInfo.created_date)} + diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index 4cadf7b0..fefd19ea 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -30,6 +30,10 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { useOutsideClick(roomListRef, () => setIsShowRoomList(false)); + const formatDate = (dateString: string) => { + return dateString.replace(/-/g, '.'); + }; + const handleRoomList = () => { setIsShowRoomList(!isShowRoomList); }; @@ -109,10 +113,10 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {couponCondition( - couponInfo.coupon_use_condition_days, - couponInfo.coupon_use_condition_day_of_week - )} + {couponCondition({ + day: couponInfo.coupon_use_condition_days, + dayOfWeek: couponInfo.coupon_use_condition_days + })} @@ -167,12 +171,15 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { 노출기간 - {couponInfo.exposure_start_date} ~ {couponInfo.exposure_end_date} + {formatDate(couponInfo.exposure_start_date)} ~ + {formatDate(couponInfo.exposure_end_date)} 등록일 - {couponInfo.created_date} + + {formatDate(couponInfo.created_date)} + diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 4630ae74..0327dfb5 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -159,8 +159,6 @@ const TabContainer = styled.div` `; const TabNavContainer = styled.div` - margin: 19px 0px; - display: flex; justify-content: space-between; flex-wrap: wrap; diff --git a/src/utils/lib/couponCondition.ts b/src/utils/lib/couponCondition.ts index dacbd464..51f27abd 100644 --- a/src/utils/lib/couponCondition.ts +++ b/src/utils/lib/couponCondition.ts @@ -1,4 +1,9 @@ -export const couponCondition = (day: string, dayOfWeek: string): string => { +export interface CouponConditionProps { + day: string | null; + dayOfWeek: string | null; +} + +export const couponCondition = ({ day, dayOfWeek }: CouponConditionProps) => { if (day === '하루만') { return `${dayOfWeek}`; } else if (day === '평일') { @@ -6,7 +11,7 @@ export const couponCondition = (day: string, dayOfWeek: string): string => { } else if (day === '주말') { return '금~토'; } - return day; + return '전체'; }; export default couponCondition; From 6c35f9e6c59ba872b28e0757b6068bff7e8ed7c8 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 20:24:14 +0900 Subject: [PATCH 25/28] =?UTF-8?q?fix:=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=BB=A8=EB=B2=A4=EC=85=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponMain/index.tsx | 25 ++++++++++--------- src/components/CouponList/CouponNav/index.tsx | 20 ++++++++------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index baf56458..c3ae9229 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -11,10 +11,7 @@ import { import theme from '@styles/theme'; import mobileRegister from '@assets/icons/ic-couponlist-mobileregister.svg'; import categoryTabState from '@recoil/atoms/categoryTabState'; -import { - CouponInformationResponse, - CouponListResponse -} from '@/types/couponList'; +import { CouponListResponse } from '@/types/couponList'; interface CouponMainProps { coupons: CouponListResponse; @@ -95,10 +92,12 @@ const MainContainer = styled.div` margin: 20px 20px 0px 20px; border-radius: 10px; padding-bottom:30px; + display: flex; justify-content: center; gap: 27px; align-items: center; + background-color: ${theme.colors.white}; `; @@ -107,6 +106,7 @@ const TabBottomWrap = styled.div` @media (max-width: 656px) { margin: 20px 28px -5px 28px; + display: flex; align-items: center; } @@ -134,12 +134,7 @@ const SecondTabCount = styled.div` font-weight: 700; @media (max-width: 656px) { - leading-trim: both; - - text-edge: cap; - font-family: 'Noto Sans KR'; font-size: 11px; - font-style: normal; font-weight: 700; white-space: nowrap; } @@ -152,11 +147,12 @@ const CouponDescription = styled.div` font-weight: 700; @media (max-width: 656px) { + width: 220px; + font-size: 10.5px; font-style: normal; font-weight: 400; line-height: 14px; - width: 220px; } `; @@ -167,18 +163,23 @@ const MobileRegister = styled.div` position: absolute; bottom: 0; left: 0; + margin-left: 15px; margin-bottom: 15px; + display: flex; + cursor: pointer; p { position: absolute; + + margin-left: 68px; + margin-top: 23px; + color: ${theme.colors.white}; font-size: 14px; font-weight: 600; - margin-left: 68px; - margin-top: 23px; } } `; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 0327dfb5..d1c09055 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -153,6 +153,7 @@ const TabContainer = styled.div` z-index: 60; margin: 0px; + background-color: ${theme.colors.white}; box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2); } @@ -273,10 +274,11 @@ const SearchImg = styled.img` margin-left: 20px; @media (max-width: 656px) { - margin-top: 10px; - margin-left: 10px; width: 18px; height: 18px; + + margin-top: 10px; + margin-left: 10px; } `; @@ -297,6 +299,7 @@ const SearchButton = styled.button` @media (max-width: 656px) { width: 70px; + font-size: 14px; } `; @@ -330,9 +333,10 @@ const SecondTabName = styled.div` font-weight: 700; @media (max-width: 656px) { + white-space: nowrap; + font-size: 11px; font-weight: 700; - white-space: nowrap; } `; @@ -344,10 +348,6 @@ const SecondTabCount = styled.div` font-weight: 700; @media (max-width: 656px) { - leading-trim: both; - - text-edge: cap; - font-family: 'Noto Sans KR'; font-size: 11px; font-style: normal; font-weight: 700; @@ -362,11 +362,12 @@ const CouponDescription = styled.div` font-weight: 700; @media (max-width: 656px) { + width: 220px; + font-size: 10.5px; font-style: normal; font-weight: 400; line-height: 14px; - width: 220px; } `; @@ -380,10 +381,11 @@ const ResisterPeriodWrap = styled.div` `; const ResisterPeriodTitle = styled.div` + margin: 0px 5px; + color: #a4a4a4; font-size: 12px; font-weight: 400; - margin: 0px 5px; `; const ResisterPeriod = styled.div` From a06a65e92d57d624cf8e7a1786bf4fe05fb9471e Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 20:37:55 +0900 Subject: [PATCH 26/28] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=85=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpired/index.tsx | 2 -- src/pages/CouponList/index.tsx | 2 +- src/types/couponList.ts | 25 +++++++++++++------ src/utils/lib/concatTitle.ts | 6 +---- src/utils/lib/couponCondition.ts | 5 +--- src/utils/lib/roomListPosition.ts | 9 ++----- 6 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 914a622f..ce898b30 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -36,7 +36,6 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { setIsShowModal(true); }; - // 모달 확인 버튼에 대한 동작 const handleModalConfirm = () => { try { mutateAsync({ coupon_number: couponInfo.coupon_number }); @@ -48,7 +47,6 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { setIsShowModal(false); }; - // 모달 취소 버튼에 대한 동작 const handleModalClose = () => { setIsShowModal(false); }; diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index a5b1b7fa..16d5cb7d 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -62,7 +62,7 @@ const CouponList = () => { return () => { observer.disconnect(); }; - }, [page]); // 의존성 배열에 필요한 상태 변수 추가 가능 + }, [page]); const handleChangeSearch = (value: string) => { setSearch(value); diff --git a/src/types/couponList.ts b/src/types/couponList.ts index 45ac31e6..f45a4c5d 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -1,3 +1,5 @@ +import { RefObject } from 'react'; + export interface ToggleStyleProps { $isToggle: boolean; } @@ -97,10 +99,19 @@ export interface CategoryTab { categoryTab: string; } -// HACK : 쿠폰 요청 타입 -// export interface GetCouponListCredential { -// accommodationId: number; -// date?: string; -// status?: string; -// title?: string; -// } +export interface RoomListStyleProps { + isShowRoomList: boolean; + roomListStyleRef: RefObject; + setIsBottom: (isBottom: boolean) => void; +} + +export interface CouponConditionProps { + day: string | null; + dayOfWeek: string | null; +} + +export interface ConcatTitleProps { + customer_type: string; + discount_flat_rate: number | null; + discount_flat_value: number | null; +} diff --git a/src/utils/lib/concatTitle.ts b/src/utils/lib/concatTitle.ts index 3bf5afeb..5358d93a 100644 --- a/src/utils/lib/concatTitle.ts +++ b/src/utils/lib/concatTitle.ts @@ -1,8 +1,4 @@ -export interface ConcatTitleProps { - customer_type: string; - discount_flat_rate: number | null; - discount_flat_value: number | null; -} +import { ConcatTitleProps } from '@/types/couponList'; export const concatTitle = ({ customer_type, diff --git a/src/utils/lib/couponCondition.ts b/src/utils/lib/couponCondition.ts index 51f27abd..0d4fc0ef 100644 --- a/src/utils/lib/couponCondition.ts +++ b/src/utils/lib/couponCondition.ts @@ -1,7 +1,4 @@ -export interface CouponConditionProps { - day: string | null; - dayOfWeek: string | null; -} +import { CouponConditionProps } from '@/types/couponList'; export const couponCondition = ({ day, dayOfWeek }: CouponConditionProps) => { if (day === '하루만') { diff --git a/src/utils/lib/roomListPosition.ts b/src/utils/lib/roomListPosition.ts index 5984a879..f9e0fa9b 100644 --- a/src/utils/lib/roomListPosition.ts +++ b/src/utils/lib/roomListPosition.ts @@ -1,10 +1,5 @@ -import { RefObject, useEffect } from 'react'; - -export interface RoomListStyleProps { - isShowRoomList: boolean; - roomListStyleRef: RefObject; - setIsBottom: (isBottom: boolean) => void; -} +import { RoomListStyleProps } from '@/types/couponList'; +import { useEffect } from 'react'; export const useUpdateRoomListPosition = ({ isShowRoomList, From d0ffe37fa1de57cf4ca4d08b3a9fac6ad0d39d5a Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 20:38:49 +0900 Subject: [PATCH 27/28] =?UTF-8?q?fix:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CouponList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index 16d5cb7d..5d72ba15 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -47,7 +47,7 @@ const CouponList = () => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { - console.log(page); + // console.log(page); if (couponRef.current && page <= couponRef.current.total_pages) { setPage(prev => prev + 1); } From 9f804cba7bae45626db03ff43307a5e41515736b Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Sat, 27 Jan 2024 20:55:10 +0900 Subject: [PATCH 28/28] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20z-i?= =?UTF-8?q?ndex=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/ToastContext/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index 1f82df4e..ef582207 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -52,6 +52,7 @@ const ToastContainer = styled.div` bottom: 50px; left: 50%; transform: translateX(-50%); + z-index: 100; width: 336px;