diff --git a/src/components/features/Order/GiftDetail/Gift/index.tsx b/src/components/features/Order/GiftDetail/Gift/index.tsx
index d8fa25a1..3bf09fad 100644
--- a/src/components/features/Order/GiftDetail/Gift/index.tsx
+++ b/src/components/features/Order/GiftDetail/Gift/index.tsx
@@ -1,17 +1,30 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Image } from '@chakra-ui/react';
-import ProductImage from '@assets/images/goodsItem.jpg';
+import { useQuery } from '@tanstack/react-query';
+import { ProductDetailResponse } from '@internalTypes/responseTypes';
+import { AxiosError } from 'axios';
+import { getProductsDetail } from '@apis/products';
 
 const IMAGE_SIZE = 86;
 
 export default function Gift() {
+  const data = sessionStorage.getItem('orderHistory');
+  const { id: productId, count } = data ? JSON.parse(data) : null;
+
+  const { data: productDetailData } = useQuery<ProductDetailResponse, AxiosError>({
+    queryKey: ['productDetail', productId],
+    queryFn: () => getProductsDetail({ productId }),
+  });
+
   return (
     <GiftContainer>
-      <Image src={ProductImage} maxW={IMAGE_SIZE} mr={4} />
+      <Image src={productDetailData?.detail.imageURL} maxW={IMAGE_SIZE} mr={4} />
       <div>
-        <GiftName>텐바이텐</GiftName>
-        <GiftInfo>귀엽게 완성되는 브런치 한상 스누피 레트로 토스터기 X 1개</GiftInfo>
+        <GiftName>{productDetailData?.detail.brandInfo.name}</GiftName>
+        <GiftInfo>
+          {productDetailData?.detail.name} X {count}개
+        </GiftInfo>
       </div>
     </GiftContainer>
   );
diff --git a/src/components/features/Product/ProductOrder/QuantitySelector/index.tsx b/src/components/features/Product/ProductOrder/QuantitySelector/index.tsx
index 2870b253..f67a4941 100644
--- a/src/components/features/Product/ProductOrder/QuantitySelector/index.tsx
+++ b/src/components/features/Product/ProductOrder/QuantitySelector/index.tsx
@@ -1,22 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Input, Button, useNumberInput, HStack } from '@chakra-ui/react';
 
 interface QuantitySelectorProps {
   giftOrderLimit?: number;
+  onSetCount: (value: number) => void;
 }
 
-export default function QuantitySelector({ giftOrderLimit }: QuantitySelectorProps) {
+export default function QuantitySelector({ giftOrderLimit, onSetCount }: QuantitySelectorProps) {
   const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } = useNumberInput({
     step: 1,
     defaultValue: 1,
     min: 1,
     max: giftOrderLimit,
   });
-
   const inc = getIncrementButtonProps();
   const dec = getDecrementButtonProps();
   const input = getInputProps();
 
+  useEffect(() => {
+    onSetCount(Number(input.value));
+  }, [input.value, onSetCount]);
+
   return (
     <HStack maxW="320px">
       <Button {...dec}>-</Button>
diff --git a/src/components/features/Product/ProductOrder/index.tsx b/src/components/features/Product/ProductOrder/index.tsx
index 5cc66dbd..4557d245 100644
--- a/src/components/features/Product/ProductOrder/index.tsx
+++ b/src/components/features/Product/ProductOrder/index.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { ROUTE_PATH } from '@routes/path';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useAuth } from '@context/auth/useAuth';
 import { Button } from '@components/common';
 import QuantitySelector from './QuantitySelector';
@@ -12,19 +12,25 @@ interface ProductOrderProps {
 }
 
 export default function ProductOrder({ name, giftOrderLimit }: ProductOrderProps) {
+  const [count, setCount] = useState<number>(0);
   const { isAuthenticated } = useAuth();
   const navigate = useNavigate();
+  const { productId } = useParams<{ productId: string }>();
 
   const handleOrderClick = () => {
-    const targetPath = isAuthenticated ? ROUTE_PATH.ORDER : ROUTE_PATH.LOGIN;
-    navigate(targetPath);
+    if (productId) {
+      const orderHistory = { id: Number(productId), count };
+      sessionStorage.setItem('orderHistory', JSON.stringify(orderHistory));
+      const targetPath = isAuthenticated ? ROUTE_PATH.ORDER : ROUTE_PATH.LOGIN;
+      navigate(targetPath);
+    }
   };
 
   return (
     <ProductOrderContainer>
       <QuantitySelectorConatiner>
         <Title>{name}</Title>
-        <QuantitySelector giftOrderLimit={giftOrderLimit} />
+        <QuantitySelector giftOrderLimit={giftOrderLimit} onSetCount={setCount} count={count} />
       </QuantitySelectorConatiner>
       <div>
         <TotalAmount>