[#69] 쿠폰 수정 & 삭제 API , 쿠폰 배너 API 구현

src/api/index.ts

@@ -1,9 +1,14 @@
 export { default as instance } from './lib/instance';
 export { default as postLogin } from './lib/postLogin';
 export { default as postRefreshToken } from './lib/postRefreshToken';
+export {
+  getCouponList,
+  couponUpdateApi,
+  couponDeleteApi,
+  couponToggleApi
+} from './lib/getCouponList';
 export { default as getTotalReport } from './lib/getTotalReport';
 export { default as getYearReport } from './lib/getYearReport';
-export { default as getCouponList } from './lib/getCouponList';
 export { default as getHeaderAccommodation } from './lib/getHeaderAccommodation';
 export { default as getMonthReports } from './lib/getMonthReports';
 export { default as getDailyReport } from './lib/getDailyReport';

src/api/lib/getCouponList.ts

@@ -1,8 +1,13 @@
-import { CouponListResponse } from '@/types/couponList';
+import {
+  CouponDeleteCredential,
+  CouponListResponse,
+  CouponToggleCredential,
+  CouponUpdateCredential
+} from '@/types/couponList';
 import { instance } from '..';
 
 // 쿠폰 정보 가져오는 api
-const getCouponList = async (
+export const getCouponList = async (
   accommodationId: number,
   date?: string,
   status?: string,
@@ -22,4 +27,31 @@ const getCouponList = async (
   return response.data;
 };
 
-export default getCouponList;
+// 쿠폰 수정 api
+export const couponUpdateApi = async (credential: CouponUpdateCredential) => {
+  const couponNumber = credential.coupon_number;
+  const response = await instance.put(
+    `/v1/coupons/${couponNumber}`,
+    credential
+  );
+  return response.data;
+};
+
+// 쿠폰 삭제 api
+export const couponDeleteApi = async (
+  credential: CouponDeleteCredential
+): Promise<void> => {
+  const couponNumber = credential.coupon_number;
+  const response = await instance.delete(`/v1/coupons/${couponNumber}`);
+  return response.data;
+};
+
+// 토클 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;
+};

src/components/CouponList/CouponBanner/index.tsx

@@ -2,8 +2,15 @@ import styled from '@emotion/styled';
 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';
 
 const CouponBanner = () => {
+  const headerAccommodation = useRecoilValue(headerAccommodationState);
+  const sigunguData = headerAccommodation.sigungu;
+  // const { data } = useGetCouponRanking(headerAccommodation.id);
+
   return (
     <BannerContainer>
       <TabBanner>
@@ -14,7 +21,8 @@ const CouponBanner = () => {
         <div>
           <TabBannerTitle>이번 달 우리 지역 인기 쿠폰</TabBannerTitle>
           <TabBannerContent>
-            OO구에서 가장 많이 사용된 쿠폰은? 재방문 고객 20% 할인쿠폰 이에요!
+            {sigunguData}에서 가장 많이 사용된 쿠폰은?
+            {/* <span>{data.first_coupon_title}쿠폰</span>이에요! */}
           </TabBannerContent>
         </div>
       </TabBanner>
@@ -46,9 +54,16 @@ const TabBanner = styled.div`
 const TabBannerTitle = styled.div`
   font-size: 12px;
   font-style: normal;
+  font-weight: 500;
   margin-bottom: 6px;
 `;
 const TabBannerContent = styled.div`
   font-size: 17px;
   font-style: normal;
+  font-weight: 500;
+
+  span {
+    margin: 0px 5px;
+    border-bottom: 1px solid;
+  }
 `;

src/components/CouponList/CouponHeader/index.tsx

@@ -69,6 +69,10 @@ const CouponRegisterButton = styled.div`
 
   font-size: 17px;
   color: ${theme.colors.white};
-  background: #ff3478;
+  background: linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%);
   cursor: pointer;
+
+  &:hover {
+    background: #b22655;
+  }
 `;

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

@@ -4,18 +4,37 @@ import { useRef, useState } from 'react';
 import theme from '@styles/theme';
 import rightIcon from '@assets/icons/ic-couponlist-right.svg';
 import deleteIcon from '@assets/icons/ic-couponlist-delete.svg';
-import { useOutsideClick } from '@hooks/index';
+import { useCouponDelete, useOutsideClick } from '@hooks/index';
 import { CouponListProps } from '@/types/couponList';
+import Modal from '@components/modal';
+import CouponCondition from '@utils/lib/couponCondition';
 
 const CouponExpired = ({ couponInfo }: CouponListProps) => {
   const [isShowRoomList, setIsShowRoomList] = useState(false);
   const roomListRef = useRef<HTMLDivElement>(null);
+  const [isShowModal, setIsShowModal] = useState(false);
+  const { mutateAsync } = useCouponDelete();
+
+  useOutsideClick(roomListRef, () => setIsShowRoomList(false));
 
   const handleRoomList = () => {
     setIsShowRoomList(!isShowRoomList);
   };
 
-  useOutsideClick(roomListRef, () => setIsShowRoomList(false));
+  const handleDeleteClick = () => {
+    setIsShowModal(true);
+  };
+
+  // 모달 확인 버튼에 대한 동작
+  const handleModalConfirm = () => {
+    mutateAsync({ coupon_number: couponInfo.coupon_number });
+    setIsShowModal(false);
+  };
+
+  // 모달 취소 버튼에 대한 동작
+  const handleModalClose = () => {
+    setIsShowModal(false);
+  };
 
   return (
     <CouponContainer>
@@ -44,7 +63,12 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>일정</ContentTitle>
-            <ContentValue>{couponInfo.coupon_room_type}</ContentValue>
+            <ContentValue>
+              {couponInfo.coupon_room_type},
+              <span>
+                {CouponCondition(couponInfo.coupon_use_condition_days)}
+              </span>
+            </ContentValue>
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>객실</ContentTitle>
@@ -95,7 +119,15 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
           <RegisterDateValue>{couponInfo.created_date}</RegisterDateValue>
         </ExposeDateWrap>
       </DateContainer>
-      <Delete>삭제</Delete>
+      <Delete onClick={handleDeleteClick}>삭제</Delete>
+      {isShowModal && (
+        <Modal
+          modalText={`"${couponInfo.title}"을 삭제하시겠습니까?`}
+          subText={true}
+          onConfirmClick={handleModalConfirm}
+          onCloseClick={handleModalClose}
+        />
+      )}
     </CouponContainer>
   );
 };
@@ -217,6 +249,10 @@ const ContentValue = styled.div`
   font-size: 11px;
   font-style: normal;
   font-weight: 400;
+
+  span {
+    margin-left: 3px;
+  }
 `;
 
 const DateContainer = styled.div`

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

@@ -7,15 +7,25 @@ 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 { useOutsideClick } from '@hooks/index';
+import { useOutsideClick, useToggleChange } from '@hooks/index';
+import { CouponCondition } from '@utils/lib/couponCondition';
 
 const CouponExpose = ({ couponInfo }: CouponListProps) => {
   const [isToggle, setIsToggle] = useState(true);
   const [isShowRoomList, setIsShowRoomList] = useState(false);
   const roomListRef = useRef<HTMLDivElement>(null);
+  const { mutateAsync } = useToggleChange();
 
   const handleToggle = () => {
     setIsToggle(!isToggle);
+    toggleUpdate();
+  };
+
+  const toggleUpdate = async () => {
+    await mutateAsync({
+      coupon_number: couponInfo.coupon_number,
+      coupon_status: '노출 OFF'
+    });
   };
 
   const handleRoomList = () => {
@@ -72,7 +82,12 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => {
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>일정</ContentTitle>
-            <ContentValue>{couponInfo.coupon_room_type}</ContentValue>
+            <ContentValue>
+              {couponInfo.coupon_room_type},
+              <span>
+                {CouponCondition(couponInfo.coupon_use_condition_days)}
+              </span>
+            </ContentValue>
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>객실</ContentTitle>
@@ -363,6 +378,10 @@ const ContentValue = styled.div`
   font-size: 11px;
   font-style: normal;
   font-weight: 400;
+
+  span {
+    margin-left: 3px;
+  }
 `;
 
 const DateContainer = styled.div`

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

@@ -7,13 +7,14 @@ 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 { useOutsideClick } from '@hooks/index';
+import { useOutsideClick, useToggleChange } from '@hooks/index';
+import CouponCondition from '@utils/lib/couponCondition';
 
 const CouponStop = ({ couponInfo }: CouponListProps) => {
   const [isToggle, setIsToggle] = useState(false);
   const [isShowRoomList, setIsShowRoomList] = useState(false);
   const roomListRef = useRef<HTMLDivElement>(null);
-
+  const { mutateAsync } = useToggleChange();
   useOutsideClick(roomListRef, () => setIsShowRoomList(false));
 
   const handleRoomList = () => {
@@ -22,6 +23,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => {
 
   const handleToggle = () => {
     setIsToggle(!isToggle);
+    mutateAsync({
+      coupon_number: couponInfo.coupon_number,
+      coupon_status: '노출 ON'
+    });
   };
 
   return (
@@ -72,7 +77,12 @@ const CouponStop = ({ couponInfo }: CouponListProps) => {
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>일정</ContentTitle>
-            <ContentValue>{couponInfo.coupon_room_type}</ContentValue>
+            <ContentValue>
+              {couponInfo.coupon_room_type},
+              <span>
+                {CouponCondition(couponInfo.coupon_use_condition_days)}
+              </span>
+            </ContentValue>
           </ContentWrap>
           <ContentWrap>
             <ContentTitle>객실</ContentTitle>
@@ -269,6 +279,10 @@ const ContentValue = styled.div`
   font-size: 11px;
   font-style: normal;
   font-weight: 400;
+
+  span {
+    margin-left: 3px;
+  }
 `;
 
 const DateContainer = styled.div`