From 27d693da323866e898b6753237ea79693c03cac4 Mon Sep 17 00:00:00 2001 From: Taew00k Date: Fri, 29 Nov 2024 01:24:18 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=A3=BC=EB=AC=B8=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../orderHistory/orderHistoryStyle.ts | 4 +++- .../orderDetail/orderInfo/orderInfoStyle.ts | 1 + .../orderStatus/orderStatusStyle.ts | 4 +++- .../productRecommend/productRecommendStyle.ts | 4 +++- .../serviceIntroduce/serviceIntroduceStyle.ts | 4 +++- .../orderDetail/sideBar/sideBarStyle.ts | 2 +- src/layout/OrderLayout.tsx | 19 ++++++++++++++++ src/layout/orderLayoutStyle.ts | 17 ++++++++++++++ src/pages/OrderPage.tsx | 22 ++++++++++++++++++- src/pages/orderPageStyle.ts | 11 ++++++++++ 10 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 src/layout/OrderLayout.tsx create mode 100644 src/layout/orderLayoutStyle.ts create mode 100644 src/pages/orderPageStyle.ts diff --git a/src/components/orderDetail/orderHistory/orderHistoryStyle.ts b/src/components/orderDetail/orderHistory/orderHistoryStyle.ts index 2639388..342c05a 100644 --- a/src/components/orderDetail/orderHistory/orderHistoryStyle.ts +++ b/src/components/orderDetail/orderHistory/orderHistoryStyle.ts @@ -5,12 +5,14 @@ const flexCenter = css` align-items: center; `; -export const orderHistoryContainerStyle = css` +export const orderHistoryContainerStyle = (theme: Theme) => css` display: flex; flex-direction: column; width: 91.1rem; height: 29.4rem; padding: 2.4rem 2.1rem; + + background-color: ${theme.colors.white}; `; export const headerStyle = (theme: Theme) => css` diff --git a/src/components/orderDetail/orderInfo/orderInfoStyle.ts b/src/components/orderDetail/orderInfo/orderInfoStyle.ts index c3e2f7c..a853143 100644 --- a/src/components/orderDetail/orderInfo/orderInfoStyle.ts +++ b/src/components/orderDetail/orderInfo/orderInfoStyle.ts @@ -6,6 +6,7 @@ export const orderInfoComponentStyle = css` gap: 1.6rem; width: 91.1rem; height: 17.6rem; + margin-top: 4.8rem; `; export const headerComponentStyle = (theme: Theme) => css` diff --git a/src/components/orderDetail/orderStatus/orderStatusStyle.ts b/src/components/orderDetail/orderStatus/orderStatusStyle.ts index 45221d2..7c7e77a 100644 --- a/src/components/orderDetail/orderStatus/orderStatusStyle.ts +++ b/src/components/orderDetail/orderStatus/orderStatusStyle.ts @@ -1,6 +1,6 @@ import { Theme, css } from '@emotion/react'; -export const orderStatusComponentStyle = css` +export const orderStatusComponentStyle = (theme: Theme) => css` display: flex; flex-direction: column; gap: 1.6rem; @@ -8,6 +8,8 @@ export const orderStatusComponentStyle = css` width: 91.1rem; height: 47.1rem; padding: 2.4rem; + + background-color: ${theme.colors.white}; `; export const headerComponentStyle = css` diff --git a/src/components/orderDetail/productRecommend/productRecommendStyle.ts b/src/components/orderDetail/productRecommend/productRecommendStyle.ts index d47f674..7f6fdd1 100644 --- a/src/components/orderDetail/productRecommend/productRecommendStyle.ts +++ b/src/components/orderDetail/productRecommend/productRecommendStyle.ts @@ -1,11 +1,13 @@ import { Theme, css } from '@emotion/react'; -export const productRecommandContainer = css` +export const productRecommandContainer = (theme: Theme) => css` display: flex; flex-direction: column; gap: 0.4rem; width: 91.1rem; padding: 0.8rem 2.4rem 6.8rem; + + background-color: ${theme.colors.white}; `; export const headerStringStyle = (theme: Theme) => css` diff --git a/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts b/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts index 8d4634c..0c5d265 100644 --- a/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts +++ b/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts @@ -1,12 +1,14 @@ import { Theme, css } from '@emotion/react'; -export const serviceIntroduceContainer = css` +export const serviceIntroduceContainer = (theme: Theme) => css` display: flex; flex-direction: column; gap: 1.6rem; width: 91.1rem; height: 28rem; padding: 2.4rem 1.6rem; + + background-color: ${theme.colors.white}; `; export const hedarTitleStyle = (theme: Theme) => css` diff --git a/src/components/orderDetail/sideBar/sideBarStyle.ts b/src/components/orderDetail/sideBar/sideBarStyle.ts index f4fa9e1..d78739c 100644 --- a/src/components/orderDetail/sideBar/sideBarStyle.ts +++ b/src/components/orderDetail/sideBar/sideBarStyle.ts @@ -5,7 +5,7 @@ export const sideBarComponentStyle = (theme: Theme) => css` flex-direction: column; align-items: center; align-items: flex-end; - width: 36rem; + width: 28rem; height: 133.4rem; padding-right: 1.1rem; diff --git a/src/layout/OrderLayout.tsx b/src/layout/OrderLayout.tsx new file mode 100644 index 0000000..eb8d132 --- /dev/null +++ b/src/layout/OrderLayout.tsx @@ -0,0 +1,19 @@ +import Footer from '@components/footer/Footer'; +import OrderHeader from '@components/header/orderHeader/OrderHeader'; +import { ReactNode } from 'react'; + +import { orderLayoutContainerStyle, orderLayoutStyle } from './orderLayoutStyle'; + +interface LayoutProps { + children: ReactNode; +} + +const OrderLayout = ({ children }: LayoutProps) => ( +
+ +
{children}
+
+
+); + +export default OrderLayout; diff --git a/src/layout/orderLayoutStyle.ts b/src/layout/orderLayoutStyle.ts new file mode 100644 index 0000000..7a00e96 --- /dev/null +++ b/src/layout/orderLayoutStyle.ts @@ -0,0 +1,17 @@ +import { Theme, css } from '@emotion/react'; + +export const orderLayoutContainerStyle = (theme: Theme) => css` + width: 100vw; + margin: 0 auto; + + background-color: ${theme.colors.gray2}; +`; + +export const orderLayoutStyle = css` + display: flex; + gap: 1.2rem; + width: 121.4rem; + margin: 0 auto; + margin-top: 0.6rem; + margin-bottom: 4rem; +`; diff --git a/src/pages/OrderPage.tsx b/src/pages/OrderPage.tsx index a64db3b..42cdb64 100644 --- a/src/pages/OrderPage.tsx +++ b/src/pages/OrderPage.tsx @@ -1,3 +1,23 @@ -const OrderPage = () =>
OrderPage
; +import OrderLayout from 'layout/OrderLayout'; +import { SideBarComponent } from '@components/orderDetail/sideBar/sideBar'; +import { OrderInfoComponent } from '@components/orderDetail/orderInfo/orderInfo'; +import OrderStatusComponent from '@components/orderDetail/orderStatus/orderStatus'; +import OrderHistory from '@components/orderDetail/orderHistory/orderHistory'; +import ServiceIntroduce from '@components/orderDetail/serviceIntroduce/serviceIntroduce'; +import ProductRecommendComponent from '@components/orderDetail/productRecommend/productRecommend'; +import { mainComponentStyle } from './orderPageStyle'; + +const OrderPage = () => ( + + +
+ + + + + +
+ +); export default OrderPage; diff --git a/src/pages/orderPageStyle.ts b/src/pages/orderPageStyle.ts new file mode 100644 index 0000000..db5406b --- /dev/null +++ b/src/pages/orderPageStyle.ts @@ -0,0 +1,11 @@ +import { css } from '@emotion/react'; + +export const mainComponentStyle = css` + display: flex; + flex-direction: column; + gap: 1.6rem; +`; + +export const orderLayoutStyle = css` + margin-top: 0.6rem; +`; From 573ce2099da3b0f663fd28014893efab2eb27f0d Mon Sep 17 00:00:00 2001 From: Taew00k Date: Fri, 29 Nov 2024 01:51:02 +0900 Subject: [PATCH 2/4] =?UTF-8?q?style:=20=EC=A3=BC=EB=AC=B8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/orderDetail/orderInfo/orderInfoStyle.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/orderDetail/orderInfo/orderInfoStyle.ts b/src/components/orderDetail/orderInfo/orderInfoStyle.ts index a853143..4e9a334 100644 --- a/src/components/orderDetail/orderInfo/orderInfoStyle.ts +++ b/src/components/orderDetail/orderInfo/orderInfoStyle.ts @@ -16,14 +16,10 @@ export const headerComponentStyle = (theme: Theme) => css` min-height: 5.2rem; padding-left: 2.1rem; ${theme.fonts.kor.titleBold20} - - background-color: ${theme.colors.white}; `; -export const contentComponentStyle = (theme: Theme) => css` +export const contentComponentStyle = css` display: flex; gap: 1.5rem; width: 100%; - - background-color: ${theme.colors.white}; `; From 98d45a264b729dcb32ed1fee87efaa15a0ce04df Mon Sep 17 00:00:00 2001 From: Taew00k Date: Fri, 29 Nov 2024 02:31:28 +0900 Subject: [PATCH 3/4] =?UTF-8?q?style:=20=ED=97=A4=EB=8D=94=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=EC=83=89=20=ED=9D=B0=EC=83=89=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/orderDetail/orderInfo/orderInfoStyle.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/orderDetail/orderInfo/orderInfoStyle.ts b/src/components/orderDetail/orderInfo/orderInfoStyle.ts index 4e9a334..c2059d4 100644 --- a/src/components/orderDetail/orderInfo/orderInfoStyle.ts +++ b/src/components/orderDetail/orderInfo/orderInfoStyle.ts @@ -15,7 +15,9 @@ export const headerComponentStyle = (theme: Theme) => css` width: 91.1rem; min-height: 5.2rem; padding-left: 2.1rem; + ${theme.fonts.kor.titleBold20} + background-color: ${theme.colors.white}; `; export const contentComponentStyle = css` From 5aec4819c623c1e1d881b446a775f8a424b09482 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Fri, 29 Nov 2024 05:24:43 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20vercel=20router=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vercel.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..9a45c90 --- /dev/null +++ b/vercel.json @@ -0,0 +1 @@ +{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }