diff --git a/public/fonts/.gitkeep b/public/fonts/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/public/images/.gitkeep b/public/images/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/App.tsx b/src/App.tsx index 5389b322..7048611b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { Suspense } from 'react'; import { MainRouter } from './routes'; -import GlobalStyle from '@styles/GlobalStyle'; +import GlobalStyles from '@styles/GlobalStyles'; import theme from '@styles/theme'; import { ErrorApp } from '@components/ErrorFallback'; import { LoadingApp } from '@components/Loading'; @@ -33,7 +33,7 @@ const App = () => { - + + + + 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/assets/icons/ic-register-calendar.svg b/src/assets/icons/ic-register-calendar.svg new file mode 100644 index 00000000..afef2deb --- /dev/null +++ b/src/assets/icons/ic-register-calendar.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/ic-register-check.svg b/src/assets/icons/ic-register-check.svg new file mode 100644 index 00000000..078a068e --- /dev/null +++ b/src/assets/icons/ic-register-check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/ic-register-toggle.svg b/src/assets/icons/ic-register-toggle.svg new file mode 100644 index 00000000..5ee86302 --- /dev/null +++ b/src/assets/icons/ic-register-toggle.svg @@ -0,0 +1,5 @@ + + + + + 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/components/Register/Preview/index.tsx b/src/components/Register/Preview/index.tsx new file mode 100644 index 00000000..12b5681f --- /dev/null +++ b/src/components/Register/Preview/index.tsx @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +const Preview = () => { + return Preview; +}; + +export default Preview; + +const PreviewContainer = styled.div` + width: 100%; + min-height: 430px; + + margin: 60px 0px 30px; +`; diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx new file mode 100644 index 00000000..0bd87405 --- /dev/null +++ b/src/components/Register/StepTitle/index.tsx @@ -0,0 +1,66 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { StepTitleProps } from '@/types/register'; + +const StepTitle = ({ steps, currentStep }: StepTitleProps) => { + return ( + + + {`${currentStep + 1}. ${steps[currentStep].title}`} + {!currentStep && ( + 이전 쿠폰 정보 불러오기 + )} + {currentStep === 2 && ( + + 쿠폰에 대한 사용 조건을 설정해 주세요! (복수선택 가능) + + )} + + + ); +}; + +export default StepTitle; + +const StepTitleContainer = styled.div` + width: 100%; + height: 60px; + + font-size: 24px; + font-weight: 600; + line-height: 31px; + letter-spacing: -0.78px; +`; + +const StepTitleWrapper = styled.div` + display: flex; + justify-content: space-between; +`; + +const PreviousCoupon = styled.button` + height: 23px; + + margin-top: 5px; + padding: 0px; + border: none; + + color: ${theme.colors.pink500}; + font-family: 'Noto Sans KR'; + font-size: 15px; + text-decoration: underline; + text-underline-position: under; + + outline: none; + background-color: transparent; + cursor: pointer; +`; + +const Description = styled.span` + margin-top: 10px; + + color: #6c7072; + font-size: 13px; + letter-spacing: 0.1px; + line-height: 150%; +`; diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx new file mode 100644 index 00000000..d91d35ae --- /dev/null +++ b/src/components/Register/Stepper/index.tsx @@ -0,0 +1,107 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { + StepperProps, + NumberStyleProps, + LineStyleProps +} from '@/types/register'; +import checkMark from '@assets/icons/ic-register-check.svg'; + +const Stepper = ({ steps, currentStep }: StepperProps) => { + return ( + + {steps.map((step, index) => { + return ( + + { + if (step.isCompleted) return 'completed'; + if (currentStep !== index) return 'disabled'; + })()} + src={checkMark} + > + {index + 1} + + + {step.title} + + ··· + + ); + })} + + ); +}; + +export default Stepper; + +const StepperContainer = styled.div` + display: flex; + align-items: center; +`; + +const Step = styled.div` + display: flex; + align-items: center; +`; + +const Number = styled.div` + width: 35px; + height: 35px; + + margin-right: 10px; + padding-bottom: 2px; + border: 2px solid ${theme.colors.hover}; + border-radius: 50%; + + display: flex; + justify-content: center; + align-items: center; + + color: ${theme.colors.hover}; + font-weight: 600; + line-height: 100%; + letter-spacing: 0.5px; + + &.completed { + background: url(${props => props.src}) center; + + & > span { + display: none; + } + } + + &.disabled { + border: 2px solid #979c9e; + + & > span { + color: #979c9e; + } + } +`; + +const Description = styled.div` + color: ${theme.colors.ink600}; + font-size: 22px; + font-weight: 600; + line-height: 26.148px; + letter-spacing: -0.7px; + + &.disabled { + color: #979c9e; + font-weight: 500; + } +`; + +const Line = styled.div` + margin: 0px 40px; + + display: ${props => (props.$isLastStep === 3 ? 'none' : 'block')}; +`; diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx new file mode 100644 index 00000000..5cde9913 --- /dev/null +++ b/src/components/Register/StepperController/index.tsx @@ -0,0 +1,66 @@ +import styled from '@emotion/styled'; + +import { StepperControllerProps } from '@/types/register'; + +const StepperController = ({ + currentStep, + onButtonClick +}: StepperControllerProps) => { + const handlePreviousButton = () => { + if (currentStep > 0) { + onButtonClick(prev => prev - 1); + } + }; + + const handleNextButton = () => { + if (currentStep < 3) { + onButtonClick(prev => prev + 1); + } + }; + + return ( + + + 이전 + 다음 + + + ); +}; + +export default StepperController; + +const ControllerContainer = styled.div` + display: grid; + grid-column: 2 / 3; + grid-row: 3 / 4; +`; + +const InnerControllerContainer = styled.div` + display: flex; + justify-content: flex-end; + align-items: flex-end; + gap: 27px; +`; + +const ControllerButton = styled.button` + width: 63px; + height: 41px; + + padding: 13px 16px; + + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + flex-shrink: 0; + + border: none; + border-radius: 8px; + background: #1a2849; + cursor: pointer; + + color: #fff; + font-size: 15px; + line-height: 25px; +`; diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx new file mode 100644 index 00000000..fbed05ec --- /dev/null +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -0,0 +1,82 @@ +import styled from '@emotion/styled'; + +import { InputContainer, InputButton } from '@components/Register/common'; + +const FirstStep = () => { + return ( + <> + + + + + + + + + + + + + + + + + + ); +}; + +export default FirstStep; + +const Input = styled.input` + width: 348px; + height: 40px; + + margin-top: 20px; + border: none; + border-radius: 30px; + + background-color: #f2f4f5; + + font-size: 15px; + font-weight: 600; + text-indent: 15px; + + outline: none; + + &::placeholder { + color: #979C9e; + } +} +`; + +const ButtonWrapper = styled.div` + margin-top: 20px; + + display: flex; + gap: 23px; +`; diff --git a/src/components/Register/Steps/FourthStep/index.tsx b/src/components/Register/Steps/FourthStep/index.tsx new file mode 100644 index 00000000..d303c3a1 --- /dev/null +++ b/src/components/Register/Steps/FourthStep/index.tsx @@ -0,0 +1,69 @@ +import styled from '@emotion/styled'; + +import { InputContainer } from '@components/Register/common'; +import calendar from '@assets/icons/ic-register-calendar.svg'; + +const FourthStep = () => { + return ( + + + + 쿠폰의 유효기간은 다운로드 일자부터 14일 자정까지 입니다. + + + 2023.08.31 + + - + 2023.09.31 + + + + + ); +}; + +export default FourthStep; + +const ContentContainer = styled.div` + margin-top: 11px; +`; + +const Description = styled.div` + font-size: 14px; +`; + +const Duration = styled.button` + width: 336px; + height: 45px; + + margin-top: 20px; + padding: 7px 23px; + border: 1px solid #979c9e; + border-radius: 15px; + + display: flex; + justify-content: center; + align-items: center; + + background-color: #fff; + + color: #979c9e; + font-family: 'Noto Sans KR'; + font-size: 15px; + + cursor: pointer; +`; + +const CalendarIcon = styled.img` + margin-left: 5px; +`; + +const Dash = styled.div` + margin: 0px 20px; +`; diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx new file mode 100644 index 00000000..306a70fb --- /dev/null +++ b/src/components/Register/Steps/SecondStep/index.tsx @@ -0,0 +1,51 @@ +import styled from '@emotion/styled'; + +import { InputContainer, InputButton } from '@components/Register/common'; + +const SecondStep = () => { + return ( + <> + + + + + + + + + + + + + + ); +}; + +export default SecondStep; + +const ButtonWrapper = styled.div` + margin-top: 20px; + + display: flex; + gap: 23px; +`; diff --git a/src/components/Register/Steps/ThirdStep/index.tsx b/src/components/Register/Steps/ThirdStep/index.tsx new file mode 100644 index 00000000..9b7d66e8 --- /dev/null +++ b/src/components/Register/Steps/ThirdStep/index.tsx @@ -0,0 +1,20 @@ +import { InputAccordion } from '@components/Register/common'; + +const ThirdStep = () => { + const temp =
temp
; + + return ( + <> + + + + ); +}; + +export default ThirdStep; diff --git a/src/components/Register/Steps/index.tsx b/src/components/Register/Steps/index.tsx new file mode 100644 index 00000000..5f09ae91 --- /dev/null +++ b/src/components/Register/Steps/index.tsx @@ -0,0 +1,4 @@ +export { default as FirstStep } from './FirstStep'; +export { default as SecondStep } from './SecondStep'; +export { default as ThirdStep } from './ThirdStep'; +export { default as FourthStep } from './FourthStep'; diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx new file mode 100644 index 00000000..c0a2f1a9 --- /dev/null +++ b/src/components/Register/common/InputAccordion/index.tsx @@ -0,0 +1,93 @@ +import { useState, useRef } from 'react'; +import styled from '@emotion/styled'; + +import { InputAccordionProps, ButtonStyleProps } from '@/types/register'; +import toggle from '@assets/icons/ic-register-toggle.svg'; + +const InputAccordion = ({ title, content }: InputAccordionProps) => { + const [isOpen, setIsOpen] = useState(false); + + const contentWrapperRef = useRef(null); + const contentRef = useRef(null); + + const handleToggle = () => { + if (contentWrapperRef.current && contentRef.current) { + contentWrapperRef.current.style.height = isOpen + ? '0px' + : `${contentRef.current.clientHeight}px`; + setIsOpen(prev => !prev); + } + }; + + return ( + +
+ {title} +
+ + {content} + + + ); +}; + +export default InputAccordion; + +const Container = styled.div` + width: 100%; + + margin-bottom: 30px; + padding: 24px; + border: 1px solid #cdcfd0; + border-radius: 16px; + + display: flex; + flex-direction: column; +`; + +const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + +const Description = styled.div` + color: #979c9e; + font-size: 15px; +`; + +const Button = styled.button` + width: 24px; + height: 24px; + + padding: 0px; + border: none; + + background: url(${props => props.src}); + + transform: rotate( + ${props => { + return props.$isOpen ? '180deg' : '0'; + }} + ); + transition: 0.4s; + + cursor: pointer; +`; + +const ContentWrapper = styled.div` + height: 0px; + + overflow: hidden; + + transition: 0.4s; +`; + +const Content = styled.div` + padding: 24px 0px 6px; +`; diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx new file mode 100644 index 00000000..38cbe94f --- /dev/null +++ b/src/components/Register/common/InputButton/index.tsx @@ -0,0 +1,56 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { InputButtonProps } from '@/types/register'; + +const InputButton = ({ type, id, name, buttonName }: InputButtonProps) => { + return ( + <> + + + + ); +}; + +export default InputButton; + +const Input = styled.input` + display: none; + + &:checked + label { + border: none; + + color: #fff; + + background-color: ${theme.colors.hover}; + } + + &:checked + label + div { + display: block; + } +`; + +const Button = styled.label` + width: 111px; + height: 40px; + + border: 1px solid #979c9e; + border-radius: 5px; + + display: flex; + justify-content: center; + align-items: center; + + color: #979c9e; + font-size: 15px; + + cursor: pointer; + + &:has(input:checked) { + background-color: ${theme.colors.hover}; + } +`; diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx new file mode 100644 index 00000000..407bb5ba --- /dev/null +++ b/src/components/Register/common/InputContainer/index.tsx @@ -0,0 +1,29 @@ +import styled from '@emotion/styled'; + +import { InputContainerProps } from '@/types/register'; + +const InputContainer = ({ title, children }: InputContainerProps) => { + return ( + + {title} + {children} + + ); +}; + +export default InputContainer; + +const Container = styled.div` + width: 100%; + + margin-bottom: 30px; + padding: 24px; + border: 1px solid #cdcfd0; + border-radius: 16px; + + display: inline-block; +`; + +const Description = styled.div` + font-size: 18px; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx new file mode 100644 index 00000000..f182a5a6 --- /dev/null +++ b/src/components/Register/common/index.tsx @@ -0,0 +1,3 @@ +export { default as InputContainer } from './InputContainer'; +export { default as InputButton } from './InputButton'; +export { default as InputAccordion } from './InputAccordion'; diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx new file mode 100644 index 00000000..cd87cd12 --- /dev/null +++ b/src/components/Register/index.tsx @@ -0,0 +1,4 @@ +export { default as Stepper } from './Stepper'; +export { default as StepperController } from './StepperController'; +export { default as StepTitle } from './StepTitle'; +export { default as Preview } from './Preview'; diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx index f1815232..af6a9998 100644 --- a/src/components/Report/LeftSection/Graph/index.tsx +++ b/src/components/Report/LeftSection/Graph/index.tsx @@ -13,15 +13,15 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => { { label: '전체 매출', data: graphData.map(data => parseInt(data.total_sales)), - backgroundColor: '#022c79e0', - borderColor: '#022c79', + backgroundColor: '#3182F6', + borderColor: '#3182F6', borderWidth: 1, borderRadius: 5 }, { label: '쿠폰 적용 매출', data: graphData.map(data => parseInt(data.coupon_total_sales)), - backgroundColor: '#ff3478e0', + backgroundColor: '#FF3478', borderColor: '#FF3478', borderWidth: 1, borderRadius: 5 diff --git a/src/components/Report/RightSection/Catchphrase/index.tsx b/src/components/Report/RightSection/Catchphrase/index.tsx index 6aad6d99..304922d1 100644 --- a/src/components/Report/RightSection/Catchphrase/index.tsx +++ b/src/components/Report/RightSection/Catchphrase/index.tsx @@ -1,3 +1,4 @@ +import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; import rocket from '@assets/icons/ic-catchphrase-rocket.svg'; @@ -14,7 +15,8 @@ const Catchphrase = () => { {'연도별 쿠폰 사용 현황을'}
- {'빠르게 확인해보세요!'} + 빠르게 + {' 확인해보세요!'} { export default Catchphrase; +const rocketRising = keyframes` + 0% { + opacity: 0; + transform: translateX(-300px) translateY(50px) rotate(90deg); + } + 100% { + opacity: 1; + transform: translateX(0) translateY(0) rotate(0deg); + } +`; + const Container = styled.div` position: relative; @@ -49,7 +62,7 @@ const Content = styled.div` gap: 16px; `; -const Title = styled.span` +const Title = styled.p` font-size: 17px; font-weight: 700; @@ -60,8 +73,12 @@ const Text = styled.span` color: #415574; font-size: 13px; font-weight: 700; - line-height: 145%; + + & > span { + display: inline; + box-shadow: inset 0 -7px 0 #ffddf9; + } `; const RocketIcon = styled.img` @@ -72,4 +89,6 @@ const RocketIcon = styled.img` width: 120px; max-height: 120px; + + animation: ${rocketRising} 1s; `; diff --git a/src/components/common/DashboardHeader/index.tsx b/src/components/common/DashboardHeader/index.tsx index bdc21a4e..9a582bed 100644 --- a/src/components/common/DashboardHeader/index.tsx +++ b/src/components/common/DashboardHeader/index.tsx @@ -41,6 +41,7 @@ const Container = styled.div` display: flex; justify-content: space-between; + align-items: flex-end; `; const MenuContainer = styled.div` @@ -49,7 +50,7 @@ const MenuContainer = styled.div` const DashboardNavigation = styled.div` margin-right: 45px; - padding: 16px 0; + padding: 10px 0; border-bottom: ${props => props.$pathname === '/' ? '3px solid #001d6c' : 'none'}; @@ -81,9 +82,13 @@ const Button = styled.button` justify-content: center; align-items: center; - background: linear-gradient(273deg, #ff0a5c 43.78%, #ff4281 99.72%); + background: linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%); color: white; font-size: 17px; - + font-weight: 700; cursor: pointer; + + &:hover { + background: #b22655; + } `; diff --git a/src/components/common/Layout/Header/Select/index.tsx b/src/components/common/Layout/Header/Select/index.tsx index 757ca45e..8572d2b7 100644 --- a/src/components/common/Layout/Header/Select/index.tsx +++ b/src/components/common/Layout/Header/Select/index.tsx @@ -81,8 +81,6 @@ const Accommodations = styled.select` border-radius: 12px; padding: 10px 20px; - display: inline-block; - font-weight: 500; color: rgba(60, 60, 67, 0.6); @@ -94,6 +92,16 @@ const Accommodations = styled.select` &::-ms-expand { display: none; } + + ${theme.response.tablet} { + width: 150px; + height: 30px; + + margin-right: 0; + padding: 0 20px; + + font-size: 12px; + } `; const Accommodation = styled.option` diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx index f4a1d540..42e53a22 100644 --- a/src/components/common/Layout/Header/User/UserModal/index.tsx +++ b/src/components/common/Layout/Header/User/UserModal/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { UserModal, UserModalStyleProps } from '@/types/layout'; +import theme from '@styles/theme'; const UserModal = ({ isOpen }: UserModal) => { // HACK: cookie에서 사용자 정보 가져오기 @@ -33,6 +34,13 @@ const Modal = styled.div` background-color: #e3e5e5; transition: all 0.5s; + + ${theme.response.tablet} { + right: 35px; + top: 45px; + + width: ${props => (props.$isOpen ? '300px' : 0)}; + } `; const UserInformation = styled.div` diff --git a/src/components/common/Layout/Header/User/index.tsx b/src/components/common/Layout/Header/User/index.tsx index 11a55bfe..2b565f74 100644 --- a/src/components/common/Layout/Header/User/index.tsx +++ b/src/components/common/Layout/Header/User/index.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import user from '@assets/icons/ic-header-user.svg'; import UserModal from './UserModal'; +import theme from '@styles/theme'; const User = () => { const [isUserModalOpen, setIsUserModalOpen] = useState(false); @@ -29,4 +30,9 @@ const UserIcon = styled.img` border-radius: 50%; cursor: pointer; + + ${theme.response.tablet} { + width: 24px; + height: 24px; + } `; diff --git a/src/components/common/Layout/Header/index.tsx b/src/components/common/Layout/Header/index.tsx index 22ef7b1c..8df75d97 100644 --- a/src/components/common/Layout/Header/index.tsx +++ b/src/components/common/Layout/Header/index.tsx @@ -3,8 +3,8 @@ import styled from '@emotion/styled'; import logo from '@assets/icons/ic-logo.svg'; import Select from './Select'; -import theme from '@styles/theme'; import User from './User'; +import theme from '@styles/theme'; const Header = () => { return ( @@ -19,6 +19,7 @@ const Header = () => { /> +