diff --git a/.env b/.env
index db5513b..75e4306 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,5 @@
+NEXT_PUBLIC_BAES_URL=http://localhost:8080
+
 NEXT_PUBLIC_KAKAO_MAP_REST_API=179a8c907891026029fb59adbc860843
-NEXT_PUBLIC_KAKAO_MAP_CLIENT=4948158107c883c7ba08e9ca9ea1fbb7
\ No newline at end of file
+NEXT_PUBLIC_KAKAO_MAP_CLIENT=4948158107c883c7ba08e9ca9ea1fbb7
+
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 31762b4..8b55eb0 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -5,6 +5,12 @@ import MainIntroduce from '@/src/components/mainPage/MainIntroduce';
 import Banner from '@/src/components/mainPage/Banner';
 import AdvertisementModal from '@/src/components/auctionPage/AdvertisementModal';
 import { getCookie } from 'cookies-next';
+import MainProducts from '@/src/components/mainPage/MainProducts';
+import {
+  useExpensiveProductBoard,
+  useLikeProductBoard,
+  useRecentProductBoard,
+} from '@/src/remote/query/main';
 import styles from './index.module.scss';
 
 export default function Home() {
@@ -15,9 +21,16 @@ export default function Home() {
     setOpen(!modalCookie);
   }, []);
 
+  const { data: expensiveProducts } = useExpensiveProductBoard();
+  const { data: recentProducts } = useRecentProductBoard();
+  const { data: likeProudcts } = useLikeProductBoard();
+
   return (
     <main className={styles.main}>
       <Banner />
+      <MainProducts title="인기 경매글 탑 4" data={likeProudcts} />
+      <MainProducts title="가장 비싼 경매글 탑 4" data={expensiveProducts} />
+      <MainProducts title="최근 경매글" data={recentProducts} />
       <MainIntroduce />
       {open && <AdvertisementModal setOpen={setOpen} />}
     </main>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..eb8fc4b
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import React from 'react';
+import classNamees from 'classnames/bind';
+import styles from '../styles/not-found.module.scss';
+
+const cx = classNamees.bind(styles);
+
+const NotFound = () => {
+  return (
+    <div className={cx('page')}>
+      <p>존재하지 않는 페이지입니다 !</p>
+      <Link href="/">홈으로 돌아가기</Link>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/src/components/auctionDetailPage/ProductInfo/index.tsx b/src/components/auctionDetailPage/ProductInfo/index.tsx
index 3a10671..634c883 100644
--- a/src/components/auctionDetailPage/ProductInfo/index.tsx
+++ b/src/components/auctionDetailPage/ProductInfo/index.tsx
@@ -11,6 +11,7 @@ import classNamees from 'classnames/bind';
 import Navigator from '@/src/common/Navigator';
 import { useRecoilValue } from 'recoil';
 import { arriveLocationState } from '@/src/atom';
+import { AiFillLike, AiOutlineLike } from 'react-icons/ai';
 import Map from '../../../common/Map';
 import styles from './index.module.scss';
 
@@ -88,9 +89,9 @@ const ProductInfo = ({ productInfo, arriveLocation }: Props) => {
         )}
 
         <div className={cx('like')}>
-          {/* <div onClick={clickLike}>
-            {like ? <AiFillLike size={64} /> : <AiOutlineLike size={64} />}
-          </div> */}
+          <div onClick={clickLike}>
+            <AiFillLike size={64} />
+          </div>
           <p className={cx('likeNum')}>{board.likesCount}</p>
         </div>
         <button
diff --git a/src/components/mainPage/MainIntroduce/index.tsx b/src/components/mainPage/MainIntroduce/index.tsx
index 3962cac..f4105f4 100644
--- a/src/components/mainPage/MainIntroduce/index.tsx
+++ b/src/components/mainPage/MainIntroduce/index.tsx
@@ -5,8 +5,7 @@ import Image from 'next/image';
 import introduceP1 from '../../../assets/main/introduce1.png';
 import introduceP2 from '../../../assets/main/introduce2.png';
 import introduceP3 from '../../../assets/main/introduce3.png';
-import blueIntroduce2 from '../../../assets/main/blurIntroduce2.png';
-import blueIntroduce3 from '../../../assets/main/blueIntroduce3.png';
+
 import styles from './index.module.scss';
 import UseLazyLoading from './useLazyLoading';
 
diff --git a/src/components/mainPage/MainProducts/index.module.scss b/src/components/mainPage/MainProducts/index.module.scss
new file mode 100644
index 0000000..8fe2d5d
--- /dev/null
+++ b/src/components/mainPage/MainProducts/index.module.scss
@@ -0,0 +1,61 @@
+@import '@/src/styles/media.scss';
+
+.wrapper {
+  width: 80%;
+  margin: 0 auto;
+  & > h4 {
+    font-size: 3.5rem;
+    font-weight: 600;
+    margin-top: 5rem;
+  }
+}
+
+.products {
+  display: flex;
+  overflow-x: scroll;
+  padding-bottom: 3rem;
+  & > div {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 350px;
+    flex-grow: 1;
+
+    & > p {
+      font-size: 2.5rem;
+
+      & > strong {
+        font-size: 2.8rem;
+        font-weight: bold;
+      }
+    }
+  }
+  & > div > div {
+    position: relative;
+    flex-grow: 1;
+    margin: 1rem;
+    height: 25rem;
+    cursor: pointer;
+
+    @include mobile {
+      min-width: 50%;
+    }
+  }
+}
+
+.salesMark {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  font-size: 5rem;
+
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  background-color: gray;
+
+  & > span {
+    transform: rotate(-5deg);
+  }
+}
diff --git a/src/components/mainPage/MainProducts/index.tsx b/src/components/mainPage/MainProducts/index.tsx
new file mode 100644
index 0000000..d16a0b9
--- /dev/null
+++ b/src/components/mainPage/MainProducts/index.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useExpensiveProductBoard } from '@/src/remote/query/main';
+import React from 'react';
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import styles from './index.module.scss';
+
+type Props = {
+  title: string;
+  data: any;
+};
+
+const cx = classNames.bind(styles);
+
+const MainProducts = ({ data, title }: Props) => {
+  const router = useRouter();
+
+  const gotoDetailProduct = (id: string, salesStatus: boolean) => {
+    if (salesStatus) {
+      alert('이미 판매가 완료된 상품입니다.');
+    } else {
+      router.push(`/auction/${id}`);
+    }
+  };
+
+  return (
+    <div className={cx('wrapper')}>
+      <h4>{title}</h4>
+      <div className={cx('products')}>
+        {data?.data?.map((item: any) => {
+          return (
+            <div key={item.id}>
+              <div onClick={() => gotoDetailProduct(item.id, item.salesStatus)}>
+                <Image fill src={item.imageUrl} alt="product" />
+                {item.salesStatus ? (
+                  <div className={cx('salesMark')}>
+                    <span>SOLD OUT</span>
+                  </div>
+                ) : null}
+              </div>
+              <p>
+                현재 낙찰가 : <strong>{item.stuffPrice}</strong>원
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MainProducts;
diff --git a/src/mocks/expensiveProductHandler/index.ts b/src/mocks/expensiveProductHandler/index.ts
new file mode 100644
index 0000000..7e76d50
--- /dev/null
+++ b/src/mocks/expensiveProductHandler/index.ts
@@ -0,0 +1,8 @@
+import { HttpResponse, http } from 'msw';
+import { MOCK_EXPENSIVE_DATA } from './mock';
+
+export const expensiveProductHandlers = [
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`, () => {
+    return HttpResponse.json(MOCK_EXPENSIVE_DATA);
+  }),
+];
diff --git a/src/mocks/expensiveProductHandler/mock.ts b/src/mocks/expensiveProductHandler/mock.ts
new file mode 100644
index 0000000..e83b568
--- /dev/null
+++ b/src/mocks/expensiveProductHandler/mock.ts
@@ -0,0 +1,84 @@
+export const MOCK_EXPENSIVE_DATA = {
+  data: [
+    {
+      createAt: '2024-03-04T01:19:14.394Z',
+      id: 49,
+      stuffName: '무인도',
+      stuffContent: '섬 팔아요',
+      stuffPrice: 900000000,
+      salesStatus: false,
+      stuffCategory: '생활용품',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/52eccd8e3bbd4c164b09e5aead79ae59.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T01:17:53.320Z',
+      id: 48,
+      stuffName: '속초 집',
+      stuffContent: '\b집 팔아요',
+      stuffPrice: 2000000000,
+      salesStatus: false,
+      stuffCategory: '홈인테리어',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/fe562d435d2e9064f08d7d71f79eb345.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T01:17:12.770Z',
+      id: 47,
+      stuffName: '외제차',
+      stuffContent: '\b외제차입니다.',
+      salesStatus: false,
+      stuffPrice: 500000000,
+      stuffCategory: '스포츠/레저',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/dc5bc4aae486f577f19f632bb8432a55.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T01:16:31.861Z',
+      id: 46,
+      stuffName: '프라다 가방',
+      stuffContent: '프라다 가방입니다.\r\n명품입니다.',
+      salesStatus: false,
+      stuffPrice: 3000000,
+      stuffCategory: '뷰티',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/edc2a570e4008d290476186f1d7bffeb.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+  ],
+};
diff --git a/src/mocks/handler.ts b/src/mocks/handler.ts
index f45e1b6..be86629 100644
--- a/src/mocks/handler.ts
+++ b/src/mocks/handler.ts
@@ -1,3 +1,10 @@
 import { HttpHandler } from 'msw';
+import { expensiveProductHandlers } from './expensiveProductHandler';
+import { likeProductHandlers } from './likeProductHandler';
+import { recentProductHandlers } from './recentProductHandler';
 
-export const handlers: HttpHandler[] = [];
+export const handlers: HttpHandler[] = [
+  ...expensiveProductHandlers,
+  ...likeProductHandlers,
+  ...recentProductHandlers,
+];
diff --git a/src/mocks/likeProductHandler/index.ts b/src/mocks/likeProductHandler/index.ts
new file mode 100644
index 0000000..ec7a32f
--- /dev/null
+++ b/src/mocks/likeProductHandler/index.ts
@@ -0,0 +1,8 @@
+import { HttpResponse, http } from 'msw';
+import { MOCK_LIKE_DATA } from './mock';
+
+export const likeProductHandlers = [
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/like`, () => {
+    return HttpResponse.json(MOCK_LIKE_DATA);
+  }),
+];
diff --git a/src/mocks/likeProductHandler/mock.ts b/src/mocks/likeProductHandler/mock.ts
new file mode 100644
index 0000000..5fa989a
--- /dev/null
+++ b/src/mocks/likeProductHandler/mock.ts
@@ -0,0 +1,84 @@
+export const MOCK_LIKE_DATA = {
+  data: [
+    {
+      createAt: '2024-03-04T00:24:41.294Z',
+      id: 41,
+      stuffName: '에어팟 거치대',
+      stuffContent: '이제 에어팟을 잃어버리지 않아요.',
+      stuffPrice: 22000,
+      stuffCategory: '뷰티',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/577589af72c3b68488bd8ba312f58564.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:23:52.176Z',
+      id: 40,
+      stuffName: '삐약이 전등',
+      stuffContent: '공부가 더 잘되는거같아요.',
+      stuffPrice: 35000,
+      salesStatus: false,
+      stuffCategory: '생활용품',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/20f4abe5d34464bc1f85a9f963209379.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:23:10.864Z',
+      id: 39,
+      stuffName: '잠만보 침대',
+      stuffContent: '엄청 크고 귀여워요.',
+      stuffPrice: 55000,
+      stuffCategory: '생활용품',
+      salesStatus: true,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/2e48af39ffe042af3e4f0e649b190eb0.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:22:09.271Z',
+      id: 38,
+      stuffName: '고라파덕 인형',
+      stuffContent: '고라파덕 인형입니다.\r\n꺠끗해요 !',
+      stuffPrice: 10000,
+      stuffCategory: '뷰티',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/0aa0a0bfd9cc39891ee1f27e13781aeb.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+  ],
+};
diff --git a/src/mocks/recentProductHandler/index.ts b/src/mocks/recentProductHandler/index.ts
new file mode 100644
index 0000000..03df53e
--- /dev/null
+++ b/src/mocks/recentProductHandler/index.ts
@@ -0,0 +1,8 @@
+import { HttpResponse, http } from 'msw';
+import { MOCK_RECENT_DATA } from './mock';
+
+export const recentProductHandlers = [
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/recent`, () => {
+    return HttpResponse.json(MOCK_RECENT_DATA);
+  }),
+];
diff --git a/src/mocks/recentProductHandler/mock.ts b/src/mocks/recentProductHandler/mock.ts
new file mode 100644
index 0000000..6e12e59
--- /dev/null
+++ b/src/mocks/recentProductHandler/mock.ts
@@ -0,0 +1,164 @@
+export const MOCK_RECENT_DATA = {
+  data: [
+    {
+      createAt: '2024-03-04T00:54:22.326Z',
+      id: 45,
+      stuffName: '게이밍 의자',
+      stuffContent: '상태 좋아요',
+      stuffPrice: 300000,
+      stuffCategory: '생활용품',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/37f23a70828163eb0d97006915277713.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:54:07.474Z',
+      id: 44,
+      stuffName: '줄넘기',
+      stuffContent: '상태 좋아요',
+      stuffPrice: 3000,
+      stuffCategory: '생활용품',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/c4b65ce31dc92719b9dfa41f0ce06d5c.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:53:48.420Z',
+      id: 43,
+      stuffName: '애플 세트',
+      stuffContent: '\b아이폰, 맥북, 에어팟 다 팔아요 상태 조아요',
+      stuffPrice: 50000000,
+      stuffCategory: '생활용품',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/d973da4cf2f88770e58c30b018cecfab.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:52:31.547Z',
+      id: 42,
+      stuffName: '슬리퍼 거치대',
+      stuffContent: '슬리퍼 정리를 깔끔하게 할 수 있어요 \r\n상태 좋아요.',
+      stuffPrice: 5000,
+      stuffCategory: '뷰티',
+      salesStatus: true,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/ddddabc30be9b84a51cd7b8085921ba2.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:24:41.294Z',
+      id: 41,
+      stuffName: '에어팟 거치대',
+      stuffContent: '이제 에어팟을 잃어버리지 않아요.',
+      stuffPrice: 22000,
+      stuffCategory: '뷰티',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/577589af72c3b68488bd8ba312f58564.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:23:52.176Z',
+      id: 40,
+      stuffName: '삐약이 전등',
+      stuffContent: '공부가 더 잘되는거같아요.',
+      stuffPrice: 35000,
+      salesStatus: false,
+      stuffCategory: '생활용품',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/20f4abe5d34464bc1f85a9f963209379.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:23:10.864Z',
+      id: 39,
+      stuffName: '잠만보 침대',
+      stuffContent: '엄청 크고 귀여워요.',
+      stuffPrice: 55000,
+      stuffCategory: '생활용품',
+      salesStatus: true,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/2e48af39ffe042af3e4f0e649b190eb0.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T00:22:09.271Z',
+      id: 38,
+      stuffName: '고라파덕 인형',
+      stuffContent: '고라파덕 인형입니다.\r\n꺠끗해요 !',
+      stuffPrice: 10000,
+      stuffCategory: '뷰티',
+      salesStatus: false,
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/0aa0a0bfd9cc39891ee1f27e13781aeb.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+  ],
+};
diff --git a/src/remote/query/main/index.ts b/src/remote/query/main/index.ts
new file mode 100644
index 0000000..1e48b88
--- /dev/null
+++ b/src/remote/query/main/index.ts
@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export const useLikeProductBoard = () => {
+  return useQuery({
+    queryKey: ['like'],
+    queryFn: async () => {
+      const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/board/like`,
+      );
+      return response.data;
+    },
+  });
+};
+
+export const useRecentProductBoard = () => {
+  return useQuery({
+    queryKey: ['recent'],
+    queryFn: async () => {
+      const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/board/recent`,
+      );
+      return response.data;
+    },
+  });
+};
+
+export const useExpensiveProductBoard = () => {
+  return useQuery({
+    queryKey: ['expensive'],
+    queryFn: async () => {
+      const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`,
+      );
+
+      return response.data;
+    },
+  });
+};
diff --git a/src/styles/not-found.module.scss b/src/styles/not-found.module.scss
new file mode 100644
index 0000000..34c88f3
--- /dev/null
+++ b/src/styles/not-found.module.scss
@@ -0,0 +1,19 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  min-height: calc(100vh - 80px - 15rem);
+  font-size: 5rem;
+  font-weight: bold;
+
+  & > a {
+    font-size: 3rem;
+    background-color: var(--main-color);
+    padding: 3rem;
+    border-radius: 1rem;
+    color: white;
+    margin-top: 3rem;
+  }
+}