diff --git a/src/hooks/useFetchCoupons.jsx b/src/hooks/useFetchCoupons.jsx index 7fb9b0b..6ccf801 100644 --- a/src/hooks/useFetchCoupons.jsx +++ b/src/hooks/useFetchCoupons.jsx @@ -4,7 +4,7 @@ import commonApis from "../utils/commonApis"; const apiUrl = `/coupon`; const useFetchCoupons = () => { - const [coupons, setCoupons] = useState([]); + const [coupons, setCoupons] = useState(null); // null || [] const token = localStorage.getItem("accessToken"); useEffect(() => { @@ -12,8 +12,8 @@ const useFetchCoupons = () => { try { const response = await commonApis.get(apiUrl, { headers: { - Authorization: `Bearer ${token}` - } + Authorization: `Bearer ${token}`, + }, }); setCoupons(response.data.coupons); } catch (error) { diff --git a/src/pages/CouponPage/CouponPage.css b/src/pages/CouponPage/CouponPage.css index 25ba887..e89c609 100644 --- a/src/pages/CouponPage/CouponPage.css +++ b/src/pages/CouponPage/CouponPage.css @@ -51,28 +51,28 @@ line-height: 130%; /* 1.1375rem */ text-align: left; margin-left: 1.25rem; - margin-top: 0.81rem; + margin-top: 0.44rem; } - -.coupon-page__coupon-item__expirationDate { - color: #838383; +.coupon-page__coupon-item__Box { + margin-top: 0.44rem; + margin-left: 1.25rem; + margin-right: 1.25rem; font-family: "Pretendard Variable"; + text-align: left; font-weight: 600; font-size: 0.6875rem; + color: #838383; line-height: 130%; /* 0.89375rem */ - text-align: left; - margin-left: 1.25rem; - margin-top: 0.31rem; } - -.coupon-page__coupon-item__description { +.coupon-page__coupon-item__expirationDate { color: #838383; - font-family: "Pretendard Variable"; - font-weight: 600; - font-size: 0.6875rem; line-height: 130%; /* 0.89375rem */ - text-align: left; - margin-left: 1.25rem; +} + +.coupon-page__coupon-item__description { + width: 100%; + display: flex; + justify-content: space-between; } .coupon-page__empty { diff --git a/src/pages/CouponPage/CouponPage.jsx b/src/pages/CouponPage/CouponPage.jsx index 5ec73da..36b0e5c 100644 --- a/src/pages/CouponPage/CouponPage.jsx +++ b/src/pages/CouponPage/CouponPage.jsx @@ -1,9 +1,9 @@ import { useLocation, useNavigate } from "react-router-dom"; import Header from "../../components/views/Header/Header"; import Empty from "../../components/views/PageComponent/Empty"; +import Loading from "../../components/views/PageComponent/Loading"; import useFetchCoupons from "../../hooks/useFetchCoupons"; import "./CouponPage.css"; - const CouponPage = () => { const navigate = useNavigate(); const location = useLocation(); @@ -21,13 +21,17 @@ const CouponPage = () => { linkTo: storeId && inout && cartId ? `/payment?storeId=${storeId}&inout=${inout}&cartId=${cartId}` - // 쿠폰함은 멤버십페이지, 메인 페이지에서 접근 가능, 뒤로가기 시, window.history.back()을 하기 위해서 - : null, + : // 쿠폰함은 멤버십페이지, 메인 페이지에서 접근 가능, 뒤로가기 시, window.history.back()을 하기 위해서 + null, }} />