Merge pull request #118 from SOPT-all/develop

[FEAT] 메인 병합

src/apis/orderPage/getOrders.ts

@@ -0,0 +1,22 @@
+import instance from '@apis/instance';
+
+interface OrderResponse {
+	productId: number;
+	productImage: string;
+	detail: string;
+	price: number;
+	quantity: number;
+}
+
+interface OrderHistoryResponse {
+	success: boolean;
+	data: OrderResponse;
+	error: string | null;
+}
+
+const fetchOrders = async (): Promise<OrderHistoryResponse> => {
+	const response = await instance.get<OrderHistoryResponse>(`/api/orders`);
+	return response.data;
+};
+
+export default fetchOrders;

src/apis/orderPage/orderQueries.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import fetchOrders from './getOrders';
+
+const useOrders = () =>
+	useQuery({
+		queryKey: ['orders'],
+		queryFn: () => fetchOrders(),
+	});
+
+export default useOrders;

src/components/orderDetail/orderHistory/orderHistory.tsx

@@ -1,7 +1,10 @@
+import useOrders from '@apis/orderPage/orderQueries';
 import { IcArrowrightGray12, IcChatBlack24, IcArrowbottomGray12, IcCameraBlack24 } from '@assets/icons';
-import productImage from '@assets/images/img_purchasedproduct_113.png';
 import OutlineTextBtn from '@components/button/outlineTextBtn/OutlineTextBtn';
-import ORDER_HISTORYT from '@constants/orderHisotry';
+import MESSAGE from '@constants/errorMessages';
+import { AxiosError } from 'axios';
+import { useNavigate } from 'react-router-dom';
+
 import {
 	orderHistoryContainerStyle,
 	headerStyle,
@@ -23,50 +26,69 @@ import {
 	costBoldLabelStyle,
 } from './orderHistoryStyle';
 
-const OrderHistory = () => (
-	<div css={orderHistoryContainerStyle}>
-		<header css={headerStyle}>주문 내역</header>
-		<div css={storeNameContainerStyle}>
-			<p css={storeNameStyle}>Toocki Flagship Direct store</p>
-			<IcArrowrightGray12 />
-			<IcChatBlack24 />
-		</div>
-		<div css={productContentStyle}>
-			<div css={productImageStyle}>
-				<img src={productImage} alt="상품 이미지" />
-				<IcCameraBlack24 />
+const OrderHistory = () => {
+	const { data, error } = useOrders();
+	const navigate = useNavigate();
+
+	if (error) {
+		const axiosError = error as AxiosError<{ error: { message: string } }>;
+		const errorMessage = axiosError.response?.data?.error?.message || MESSAGE.UNKNOWN_ERROR;
+		console.log(errorMessage);
+	}
+
+	const handleProductTitleClick = () => {
+		navigate('/');
+	};
+
+	const priceSum = (data?.data?.price ?? 0) * (data?.data?.quantity ?? 0);
+
+	return (
+		<div css={orderHistoryContainerStyle}>
+			<header css={headerStyle}>주문 내역</header>
+			<div css={storeNameContainerStyle}>
+				<p css={storeNameStyle}>Toocki Flagship Direct store</p>
+				<IcArrowrightGray12 />
+				<IcChatBlack24 />
 			</div>
-			<div css={productInfoContainerStyle}>
-				<div css={productInfoStyle}>
-					<p css={productTitleStyle}>{ORDER_HISTORYT.detail}</p>
-					<p>Clear</p>
-					<div css={productPriceStyle}>
-						<p>￦{ORDER_HISTORYT.price.toLocaleString()}</p>
-						<p>x{ORDER_HISTORYT.quantity}</p>
+			<div css={productContentStyle}>
+				<div css={productImageStyle}>
+					<img src={data?.data.productImage} alt="상품 이미지" />
+					<IcCameraBlack24 />
+				</div>
+				<div css={productInfoContainerStyle}>
+					<div css={productInfoStyle}>
+						<p css={productTitleStyle} onClick={handleProductTitleClick}>
+							{data?.data.detail}
+						</p>
+						<p>Clear</p>
+						<div css={productPriceStyle}>
+							<p>￦{data?.data.price.toLocaleString()}</p>
+							<p>x{data?.data.quantity}</p>
+						</div>
 					</div>
+					<p css={blueInfoStyle}>빠른 배송 · 무료 반품 · 배송 약속</p>
 				</div>
-				<p css={blueInfoStyle}>빠른 배송 · 무료 반품 · 배송 약속</p>
-			</div>
-			<div css={buttonContainerStyle}>
-				<OutlineTextBtn btnText="장바구니에 담기" size="medium" />
-				<OutlineTextBtn btnText="환불/반품" size="medium" />
-				<OutlineTextBtn btnText="영수증 보기" size="medium" />
-			</div>
-		</div>
-		<div css={productCostStyle}>
-			<div css={costRowStyle}>
-				<p css={costGrayLabelStyle}>합계</p>
-				<div css={costValueStyle}>
-					<p>￦{ORDER_HISTORYT.price.toLocaleString()}</p>
-					<IcArrowbottomGray12 />
+				<div css={buttonContainerStyle}>
+					<OutlineTextBtn btnText="장바구니에 담기" size="medium" />
+					<OutlineTextBtn btnText="환불/반품" size="medium" />
+					<OutlineTextBtn btnText="영수증 보기" size="medium" />
 				</div>
 			</div>
-			<div css={costRowStyle}>
-				<p css={costLabelStyle}>총 금액</p>
-				<p css={costBoldLabelStyle}>￦1,202</p>
+			<div css={productCostStyle}>
+				<div css={costRowStyle}>
+					<p css={costGrayLabelStyle}>합계</p>
+					<div css={costValueStyle}>
+						<p>￦{priceSum.toLocaleString()}</p>
+						<IcArrowbottomGray12 />
+					</div>
+				</div>
+				<div css={costRowStyle}>
+					<p css={costLabelStyle}>총 금액</p>
+					<p css={costBoldLabelStyle}>￦230,202</p>
+				</div>
 			</div>
 		</div>
-	</div>
-);
+	);
+};
 
 export default OrderHistory;

src/components/orderDetail/orderHistory/orderHistoryStyle.ts

@@ -39,6 +39,11 @@ export const productImageStyle = css`
 	position: relative;
 	margin-right: 1.4rem;
 
+	img {
+		width: 11.3rem;
+		height: 11.3rem;
+	}
+
 	svg {
 		position: absolute;
 		right: 0;
@@ -69,6 +74,8 @@ export const productTitleStyle = (theme: Theme) => css`
 
 	white-space: nowrap;
 	text-overflow: ellipsis;
+
+	cursor: pointer;
 `;
 
 export const productPriceStyle = css`

src/constants/dummyOrderHistory.ts

@@ -0,0 +1,14 @@
+const dummpyOrderHistory = {
+	success: true,
+	data: {
+		productId: 1,
+		productImage: 'https://ae01.alicdn.com/kf/S709d4d4778ea430c87c0bf0a6574fa8dz.jpg_220x220q75.jpg_.webp',
+		detail:
+			'Toocki C타입 to C타입 케이블, 100W PD 고속 충전 충전기, USB C to USB C 디스플레이 케이블, 샤오미 POCO F3 리얼미 맥북 아이패드용',
+		price: 2700,
+		quantity: 2,
+	},
+	error: null,
+};
+
+export default dummpyOrderHistory;