From 707747480b314ffb4a35535a8e811b14e6cdcc0d Mon Sep 17 00:00:00 2001 From: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Date: Tue, 9 Jan 2024 23:31:50 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=84=A0=EB=AC=BC=ED=99=88=20=EC=84=B8?= =?UTF-8?q?=EB=B6=80=20=ED=8E=98=EC=9D=B4=EC=A7=80]=20=EC=B9=9C=EA=B5=AC?= =?UTF-8?q?=20=EB=93=B1=EB=A1=9D,=202030=20=EC=84=B8=EB=B6=80=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC=ED=98=84=20(#51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 임시로 세부 페이지 라우터 추가 * style: 모바일 뷰 가로폭 조정 및 패딩 없애기 * style: 선물홈 세부페이지 공통 스타일 작성 * feat: 선물홈 친구, 2030 세부 페이지 UI 구현 * feat: 미니 타이머 UI 구현 * feat: 미니타이머 UI 추가 * feat: 미니타이머 공통 컴포넌트로 분리 * chore: 빌드 에러 해결 * chore: 폴더구조 변경 * chore: 빌드 에러 해결 --- .../common/MiniTimer/MiniTimer.styled.ts | 23 +++++++ src/components/common/MiniTimer/MiniTimer.tsx | 15 +++++ src/pages/GiftAddPage/GiftAddPage.tsx | 7 +++ .../GiftHomeDetail/GiftHomeDetail.styled.ts | 62 +++++++++++++++++++ .../GiftHomeDetail/GiftHomeDetail2030.tsx | 43 +++++++++++++ .../GiftHomeDetail/GiftHomeDetailFriends.tsx | 52 ++++++++++++++++ src/router/Router.tsx | 12 ++++ src/style/GlobalStyle.ts | 1 + 8 files changed, 215 insertions(+) create mode 100644 src/components/common/MiniTimer/MiniTimer.styled.ts create mode 100644 src/components/common/MiniTimer/MiniTimer.tsx create mode 100644 src/pages/GiftAddPage/GiftAddPage.tsx create mode 100644 src/pages/GiftHomeDetail/GiftHomeDetail.styled.ts create mode 100644 src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx create mode 100644 src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx 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; /* 파이어폭스 스크롤바 숨김 */