diff --git a/src/components/pages/HomePage/CategoryProduct.tsx b/src/components/pages/HomePage/CategoryProduct.tsx
index 946b18b..efec6cf 100644
--- a/src/components/pages/HomePage/CategoryProduct.tsx
+++ b/src/components/pages/HomePage/CategoryProduct.tsx
@@ -58,19 +58,19 @@ const CategoryProduct: React.FC<CategoryProductsProps> = ({
         {displayedProducts.map((product) => (
           <Card key={product.id}>
             <StyledLink to={`/products/${product.id}`}>
-              <ProductImg src={product.image} alt={product.name} />
+              <ProductImg src={product.url} alt={product.name} />
               <ProductWrapper>
                 <ProductName>{product.name}</ProductName>
                 <ProductStar>
                   {' '}
-                  <StarRating rating={product.stars} />
+                  <StarRating rating={product.rating} />
                 </ProductStar>
                 <PriceWrapper>
                   <OriginalPrice>
                     ${product.originalPrice.toFixed(2)}
                   </OriginalPrice>
                   <DiscountedPrice>
-                    ${product.discountedPrice.toFixed(2)}
+                    ${product.discountPrice.toFixed(2)}
                   </DiscountedPrice>
                 </PriceWrapper>
               </ProductWrapper>
diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index 054f7b5..bed0b1b 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -4,311 +4,14 @@ import RecommendProduct from './RecommendProduct';
 import PopularProduct from './PopularProduct';
 import CategoryProduct from './CategoryProduct';
 import ScrollToTopButton from '../../common/ScrollToTopButton';
-// import { getProducts } from './api/productApi';
-// import { useQuery } from '@tanstack/react-query';
-// import { fetchUser, User } from './api/userApi';
-// import { Product } from '../Payment/api/paymentApi';
+import { categories, popularProduct, products } from '../../../mocks/products';
+// import { QueryHandler, useProductsQuery } from '../../../hooks/useGetProduct';
 
 const HomePage: React.FC = () => {
-  //   const {
-  //     data: product,
-  //     isLoading,
-  //     isError,
-  //   } = useQuery<Product[], Error>({
-  //     queryKey: ['product'],
-  //     queryFn: () => getProducts(),
-  //   });
-
-  //   // 로딩 상태 처리
-  //   if (isLoading) return <div>Loading...</div>;
-
-  //   // 에러 상태 처리
-  //   if (isError) return <div>Error</div>;
-
-  const categories = [
-    '식료품',
-    '생활용품',
-    '패션/의류',
-    '전자제품',
-    '가구/인테리어',
-    '유아/아동용품',
-    '스포츠',
-  ];
-  const popularProduct = {
-    id: '1',
-    name: '다이슨 드라이기',
-    stars: 5,
-    category: '전자제품',
-    originalPrice: 95.5,
-    discountedPrice: 79.98,
-    description:
-      '최고의 성능을 가진 드라이기 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구',
-    image: 'https://via.placeholder.com/200',
-    comments: [
-      {
-        comment: 'asd',
-      },
-      {
-        comment: 'asd',
-      },
-    ],
-    likes: false,
-  };
-  const products = [
-    {
-      id: '1',
-      name: '다이슨 드라이기',
-      stars: 5,
-      originalPrice: 95.5,
-      discountedPrice: 79.98,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '2',
-      name: '에어팟 프로',
-      stars: 4,
-      originalPrice: 250.0,
-      category: '전자제품',
-      discountedPrice: 199.99,
-      image: 'https://via.placeholder.com/200',
-
-      comments: [{ comment: '좋아요!' }],
-      likes: false,
-    },
-    {
-      id: '3',
-      name: '샤오미 전기포트',
-      stars: 4.5,
-      originalPrice: 50.0,
-      discountedPrice: 39.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [{ comment: '좋은 제품이에요!' }, { comment: '가성비 최고!' }],
-      likes: false,
-    },
-    {
-      id: '4',
-      name: 'LG 모니터',
-      stars: 4,
-      originalPrice: 300.0,
-      discountedPrice: 259.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [
-        { comment: '화질 좋아요!' },
-        { comment: '디자인이 예뻐요!' },
-        { comment: '조금 무겁지만 괜찮아요.' },
-      ],
-      likes: false,
-    },
-    {
-      id: '5',
-      name: '삼성 TV',
-      stars: 5,
-      originalPrice: 1200.0,
-      discountedPrice: 999.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '6',
-      name: '닌텐도 스위치',
-      stars: 4.5,
-      originalPrice: 350.0,
-      discountedPrice: 299.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [{ comment: '아이들이 너무 좋아해요!' }],
-      likes: true,
-    },
-    {
-      id: '7',
-      name: '스타벅스 아메리카노',
-      stars: 4.5,
-      originalPrice: 5.0,
-      discountedPrice: 4.5,
-      image: 'https://via.placeholder.com/200',
-      category: '식료품',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '8',
-      name: '캘리포니아 치즈',
-      stars: 4,
-      originalPrice: 15.0,
-      discountedPrice: 12.99,
-      image: 'https://via.placeholder.com/200',
-      category: '식료품',
-      comments: [{ comment: '맛있어요!' }],
-      likes: false,
-    },
-    {
-      id: '9',
-      name: '라면 3개입',
-      stars: 5,
-      originalPrice: 3.0,
-      discountedPrice: 2.5,
-      image: 'https://via.placeholder.com/200',
-      category: '식료품',
-      comments: [
-        { comment: '항상 먹는 맛!' },
-        { comment: '간편해서 좋아요.' },
-        { comment: '가격 대비 최고!' },
-      ],
-      likes: true,
-    },
-    {
-      id: '10',
-      name: '소형 청소기',
-      stars: 4.5,
-      originalPrice: 120.0,
-      discountedPrice: 99.99,
-      image: 'https://via.placeholder.com/200',
-      category: '생활용품',
-      comments: [],
-      likes: true,
-    },
-    {
-      id: '11',
-      name: '다용도 걸이',
-      stars: 4,
-      originalPrice: 20.0,
-      discountedPrice: 15.99,
-      image: 'https://via.placeholder.com/200',
-      category: '생활용품',
-      comments: [{ comment: '실용적이에요.' }],
-      likes: false,
-    },
-    {
-      id: '12',
-      name: '스탠드 조명',
-      stars: 4.5,
-      originalPrice: 50.0,
-      discountedPrice: 45.99,
-      image: 'https://via.placeholder.com/200',
-      category: '생활용품',
-      comments: [
-        { comment: '조명이 예뻐요.' },
-        { comment: '편안한 분위기를 만들어줘요.' },
-      ],
-      likes: false,
-    },
-    {
-      id: '13',
-      name: '여성용 티셔츠',
-      stars: 4.5,
-      originalPrice: 20.0,
-      discountedPrice: 16.99,
-      image: 'https://via.placeholder.com/200',
-      category: '패션/의류',
-      comments: [
-        { comment: '편안해요.' },
-        { comment: '디자인이 마음에 들어요.' },
-        { comment: '색상이 예뻐요.' },
-      ],
-      likes: false,
-    },
-    {
-      id: '14',
-      name: '남성용 청바지',
-      stars: 4,
-      originalPrice: 40.0,
-      discountedPrice: 35.99,
-      image: 'https://via.placeholder.com/200',
-      category: '패션/의류',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '15',
-      name: '여성용 핸드백',
-      stars: 5,
-      originalPrice: 120.0,
-      discountedPrice: 99.99,
-      image: 'https://via.placeholder.com/200',
-      category: '패션/의류',
-      comments: [
-        { comment: '디자인 최고!' },
-        { comment: '가죽이 고급스러워요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '16',
-      name: '삼나무 책상',
-      stars: 4.5,
-      originalPrice: 250.0,
-      discountedPrice: 199.99,
-      image: 'https://via.placeholder.com/200',
-      category: '가구/인테리어',
-      comments: [
-        { comment: '튼튼해요.' },
-        { comment: '디자인이 멋져요.' },
-        { comment: '조립이 쉬워요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '17',
-      name: '라탄 의자',
-      stars: 4,
-      originalPrice: 150.0,
-      discountedPrice: 129.99,
-      image: 'https://via.placeholder.com/200',
-      category: '가구/인테리어',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '18',
-      name: '스틸 책장',
-      stars: 4.5,
-      originalPrice: 120.0,
-      discountedPrice: 99.99,
-      image: 'https://via.placeholder.com/200',
-      category: '가구/인테리어',
-      comments: [
-        { comment: '스타일리시해요.' },
-        { comment: '높이가 딱 좋아요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '19',
-      name: '유아용 기저귀',
-      stars: 5,
-      originalPrice: 30.0,
-      discountedPrice: 25.99,
-      image: 'https://via.placeholder.com/200',
-      category: '유아/아동용품',
-      comments: [
-        { comment: '아기가 잘 사용해요.' },
-        { comment: '흡수력이 좋아요.' },
-        { comment: '가격이 저렴해요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '20',
-      name: '유아용 장난감 세트',
-      stars: 4.5,
-      originalPrice: 45.0,
-      discountedPrice: 39.99,
-      image: 'https://via.placeholder.com/200',
-      category: '유아/아동용품',
-      comments: [],
-      likes: true,
-    },
-  ];
-
+  // const { data: products, isLoading, isError } = useProductsQuery();
   return (
     <>
+      {/* <QueryHandler isLoading={isLoading} isError={isError}> */}
       <ContainerBox>
         <Container>
           <PopularProduct product={popularProduct} />
@@ -325,6 +28,7 @@ const HomePage: React.FC = () => {
         </Container>
         <ScrollToTopButton />
       </ContainerBox>
+      {/* </QueryHandler> */}
     </>
   );
 };
diff --git a/src/components/pages/HomePage/PopularProduct.tsx b/src/components/pages/HomePage/PopularProduct.tsx
index 30f25f1..cacf859 100644
--- a/src/components/pages/HomePage/PopularProduct.tsx
+++ b/src/components/pages/HomePage/PopularProduct.tsx
@@ -14,11 +14,11 @@ const PopularProduct: React.FC<PopularProductProps> = ({ product }) => {
     <StyledLink to={`/products/${product.id}`}>
       <BannerContainer>
         <ImageWrapper>
-          <ProductImage src={product.image} alt={product.name} />
+          <ProductImage src={product.url} alt={product.name} />
         </ImageWrapper>
         <ProductInfoSection>
           <Star>
-            <StarRating rating={product.stars} />
+            <StarRating rating={product.rating} />
           </Star>
           <ProductHeader>
             <TitleArea>
@@ -26,17 +26,7 @@ const PopularProduct: React.FC<PopularProductProps> = ({ product }) => {
 
               <ProductCategory>{product.category}</ProductCategory>
             </TitleArea>
-            <ProductDescription>
-              {' '}
-              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
-              추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
-              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
-              추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
-              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
-              추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
-              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
-              추가 예정 상품설명- 추후 추가 예정
-            </ProductDescription>
+            <ProductDescription> 상품설명- 추후 추가 예정</ProductDescription>
             {/* {product.description} */}
           </ProductHeader>
         </ProductInfoSection>
diff --git a/src/components/pages/HomePage/RecommendProduct.tsx b/src/components/pages/HomePage/RecommendProduct.tsx
index b9e42ae..cc26086 100644
--- a/src/components/pages/HomePage/RecommendProduct.tsx
+++ b/src/components/pages/HomePage/RecommendProduct.tsx
@@ -14,7 +14,7 @@ const RecommendProduct: React.FC<PopularProductsListProps> = ({ products }) => {
   const getTopProducts = (products: Product[]): Product[] => {
     // comments.length를 기준으로 내림차순 정렬
     const sortedByComments = [...products].sort(
-      (a, b) => b.comments.length - a.comments.length
+      (a, b) => b.reviews.length - a.reviews.length
     );
     // 상위 8개 선택
     return sortedByComments.slice(0, 8);
@@ -30,18 +30,18 @@ const RecommendProduct: React.FC<PopularProductsListProps> = ({ products }) => {
         {displayedProducts.map((product) => (
           <Card key={product.id}>
             <StyledLink to={`/products/${product.id}`}>
-              <ProductImg src={product.image} alt={product.name} />
+              <ProductImg src={product.url} alt={product.name} />
               <ProductWrapper>
                 <ProductName>{product.name}</ProductName>
                 <ProductStar>
-                  <StarRating rating={product.stars} />
+                  <StarRating rating={product.rating} />
                 </ProductStar>
                 <PriceWrapper>
                   <OriginalPrice>
                     ${product.originalPrice.toFixed(2)}
                   </OriginalPrice>
                   <DiscountedPrice>
-                    ${product.discountedPrice.toFixed(2)}
+                    ${product.discountPrice.toFixed(2)}
                   </DiscountedPrice>
                 </PriceWrapper>
               </ProductWrapper>
diff --git a/src/components/pages/HomePage/api/productApi.ts b/src/components/pages/HomePage/api/productApi.ts
index fe9e3dd..129b9ee 100644
--- a/src/components/pages/HomePage/api/productApi.ts
+++ b/src/components/pages/HomePage/api/productApi.ts
@@ -3,7 +3,7 @@ import { Product } from '../model/productSchema';
 
 export const getProducts = async (): Promise<Product[]> => {
   try {
-    const URL = `/products`;
+    const URL = `/homepage`;
     const { data } = await axiosInstance.get(URL);
     return data;
   } catch {
diff --git a/src/components/pages/HomePage/model/productSchema.ts b/src/components/pages/HomePage/model/productSchema.ts
index fbdf17c..db4b566 100644
--- a/src/components/pages/HomePage/model/productSchema.ts
+++ b/src/components/pages/HomePage/model/productSchema.ts
@@ -1,16 +1,20 @@
-interface Comment {
-  comment: string;
+interface Review {
+  review: string;
 }
 
 export interface Product {
-  id: string;
+  id: number;
   name: string;
-  stars: number;
+  rating: number;
   originalPrice: number;
-  discountedPrice: number;
-  image: string;
+  discountPrice: number;
+  url: string;
   category: string;
-  // description: string;
-  comments: Comment[];
+  minamount: number;
+  deadline: string;
+  now: number;
+  stock: number;
+  description: string;
+  reviews: Review[];
   likes: boolean;
 }
diff --git a/src/components/pages/Payment/PaymentForm.tsx b/src/components/pages/Payment/PaymentForm.tsx
index 6df8fc0..2bb7b78 100644
--- a/src/components/pages/Payment/PaymentForm.tsx
+++ b/src/components/pages/Payment/PaymentForm.tsx
@@ -1,137 +1,171 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Link,
+  // useLocation,
   useNavigate,
-  //  useParams
+  useParams,
 } from 'react-router-dom';
 import styled from 'styled-components';
 import { handlePayment } from './api/paymentApi';
+import { products } from '../../../mocks/products';
+// import { QueryHandler, useProductQuery } from '../../../hooks/useGetProduct';
 
 const PaymentForm = () => {
-  const product = {
-    id: '1',
-    name: '다이슨 드라이기',
-    stars: 5,
-    minimum: 5,
-    now: 3,
-    stock: 10,
-    originalPrice: 95.5,
-    discountedPrice: 79.98,
-    image: 'https://via.placeholder.com/200',
-  };
-  //   const { id } = useParams();
-  //   if (!id) {
-  //     return <p>상품 번호가 유실되었습니다.</p>;
-  //   }
-  //   const {
-  //     data: product,
-  //     isLoading,
-  //     isError,
-  //   } = useQuery<Product, Error>({
-  //     queryKey: ['product', id],
-  //     queryFn: () => getProductbyId(id),
-  //   });
-  //   // 로딩 상태 처리
-  //   if (isLoading) {
-  //     return (
-  //       <Container>
-  //         <SuccessSection>
-  //           <Title>상품 정보 로딩 중...</Title>
-  //         </SuccessSection>
-  //       </Container>
-  //     );
-  //   }
-
-  //   // 에러 상태 처리
-  //   if (isError) {
-  //     return (
-  //       <Container>
-  //         <SuccessSection>
-  //           <Title>상품 정보를 불러오지 못했습니다.</Title>
-  //           <Subtitle>잠시 후 다시 시도해주세요.</Subtitle>
-  //         </SuccessSection>
-  //       </Container>
-  //     );
-  //   }
+  //URL 쿼리 스트링을 통한 데이터 수신
+  // const location = useLocation();
+  // const query = new URLSearchParams(location.search);
+  // const data = query.get('data') || ''; // null일 경우 빈 문자열 반환
+  // const product = JSON.parse(decodeURIComponent(data));
+  const { id } = useParams();
+  if (!id) {
+    return <p>상품 번호가 유실되었습니다.</p>;
+  }
+  const productId = Number(id);
+  // const { data: product, isLoading, isError } = useProductQuery(productId);
+  const product = products.find((p) => p.id === productId);
+  if (!product) {
+    return <p>해당 상품을 찾을 수 없습니다.</p>;
+  }
+
   const navigate = useNavigate();
+  const [userName, setName] = useState('');
+  const [basicAddress, setBasicAddress] = useState('');
+  const [detailAddress, setDetailAddress] = useState('');
+  const [needed, setNeeded] = useState('');
+  const [payment, setPayment] = useState('');
+  const payload = {
+    productName: product.name,
+    url: product.url,
+    price: product.discountPrice,
+    // amount : product.amount,
+    finalPrice: product.discountPrice * product.now,
+    // now를 amount로
+    // postId : product.postId,
+    payMethod: payment,
+    needed: needed,
+    name: userName,
+    address: {
+      city: basicAddress,
+      detail: detailAddress,
+    },
+  };
+  const handleRadio = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPayment(e.target.value);
+  };
   const onPaymentSubmit = async () => {
     try {
-      await handlePayment();
-      navigate('/payment-success');
+      const paymentResult = await handlePayment(payload);
+      if (paymentResult == 'success') {
+        navigate('/payment-success');
+      }
     } catch (e) {
       alert(`결제에 실패하였습니다 ${e}`);
     }
   };
   return (
-    <Container>
-      <Section>
-        <Title>주문 상품 정보</Title>
-        <ContentBox>
-          <FlexRow>
-            <ProductName>{product.name}</ProductName>
-            <Price>₩{product.discountedPrice.toLocaleString()}</Price>
-          </FlexRow>
-          <FlexRow>
-            <Quantity>수량: 1개</Quantity>
-          </FlexRow>
-          <TotalRow>
-            <span>합계:</span>
-            <TotalPrice>₩{product.discountedPrice.toLocaleString()}</TotalPrice>
-          </TotalRow>
-        </ContentBox>
-      </Section>
-
-      <Section>
-        <Title>배송 정보 확인</Title>
-        <ContentBox>
-          <FormGroup>
-            <Label>
-              이름
-              <Input type="text" placeholder="이름 입력" />
-            </Label>
-          </FormGroup>
-          <FormGroup>
-            <Label>
-              주소(주소지 근처의 픽업장소 선택)
-              <Input type="text" placeholder="주소 입력" />
-            </Label>
-          </FormGroup>
-          <FormGroup>
-            <Label>
-              배송 시 요청사항
-              <TextArea rows={2} placeholder="요청사항 입력" />
-            </Label>
-          </FormGroup>
-        </ContentBox>
-      </Section>
-
-      <Section>
-        <Title>결제 정보 확인</Title>
-        <ContentBox>
-          <RadioGroup>
-            <RadioLabel>
-              <RadioInput type="radio" name="payment-method" />
-              <RadioText>가상계좌 입금</RadioText>
-            </RadioLabel>
-            <RadioLabel>
-              <RadioInput type="radio" name="payment-method" />
-              <RadioText>카드 결제</RadioText>
-            </RadioLabel>
-          </RadioGroup>
-        </ContentBox>
-      </Section>
-
-      <ButtonGroup>
-        <PayButton
-          onClick={() => {
-            onPaymentSubmit();
-          }}
-        >
-          결제하기
-        </PayButton>
-        <BackButton to={`/products/${product.id}`}>뒤로 가기</BackButton>
-      </ButtonGroup>
-    </Container>
+    <>
+      {/* <QueryHandler isLoading={isLoading} isError={isError}> */}
+      <Container>
+        <Section>
+          <Title>주문 상품 정보</Title>
+          <ContentBox>
+            <FlexRow>
+              <ProductName>{product.name}</ProductName>
+              <Price>₩{product.discountPrice.toLocaleString()}</Price>
+            </FlexRow>
+            <FlexRow>
+              <Quantity>
+                수량: 1개
+                {/* product.amount */}
+              </Quantity>
+            </FlexRow>
+            <TotalRow>
+              <span>합계:</span>
+              <TotalPrice>
+                ₩{product.discountPrice.toLocaleString()}
+                {/* *product.amount */}
+              </TotalPrice>
+            </TotalRow>
+          </ContentBox>
+        </Section>
+
+        <Section>
+          <Title>배송 정보 확인</Title>
+          <ContentBox>
+            <FormGroup>
+              <Label>
+                수령인
+                <Input
+                  type="text"
+                  placeholder="이름 입력"
+                  value={userName}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </Label>
+            </FormGroup>
+            <FormGroup>
+              <Label>
+                배송지
+                <InputWrapper>
+                  <BasicAddressInput
+                    type="text"
+                    placeholder="기본 주소를 입력해주세요"
+                    value={basicAddress}
+                    onChange={(e) => setBasicAddress(e.target.value)}
+                  />
+                </InputWrapper>
+              </Label>
+              <DetailAddressInput
+                type="text"
+                placeholder="상세 주소를 입력해주세요"
+                value={detailAddress}
+                onChange={(e) => setDetailAddress(e.target.value)}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Label>
+                배송 시 요청사항
+                <TextArea
+                  rows={2}
+                  placeholder="요청사항 입력"
+                  value={needed}
+                  onChange={(e) => setNeeded(e.target.value)}
+                />
+              </Label>
+            </FormGroup>
+          </ContentBox>
+        </Section>
+
+        <Section>
+          <Title>결제 정보 확인</Title>
+          <ContentBox>
+            <RadioGroup>
+              <RadioLabel>
+                <RadioInput
+                  type="radio"
+                  name="payment-method"
+                  value="card"
+                  onChange={handleRadio}
+                />
+                <RadioText>카드 결제</RadioText>
+              </RadioLabel>
+            </RadioGroup>
+          </ContentBox>
+        </Section>
+
+        <ButtonGroup>
+          <PayButton
+            onClick={() => {
+              onPaymentSubmit();
+            }}
+          >
+            결제하기
+          </PayButton>
+          <BackButton to={`/products/${product.id}`}>뒤로 가기</BackButton>
+        </ButtonGroup>
+      </Container>
+      {/* </QueryHandler> */}
+    </>
   );
 };
 
@@ -234,7 +268,20 @@ const Input = styled.input`
     color: #94a3b8;
   }
 `;
+const InputWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+
+const BasicAddressInput = styled(Input)`
+  flex-grow: 1;
+  cursor: pointer;
+`;
 
+const DetailAddressInput = styled(Input)`
+  margin-top: 8px;
+`;
 const TextArea = styled.textarea`
   width: 100%;
   padding: 10px 12px;
diff --git a/src/components/pages/Payment/PaymentSuccessPage.tsx b/src/components/pages/Payment/PaymentSuccessPage.tsx
index 70e6bc4..3694a6c 100644
--- a/src/components/pages/Payment/PaymentSuccessPage.tsx
+++ b/src/components/pages/Payment/PaymentSuccessPage.tsx
@@ -1,78 +1,50 @@
-// import { useQuery } from '@tanstack/react-query';
 import React from 'react';
-import {
-  Link,
-  //  useParams
-} from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import styled from 'styled-components';
-// import { getProductbyId } from '../ProductDetailPage/api/productDetailApi';
-// import { Product } from './api/paymentApi';
+import { products } from '../../../mocks/products';
+// import { QueryHandler, useProductQuery } from '../../../hooks/useGetProduct';
 
 const PaymentSuccessPage = () => {
-  const product = {
-    id: '1',
-    name: '다이슨 드라이기',
-    discountedPrice: 79.98,
-  };
-  //   const { id } = useParams();
-  //   if (!id) {
-  //     return <p>제품 번호가 유실되었습니다.</p>;
-  //   }
-  //   const {
-  //     data: product,
-  //     isLoading,
-  //     isError,
-  //   } = useQuery<Product, Error>({
-  //     queryKey: ['product', id],
-  //     queryFn: () => getProductbyId(id),
-  //   });
-  //   // 로딩 상태 처리
-  //   if (isLoading) {
-  //     return (
-  //       <Container>
-  //         <SuccessSection>
-  //           <Title>주문 정보 로딩 중...</Title>
-  //         </SuccessSection>
-  //       </Container>
-  //     );
-  //   }
-
-  //   // 에러 상태 처리
-  //   if (isError) {
-  //     return (
-  //       <Container>
-  //         <SuccessSection>
-  //           <Title>주문 정보를 불러오지 못했습니다.</Title>
-  //           <Subtitle>잠시 후 다시 시도해주세요.</Subtitle>
-  //         </SuccessSection>
-  //       </Container>
-  //     );
-  //   }
+  const { id } = useParams();
+  if (!id) {
+    return <p>상품 번호가 유실되었습니다.</p>;
+  }
+  const productId = Number(id);
+  // const { data: product, isLoading, isError } = useProductQuery(productId);
+  const product = products.find((p) => p.id === productId);
+
+  if (!product) {
+    return <p>해당 상품을 찾을 수 없습니다.</p>;
+  }
   return (
-    <Container>
-      <SuccessSection>
-        <Title>결제 완료</Title>
-        <Subtitle>주문해주셔서 감사합니다!</Subtitle>
-
-        <OrderSummary>
-          <SummaryRow>
-            <Label>상품명</Label>
-            <Value>{product?.name}</Value>
-          </SummaryRow>
-          <SummaryRow>
-            <Label>결제 금액</Label>
-            <Value>₩{product?.discountedPrice.toLocaleString()}</Value>
-          </SummaryRow>
-        </OrderSummary>
-      </SuccessSection>
-
-      <ButtonGroup>
-        <OrderDetailButton to={`/orders/${product?.id}`}>
-          주문 내역 보기
-        </OrderDetailButton>
-        <BackButton to="/">메인으로 돌아가기</BackButton>
-      </ButtonGroup>
-    </Container>
+    <>
+      {/* <QueryHandler isLoading={isLoading} isError={isError}> */}
+      <Container>
+        <SuccessSection>
+          <Title>결제 완료</Title>
+          <Subtitle>주문해주셔서 감사합니다!</Subtitle>
+
+          <OrderSummary>
+            <SummaryRow>
+              <Label>상품명</Label>
+              <Value>{product?.name}</Value>
+            </SummaryRow>
+            <SummaryRow>
+              <Label>결제 금액</Label>
+              <Value>₩{product?.discountPrice.toLocaleString()}</Value>
+            </SummaryRow>
+          </OrderSummary>
+        </SuccessSection>
+
+        <ButtonGroup>
+          <OrderDetailButton to={`/orders/${product?.id}`}>
+            주문 내역 보기
+          </OrderDetailButton>
+          <BackButton to="/">메인으로 돌아가기</BackButton>
+        </ButtonGroup>
+      </Container>
+      {/* </QueryHandler> */}
+    </>
   );
 };
 
diff --git a/src/components/pages/Payment/api/paymentApi.ts b/src/components/pages/Payment/api/paymentApi.ts
index 64404d5..07ee722 100644
--- a/src/components/pages/Payment/api/paymentApi.ts
+++ b/src/components/pages/Payment/api/paymentApi.ts
@@ -1,18 +1,24 @@
 import axiosInstance from '../../../../api/axiosInstance';
-export type Product = {
-  id: string;
+export interface PaymentForm {
+  productName: string;
+  url: string;
+  price: number;
+  // amount: number;
+  finalPrice: number;
+  // postId: number;
+  payMethod: string;
+  needed: string;
   name: string;
-  stars: number;
-  originalPrice: number;
-  discountedPrice: number;
-  image: string;
-  category: string;
-};
-export const handlePayment = async (): Promise<boolean> => {
+  address: {
+    city: string;
+    detail: string;
+  };
+}
+export const handlePayment = async (payload: PaymentForm) => {
   try {
-    const URL = `/payment`;
-    const { data } = await axiosInstance.post(URL);
-    return data;
+    const URL = `/api/v1/payments`;
+    const { data } = await axiosInstance.post(URL, payload);
+    return data.data.paymentStatus;
   } catch {
     throw new Error('결제에 실패하였습니다.');
   }
diff --git a/src/components/pages/ProductDetailPage/ProductDetail.tsx b/src/components/pages/ProductDetailPage/ProductDetail.tsx
index a605075..ca8913f 100644
--- a/src/components/pages/ProductDetailPage/ProductDetail.tsx
+++ b/src/components/pages/ProductDetailPage/ProductDetail.tsx
@@ -1,227 +1,42 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-// import { useParams } from 'react-router-dom';
-// import { getProductbyId } from './api/productDetailApi';
+import { Link, useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { addWishList } from './api/WishApi';
+import { addWishList } from './api/wishApi';
 import StarRating from '../../common/StarRating';
-import { addComment } from './api/CommentApi';
-// import { useQuery } from '@tanstack/react-query';
+import { addComment } from './api/commentApi';
+import { submitOrder } from './api/submitApi';
+import { products } from '../../../mocks/products';
+// import { QueryHandler, useProductQuery } from '../../../hooks/useGetProduct';
 
 const ProductDetail: React.FC = () => {
-  //   const { id } = useParams();
-  //   if (!id) {
-  //     return <p>상품 번호가 유실되었습니다.</p>;
-  //   }
-  //   const {
-  //     data: product,
-  //     isLoading,
-  //     isError,
-  //   } = useQuery<Product, Error>({
-  //     queryKey: ['product', id],
-  //     queryFn: () => getProductbyId(id),
-  //   });
-  //   // 로딩 상태 처리
-  //   if (isLoading) {
-  //     return (
-  //       <Container>
-  //         <SuccessSection>
-  //           <Title>상품 정보 로딩 중...</Title>
-  //         </SuccessSection>
-  //       </Container>
-  //     );
-  //   }
-
-  //   // 에러 상태 처리
-  //   if (isError) {
-  //     return (
-  //       <Container>
-  //         <SuccessSection>
-  //           <Title>상품 정보를 불러오지 못했습니다.</Title>
-  //           <Subtitle>잠시 후 다시 시도해주세요.</Subtitle>
-  //         </SuccessSection>
-  //       </Container>
-  //     );
-  //   }
+  const { id } = useParams();
+  if (!id) {
+    return <p>상품 번호가 유실되었습니다.</p>;
+  }
+  const productId = Number(id);
+  // const { data: product, isLoading, isError } = useProductQuery(productId);
+  const product = products.find((p) => p.id === productId);
+
+  if (!product) {
+    return <p>해당 상품을 찾을 수 없습니다.</p>;
+  }
+
   const [quantity, setQuantity] = useState(1);
   const [newComment, setNewComment] = useState('');
   const [newCommentStar, setNewCommentStar] = useState(5);
   const [remainingTime, setRemainingTime] = useState('');
   const [visibleCount, setVisibleCount] = useState(10);
+  const [data, setData] = useState({});
 
+  const handleSubmit = () => {
+    submitOrder(product.id, payload).then((res) => {
+      setData(res);
+    });
+  };
   // 더보기 버튼 클릭 시 댓글 수를 증가시키는 함수
   const handleShowMore = () => {
     setVisibleCount((prevCount) => prevCount + 10);
   };
-  const product = {
-    id: '1',
-    name: '다이슨 드라이기',
-    stars: 4.7,
-    minimum: 5,
-    now: 3,
-    stock: 10,
-    originalPrice: 95.5,
-    discountedPrice: 79.98,
-    image: 'https://via.placeholder.com/200',
-    deadline: '2024-12-31',
-    description:
-      '최고의 성능을 가진 드라이기 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구',
-    comments: [
-      {
-        comment: '디자인도 예쁘고, 바람 세기도 강해서 너무 만족스럽습니다!',
-        star: 5,
-      },
-      {
-        comment: '가격이 조금 비싸지만, 성능은 최고예요.',
-        star: 4,
-      },
-      {
-        comment: '머리가 정말 빨리 말라서 시간 절약에 도움이 돼요.',
-        star: 5,
-      },
-      {
-        comment: '생각보다 소음이 조금 있어서 아쉬웠어요.',
-        star: 3,
-      },
-      {
-        comment: '배송이 너무 빨라서 놀랐습니다. 제품도 마음에 들어요!',
-        star: 5,
-      },
-      {
-        comment: '선물로 줬는데 상대방이 정말 좋아했어요.',
-        star: 5,
-      },
-      {
-        comment: '그립감이 좋아서 오래 사용해도 손목이 안 아파요.',
-        star: 4,
-      },
-      {
-        comment: '전문가용 드라이기 같은 성능인데, 가정용으로도 적합합니다.',
-        star: 5,
-      },
-      {
-        comment: '살짝 무겁지만, 기능이 좋아서 만족해요.',
-        star: 4,
-      },
-      {
-        comment: '내구성이 좋을 것 같아서 기대 중입니다!',
-        star: 5,
-      },
-      {
-        comment: '생각보다 소음이 조금 있어서 아쉬웠어요.',
-        star: 3,
-      },
-      {
-        comment: '배송이 너무 빨라서 놀랐습니다. 제품도 마음에 들어요!',
-        star: 5,
-      },
-      {
-        comment: '선물로 줬는데 상대방이 정말 좋아했어요.',
-        star: 5,
-      },
-      {
-        comment: '그립감이 좋아서 오래 사용해도 손목이 안 아파요.',
-        star: 4,
-      },
-      {
-        comment: '전문가용 드라이기 같은 성능인데, 가정용으로도 적합합니다.',
-        star: 5,
-      },
-      {
-        comment: '살짝 무겁지만, 기능이 좋아서 만족해요.',
-        star: 4,
-      },
-      {
-        comment: '내구성이 좋을 것 같아서 기대 중입니다!',
-        star: 5,
-      },
-      {
-        comment: '생각보다 소음이 조금 있어서 아쉬웠어요.',
-        star: 3,
-      },
-      {
-        comment: '배송이 너무 빨라서 놀랐습니다. 제품도 마음에 들어요!',
-        star: 5,
-      },
-      {
-        comment: '선물로 줬는데 상대방이 정말 좋아했어요.',
-        star: 5,
-      },
-      {
-        comment: '그립감이 좋아서 오래 사용해도 손목이 안 아파요.',
-        star: 4,
-      },
-      {
-        comment: '전문가용 드라이기 같은 성능인데, 가정용으로도 적합합니다.',
-        star: 5,
-      },
-      {
-        comment: '살짝 무겁지만, 기능이 좋아서 만족해요.',
-        star: 4,
-      },
-      {
-        comment: '내구성이 좋을 것 같아서 기대 중입니다!',
-        star: 5,
-      },
-      {
-        comment: '생각보다 소음이 조금 있어서 아쉬웠어요.',
-        star: 3,
-      },
-      {
-        comment: '배송이 너무 빨라서 놀랐습니다. 제품도 마음에 들어요!',
-        star: 5,
-      },
-      {
-        comment: '선물로 줬는데 상대방이 정말 좋아했어요.',
-        star: 5,
-      },
-      {
-        comment: '그립감이 좋아서 오래 사용해도 손목이 안 아파요.',
-        star: 4,
-      },
-      {
-        comment: '전문가용 드라이기 같은 성능인데, 가정용으로도 적합합니다.',
-        star: 5,
-      },
-      {
-        comment: '살짝 무겁지만, 기능이 좋아서 만족해요.',
-        star: 4,
-      },
-      {
-        comment: '내구성이 좋을 것 같아서 기대 중입니다!',
-        star: 5,
-      },
-      {
-        comment: '생각보다 소음이 조금 있어서 아쉬웠어요.',
-        star: 3,
-      },
-      {
-        comment: '배송이 너무 빨라서 놀랐습니다. 제품도 마음에 들어요!',
-        star: 5,
-      },
-      {
-        comment: '선물로 줬는데 상대방이 정말 좋아했어요.',
-        star: 5,
-      },
-      {
-        comment: '그립감이 좋아서 오래 사용해도 손목이 안 아파요.',
-        star: 4,
-      },
-      {
-        comment: '전문가용 드라이기 같은 성능인데, 가정용으로도 적합합니다.',
-        star: 5,
-      },
-      {
-        comment: '살짝 무겁지만, 기능이 좋아서 만족해요.',
-        star: 4,
-      },
-      {
-        comment: '내구성이 좋을 것 같아서 기대 중입니다!',
-        star: 5,
-      },
-    ],
-  };
-
   //   마감까지 남은 기한
   const calculateRemainingTime = () => {
     const now = new Date();
@@ -263,118 +78,131 @@ const ProductDetail: React.FC = () => {
   const handleCommentSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     //댓글추가 api 호출
-    addComment({ comment: newComment, star: newCommentStar });
+    addComment(product.id, { review: newComment, rating: newCommentStar });
     //newComment, newCommentStar <- payload로 전송
     setNewComment('');
   };
 
   //남은 재고
-  const least = product.minimum - product.now;
-
+  const least = product.minamount - product.now;
+  const payload = {
+    url: product.url,
+    productName: product.name,
+    price: product.originalPrice,
+    discountPrice: product.discountPrice,
+    amount: quantity,
+  };
   return (
-    <Container>
-      <ContentWrapper>
-        <ImageSection>
-          <Image src={product.image} alt={product.name} />
-          <Stars>
-            <StarRating rating={product.stars} />
-          </Stars>
-        </ImageSection>
-        <InfoSection>
-          <Title>{product.name}</Title>
-
-          <PriceWrapper>
-            <OriginalPrice>${product.originalPrice.toFixed(2)}</OriginalPrice>
-            <DiscountWrapper>
-              <DiscountedPrice>
-                ${product.discountedPrice.toFixed(2)}
-              </DiscountedPrice>
-              <DiscountInfo>{product.minimum}개 부터 할인 적용</DiscountInfo>
-            </DiscountWrapper>
-            {least > 0 && (
-              <RemainingCount>할인 적용까지 {least}개 남음</RemainingCount>
-            )}
-          </PriceWrapper>
-          <Description>{product.description}</Description>
-          <DeadlineLabel>{remainingTime}</DeadlineLabel>
-
-          <StockWrapper>
-            <StockLabel>현재 구매 현황</StockLabel>
-            <StockBar>
-              <StockFill style={{ width: `${purchasePercentage}%` }} />
-            </StockBar>
-            <StockStatus>
-              {product.now} / {product.stock} 구매됨
-            </StockStatus>
-          </StockWrapper>
-          <ActionWrapper>
-            <QuantityWrapper>
-              <QuantityLabel>수량</QuantityLabel>
-              <QuantityInput
-                type="number"
-                min="1"
-                value={quantity}
-                onChange={handleQuantityChange}
+    <>
+      {/* <QueryHandler isLoading={isLoading} isError={isError}> */}
+      <Container>
+        <ContentWrapper>
+          <ImageSection>
+            <Image src={product.url} alt={product.name} />
+            <Stars>
+              <StarRating rating={product.rating} />
+            </Stars>
+          </ImageSection>
+          <InfoSection>
+            <Title>{product.name}</Title>
+
+            <PriceWrapper>
+              <OriginalPrice>${product.originalPrice.toFixed(2)}</OriginalPrice>
+              <DiscountWrapper>
+                <DiscountedPrice>
+                  ${product.discountPrice.toFixed(2)}
+                </DiscountedPrice>
+                <DiscountInfo>
+                  {product.minamount}개 부터 할인 적용
+                </DiscountInfo>
+              </DiscountWrapper>
+              {least > 0 && (
+                <RemainingCount>할인 적용까지 {least}개 남음</RemainingCount>
+              )}
+            </PriceWrapper>
+            <Description>{product.description}</Description>
+            <DeadlineLabel>{remainingTime}</DeadlineLabel>
+
+            <StockWrapper>
+              <StockLabel>현재 구매 현황</StockLabel>
+              <StockBar>
+                <StockFill style={{ width: `${purchasePercentage}%` }} />
+              </StockBar>
+              <StockStatus>
+                {product.now} / {product.stock} 구매됨
+              </StockStatus>
+            </StockWrapper>
+            <ActionWrapper>
+              <QuantityWrapper>
+                <QuantityLabel>수량</QuantityLabel>
+                <QuantityInput
+                  type="number"
+                  min="1"
+                  value={quantity}
+                  onChange={handleQuantityChange}
+                />
+              </QuantityWrapper>
+              <ButtonWrapper>
+                <PurchaseButton
+                  to={`/products/payment/${product.id}?data =${encodeURIComponent(JSON.stringify(data))} `}
+                  disabled={isButtonDisabled}
+                  onClick={handleSubmit}
+                >
+                  구매하기
+                </PurchaseButton>
+                <WishButton
+                  type="button"
+                  onClick={() => {
+                    addWishList(product.id);
+                  }}
+                >
+                  찜하기
+                </WishButton>
+              </ButtonWrapper>
+            </ActionWrapper>
+          </InfoSection>
+        </ContentWrapper>
+
+        <CommentSection>
+          <CommentForm onSubmit={handleCommentSubmit}>
+            <CommentInputWrapper>
+              <CommentInput
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+                placeholder="댓글을 입력하세요"
               />
-            </QuantityWrapper>
-            <ButtonWrapper>
-              <PurchaseButton
-                to={`/products/payment/${product.id}`}
-                disabled={isButtonDisabled}
-              >
-                구매하기
-              </PurchaseButton>
-              <WishButton
-                type="button"
-                onClick={() => {
-                  addWishList(product);
-                }}
+              <StarSelector
+                value={newCommentStar}
+                onChange={(e) => setNewCommentStar(Number(e.target.value))}
               >
-                찜하기
-              </WishButton>
-            </ButtonWrapper>
-          </ActionWrapper>
-        </InfoSection>
-      </ContentWrapper>
-
-      <CommentSection>
-        <CommentForm onSubmit={handleCommentSubmit}>
-          <CommentInputWrapper>
-            <CommentInput
-              value={newComment}
-              onChange={(e) => setNewComment(e.target.value)}
-              placeholder="댓글을 입력하세요"
-            />
-            <StarSelector
-              value={newCommentStar}
-              onChange={(e) => setNewCommentStar(Number(e.target.value))}
-            >
-              {[1, 2, 3, 4, 5].map((num) => (
-                <option key={num} value={num}>
-                  {'⭐'.repeat(num)}
-                </option>
-              ))}
-            </StarSelector>
-            <CommentSubmitButton type="submit">댓글 달기</CommentSubmitButton>
-          </CommentInputWrapper>
-        </CommentForm>{' '}
-        <div>
-          {product.comments.slice(0, visibleCount).map((comment, index) => (
-            <Comment key={index}>
-              {comment.comment}
-              <CommentStars>{'⭐'.repeat(comment.star)}</CommentStars>
-            </Comment>
-          ))}
-
-          {/* 더보기 버튼*/}
-          <ButtonContainer>
-            {visibleCount < product.comments.length && (
-              <ViewMore onClick={handleShowMore}>더보기</ViewMore>
-            )}
-          </ButtonContainer>
-        </div>
-      </CommentSection>
-    </Container>
+                {[1, 2, 3, 4, 5].map((num) => (
+                  <option key={num} value={num}>
+                    {'⭐'.repeat(num)}
+                  </option>
+                ))}
+              </StarSelector>
+              <CommentSubmitButton type="submit">댓글 달기</CommentSubmitButton>
+            </CommentInputWrapper>
+          </CommentForm>{' '}
+          <div>
+            {product.reviews.slice(0, visibleCount).map((review, index) => (
+              <Comment key={index}>
+                {review.review}
+                <CommentStars>{'⭐'.repeat(review.rating)}</CommentStars>
+              </Comment>
+            ))}
+
+            {/* 더보기 버튼*/}
+            <ButtonContainer>
+              {visibleCount < product.reviews.length && (
+                <ViewMore onClick={handleShowMore}>더보기</ViewMore>
+              )}
+            </ButtonContainer>
+          </div>
+        </CommentSection>
+      </Container>
+      {/* </QueryHandler> */}
+    </>
   );
 };
 
diff --git a/src/components/pages/ProductDetailPage/api/CommentApi.ts b/src/components/pages/ProductDetailPage/api/CommentApi.ts
index a47c1ed..eddb04e 100644
--- a/src/components/pages/ProductDetailPage/api/CommentApi.ts
+++ b/src/components/pages/ProductDetailPage/api/CommentApi.ts
@@ -1,11 +1,11 @@
 import axiosInstance from '../../../../api/axiosInstance';
-export type Comment = {
-  comment: string;
-  star: number;
-};
-export const addComment = async (payload: Comment) => {
+export interface Review {
+  review: string;
+  rating: number;
+}
+export const addComment = async (productId: number, payload: Review) => {
   try {
-    const URL = `/products/comment`;
+    const URL = `/review/${productId}`;
     const { data } = await axiosInstance.post(URL, payload);
     return data;
   } catch {
diff --git a/src/components/pages/ProductDetailPage/api/WishApi.ts b/src/components/pages/ProductDetailPage/api/WishApi.ts
index 6c35bbc..1c70dcd 100644
--- a/src/components/pages/ProductDetailPage/api/WishApi.ts
+++ b/src/components/pages/ProductDetailPage/api/WishApi.ts
@@ -1,11 +1,9 @@
 import axiosInstance from '../../../../api/axiosInstance';
-export type ProductSchema = {
-  id: string;
-};
-export const addWishList = async (payload: ProductSchema) => {
+
+export const addWishList = async (productId: number) => {
   try {
     const URL = `/products/wishlist`;
-    const { data } = await axiosInstance.post(URL, payload);
+    const { data } = await axiosInstance.post(URL, productId);
     return data;
   } catch {
     throw new Error('위시리스트 추가에 실패하였습니다.');
diff --git a/src/components/pages/ProductDetailPage/api/productDetailApi.ts b/src/components/pages/ProductDetailPage/api/productDetailApi.ts
index a8e1860..a4ce70e 100644
--- a/src/components/pages/ProductDetailPage/api/productDetailApi.ts
+++ b/src/components/pages/ProductDetailPage/api/productDetailApi.ts
@@ -1,9 +1,9 @@
 import axiosInstance from '../../../../api/axiosInstance';
 import { Product } from '../../HomePage/model/productSchema';
 
-export const getProductbyId = async (productId: string): Promise<Product> => {
+export const getProductbyId = async (productId: number): Promise<Product> => {
   try {
-    const URL = `/products/${productId}`;
+    const URL = `/homepage/${productId}`;
     const { data } = await axiosInstance.get(URL);
     return data;
   } catch {
diff --git a/src/components/pages/ProductDetailPage/api/submitApi.ts b/src/components/pages/ProductDetailPage/api/submitApi.ts
new file mode 100644
index 0000000..602496a
--- /dev/null
+++ b/src/components/pages/ProductDetailPage/api/submitApi.ts
@@ -0,0 +1,31 @@
+import axiosInstance from '../../../../api/axiosInstance';
+
+export interface SubmitForm {
+  url: string;
+  productName: string;
+  price: number;
+  discountPrice: number;
+  amount: number;
+}
+
+export interface SubmitResponse {
+  url: string;
+  productName: string;
+  price: number;
+  amount: number;
+  finalPrice: number;
+  postId: number;
+}
+
+export const submitOrder = async (
+  productId: number,
+  payload: SubmitForm
+): Promise<SubmitResponse> => {
+  try {
+    const URL = `/homepage/order/${productId}`;
+    const { data } = await axiosInstance.post(URL, payload);
+    return data;
+  } catch {
+    throw new Error('주문에 실패하였습니다.');
+  }
+};
diff --git a/src/components/pages/ProductPage/ProductComponent.tsx b/src/components/pages/ProductPage/ProductComponent.tsx
index 405c826..e660b7c 100644
--- a/src/components/pages/ProductPage/ProductComponent.tsx
+++ b/src/components/pages/ProductPage/ProductComponent.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import Pagination from '../../common/Pagination';
@@ -17,37 +17,65 @@ const ProductComponent: React.FC<ProductComponentProps> = ({
   products,
 }) => {
   const [currentPage, setCurrentPage] = useState(1);
+  const [selectedText, setSelectedText] = useState<'판매 상품' | '마감 상품'>(
+    '판매 상품'
+  );
   const PRODUCT_PER_PAGE = 16;
-  const totalPages = Math.ceil(products.length / PRODUCT_PER_PAGE);
+
   const startIndex = (currentPage - 1) * PRODUCT_PER_PAGE;
-  const currentProducts = products.slice(
+  const filteredProducts =
+    selectedText === '마감 상품'
+      ? products.filter((product) => new Date(product.deadline) < new Date())
+      : products;
+
+  const totalPages = Math.ceil(filteredProducts.length / PRODUCT_PER_PAGE);
+
+  // 선택된 탭이 변경되면 페이지를 1로 초기화
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [selectedText]);
+  const currentProducts = filteredProducts.slice(
     startIndex,
     startIndex + PRODUCT_PER_PAGE
   );
+
   return (
     <Recommend>
       <RecommendTitle>
-        {' '}
+        <TextWrapper>
+          <Text
+            isSelected={selectedText === '판매 상품'}
+            onClick={() => setSelectedText('판매 상품')}
+          >
+            판매 상품
+          </Text>
+          <Text
+            isSelected={selectedText === '마감 상품'}
+            onClick={() => setSelectedText('마감 상품')}
+          >
+            마감 상품
+          </Text>
+        </TextWrapper>
         {input ? `${input}에 대한 검색 결과` : ''}
       </RecommendTitle>
 
       <CardWrapper>
         {currentProducts.map((product) => (
-          <Card key={product.id}>
+          <Card key={product.id} isSelected={selectedText === '판매 상품'}>
             <StyledLink to={`/products/${product.id}`}>
-              <ProductImg src={product.image} alt={product.name} />
+              <ProductImg src={product.url} alt={product.name} />
               <ProductWrapper>
                 <ProductName>{product.name}</ProductName>
                 <ProductStar>
                   {' '}
-                  <StarRating rating={product.stars} />
+                  <StarRating rating={product.rating} />
                 </ProductStar>
                 <PriceWrapper>
                   <OriginalPrice>
                     ${product.originalPrice.toFixed(2)}
                   </OriginalPrice>
                   <DiscountedPrice>
-                    ${product.discountedPrice.toFixed(2)}
+                    ${product.discountPrice.toFixed(2)}
                   </DiscountedPrice>
                 </PriceWrapper>
               </ProductWrapper>
@@ -84,6 +112,18 @@ const RecommendTitle = styled.h2`
   color: #333;
 `;
 
+const TextWrapper = styled.div`
+  width: 200px;
+  display: flex;
+  gap: 25px;
+  margin-top: -15%;
+  margin-bottom: 5%;
+`;
+const Text = styled.h2<{ isSelected: boolean }>`
+  cursor: pointer;
+  text-decoration: ${({ isSelected }) => (isSelected ? 'underline' : 'none')};
+  font-size: 16px;
+`;
 const CardWrapper = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -92,18 +132,38 @@ const CardWrapper = styled.div`
   margin-top: 20px;
 `;
 
-const Card = styled.div`
+const Card = styled.div<{ isSelected: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 15px;
   margin: 10px;
   width: 200px;
-  background-color: white;
+  background-color: ${({ isSelected }) => (isSelected ? 'white' : '#f0f0f0')};
+
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: ${({ isSelected }) =>
+    isSelected ? '0 4px 6px rgba(0, 0, 0, 0.1)' : 'none'};
+  opacity: ${({ isSelected }) => (isSelected ? 1 : 0.6)};
   align-items: center;
   position: relative;
+  &::after {
+    content: ${({ isSelected }) => (isSelected ? '""' : '"판매 종료"')};
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 5px 10px;
+    border-radius: 5px;
+  }
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
+    transform: translateY(-5px);
+  }
   @media (min-width: 768px) and (max-width: 1024px) {
     width: 130px;
   }
diff --git a/src/components/pages/ProductPage/ProductPage.tsx b/src/components/pages/ProductPage/ProductPage.tsx
index 85d7e6f..131c637 100644
--- a/src/components/pages/ProductPage/ProductPage.tsx
+++ b/src/components/pages/ProductPage/ProductPage.tsx
@@ -6,24 +6,9 @@ import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 import ScrollToTopButton from '../../common/ScrollToTopButton';
 import { Product } from '../HomePage/model/productSchema';
-// import { useQuery } from '@tanstack/react-query';
-// import { getProducts } from '../HomePage/api/productApi';
+import { products } from '../../../mocks/products';
 
 const ProductPage = () => {
-  //   const {
-  //   data: product,
-  //   isLoading,
-  //   isError,
-  // } = useQuery<Product[], Error>({
-  //   queryKey: ['product'],
-  //   queryFn: () => getProducts(),
-  // });
-
-  // // 로딩 상태 처리
-  // if (isLoading) return <div>Loading...</div>;
-
-  // // 에러 상태 처리
-  // if (isError) return <div>Error</div>;
   const [input, setInput] = useState('');
 
   const location = useLocation();
@@ -36,262 +21,11 @@ const ProductPage = () => {
     }
   }, []);
 
-  const products = [
-    {
-      id: '1',
-      name: '다이슨 드라이기',
-      stars: 5,
-      originalPrice: 95.5,
-      discountedPrice: 79.98,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '2',
-      name: '에어팟 프로',
-      stars: 4,
-      originalPrice: 250.0,
-      discountedPrice: 199.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [{ comment: '좋아요!' }],
-      likes: false,
-    },
-    {
-      id: '3',
-      name: '샤오미 전기포트',
-      stars: 4.5,
-      originalPrice: 50.0,
-      discountedPrice: 39.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [{ comment: '좋은 제품이에요!' }, { comment: '가성비 최고!' }],
-      likes: false,
-    },
-    {
-      id: '4',
-      name: 'LG 모니터',
-      stars: 4,
-      originalPrice: 300.0,
-      discountedPrice: 259.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [
-        { comment: '화질 좋아요!' },
-        { comment: '디자인이 예뻐요!' },
-        { comment: '조금 무겁지만 괜찮아요.' },
-      ],
-      likes: false,
-    },
-    {
-      id: '5',
-      name: '삼성 TV',
-      stars: 5,
-      originalPrice: 1200.0,
-      discountedPrice: 999.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '6',
-      name: '닌텐도 스위치',
-      stars: 4.5,
-      originalPrice: 350.0,
-      discountedPrice: 299.99,
-      image: 'https://via.placeholder.com/200',
-      category: '전자제품',
-      comments: [{ comment: '아이들이 너무 좋아해요!' }],
-      likes: true,
-    },
-    {
-      id: '7',
-      name: '스타벅스 아메리카노',
-      stars: 4.5,
-      originalPrice: 5.0,
-      discountedPrice: 4.5,
-      image: 'https://via.placeholder.com/200',
-      category: '식료품',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '8',
-      name: '캘리포니아 치즈',
-      stars: 4,
-      originalPrice: 15.0,
-      discountedPrice: 12.99,
-      image: 'https://via.placeholder.com/200',
-      category: '식료품',
-      comments: [{ comment: '맛있어요!' }],
-      likes: false,
-    },
-    {
-      id: '9',
-      name: '라면 3개입',
-      stars: 5,
-      originalPrice: 3.0,
-      discountedPrice: 2.5,
-      image: 'https://via.placeholder.com/200',
-      category: '식료품',
-      comments: [
-        { comment: '항상 먹는 맛!' },
-        { comment: '간편해서 좋아요.' },
-        { comment: '가격 대비 최고!' },
-      ],
-      likes: true,
-    },
-    {
-      id: '10',
-      name: '소형 청소기',
-      stars: 4.5,
-      originalPrice: 120.0,
-      discountedPrice: 99.99,
-      image: 'https://via.placeholder.com/200',
-      category: '생활용품',
-      comments: [],
-      likes: true,
-    },
-    {
-      id: '11',
-      name: '다용도 걸이',
-      stars: 4,
-      originalPrice: 20.0,
-      discountedPrice: 15.99,
-      image: 'https://via.placeholder.com/200',
-      category: '생활용품',
-      comments: [{ comment: '실용적이에요.' }],
-      likes: false,
-    },
-    {
-      id: '12',
-      name: '스탠드 조명',
-      stars: 4.5,
-      originalPrice: 50.0,
-      discountedPrice: 45.99,
-      image: 'https://via.placeholder.com/200',
-      category: '생활용품',
-      comments: [
-        { comment: '조명이 예뻐요.' },
-        { comment: '편안한 분위기를 만들어줘요.' },
-      ],
-      likes: false,
-    },
-    {
-      id: '13',
-      name: '여성용 티셔츠',
-      stars: 4.5,
-      originalPrice: 20.0,
-      discountedPrice: 16.99,
-      image: 'https://via.placeholder.com/200',
-      category: '패션/의류',
-      comments: [
-        { comment: '편안해요.' },
-        { comment: '디자인이 마음에 들어요.' },
-        { comment: '색상이 예뻐요.' },
-      ],
-      likes: false,
-    },
-    {
-      id: '14',
-      name: '남성용 청바지',
-      stars: 4,
-      originalPrice: 40.0,
-      discountedPrice: 35.99,
-      image: 'https://via.placeholder.com/200',
-      category: '패션/의류',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '15',
-      name: '여성용 핸드백',
-      stars: 5,
-      originalPrice: 120.0,
-      discountedPrice: 99.99,
-      image: 'https://via.placeholder.com/200',
-      category: '패션/의류',
-      comments: [
-        { comment: '디자인 최고!' },
-        { comment: '가죽이 고급스러워요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '16',
-      name: '삼나무 책상',
-      stars: 4.5,
-      originalPrice: 250.0,
-      discountedPrice: 199.99,
-      image: 'https://via.placeholder.com/200',
-      category: '가구/인테리어',
-      comments: [
-        { comment: '튼튼해요.' },
-        { comment: '디자인이 멋져요.' },
-        { comment: '조립이 쉬워요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '17',
-      name: '라탄 의자',
-      stars: 4,
-      originalPrice: 150.0,
-      discountedPrice: 129.99,
-      image: 'https://via.placeholder.com/200',
-      category: '가구/인테리어',
-      comments: [],
-      likes: false,
-    },
-    {
-      id: '18',
-      name: '스틸 책장',
-      stars: 4.5,
-      originalPrice: 120.0,
-      discountedPrice: 99.99,
-      image: 'https://via.placeholder.com/200',
-      category: '가구/인테리어',
-      comments: [
-        { comment: '스타일리시해요.' },
-        { comment: '높이가 딱 좋아요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '19',
-      name: '유아용 기저귀',
-      stars: 5,
-      originalPrice: 30.0,
-      discountedPrice: 25.99,
-      image: 'https://via.placeholder.com/200',
-      category: '유아/아동용품',
-      comments: [
-        { comment: '아기가 잘 사용해요.' },
-        { comment: '흡수력이 좋아요.' },
-        { comment: '가격이 저렴해요.' },
-      ],
-      likes: true,
-    },
-    {
-      id: '20',
-      name: '유아용 장난감 세트',
-      stars: 4.5,
-      originalPrice: 45.0,
-      discountedPrice: 39.99,
-      image: 'https://via.placeholder.com/200',
-      category: '유아/아동용품',
-      comments: [],
-      likes: true,
-    },
-  ];
   const getTopProducts = (products: Product[]): Product[] => {
-    const sortedByComments = [...products].sort(
-      (a, b) => b.comments.length - a.comments.length
+    const sortedByreviews = [...products].sort(
+      (a, b) => b.reviews.length - a.reviews.length
     );
-    return sortedByComments;
+    return sortedByreviews;
   };
 
   const displayedProducts = useMemo(() => getTopProducts(products), [products]);
diff --git a/src/hooks/useGetProduct.tsx b/src/hooks/useGetProduct.tsx
new file mode 100644
index 0000000..43e3716
--- /dev/null
+++ b/src/hooks/useGetProduct.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getProductbyId } from '../components/pages/ProductDetailPage/api/productDetailApi';
+import { getProducts } from '../components/pages/HomePage/api/productApi';
+
+// 제품 ID로 제품 정보를 가져오는 훅
+export const useProductQuery = (id: number) => {
+  return useQuery({
+    queryKey: ['product', id],
+    queryFn: () => getProductbyId(id),
+  });
+};
+
+// 모든 제품을 가져오는 훅
+export const useProductsQuery = () => {
+  return useQuery({
+    queryKey: ['products'],
+    queryFn: getProducts,
+  });
+};
+
+//로딩과 에러 처리
+export const QueryHandler = ({
+  isLoading,
+  isError,
+  children,
+}: {
+  isLoading: boolean;
+  isError: boolean;
+  children: React.ReactNode;
+}) => {
+  if (isLoading) return <div>로딩 중...</div>;
+  if (isError) return <div>잠시 후 다시 시도해주세요.</div>;
+  return <>{children}</>;
+};
diff --git a/src/mocks/products.ts b/src/mocks/products.ts
new file mode 100644
index 0000000..844551b
--- /dev/null
+++ b/src/mocks/products.ts
@@ -0,0 +1,411 @@
+export const categories = [
+  '식료품',
+  '생활용품',
+  '패션/의류',
+  '전자제품',
+  '가구/인테리어',
+  '유아/아동용품',
+  '스포츠',
+];
+export const popularProduct = {
+  id: 16,
+  name: '키친타올 세트',
+  rating: 4,
+  originalPrice: 12.0,
+  discountPrice: 9.99,
+  url: 'https://via.placeholder.com/200',
+  category: '생활용품',
+  description: '흡수력이 뛰어난 고품질 키친타올입니다.',
+  minamount: 6,
+  now: 12,
+  stock: 20,
+  deadline: '2024-12-08',
+  reviews: [
+    { review: '가성비 최고입니다.', rating: 4 },
+    { review: '흡수력이 강해서 만족스럽습니다.', rating: 4 },
+  ],
+  likes: false,
+};
+
+export const products = [
+  {
+    id: 1,
+    name: 'LG 올레드 TV',
+    rating: 5,
+    originalPrice: 2500.0,
+    discountPrice: 2199.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '선명한 화질을 제공하는 최신형 올레드 TV입니다.',
+    minamount: 8,
+    now: 12,
+    stock: 20,
+    deadline: '2024-12-31',
+    reviews: [
+      { review: '화질이 정말 선명하고 만족스럽습니다.', rating: 5 },
+      { review: '디자인도 훌륭합니다.', rating: 5 },
+    ],
+    likes: true,
+  },
+  {
+    id: 2,
+    name: '다이슨 무선 청소기',
+    rating: 4.5,
+    originalPrice: 500.0,
+    discountPrice: 449.99,
+    url: 'https://via.placeholder.com/200',
+    category: '가전제품',
+    description: '강력한 흡입력을 자랑하는 프리미엄 무선 청소기입니다.',
+    minamount: 10,
+    now: 15,
+    stock: 20,
+    deadline: '2024-12-15',
+    reviews: [
+      { review: '청소가 훨씬 쉬워졌습니다.', rating: 4 },
+      { review: '흡입력이 강해서 만족합니다.', rating: 5 },
+    ],
+    likes: false,
+  },
+  {
+    id: 3,
+    name: 'BOSE 스피커',
+    rating: 5,
+    originalPrice: 300.0,
+    discountPrice: 249.99,
+    url: 'https://via.placeholder.com/200',
+    category: '음향기기',
+    description: '뛰어난 음질을 제공하는 고급 블루투스 스피커입니다.',
+    minamount: 9,
+    now: 8,
+    stock: 20,
+    deadline: '2024-12-20',
+    reviews: [
+      { review: '음질이 놀랍도록 좋습니다.', rating: 5 },
+      { review: '디자인도 세련되고 멋집니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 4,
+    name: '나이키 에어포스',
+    rating: 4.5,
+    originalPrice: 150.0,
+    discountPrice: 129.99,
+    url: 'https://via.placeholder.com/200',
+    category: '패션',
+    description: '편안한 착용감을 제공하는 인기 운동화입니다.',
+    minamount: 7,
+    now: 14,
+    stock: 20,
+    deadline: '2024-11-28',
+    reviews: [
+      { review: '신발이 편안하고 스타일리시합니다.', rating: 5 },
+      { review: '가성비가 좋습니다.', rating: 4 },
+    ],
+    likes: false,
+  },
+  {
+    id: 5,
+    name: '스타벅스 머그컵',
+    rating: 4,
+    originalPrice: 30.0,
+    discountPrice: 24.99,
+    url: 'https://via.placeholder.com/200',
+    category: '생활용품',
+    description: '스타벅스 공식 디자인의 인기 머그컵입니다.',
+    minamount: 6,
+    now: 18,
+    stock: 20,
+    deadline: '2024-12-08',
+    reviews: [
+      { review: '디자인이 정말 예쁩니다.', rating: 4 },
+      { review: '사용하기 편리합니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 6,
+    name: '애플 에어팟',
+    rating: 4.5,
+    originalPrice: 200.0,
+    discountPrice: 179.99,
+    url: 'https://via.placeholder.com/200',
+    category: '음향기기',
+    description: '뛰어난 연결성과 음질을 자랑하는 무선 이어폰입니다.',
+    minamount: 9,
+    now: 10,
+    stock: 20,
+    deadline: '2024-12-12',
+    reviews: [
+      { review: '음질이 탁월하고 사용이 편리합니다.', rating: 5 },
+      { review: '배터리 성능이 아쉽지만 만족합니다.', rating: 4 },
+    ],
+    likes: false,
+  },
+  {
+    id: 7,
+    name: '소니 미러리스 카메라',
+    rating: 5,
+    originalPrice: 1200.0,
+    discountPrice: 999.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '선명한 사진 촬영이 가능한 고성능 미러리스 카메라입니다.',
+    minamount: 8,
+    now: 11,
+    stock: 20,
+    deadline: '2024-11-28',
+    reviews: [
+      { review: '화질이 뛰어나서 만족스럽습니다.', rating: 5 },
+      { review: '조작이 쉬워서 초보자에게도 추천합니다.', rating: 5 },
+    ],
+    likes: true,
+  },
+  {
+    id: 8,
+    name: '아디다스 트레이닝복 세트',
+    rating: 4.5,
+    originalPrice: 120.0,
+    discountPrice: 99.99,
+    url: 'https://via.placeholder.com/200',
+    category: '패션',
+    description: '편안하고 활동적인 착용감을 제공하는 트레이닝복입니다.',
+    minamount: 7,
+    now: 13,
+    stock: 20,
+    deadline: '2024-12-09',
+    reviews: [
+      { review: '운동할 때 정말 편안합니다.', rating: 4 },
+      { review: '디자인도 마음에 듭니다.', rating: 5 },
+    ],
+    likes: false,
+  },
+  {
+    id: 9,
+    name: 'HP 게이밍 노트북',
+    rating: 5,
+    originalPrice: 1500.0,
+    discountPrice: 1299.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '최고의 성능을 제공하는 고성능 게이밍 노트북입니다.',
+    minamount: 12,
+    now: 7,
+    stock: 20,
+    deadline: '2024-12-22',
+    reviews: [
+      { review: '게임 성능이 정말 탁월합니다.', rating: 5 },
+      { review: '발열이 조금 있지만 만족합니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 10,
+    name: '브리타 정수기',
+    rating: 4,
+    originalPrice: 100.0,
+    discountPrice: 89.99,
+    url: 'https://via.placeholder.com/200',
+    category: '생활용품',
+    description: '깨끗한 물을 제공하는 브리타 정수기입니다.',
+    minamount: 5,
+    now: 9,
+    stock: 20,
+    deadline: '2024-12-05',
+    reviews: [
+      { review: '물맛이 정말 좋아졌습니다.', rating: 5 },
+      { review: '디자인도 깔끔하고 만족합니다.', rating: 4 },
+    ],
+    likes: false,
+  },
+  {
+    id: 11,
+    name: '샤오미 로봇 청소기',
+    rating: 5,
+    originalPrice: 400.0,
+    discountPrice: 349.99,
+    url: 'https://via.placeholder.com/200',
+    category: '생활용품',
+    description: '자율 주행 기술이 탑재된 고성능 로봇 청소기입니다.',
+    minamount: 9,
+    now: 10,
+    stock: 20,
+    deadline: '2024-11-28',
+    reviews: [
+      { review: '청소가 훨씬 수월해졌어요!', rating: 5 },
+      { review: '소음이 적어서 만족합니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 12,
+    name: '삼성 냉장고',
+    rating: 4.5,
+    originalPrice: 1500.0,
+    discountPrice: 1299.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '에너지 효율이 뛰어난 대용량 냉장고입니다.',
+    minamount: 11,
+    now: 7,
+    stock: 20,
+    deadline: '2024-12-28',
+    reviews: [
+      { review: '냉장 성능이 정말 좋아요.', rating: 5 },
+      { review: '공간이 넉넉해서 편리합니다.', rating: 4 },
+    ],
+    likes: false,
+  },
+  {
+    id: 13,
+    name: '맥북 프로',
+    rating: 5,
+    originalPrice: 2000.0,
+    discountPrice: 1799.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '전문가용 고성능 노트북으로 최고의 성능을 제공합니다.',
+    minamount: 10,
+    now: 5,
+    stock: 20,
+    deadline: '2024-11-28',
+    reviews: [
+      { review: '디자인이 고급스럽고 성능이 대단해요.', rating: 5 },
+      { review: '가격이 비싸지만 값어치를 합니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 14,
+    name: '갤럭시 워치',
+    rating: 4.5,
+    originalPrice: 300.0,
+    discountPrice: 249.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '운동과 건강 관리를 돕는 스마트워치입니다.',
+    minamount: 8,
+    now: 14,
+    stock: 20,
+    deadline: '2024-11-28',
+    reviews: [
+      { review: '운동할 때 정말 유용해요!', rating: 4 },
+      { review: '디자인이 멋지고 배터리 성능이 훌륭합니다.', rating: 5 },
+    ],
+    likes: false,
+  },
+  {
+    id: 15,
+    name: '필립스 에어프라이어',
+    rating: 5,
+    originalPrice: 180.0,
+    discountPrice: 149.99,
+    url: 'https://via.placeholder.com/200',
+    category: '주방용품',
+    description: '기름 없이도 맛있는 튀김 요리를 만들 수 있습니다.',
+    minamount: 7,
+    now: 16,
+    stock: 20,
+    deadline: '2024-12-20',
+    reviews: [
+      { review: '건강하게 요리할 수 있어서 좋아요.', rating: 5 },
+      { review: '작동이 간편해서 자주 사용합니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 16,
+    name: '키친타올 세트',
+    rating: 4,
+    originalPrice: 12.0,
+    discountPrice: 9.99,
+    url: 'https://via.placeholder.com/200',
+    category: '생활용품',
+    description: '흡수력이 뛰어난 고품질 키친타올입니다.',
+    minamount: 6,
+    now: 12,
+    stock: 20,
+    deadline: '2024-12-08',
+    reviews: [
+      { review: '가성비 최고입니다.', rating: 4 },
+      { review: '흡수력이 강해서 만족스럽습니다.', rating: 4 },
+    ],
+    likes: false,
+  },
+  {
+    id: 17,
+    name: '샤넬 No.5 향수',
+    rating: 5,
+    originalPrice: 120.0,
+    discountPrice: 99.99,
+    url: 'https://via.placeholder.com/200',
+    category: '화장품',
+    description: '우아하고 세련된 향을 지닌 고급 향수입니다.',
+    minamount: 9,
+    now: 10,
+    stock: 20,
+    deadline: '2024-11-28',
+    reviews: [
+      { review: '선물용으로 딱 좋아요.', rating: 5 },
+      { review: '향이 오래 지속됩니다.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 18,
+    name: '아이폰 15',
+    rating: 5,
+    originalPrice: 1200.0,
+    discountPrice: 1099.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '최신 기술이 탑재된 고성능 스마트폰입니다.',
+    minamount: 12,
+    now: 8,
+    stock: 20,
+    deadline: '2024-12-29',
+    reviews: [
+      { review: '화면이 정말 선명해요.', rating: 5 },
+      { review: '카메라가 최고입니다.', rating: 5 },
+    ],
+    likes: false,
+  },
+  {
+    id: 19,
+    name: '아디다스 운동화',
+    rating: 4.5,
+    originalPrice: 150.0,
+    discountPrice: 129.99,
+    url: 'https://via.placeholder.com/200',
+    category: '패션',
+    description: '편안하고 스타일리시한 운동화입니다.',
+    minamount: 7,
+    now: 15,
+    stock: 20,
+    deadline: '2024-12-18',
+    reviews: [
+      { review: '착용감이 아주 편안합니다.', rating: 5 },
+      { review: '오랜 시간 신어도 발이 아프지 않아요.', rating: 4 },
+    ],
+    likes: true,
+  },
+  {
+    id: 20,
+    name: '소니 헤드폰',
+    rating: 4.5,
+    originalPrice: 400.0,
+    discountPrice: 349.99,
+    url: 'https://via.placeholder.com/200',
+    category: '전자제품',
+    description: '노이즈 캔슬링과 뛰어난 음질을 자랑하는 헤드폰입니다.',
+    minamount: 10,
+    now: 6,
+    stock: 20,
+    deadline: '2024-12-25',
+    reviews: [
+      { review: '음질이 정말 좋습니다.', rating: 5 },
+      { review: '장시간 착용에도 편안합니다.', rating: 4 },
+    ],
+    likes: false,
+  },
+];