[#80] 조회 페이지 추가 작업

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",
@@ -39,6 +40,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",

src/api/lib/getCouponList.ts

@@ -11,12 +11,14 @@ export const getCouponList = async (
   accommodationId: number,
   date?: string,
   status?: string,
-  title?: string
+  title?: string,
+  size?: number
 ): Promise<CouponListResponse> => {
   const params = {
     date,
     status,
-    title
+    title,
+    size
   };
   const response = await instance.get(
     `/v1/accommodations/${accommodationId}/coupons`,
@@ -46,13 +48,23 @@ 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;
   await new Promise(resolve => setTimeout(resolve, 500));
   const response = await instance.put(
     `/v1/coupons/${couponNumber}/expose`,
     credential
   );
+
   return response.data;
 };

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 (
     <BannerContainer>
@@ -22,7 +22,7 @@ const CouponBanner = () => {
           <TabBannerTitle>이번 달 우리 지역 인기 쿠폰</TabBannerTitle>
           <TabBannerContent>
             {sigunguData}에서 가장 많이 사용된 쿠폰은?
-            {/* <span>{data.first_coupon_title}쿠폰</span>이에요! */}
+            <span>{data.first_coupon_title}쿠폰</span>이에요!
           </TabBannerContent>
         </div>
       </TabBanner>
@@ -33,7 +33,11 @@ const CouponBanner = () => {
 export default CouponBanner;
 
 const BannerContainer = styled.div`
-  margin: 20px 50px;
+  margin: 20px 25px;
+
+  @media (max-width: 656px) {
+    display: none;
+  }
 `;
 
 const TabBanner = styled.div`

src/components/CouponList/CouponHeader/index.tsx

@@ -28,17 +28,25 @@ 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: 656px) {
+    display: none;
+  }
 `;
 
 const CouponHeaderWrapper = styled.div`
   display: flex;
   align-items: center;
+
+  @media (max-width: 656px) {
+    display: flex;
+  }
 `;
 
 const CouponTitle = styled.div`

src/components/CouponList/CouponItem/CouponExpired/index.tsx

@@ -5,21 +5,29 @@ 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';
+import concatTitle from '@utils/lib/concatTitle';
 
 const CouponExpired = ({ couponInfo }: CouponListProps) => {
   const [isShowRoomList, setIsShowRoomList] = useState(false);
   const roomListRef = useRef<HTMLDivElement>(null);
   const [isShowModal, setIsShowModal] = useState(false);
   const { mutateAsync } = useCouponDelete();
   const { showToast } = useToast();
+  const roomListStyleRef = useRef<HTMLDivElement>(null);
+  const [isBottom, setIsBottom] = useState(false); // RoomList가 하단에 닿았는지 여부를 나타내는 상태
 
   useOutsideClick(roomListRef, () => setIsShowRoomList(false));
 
+  const formatDate = (dateString: string) => {
+    return dateString.replace(/-/g, '.');
+  };
+
   const handleRoomList = () => {
     setIsShowRoomList(!isShowRoomList);
   };
@@ -28,7 +36,6 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
     setIsShowModal(true);
   };
 
-  // 모달 확인 버튼에 대한 동작
   const handleModalConfirm = () => {
     try {
       mutateAsync({ coupon_number: couponInfo.coupon_number });
@@ -40,19 +47,27 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
     setIsShowModal(false);
   };
 
-  // 모달 취소 버튼에 대한 동작
   const handleModalClose = () => {
     setIsShowModal(false);
   };
 
+  // 객실 리스트 스크롤에 따라 위치 조정
+  useUpdateRoomListPosition({ isShowRoomList, roomListStyleRef, setIsBottom });
+
   return (
     <CouponContainer>
       <CouponHeaderContainer>
         <CouponHeader>
           <CouponTitle>{couponInfo.title}</CouponTitle>
           <CouponStatus>기간만료</CouponStatus>
         </CouponHeader>
-        <CouponCustomer>{couponInfo.coupon_concat_title}</CouponCustomer>
+        <CouponCustomer>
+          {concatTitle({
+            customer_type: couponInfo.customer_type,
+            discount_flat_rate: couponInfo.discount_flat_rate,
+            discount_flat_value: couponInfo.discount_flat_value
+          })}
+        </CouponCustomer>
       </CouponHeaderContainer>
       <CouponMain>
         <CountWrap>
@@ -67,15 +82,21 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
           <ContentWrap>
             <ContentTitle>가격</ContentTitle>
             <ContentValue>
-              {couponInfo.minimum_reservation_price}원 이상
+              {new Intl.NumberFormat().format(
+                couponInfo.minimum_reservation_price as number
+              )}
+              원 이상
             </ContentValue>
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>일정</ContentTitle>
             <ContentValue>
               {couponRoomType(couponInfo.coupon_room_types).join(', ')},
               <span>
-                {couponCondition(couponInfo.coupon_use_condition_days)}
+                {couponCondition({
+                  day: couponInfo.coupon_use_condition_days,
+                  dayOfWeek: couponInfo.coupon_use_condition_days
+                })}
               </span>
             </ContentValue>
           </ContentWrap>
@@ -85,15 +106,21 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
               <ContentValue>전체</ContentValue>
             ) : (
               <>
-                <ContentRoom onClick={handleRoomList}>
+                <ContentRoom
+                  ref={roomListRef}
+                  onClick={handleRoomList}
+                >
                   <div>일부 객실</div>
                   <img
                     src={rightIcon}
                     alt="오른쪽 화살표"
                   />
                 </ContentRoom>
                 {isShowRoomList && (
-                  <RoomList ref={roomListRef}>
+                  <RoomList
+                    $isBottom={isBottom}
+                    ref={roomListStyleRef}
+                  >
                     <RoomListTitleWrap>
                       <RoomListTitle>쿠폰 적용 객실</RoomListTitle>
                       <img
@@ -124,12 +151,15 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
         <ExposeDateWrap>
           <ExposeDateTitle>노출기간</ExposeDateTitle>
           <ExposeValue>
-            {couponInfo.exposure_start_date} ~ {couponInfo.exposure_end_date}
+            {formatDate(couponInfo.exposure_start_date)} ~{' '}
+            {formatDate(couponInfo.exposure_end_date)}
           </ExposeValue>
         </ExposeDateWrap>
         <ExposeDateWrap>
           <RegisterDateTitle>등록일</RegisterDateTitle>
-          <RegisterDateValue>{couponInfo.created_date}</RegisterDateValue>
+          <RegisterDateValue>
+            {formatDate(couponInfo.created_date)}
+          </RegisterDateValue>
         </ExposeDateWrap>
       </DateContainer>
       <Delete onClick={handleDeleteClick}>삭제</Delete>
@@ -342,33 +372,42 @@ const ContentRoom = styled.div`
   }
 `;
 
-const RoomList = styled.div`
+const RoomList = styled.div<RoomListProps>`
   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'};
   }
 `;