Merge pull request #94 from SOPT-all/feat/#90/product-order-api

[FEAT] 주문 완료 api
SOPT-all · Nov 29, 2024 · e3be852 · e3be852
2 parents 12d92e0 + 7543582
commit e3be852
Show file tree

Hide file tree

Showing 10 changed files with 141 additions and 60 deletions.
diff --git a/src/apis/productPage/order/orderProduct.ts b/src/apis/productPage/order/orderProduct.ts
@@ -0,0 +1,11 @@
+import instance from '@apis/instance';
+
+const fetchOrderProduct = async (productId: number) => {
+	const response = await instance.post(`/api/order`, {
+		productId,
+	});
+
+	return response.data;
+};
+
+export default fetchOrderProduct;
diff --git a/src/apis/productPage/order/orderQuery.ts b/src/apis/productPage/order/orderQuery.ts
@@ -0,0 +1,15 @@
+import fetchOrderProduct from '@apis/productPage/order/orderProduct';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+const useOrderProduct = () => {
+	const queryClient = useQueryClient();
+
+	const mutation = useMutation({
+		mutationFn: (productId: number) => fetchOrderProduct(productId),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: ['order'] }),
+	});
+
+	return { mutate: mutation.mutate };
+};
+
+export default useOrderProduct;
diff --git a/src/assets/icons/ic_dot.svg b/src/assets/icons/ic_dot.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -140,3 +140,4 @@ export { default as ImgLine } from '../images/Line 18.svg';
 export { default as ImgVector7192 } from '../images/Vector 7192.svg';
 export { default as ImgProfile30 } from '../images/img_profile_30.svg';
 export { default as ImgGraph } from '@assets/images/img_graph.svg';
+export { default as IcDot } from './ic_dot.svg';
diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx
@@ -1,7 +1,8 @@
-import { IcInfoGray14, IcWarningBrandYellow16 } from '@assets/icons';
+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 {
 	productInfoContainerStyle,
 	proudctImgLayoutStyle,
@@ -25,6 +26,7 @@ import {
 	endSaleTiemStyle,
 	reviewBoxStyle,
 	columnflexStyle,
+	reivewBoxStyle,
 } from '@components/ProductInfo/ProductInfoStyle';
 
 const ProductInfo = () => (
@@ -55,7 +57,11 @@ const ProductInfo = () => (
 						67W
 					</div>
 				</div>
-				<div css={reviewBoxStyle}>5,000+개 판매</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}>

diff --git a/src/components/ProductInfo/ProductInfoStyle.ts b/src/components/ProductInfo/ProductInfoStyle.ts
@@ -103,6 +103,8 @@ export const productNameStyle = (theme: Theme) => css`
 `;
 
 export const reviewBoxStyle = (theme: Theme) => css`
+	display: flex;
+	align-items: center;
 	width: 100%;
 	height: 2rem;
 
@@ -170,3 +172,11 @@ export const columnflexStyle = css`
 	display: flex;
 	flex-direction: column;
 `;
+
+export const reivewBoxStyle = css`
+	display: flex;
+	gap: 0.6rem;
+	align-items: center;
+	height: 2rem;
+`;
+
diff --git a/src/components/button/starBtn/StarBtnStyle.ts b/src/components/button/starBtn/StarBtnStyle.ts
@@ -1,13 +1,17 @@
 import { css, Theme } from '@emotion/react';
 
-export const starBtnContainerStyle = css`
+const flexBoxStyle = css`
 	display: flex;
 	align-items: center;
-	width: 11.5rem;
 	height: 2rem;
+`;
+
+export const starBtnContainerStyle = css`
+	width: 11.5rem;
 
 	background-color: transparent;
 	border: none;
+	${flexBoxStyle}
 `;
 
 export const startIconBoxStyle = css`
@@ -20,10 +24,12 @@ export const ratingStyle = (theme: Theme) => css`
 	margin-left: 0.6rem;
 
 	${theme.fonts.eng.captionBold11};
+	${flexBoxStyle}
 `;
 
 export const reviewCountSTyle = (theme: Theme) => css`
 	margin-left: 0.4rem;
 
+	${flexBoxStyle}
 	${theme.fonts.eng.captionMedium12};
 `;
diff --git a/src/components/orderBox/OrderBox.tsx b/src/components/orderBox/OrderBox.tsx
@@ -1,3 +1,4 @@
+import useOrderProduct from '@apis/productPage/order/orderQuery';
 import {
 	IcMapBlackStorke18,
 	IcDeliveryBlack20,
@@ -31,69 +32,90 @@ import {
 	engCaptionBoldStyle,
 	orderBtnWrapperStyle,
 	emojiBtnWrapperStyle,
+	freeDeliveryText,
 } from '@components/orderBox/OrderboxStyle';
+import FreeTag from '@components/product/FreeTag';
+import { useNavigate } from 'react-router-dom';
 
-const OrderBox = () => (
-	<article css={orderBoxContinerStyle}>
-		<section css={orderInfoLayoutStyle}>
-			<div css={orderTitleWrapperStyle}>
-				<p css={korTitleStyle}>배송지:</p>
-				<div css={adressStyle}>
-					<IcMapBlackStorke18 />
-					<p>Gangnam-gu, Seoul, Korea</p>
+const OrderBox = () => {
+	const navigate = useNavigate();
+	const { mutate: orderProduct } = useOrderProduct();
+
+	const handleOrderBtnClick = (productId: number) => {
+		orderProduct(productId, {
+			onSuccess: (response) => {
+				if (response.success) {
+					navigate('/order');
+				}
+			},
+			onError: (error) => {
+				console.error(error);
+			},
+		});
+	};
+
+	return (
+		<article css={orderBoxContinerStyle}>
+			<section css={orderInfoLayoutStyle}>
+				<div css={orderTitleWrapperStyle}>
+					<p css={korTitleStyle}>배송지:</p>
+					<div css={adressStyle}>
+						<IcMapBlackStorke18 />
+						<p>Gangnam-gu, Seoul, Korea</p>
+					</div>
 				</div>
-			</div>
-			<div css={dividerStyle} />
-			<section css={orderInfoLayouttyle}>
-				<div>
-					<div css={freeOrderInfoWrapperStyle}>
-						<div css={flexBoxStyle}>
-							<IcDeliveryBlack20 />
-							<span css={korTitleStyle}>무료 배송</span>
-							{/* 영경이가 만든 무료 반품 버튼 넣기 */}
+				<div css={dividerStyle} />
+				<section css={orderInfoLayouttyle}>
+					<div>
+						<div css={freeOrderInfoWrapperStyle}>
+							<div css={flexBoxStyle}>
+								<IcDeliveryBlack20 />
+								<span css={freeDeliveryText}>무료 배송</span>
+								<FreeTag text="무료 반품" color="gray" />
+							</div>
+							<IcArrowrightSBlack24 />
+						</div>
+						<div css={arrivalDateWrapperStyle}>
+							<span css={arriveTitleStyle}>도착일:</span>
+							<span css={engTitleStyle}>11 월 19 일-26 일</span>
 						</div>
-						<IcArrowrightSBlack24 />
 					</div>
-					<div css={arrivalDateWrapperStyle}>
-						<span css={arriveTitleStyle}>도착일:</span>
-						<span css={engTitleStyle}>11 월 19 일-26 일</span>
+					<div css={privacyInfoLayoutStyle}>
+						<div css={privacyTitleBoxStyle}>
+							<IcShieldBlack20 />
+							<span css={korTitleStyle}>개인 정보 보호</span>
+						</div>
+						<div css={descriptionBoxStyle}>
+							<p>안심 결제: 카드 정보는 안전하게 보호되며 유출되지 않습니다.</p>
+							<p>개인정보 보호: 개인정보 보안을 최우선으로 생각합니다.</p>
+						</div>
 					</div>
-				</div>
-				<div css={privacyInfoLayoutStyle}>
-					<div css={privacyTitleBoxStyle}>
-						<IcShieldBlack20 />
-						<span css={korTitleStyle}>개인 정보 보호</span>
+				</section>
+			</section>
+			<div css={dividerStyle} />
+			<section css={orderButtonsLayoutStyle}>
+				<div css={korTitleStyle}>수량</div>
+				<section css={countButtonsStyle}>
+					<div css={iconWrapperStyle}>
+						<IcCountdownGray18 />
 					</div>
-					<div css={descriptionBoxStyle}>
-						<p>안심 결제: 카드 정보는 안전하게 보호되며 유출되지 않습니다.</p>
-						<p>개인정보 보호: 개인정보 보안을 최우선으로 생각합니다.</p>
+					<p css={engCaptionBoldStyle}>1</p>
+					<div css={iconWrapperStyle}>
+						<IcCountupGray18 />
 					</div>
-				</div>
-			</section>
-		</section>
-		<div css={dividerStyle} />
-		<section css={orderButtonsLayoutStyle}>
-			<div css={korTitleStyle}>수량</div>
-			<section css={countButtonsStyle}>
-				<div css={iconWrapperStyle}>
-					<IcCountdownGray18 />
-				</div>
-				<p css={engCaptionBoldStyle}>1</p>
-				<div css={iconWrapperStyle}>
-					<IcCountupGray18 />
-				</div>
-			</section>
-			<section css={orderBtnWrapperStyle}>
-				<TextBtn btnText="바로 구매" color="red" size="large" />
-				<TextBtn btnText="장바구니 담기" color="black" size="large" />
-				<div css={emojiBtnWrapperStyle}>
-					<EmojiBtn type="seller" />
-					<EmojiBtn type="share" />
-					<LikeBtn />
-				</div>
+				</section>
+				<section css={orderBtnWrapperStyle}>
+					<TextBtn btnText="바로 구매" color="red" size="large" onClick={() => handleOrderBtnClick(1)} />
+					<TextBtn btnText="장바구니 담기" color="black" size="large" />
+					<div css={emojiBtnWrapperStyle}>
+						<EmojiBtn type="seller" />
+						<EmojiBtn type="share" />
+						<LikeBtn />
+					</div>
+				</section>
 			</section>
-		</section>
-	</article>
-);
+		</article>
+	);
+};
 
 export default OrderBox;
diff --git a/src/components/orderBox/OrderboxStyle.ts b/src/components/orderBox/OrderboxStyle.ts
@@ -40,6 +40,11 @@ export const korTitleStyle = (theme: Theme) => css`
 	${theme.fonts.kor.captionBold12}
 `;
 
+export const freeDeliveryText = (theme: Theme) => css`
+	margin-right: 0.6rem;
+	${theme.fonts.kor.captionBold12}
+`;
+
 export const engTitleStyle = (theme: Theme) => css`
 	${theme.fonts.eng.captionMedium12}
 `;
@@ -70,7 +75,7 @@ export const freeOrderInfoWrapperStyle = css`
 export const flexBoxStyle = css`
 	display: flex;
 	align-items: center;
-	height: 100%;
+	height: 2rem;
 `;
 
 export const arrivalDateWrapperStyle = css`

diff --git a/src/components/recommandedProducts/RecommandedBoxStyle.ts b/src/components/recommandedProducts/RecommandedBoxStyle.ts
@@ -10,6 +10,7 @@ export const recommandedBoxContainer = (theme: Theme) => css`
 	padding: 1rem 1.8rem;
 
 	background-color: ${theme.colors.brandBg};
+	border-radius: 8px;
 `;
 
 export const contentLayout = css`
@@ -46,4 +47,5 @@ export const lineStyle = (theme: Theme) => css`
 export const flexBoxStyle = css`
 	display: flex;
 	gap: 0.8rem;
+	width: 32rem;
 `;