diff --git a/src/assets/icons/ic-couponlist-delete.svg b/src/assets/icons/ic-couponlist-delete.svg new file mode 100644 index 00000000..63f87fd2 --- /dev/null +++ b/src/assets/icons/ic-couponlist-delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/ic-couponlist-right.svg b/src/assets/icons/ic-couponlist-right.svg new file mode 100644 index 00000000..fafb1c31 --- /dev/null +++ b/src/assets/icons/ic-couponlist-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx new file mode 100644 index 00000000..21895112 --- /dev/null +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -0,0 +1,227 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; + +const CouponExpired = () => { + return ( + + + + 2024 신년행사 + 기간만료 + + 모든 고객 10% 할인 + + + + 다운로드 + 50 + + + 사용완료 + 50 + +
+ + 가격 + 99,999,999원 이상 + + + 일정 + 2박 이상, 일~목 + + + 객실 + 전체 + +
+ + + + 노출기간 + 2024.01.31 ~ 2024.02.10 + + + 등록일 + 2024.12.01 + + + 삭제 + + ); +}; + +export default CouponExpired; + +const CouponContainer = styled.div` + position: relative; + + width: 290px; + height: 203px; + + border-radius: 8px; + + background: #ecf0fa; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25); +`; + +const CouponHeaderContainer = styled.div` + height: 64px; + + padding: 14px 10px 0 12px; + border-bottom: 1px dashed #8f8f8f; + + display: flex; + flex-direction: column; +`; + +const CouponHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +`; + +const CouponTitle = styled.div` + color: #8f8f8f; + font-size: 11px; + font-weight: 600; +`; + +const CouponStatus = styled.div` + width: 50px; + height: 22.927px; + + border-radius: 22.927px; + + display: flex; + align-items: center; + justify-content: center; + + font-size: 10px; + color: #757676; + background: ${theme.colors.white}; +`; + +const CouponCustomer = styled.div` + color: #757676; + font-size: 18px; + font-weight: 700; +`; + +const CouponMain = styled.div` + padding: 12px 10px 0 12px; + + display: flex; + align-items: center; +`; + +const CountWrap = styled.div` + width: 58px; + height: 62px; + + margin-right: 7.5px; + border-radius: 10px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${theme.colors.white}; +`; + +const CountText = styled.div` + color: #8f8f8f; + text-align: center; + font-size: 11px; + font-weight: 600; +`; + +const CountNumber = styled.div` + margin-top: 5px; + + color: #757676; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 700; +`; + +const ContentWrap = styled.div` + margin: 8px; + + display: flex; + align-items: center; +`; + +const ContentTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ContentValue = styled.div` + color: #8f8f8f; + font-size: 11px; + font-style: normal; + font-weight: 400; +`; + +const DateContainer = styled.div` + padding: 9px 0 0 12px; +`; + +const ExposeDateWrap = styled.div` + margin-bottom: 4px; + + display: flex; + align-items: center; +`; + +const ExposeDateTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ExposeValue = styled.div` + color: #757676; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const RegisterDateTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; + +const RegisterDateValue = styled.div` + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; + +const Delete = styled.div` + position: absolute; + right: 0; + bottom: 0; + + margin-right: 14px; + margin-bottom: 14px; + + color: #757676; + font-size: 11px; + cursor: pointer; +`; diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx new file mode 100644 index 00000000..df7a400b --- /dev/null +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -0,0 +1,421 @@ +import { useEffect, useRef, useState } from 'react'; +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +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 { ToggleStyleProps } from '@/types/couponList'; + +const CouponExpose = () => { + const [isToggle, setIsToggle] = useState(true); + const [isRoomList, setIsRoomList] = useState(false); + const roomListRef = useRef(null); + + const handleToggle = () => { + setIsToggle(!isToggle); + }; + + const handleRoomList = () => { + setIsRoomList(!isRoomList); + }; + + useEffect(() => { + const handleClickListOutside = (e: MouseEvent) => { + if ( + roomListRef.current && + !roomListRef.current.contains(e.target as Node) + ) { + setIsRoomList(false); + } + }; + document.addEventListener('mousedown', handleClickListOutside); + + return () => { + document.removeEventListener('mousedown', handleClickListOutside); + }; + }); + + return ( + + + + 2024 신년행사 + + {isToggle ? ( + <> + ON + + + ) : ( + <> + + OFF + + )} + + + 모든 고객 10% 할인 + + + + 다운로드 + 50 + + + 사용완료 + 50 + + + + 가격 + 99,999,999원 이상 + + + 일정 + 2박 이상, 일~목 + + + 객실 + +
일부 객실
+ 오른쪽 화살표 + + {isRoomList && ( + + + 쿠폰 적용 객실 + 리스트 닫기 아이콘 + + +
    +
  • 스탠다드 더블
    • +
  • 스탠다드 트윈
    • +
  • 프리미엄 스위트 더블 디럭스
    • +
  • 프리미엄 스위트 더블 디럭스
    • +
  • 프리미엄 스위트 더블 디럭스
    • +
+ + + )} + + + + + + + + 노출기간 + 2024.01.31 ~ 2024.02.10 + + + 등록일 + 2024.12.01 + + + + ); +}; + +export default CouponExpose; + +const CouponContainer = styled.div` + position: relative; + + width: 290px; + height: 203px; + + border-radius: 8px; + + background: ${props => (props.$isToggle ? '#ffebf1' : '#ECF0FA')}; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25); +`; + +const CouponHeaderContainer = styled.div` + height: 64px; + + padding: 14px 10px 0 12px; + border-bottom: 1px dashed #8f8f8f; + + display: flex; + flex-direction: column; +`; + +const CouponHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +`; + +const CouponTitle = styled.div` + color: #8f8f8f; + font-size: 11px; + font-weight: 600; +`; + +const CouponCustomer = styled.div` + color: #404040; + font-size: 18px; + font-weight: 700; +`; + +const ToggleWrap = styled.button` + width: 50px; + height: 22.93; + + border-radius: 22.93px; + border: 1px solid; + border-color: ${props => (props.$isToggle ? '#FF3478' : '#404446')}; + + display: flex; + align-items: center; + justify-content: space-between; + + background-color: ${theme.colors.white}; + cursor: pointer; +`; + +const ToggleOn = styled.div` + margin: 2px 5px 1px 1px; + + font-size: 10px; + font-weight: 700; + color: ${theme.colors.pink500}; +`; + +const ToggleOff = styled.div` + margin-top: 2px; + + font-size: 10px; + font-weight: 700; + color: #404446; +`; +const ToggleOnImg = styled.img` + margin: 1px; +`; + +const ToggleOffImg = styled.img` + margin: 1px; + margin-left: -3.5px; +`; + +const CouponMain = styled.div` + padding: 12px 10px 0 12px; + + display: flex; + align-items: center; +`; + +const CountWrap = styled.div` + width: 58px; + height: 62px; + + margin-right: 7.5px; + border-radius: 10px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${theme.colors.white}; +`; + +const CountText = styled.div` + color: #8f8f8f; + text-align: center; + font-size: 11px; + font-weight: 600; +`; + +const CountNumber = styled.div` + margin-top: 5px; + + color: #505050; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 700; +`; + +// HACK: ContentContainer 로직 추가하기 +const ContentContainer = styled.div``; + +const ContentWrap = styled.div` + margin: 8px; + + display: flex; + align-items: center; +`; + +const ContentTitle = styled.div` + margin-right: 5px; + + color: #505050; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; +const ContentRoom = styled.div` + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + img { + margin-bottom: 3px; + } + div { + margin-right: 3px; + border-bottom: 1px solid #757676; + + color: #757676; + font-size: 11px; + font-style: normal; + font-weight: 600; + } +`; + +const RoomList = styled.div` + position: absolute; + top: 0; + right: 0; + z-index: 1; + + width: 188px; + height: 204px; + + margin-top: 150px; + border-radius: 18px; + text-align: center; + + background: #415574; + + &::before { + content: ''; + position: absolute; + top: -10px; + left: 50%; + transform: translateX(-50%); + + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #415574; + } +`; + +const RoomListTitleWrap = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + margin: 10px; + padding: 8px; + border-bottom: 1px solid #cdcfd0; + + img { + cursor: pointer; + } +`; + +const RoomListTitle = styled.div` + margin-left: 35px; + + font-size: 15px; + font-weight: 700; + font-style: normal; + color: ${theme.colors.white}; +`; + +const RoomListItem = styled.div` + max-height: 125px; + + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; // 세로 스크롤만 허용 + + color: ${theme.colors.white}; + font-size: 14px; + font-weight: 400; + line-height: 36px; + + li { + max-width: 130px; + + overflow: hidden; + overflow-y: scroll; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +`; + +const ContentValue = styled.div` + color: #8f8f8f; + font-size: 11px; + font-style: normal; + font-weight: 400; +`; + +const DateContainer = styled.div` + padding: 9px 0 0 12px; +`; + +const ExposeDateWrap = styled.div` + margin-bottom: 4px; + + display: flex; + align-items: center; +`; + +const ExposeDateTitle = styled.div` + margin-right: 5px; + + color: #ff3478; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ExposeValue = styled.div` + color: #ff3478; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const RegisterDateTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; + +const RegisterDateValue = styled.div` + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx new file mode 100644 index 00000000..59a20a03 --- /dev/null +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -0,0 +1,269 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import toggleOnIcon from '@assets/icons/ic-couponlist-toggleOn.svg'; +import toggleOffIcon from '@assets/icons/ic-couponlist-toggleOff.svg'; +import { ToggleStyleProps } from '@/types/couponList'; + +const CouponStop = () => { + const [isToggle, setIsToggle] = useState(false); + + const handleToggle = () => { + setIsToggle(!isToggle); + }; + return ( + + + + 2024 신년행사 + + {isToggle ? ( + <> + ON + + + ) : ( + <> + + OFF + + )} + + + 모든 고객 10% 할인 + + + + 다운로드 + 50 + + + 사용완료 + 50 + + + + 가격 + 99,999,999원 이상 + + + 일정 + 2박 이상, 일~목 + + + 객실 + 전체 + + + + + + 노출기간 + 2024.01.31 ~ 2024.02.10 + + + 등록일 + 2024.12.01 + + + + ); +}; + +export default CouponStop; + +const CouponContainer = styled.div` + width: 290px; + height: 203px; + + border-radius: 8px; + + background: ${props => (props.$isToggle ? '#ffebf1' : '#ECF0FA')}; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25); +`; + +const CouponHeaderContainer = styled.div` + height: 64px; + + padding: 14px 10px 0 12px; + border-bottom: 1px dashed #8f8f8f; + + display: flex; + flex-direction: column; +`; + +const CouponHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +`; + +const CouponTitle = styled.div` + color: #8f8f8f; + font-size: 11px; + font-weight: 600; +`; + +const CouponCustomer = styled.div` + color: #404040; + font-size: 18px; + font-weight: 700; +`; + +const ToggleWrap = styled.button` + width: 50px; + height: 22.93; + + border-radius: 22.93px; + border: 1px solid; + border-color: ${props => (props.$isToggle ? '#FF3478' : '#404446')}; + + display: flex; + align-items: center; + justify-content: space-between; + + background-color: ${theme.colors.white}; + cursor: pointer; +`; + +const ToggleOn = styled.div` + margin: 2px 5px 1px 1px; + + font-size: 10px; + font-weight: 700; + color: ${theme.colors.pink500}; +`; + +const ToggleOff = styled.div` + margin-top: 2px; + + font-size: 10px; + font-weight: 700; + color: #404446; +`; +const ToggleOnImg = styled.img` + margin: 1px; +`; + +const ToggleOffImg = styled.img` + margin: 1px; + margin-left: -3.5px; +`; + +const CouponMain = styled.div` + padding: 12px 10px 0 12px; + + display: flex; + align-items: center; +`; + +const CountWrap = styled.div` + width: 58px; + height: 62px; + + margin-right: 7.5px; + border-radius: 10px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${theme.colors.white}; +`; + +const CountText = styled.div` + color: #8f8f8f; + text-align: center; + font-size: 11px; + font-weight: 600; +`; + +const CountNumber = styled.div` + margin-top: 5px; + + color: #505050; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 700; +`; + +// HACK: ContentContainer 로직 추가하기 +const ContentContainer = styled.div``; + +const ContentWrap = styled.div` + margin: 8px; + + display: flex; + align-items: center; +`; + +const ContentTitle = styled.div` + margin-right: 5px; + + color: #505050; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ContentValue = styled.div` + color: #8f8f8f; + font-size: 11px; + font-style: normal; + font-weight: 400; +`; + +const DateContainer = styled.div` + padding: 9px 0 0 12px; +`; + +const ExposeDateWrap = styled.div` + margin-bottom: 4px; + + display: flex; + align-items: center; +`; + +const ExposeDateTitle = styled.div` + margin-right: 5px; + + color: #ff3478; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ExposeValue = styled.div` + color: #ff3478; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const RegisterDateTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; + +const RegisterDateValue = styled.div` + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx new file mode 100644 index 00000000..6deb2ed7 --- /dev/null +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -0,0 +1,242 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import centerIcon from '@assets/icons/ic-couponlist-center.svg'; + +const CouponWait = () => { + return ( + + + + 2024 신년행사 + 노출대기 + + 모든 고객 10% 할인 + + + + 다운로드 + 50 + + + 사용완료 + 50 + +
+ + 가격 + 99,999,999원 이상 + + + 일정 + 2박 이상, 일~목 + + + 객실 + 전체 + +
+ + + + 노출기간 + 2024.01.31 ~ 2024.02.10 + + + 등록일 + 2024.12.01 + + + +
수정
+ 분리 선 이미지 +
삭제
+ + + ); +}; + +export default CouponWait; + +const CouponContainer = styled.div` + position: relative; + + width: 290px; + height: 203px; + + border-radius: 8px; + + background: #ecf0fa; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25); +`; + +const CouponHeaderContainer = styled.div` + height: 64px; + + padding: 14px 10px 0 12px; + border-bottom: 1px dashed #8f8f8f; + + display: flex; + flex-direction: column; +`; + +const CouponHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +`; + +const CouponTitle = styled.div` + color: #8f8f8f; + font-size: 11px; + font-weight: 600; +`; + +const CouponStatus = styled.div` + width: 50px; + height: 22.927px; + + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + border-radius: 22.927px; + color: ${theme.colors.white}; + background: #404446; +`; + +const CouponCustomer = styled.div` + color: #404040; + font-size: 18px; + font-weight: 700; +`; + +const CouponMain = styled.div` + padding: 12px 10px 0 12px; + + display: flex; + align-items: center; +`; + +const CountWrap = styled.div` + width: 58px; + height: 62px; + + margin-right: 7.5px; + border-radius: 10px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${theme.colors.white}; +`; + +const CountText = styled.div` + color: #8f8f8f; + text-align: center; + font-size: 11px; + font-weight: 600; +`; + +const CountNumber = styled.div` + margin-top: 5px; + + color: #505050; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 700; +`; + +const ContentWrap = styled.div` + margin: 8px; + + display: flex; + align-items: center; +`; + +const ContentTitle = styled.div` + margin-right: 5px; + + color: #505050; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ContentValue = styled.div` + color: #8f8f8f; + font-size: 11px; + font-style: normal; + font-weight: 400; +`; + +const DateContainer = styled.div` + padding: 9px 0 0 12px; +`; + +const ExposeDateWrap = styled.div` + margin-bottom: 4px; + + display: flex; + align-items: center; +`; + +const ExposeDateTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const ExposeValue = styled.div` + color: #757676; + font-size: 11px; + font-style: normal; + font-weight: 600; +`; + +const RegisterDateTitle = styled.div` + margin-right: 5px; + + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; + +const RegisterDateValue = styled.div` + color: #757676; + font-size: 10px; + font-style: normal; + font-weight: 400; +`; + +const CouponModifiedWrap = styled.div` + position: absolute; + right: 0; + bottom: 0; + + width: 56px; + + margin-right: 14px; + margin-bottom: 14px; + + display: flex; + align-items: center; + justify-content: space-between; + + color: #757676; + font-size: 11px; + + div { + cursor: pointer; + } +`; diff --git a/src/components/CouponList/CouponItem/index.tsx b/src/components/CouponList/CouponItem/index.tsx index 58f22376..dc8eb420 100644 --- a/src/components/CouponList/CouponItem/index.tsx +++ b/src/components/CouponList/CouponItem/index.tsx @@ -1,269 +1,4 @@ -import { useState } from 'react'; -import styled from '@emotion/styled'; -import theme from '@styles/theme'; - -import toggleOnIcon from '@assets/icons/ic-couponlist-toggleOn.svg'; -import toggleOffIcon from '@assets/icons/ic-couponlist-toggleOff.svg'; -import { ToggleStyleProps } from '@/types/couponList'; - -const CouponExpose = () => { - const [isToggle, setIsToggle] = useState(true); - - const handleToggle = () => { - setIsToggle(!isToggle); - }; - return ( - - - - 2024 신년행사 - - {isToggle ? ( - <> - ON - - - ) : ( - <> - - OFF - - )} - - - 모든 고객 10% 할인 - - - - 다운로드 - 50 - - - 사용완료 - 50 - - - - 가격 - 99,999,999원 이상 - - - 일정 - 2박 이상, 일~목 - - - 객실 - 전체 - - - - - - 노출기간 - 2024.01.31 ~ 2024.02.10 - - - 등록일 - 2024.12.01 - - - - ); -}; - -export default CouponExpose; - -const CouponContainer = styled.div` - width: 290px; - height: 203px; - - border-radius: 8px; - - background: ${props => (props.isToggle ? '#ffebf1' : '#ECF0FA')}; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25); -`; - -const CouponHeaderContainer = styled.div` - height: 64px; - - padding: 14px 10px 0 12px; - border-bottom: 1px dashed #8f8f8f; - - display: flex; - flex-direction: column; -`; - -const CouponHeader = styled.div` - display: flex; - align-items: center; - justify-content: space-between; -`; - -const CouponTitle = styled.div` - color: #8f8f8f; - font-size: 11px; - font-weight: 600; -`; - -const CouponCustomer = styled.div` - color: #404040; - font-size: 18px; - font-weight: 700; -`; - -const ToggleWrap = styled.button` - width: 50px; - height: 22.93; - - border-radius: 22.93px; - border: 1px solid; - border-color: ${props => (props.isToggle ? '#FF3478' : '#404446')}; - - display: flex; - align-items: center; - justify-content: space-between; - - background-color: ${theme.colors.white}; - cursor: pointer; -`; - -const ToggleOn = styled.div` - margin: 2px 5px 1px 1px; - - font-size: 10px; - font-weight: 700; - color: ${theme.colors.pink500}; -`; - -const ToggleOff = styled.div` - margin-top: 2px; - - font-size: 10px; - font-weight: 700; - color: #404446; -`; -const ToggleOnImg = styled.img` - margin: 1px; -`; - -const ToggleOffImg = styled.img` - margin: 1px; - margin-left: -3.5px; -`; - -const CouponMain = styled.div` - padding: 12px 10px 0 12px; - - display: flex; - align-items: center; -`; - -const CountWrap = styled.div` - width: 58px; - height: 62px; - - margin-right: 7.5px; - border-radius: 10px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - background-color: ${theme.colors.white}; -`; - -const CountText = styled.div` - color: #8f8f8f; - text-align: center; - font-size: 11px; - font-weight: 600; -`; - -const CountNumber = styled.div` - margin-top: 5px; - - color: #505050; - text-align: center; - font-size: 14px; - font-style: normal; - font-weight: 700; -`; - -// HACK: ContentContainer 로직 추가하기 -const ContentContainer = styled.div``; - -const ContentWrap = styled.div` - margin: 8px; - - display: flex; - align-items: center; -`; - -const ContentTitle = styled.div` - margin-right: 5px; - - color: #505050; - font-size: 11px; - font-style: normal; - font-weight: 600; -`; - -const ContentValue = styled.div` - color: #8f8f8f; - font-size: 11px; - font-style: normal; - font-weight: 400; -`; - -const DateContainer = styled.div` - padding: 9px 0 0 12px; -`; - -const ExposeDateWrap = styled.div` - margin-bottom: 4px; - - display: flex; - align-items: center; -`; - -const ExposeDateTitle = styled.div` - margin-right: 5px; - - color: #ff3478; - font-size: 11px; - font-style: normal; - font-weight: 600; -`; - -const ExposeValue = styled.div` - color: #ff3478; - font-size: 11px; - font-style: normal; - font-weight: 600; -`; - -const RegisterDateTitle = styled.div` - margin-right: 5px; - - color: #757676; - font-size: 10px; - font-style: normal; - font-weight: 400; -`; - -const RegisterDateValue = styled.div` - color: #757676; - font-size: 10px; - font-style: normal; - font-weight: 400; -`; +export { default as CouponExpose } from './CouponExpose'; +export { default as CouponStop } from './CouponStop'; +export { default as CouponWait } from './CouponWait'; +export { default as CouponExpired } from './CouponExpired'; diff --git a/src/components/CouponList/CouponMain/index.tsx b/src/components/CouponList/CouponMain/index.tsx index 5cb4684f..56796cd3 100644 --- a/src/components/CouponList/CouponMain/index.tsx +++ b/src/components/CouponList/CouponMain/index.tsx @@ -1,21 +1,57 @@ import styled from '@emotion/styled'; -import CouponExpose from '../CouponItem'; +import { + CouponExpired, + CouponExpose, + CouponStop, + CouponWait +} from '../CouponItem'; +// import { CouponLitResponse } from '@/types/couponList'; const CouponMain = () => { + // HACK: 쿠폰 데이터 상태저장 (추가 예정) + // const [coupons, setCoupons] = useState([]); + return ( + // HACK: 받아온 쿠폰 데이터 종류에 따라 컴포넌트 분리 (추가 예정) + {/* {coupons.map((coupon, index) => { + switch (coupon.coupon_status) { + case '노출 중': + return ( + + ); + case '노출 중지': + return ( + + ); + case '노출 대기': + return ( + + ); + case '만료': + return ( + + ); + } + })} */} + - - - - - - - - - - + + + ); }; diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 14d7b579..e5520fd4 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -1,36 +1,45 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import theme from '@styles/theme'; +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 { ResisterDateStyleProps } from '@/types/couponList'; +import { + CategoryTabStyleProps, + ResisterDateStyleProps +} from '@/types/couponList'; const CouponNav = () => { - const [isClick, setIsClick] = useState('1년'); + const [resisterDateClick, setResisterDateClick] = useState('1년'); + const [categoryTab, setCategoryTab] = useState('전체'); const handleDateClick = (period: string) => { - setIsClick(period); + setResisterDateClick(period); }; + + const handleCategoryTab = (tab: string) => { + setCategoryTab(tab); + }; + return ( - + handleCategoryTab('전체')}> 전체 - 8 + 8 - + handleCategoryTab('노출 ON')}> 노출 ON - 2 + 2 - + handleCategoryTab('노출 OFF')}> 노출 OFF - 2 + 2 - - 기간 만료 - 4 + handleCategoryTab('만료')}> + 만료 + 4 @@ -58,7 +67,7 @@ const CouponNav = () => { 등록일 기준 최근 handleDateClick('1년')} > 1년 @@ -68,7 +77,7 @@ const CouponNav = () => { alt="centerIcon" /> handleDateClick('6개월')} > 6개월 @@ -78,7 +87,7 @@ const CouponNav = () => { alt="centerIcon" /> handleDateClick('3개월')} > 3개월 @@ -118,15 +127,17 @@ const TapItemWrapper = styled.div` display: flex; justify-content: center; align-items: center; + + cursor: pointer; `; const TabName = styled.div` - color: #404040; font-size: 20px; font-weight: 700; + color: #404446; `; -const TabCount = styled.div` +const TabCount = styled.div` width: 70px; height: 40px; @@ -137,11 +148,12 @@ const TabCount = styled.div` align-items: center; justify-content: center; - color: #404040; font-size: 20px; font-weight: 700; background-color: #f3f3f3; - cursor: pointer; + + color: ${props => (props.$categoryTab ? theme.colors.white : '#404040')}; + background: ${props => (props.$categoryTab ? '#404446' : '#F2F4F5')}; `; const SearchWrap = styled.form` @@ -241,6 +253,6 @@ const ResisterPeriod = styled.div` font-size: 12px; cursor: pointer; - color: ${props => (props.isClick ? '#404040' : '#A4A4A4')}; - font-weight: ${props => (props.isClick ? '700' : '400')}; + color: ${props => (props.$resisterDateClick ? '#404040' : '#A4A4A4')}; + font-weight: ${props => (props.$resisterDateClick ? '700' : '400')}; `; diff --git a/src/pages/CouponList/index.tsx b/src/pages/CouponList/index.tsx index 0b9b056e..6d8bcaee 100644 --- a/src/pages/CouponList/index.tsx +++ b/src/pages/CouponList/index.tsx @@ -1,5 +1,3 @@ -import styled from '@emotion/styled'; - import { CouponHeader, CouponNav, @@ -9,15 +7,13 @@ import { const CouponList = () => { return ( - +
- +
); }; export default CouponList; - -const CouponListContainer = styled.div``; diff --git a/src/types/couponList.ts b/src/types/couponList.ts index 19d86285..c66b48b0 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -1,7 +1,52 @@ export interface ToggleStyleProps { - isToggle: boolean; + $isToggle: boolean; } export interface ResisterDateStyleProps { - isClick: boolean; + $resisterDateClick: boolean; +} + +export interface CategoryTabStyleProps { + $categoryTab: boolean; +} + +// api 데이터 타입 +export interface CouponLitResponse { + content: [ + { + title: string; + coupon_number: string; + coupon_status: string; + coupon_promotion: boolean; + coupon_concat_title: string; + discount_type: string; + discount_value: number; + customer_type: string; + coupon_room_type: string; + minimum_reservation_price: number; + coupon_use_condition_days: string[]; + exposure_start_date: string; + exposure_end_date: string; + coupon_expiration: number; + download_count: number; + use_count: number; + accommodation_id: number; + register_room_numbers: string[]; + created_date: string; + } + ]; + category: { + all: number; + exposure_on: number; + exposure_off: number; + expiration: number; + }; + last: boolean; + total_pages: number; + total_elements: number; + size: number; + number: number; + first: boolean; + number_of_elements: number; + empty: boolean; }