diff --git a/src/components/common/MiniTimer/MiniTimer.styled.ts b/src/components/common/MiniTimer/MiniTimer.styled.ts new file mode 100644 index 00000000..a571eb09 --- /dev/null +++ b/src/components/common/MiniTimer/MiniTimer.styled.ts @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +export const MiniTimerWrapper = styled.div` + width: 10.3rem; + height: 2.7rem; + + padding: 0.3rem 1rem; + margin: 2.2rem 0 1.2rem 0; + + display: flex; + justify-content: center; + align-items: center; + + column-gap: 0.4rem; + + border-radius: 1.4rem; + background: ${({ theme }) => theme.colors.G_01}; +`; + +export const MiniTimerNumbers = styled.span` + ${({ theme }) => theme.fonts.body_09}; + color: ${({ theme }) => theme.colors.P_06}; +`; diff --git a/src/components/common/MiniTimer/MiniTimer.tsx b/src/components/common/MiniTimer/MiniTimer.tsx new file mode 100644 index 00000000..86786a4d --- /dev/null +++ b/src/components/common/MiniTimer/MiniTimer.tsx @@ -0,0 +1,15 @@ +import * as S from './MiniTimer.styled'; + +interface MiniTimerProps { + time: string; +} + +function MiniTimer({ time }: MiniTimerProps) { + return ( + + {time} + + ); +} + +export default MiniTimer; diff --git a/src/pages/GiftAddPage/GiftAddPage.tsx b/src/pages/GiftAddPage/GiftAddPage.tsx new file mode 100644 index 00000000..cb664c9f --- /dev/null +++ b/src/pages/GiftAddPage/GiftAddPage.tsx @@ -0,0 +1,7 @@ +import * as S from './GiftAddPage.styled'; + +function GiftAddPage() { + return ; +} + +export default GiftAddPage; diff --git a/src/pages/GiftHomeDetail/GiftHomeDetail.styled.ts b/src/pages/GiftHomeDetail/GiftHomeDetail.styled.ts new file mode 100644 index 00000000..f335f0be --- /dev/null +++ b/src/pages/GiftHomeDetail/GiftHomeDetail.styled.ts @@ -0,0 +1,62 @@ +import styled from 'styled-components'; + +export const GiftHomeDetailPageWrapper = styled.div` + width: 100%; + + display: flex; + flex-direction: column; + align-items: center; + + background-color: ${({ theme }) => theme.colors.white}; +`; + +export const GiftHomeDetailWrapper = styled.div` + width: 100%; + padding: 0 2rem; + + display: flex; + justify-content: space-between; + flex-wrap: wrap; +`; + +export const GiftsItemWrapper = styled.div` + width: 16rem; + height: 25.7rem; + padding: 0; + + display: flex; + flex-direction: column; + align-items: flex-start; +`; + +export const GiftsItemImage = styled.img` + width: 16rem; + height: 16rem; + + border-radius: 1rem; + background-color: ${({ theme }) => theme.colors.G_03}; + border: 1px solid ${({ theme }) => theme.colors.G_02}; +`; + +export const GiftsItemTitle = styled.p` + display: -webkit-box; + width: 12.8rem; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + ${({ theme }) => theme.fonts.body_09}; + overflow: hidden; + color: ${({ theme }) => theme.colors.black}; + text-overflow: ellipsis; + text-align: left; +`; + +export const GiftsItemPrice = styled.span` + ${({ theme }) => theme.fonts.body_07}; + color: ${({ theme }) => theme.colors.black}; +`; + +export const GiftsItemUser = styled.span` + ${({ theme }) => theme.fonts.caption_02}; + color: ${({ theme }) => theme.colors.G_08}; +`; diff --git a/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx b/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx new file mode 100644 index 00000000..d5842e6c --- /dev/null +++ b/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx @@ -0,0 +1,43 @@ +import * as S from './GiftHomeDetail.styled'; +import MiniTimer from '../../components/common/MiniTimer/MiniTimer'; + +function GiftHomeDetail() { + const price = 42000; + const name = '왕호은'; + const time = '00:00:00'; + + return ( + + {/* 공통 헤더 추가 예정 */} + + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + {name} + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + {name} + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + {name} + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + {name} + + + + ); +} + +export default GiftHomeDetail; diff --git a/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx b/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx new file mode 100644 index 00000000..bf2c71bf --- /dev/null +++ b/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx @@ -0,0 +1,52 @@ +import * as S from './GiftHomeDetail.styled'; +import MiniTimer from '../../components/common/MiniTimer/MiniTimer'; + +function GiftHomeDetail() { + const price = 42000; + const name = '왕호은'; + const people = 3; + const time = '00:00:00'; + + return ( + + {/* 공통 헤더 추가 예정 */} + + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + + {name} | 인당 {Math.floor(price / people)}원 + + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + + {name} | 인당 {Math.floor(price / people)}원 + + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + + {name} | 인당 {Math.floor(price / people)}원 + + + + + 어센틱 로고 후디 멜란지 그레이 + {price}원 + + {name} | 인당 {Math.floor(price / people)}원 + + + + + ); +} + +export default GiftHomeDetail; diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 13bbf868..63feca2d 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -2,6 +2,8 @@ import { createBrowserRouter } from 'react-router-dom'; import Main from '../pages/Main'; import Mypage from '../pages/Mypage'; import Layout from '../layouts/Layout'; +import GiftHomeDetailFriends from '../pages/GiftHomeDetail/GiftHomeDetailFriends'; +import GiftHomeDetail2030 from '../pages/GiftHomeDetail/GiftHomeDetail2030'; import OnBoardingPage from '../pages/OnBoardingPage'; const router = createBrowserRouter([ @@ -17,6 +19,16 @@ const router = createBrowserRouter([ path: '/mypage', element: , }, + { + // 임의로 세부페이지 추가 + path: '/giftdetailfriends', + element: , + }, + { + // 임의로 세부페이지 추가 + path: '/giftdetail2030', + element: , + }, { path: '/onboarding', element: , diff --git a/src/style/GlobalStyle.ts b/src/style/GlobalStyle.ts index 03e7a386..247f1771 100644 --- a/src/style/GlobalStyle.ts +++ b/src/style/GlobalStyle.ts @@ -24,6 +24,7 @@ ${reset} scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */ margin: 0 auto; + padding:0; font-size: 62.5%; -ms-overflow-style: none; /* 인터넷 익스플로러 스크롤바 숨김 */ scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */