[FEAT] 상품 정보 조회 api

src/apis/productPage/product/getProduct.ts

@@ -1,29 +1,26 @@
 import instance from '@apis/instance';
-
-interface ProductResponse {
+interface ProductInfoType {
 	productId: number;
 	productImage: string;
 	detail: string;
 	priceOriginal: number;
-	percent: number;
 	priceDiscount: number;
+	percent: number;
 	isCoupon: boolean;
 	categoryName: string;
 	reviewCount: number;
 	rating: number;
 }
 
-interface RelatedProductsResponse {
+interface ProductResponse {
 	success: boolean;
-	data: {
-		products: ProductResponse[];
-	};
+	data: ProductInfoType;
 	error: string | null;
 }
 
-const fetchRelatedProducts = async (productId: number): Promise<ProductResponse[]> => {
-	const response = await instance.get<RelatedProductsResponse>(`/api/products/${productId}/related`);
-	return response.data.data.products;
+const fetchProduct = async (productId: number): Promise<ProductResponse> => {
+	const response = await instance.get<ProductResponse>(`/api/products/${productId}`);
+	return response.data;
 };
 
-export default fetchRelatedProducts;
+export default fetchProduct;

src/apis/productPage/product/getRelatedProducts.ts

@@ -0,0 +1,29 @@
+import instance from '@apis/instance';
+
+interface ProductResponse {
+	productId: number;
+	productImage: string;
+	detail: string;
+	priceOriginal: number;
+	percent: number;
+	priceDiscount: number;
+	isCoupon: boolean;
+	categoryName: string;
+	reviewCount: number;
+	rating: number;
+}
+
+interface RelatedProductsResponse {
+	success: boolean;
+	data: {
+		products: ProductResponse[];
+	};
+	error: string | null;
+}
+
+const fetchRelatedProducts = async (productId: number): Promise<ProductResponse[]> => {
+	const response = await instance.get<RelatedProductsResponse>(`/api/products/${productId}/related`);
+	return response.data.data.products;
+};
+
+export default fetchRelatedProducts;

src/apis/productPage/product/productQueries.ts

@@ -1,12 +1,12 @@
+import fetchProduct from '@apis/productPage/product/getProduct';
+import dummyProductResponse from '@constants/dummyProductResponse';
 import { useQuery } from '@tanstack/react-query';
-import fetchRelatedProducts from './getProduct';
 
-const useRelatedProducts = (productId: number) => {
-	return useQuery({
-		queryKey: ['relatedProducts', productId],
-		queryFn: () => fetchRelatedProducts(productId),
-		initialData: [],
+const useProductDetail = (productId: number) =>
+	useQuery({
+		queryKey: ['product', productId],
+		queryFn: () => fetchProduct(productId),
+		initialData: dummyProductResponse, // 더미데이터를 initialData로 설정해 서버 요청 실패시에도 해당 데이터로 유지하도록 설정
 	});
-};
 
-export default useRelatedProducts;
+export default useProductDetail;

src/apis/productPage/product/relatedProductsQueries.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import fetchRelatedProducts from './getRelatedProducts';
+
+const useRelatedProducts = (productId: number) => {
+	return useQuery({
+		queryKey: ['relatedProducts', productId],
+		queryFn: () => fetchRelatedProducts(productId),
+		initialData: [],
+	});
+};
+
+export default useRelatedProducts;

src/components/ProductInfo/ProductInfo.tsx

@@ -1,6 +1,6 @@
+import useProductDetail from '@apis/productPage/product/productQueries';
 import { IcInfoGray14, IcWarningBrandYellow16, IcDot } from '@assets/icons';
 import bannerRewordImg from '@assets/images/img_banner_reward.png';
-import productSubImg1 from '@assets/images/img_product_sub1.png';
 import { productOptionImages, productSubImages } from '@assets/images/productDetailImages';
 import StarBtn from '@components/button/starBtn/StarBtn';
 import {
@@ -29,61 +29,73 @@ import {
 	reivewBoxStyle,
 } from '@components/ProductInfo/ProductInfoStyle';
 
-const ProductInfo = () => (
-	<div css={columnflexStyle}>
-		<article css={productInfoContainerStyle}>
-			<section css={proudctImgLayoutStyle}>
-				<div css={detailImgBoxStyle}>
-					{productSubImages.map((imgSrc) => (
-						<img key={imgSrc} src={imgSrc} alt="상품 상세 이미지" />
-					))}
-				</div>
-				<img css={productImgStyle} src={productSubImg1} alt="상품 대표 이미지" />
-			</section>
-			<section css={productDetailLayoutStyle}>
-				<img src={bannerRewordImg} alt="상품 리워드 배너" />
-				<div css={productDetaiWrapperStyle}>
-					<div>
-						<div css={priceBoxStyle}>
-							<div css={priceDiscountStyle}>₩7.52</div>
-							<div css={priceOriginalStyle}>₩43.20</div>
-							<div css={discountPercentStyle}>82% 할인</div>
-							<div css={endSaleTiemStyle}>할인 종료시간: 12월 8일 16:59</div>
+interface ProductInfoProps {
+	productId: number;
+}
+
+const ProductInfo = ({ productId }: ProductInfoProps) => {
+	const { data, error } = useProductDetail(productId);
+
+	if (error || !data) {
+		console.error(error);
+		return null;
+	}
+
+	const { productImage, detail, priceOriginal, priceDiscount, percent, rating, reviewCount } = data.data;
+
+	return (
+		<div css={columnflexStyle}>
+			<article css={productInfoContainerStyle}>
+				<section css={proudctImgLayoutStyle}>
+					<div css={detailImgBoxStyle}>
+						{productSubImages.map((imgSrc) => (
+							<img key={imgSrc} src={imgSrc} alt="상품 상세 이미지" />
+						))}
+					</div>
+					<img css={productImgStyle} src={productImage} alt="상품 대표 이미지" />
+				</section>
+				<section css={productDetailLayoutStyle}>
+					<img src={bannerRewordImg} alt="상품 리워드 배너" />
+					<div css={productDetaiWrapperStyle}>
+						<div>
+							<div css={priceBoxStyle}>
+								<div css={priceDiscountStyle}>₩{priceDiscount.toLocaleString()}</div>
+								<div css={priceOriginalStyle}>₩{priceOriginal.toLocaleString()}</div>
+								<div css={discountPercentStyle}>{percent}% 할인</div>
+								<div css={endSaleTiemStyle}>할인 종료시간: 12월 8일 16:59</div>
+							</div>
+							<div css={priceDescriptionStyle}>VAT가 포함된 가격 | 1% 추가 할인</div>
 						</div>
-						<div css={priceDescriptionStyle}>VAT가 포함된 가격 | 1% 추가 할인</div>
+						<div css={productNameStyle}>{detail}</div>
 					</div>
-					<div css={productNameStyle}>
-						Toocki GaN USB C 충전기, 맥쿡 아이폰 15, 14, 13, 12 프로 맥스, 삼성, 샤오미 포코용, 멀티 컬러, 고속 충전,
-						67W
+					<div css={reivewBoxStyle}>
+						<StarBtn rating={rating} reviewCount={reviewCount} />
+						<IcDot />
+						<div css={reviewBoxStyle}>5,000+개 판매</div>
+					</div>
+					<div css={mediumDividerStyle} />
+					<div css={optionStyle}>색상: 검정</div>
+					<section css={optionImgStyle}>
+						{productOptionImages.map((imgSrc, index) => (
+							<img key={`${imgSrc + index}`} src={imgSrc} alt="상품 옵션" />
+						))}
+					</section>
+					<div css={mediumDividerStyle} />
+					<div css={extraInfoStyle}>
+						<p>가격 정보 더보기</p>
+						<IcInfoGray14 />
 					</div>
-				</div>
-				<div css={reivewBoxStyle}>
-					<StarBtn rating={4.8} reviewCount={123} />
-					<IcDot />
-					<div css={reviewBoxStyle}>5,000+개 판매</div>
-				</div>
-				<div css={mediumDividerStyle} />
-				<div css={optionStyle}>색상: 검정</div>
-				<section css={optionImgStyle}>
-					{productOptionImages.map((imgSrc, index) => (
-						<img key={`${imgSrc + index}`} src={imgSrc} alt="상품 옵션" />
-					))}
 				</section>
-				<div css={mediumDividerStyle} />
-				<div css={extraInfoStyle}>
-					<p>가격 정보 더보기</p>
-					<IcInfoGray14 />
+			</article>
+			<section css={warnLayoutStyle}>
+				<h1 css={warnTitleStyle}>경고 / 면책 조항</h1>
+				<div css={warnDescriptionStyle}>
+					<IcWarningBrandYellow16 />
+					충전 및 보관 시 잠재적인 화재 위험을 유의하시고, 반드시 사용 설명서를 엄격히 준수해 주세요.
 				</div>
 			</section>
-		</article>
-		<section css={warnLayoutStyle}>
-			<h1 css={warnTitleStyle}>경고 / 면책 조항</h1>
-			<div css={warnDescriptionStyle}>
-				<IcWarningBrandYellow16 />
-				충전 및 보관 시 잠재적인 화재 위험을 유의하시고, 반드시 사용 설명서를 엄격히 준수해 주세요.
-			</div>
-		</section>
-	</div>
-);
+		</div>
+	);
+};
 
 export default ProductInfo;

src/components/product/ProductCardList.tsx

@@ -1,4 +1,4 @@
-import useRelatedProducts from '@apis/productPage/product/productQueries';
+import useRelatedProducts from '@apis/productPage/product/relatedProductsQueries';
 import ProductCard from './ProductCard';
 import {
 	productListContainer,

src/components/productOrderBox/ProductOrderBox.tsx

@@ -11,7 +11,7 @@ const ProductOrderBoxContainer = css`
 
 const ProductOrderBox = () => (
 	<div css={ProductOrderBoxContainer}>
-		<ProductInfo />
+		<ProductInfo productId={1} />
 		<OrderBox />
 	</div>
 );

src/constants/dummyProductResponse.ts

@@ -0,0 +1,19 @@
+const dummyProductResponse = {
+	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 리얼미 맥북 아이패드용',
+		priceOriginal: 6812,
+		percent: 60,
+		priceDiscount: 2700,
+		isCoupon: true,
+		categoryName: 'Electronics',
+		reviewCount: 8,
+		rating: 3.25,
+	},
+	error: null,
+};
+
+export default dummyProductResponse;