[FEAT] 주문 상세 페이지 구현

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`

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`
@@ -14,15 +15,13 @@ export const headerComponentStyle = (theme: Theme) => css`
 	width: 91.1rem;
 	min-height: 5.2rem;
 	padding-left: 2.1rem;
-	${theme.fonts.kor.titleBold20}
 
+	${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};
 `;

src/components/orderDetail/orderStatus/orderStatusStyle.ts

@@ -1,13 +1,15 @@
 import { Theme, css } from '@emotion/react';
 
-export const orderStatusComponentStyle = css`
+export const orderStatusComponentStyle = (theme: Theme) => css`
 	display: flex;
 	flex-direction: column;
 	gap: 1.6rem;
 	align-items: flex-start;
 	width: 91.1rem;
 	height: 47.1rem;
 	padding: 2.4rem;
+
+	background-color: ${theme.colors.white};
 `;
 
 export const headerComponentStyle = css`

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`

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`

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;
 

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) => (
+	<div css={orderLayoutContainerStyle}>
+		<OrderHeader />
+		<main css={orderLayoutStyle}>{children}</main>
+		<Footer />
+	</div>
+);
+
+export default OrderLayout;

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;
+`;

src/pages/OrderPage.tsx

@@ -1,3 +1,23 @@
-const OrderPage = () => <div>OrderPage</div>;
+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 = () => (
+	<OrderLayout>
+		<SideBarComponent />
+		<div css={mainComponentStyle}>
+			<OrderInfoComponent />
+			<OrderStatusComponent />
+			<OrderHistory />
+			<ServiceIntroduce />
+			<ProductRecommendComponent />
+		</div>
+	</OrderLayout>
+);
 
 export default OrderPage;

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;
+`;