feat: api 연동 구현

SOPT-all · Nov 29, 2024 · 7882a2f · 7882a2f
1 parent e9ec845
commit 7882a2f
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 83 deletions.
diff --git a/src/apis/orderPage/getOrders.ts b/src/apis/orderPage/getOrders.ts
@@ -1,11 +1,22 @@
-import { useQuery } from '@tanstack/react-query';
+import instance from '@apis/instance';
 
-import fetchOrders from './orderQueries';
+interface OrderResponse {
+	productId: number;
+	productImage: string;
+	detail: string;
+	price: number;
+	quantity: number;
+}
 
-const useOrders = (productId: number) =>
-	useQuery({
-		queryKey: ['orders', productId],
-		queryFn: () => fetchOrders(),
-	});
+interface OrderHistoryResponse {
+	success: boolean;
+	data: OrderResponse;
+	error: string | null;
+}
 
-export default useOrders;
+const fetchOrders = async (): Promise<OrderHistoryResponse> => {
+	const response = await instance.get<OrderHistoryResponse>(`/api/orders`);
+	return response.data;
+};
+
+export default fetchOrders;
diff --git a/src/apis/orderPage/orderQueries.ts b/src/apis/orderPage/orderQueries.ts
@@ -1,30 +1,13 @@
-import instance from '@apis/instance';
-import { AxiosError } from 'axios';
+import dummpyOrderHistory from '@constants/dummyOrderHistory';
+import { useQuery } from '@tanstack/react-query';
 
-interface OrderResponse {
-	productId: number;
-	productImage: string;
-	detail: string;
-	price: number;
-	quantity: number;
-}
+import fetchOrders from './getOrders';
 
-interface OrderHistoryResponse {
-	success: boolean;
-	data: OrderResponse[];
-	error: string | null;
-}
+const useOrders = () =>
+	useQuery({
+		queryKey: ['orders'],
+		queryFn: () => fetchOrders(),
+		initialData: dummpyOrderHistory,
+	});
 
-const fetchOrders = async (): Promise<OrderResponse[]> => {
-	try {
-		const response = await instance.get<OrderHistoryResponse>(`/api/orders`);
-		return response.data.data;
-	} catch (error) {
-		if (error instanceof AxiosError) {
-			throw error.response?.data || new Error('An error occurred');
-		}
-		throw error;
-	}
-};
-
-export default fetchOrders;
+export default useOrders;
diff --git a/src/components/orderDetail/orderHistory/orderHistory.tsx b/src/components/orderDetail/orderHistory/orderHistory.tsx
@@ -1,7 +1,9 @@
+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 {
 	orderHistoryContainerStyle,
 	headerStyle,
@@ -23,50 +25,64 @@ 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();
+
+	if (!data) {
+		return null;
+	}
+
+	if (error) {
+		const axiosError = error as AxiosError<{ error: { message: string } }>;
+		const errorMessage = axiosError.response?.data?.error?.message || MESSAGE.UNKNOWN_ERROR;
+		console.log(errorMessage);
+	}
+
+	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}>{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>￦{(data.data.price * data.data.quantity).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;
diff --git a/src/components/orderDetail/orderHistory/orderHistoryStyle.ts b/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;

diff --git a/src/constants/dummyOrderHistory.ts b/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;
diff --git a/src/constants/orderHisotry.ts b/src/constants/orderHisotry.ts