From 7882a2f71a9cb4b9d3a80067887350fc6d3cf861 Mon Sep 17 00:00:00 2001 From: Taew00k Date: Fri, 29 Nov 2024 18:21:41 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20api=20=EC=97=B0=EB=8F=99=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/orderPage/getOrders.ts | 27 ++++-- src/apis/orderPage/orderQueries.ts | 37 ++----- .../orderDetail/orderHistory/orderHistory.tsx | 96 +++++++++++-------- .../orderHistory/orderHistoryStyle.ts | 5 + src/constants/dummyOrderHistory.ts | 14 +++ src/constants/orderHisotry.ts | 8 -- 6 files changed, 104 insertions(+), 83 deletions(-) create mode 100644 src/constants/dummyOrderHistory.ts delete mode 100644 src/constants/orderHisotry.ts diff --git a/src/apis/orderPage/getOrders.ts b/src/apis/orderPage/getOrders.ts index f9be227..d1c3662 100644 --- 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; \ No newline at end of file +const fetchOrders = async (): Promise => { + const response = await instance.get(`/api/orders`); + return response.data; +}; + +export default fetchOrders; diff --git a/src/apis/orderPage/orderQueries.ts b/src/apis/orderPage/orderQueries.ts index f7811e9..2fac865 100644 --- 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 => { - try { - const response = await instance.get(`/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 index 0fa0f2a..bc20ee4 100644 --- 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 = () => ( -
-
주문 내역
-
-

Toocki Flagship Direct store

- - -
-
-
- 상품 이미지 - +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 ( +
+
주문 내역
+
+

Toocki Flagship Direct store

+ +
-
-
-

{ORDER_HISTORYT.detail}

-

Clear

-
-

￦{ORDER_HISTORYT.price.toLocaleString()}

-

x{ORDER_HISTORYT.quantity}

+
+
+ 상품 이미지 + +
+
+
+

{data.data.detail}

+

Clear

+
+

￦{data.data.price.toLocaleString()}

+

x{data.data.quantity}

+
+

빠른 배송 · 무료 반품 · 배송 약속

-

빠른 배송 · 무료 반품 · 배송 약속

-
-
- - - -
-
-
-
-

합계

-
-

￦{ORDER_HISTORYT.price.toLocaleString()}

- +
+ + +
-
-

총 금액

-

￦1,202

+
+
+

합계

+
+

￦{(data.data.price * data.data.quantity).toLocaleString()}

+ +
+
+
+

총 금액

+

￦230,202

+
-
-); + ); +}; export default OrderHistory; diff --git a/src/components/orderDetail/orderHistory/orderHistoryStyle.ts b/src/components/orderDetail/orderHistory/orderHistoryStyle.ts index 342c05a..7338cb5 100644 --- 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 new file mode 100644 index 0000000..84d03ed --- /dev/null +++ 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 deleted file mode 100644 index be65f54..0000000 --- a/src/constants/orderHisotry.ts +++ /dev/null @@ -1,8 +0,0 @@ -const ORDER_HISTORYT = { - detail: - '소프트 실리콘 충전기 케이블 와인더, 고속 충전 케이블 보호대 슬리브, 애플 아이폰 데이터 코드, 투명 케이스와 많이 사용되는 핸드폰', - price: 1358, - quantity: 1, -} as const; - -export default ORDER_HISTORYT;