diff --git a/src/@types/AuctionDetails.d.ts b/src/@types/AuctionDetails.d.ts
index 6fd5b5ba..affd7b62 100644
--- a/src/@types/AuctionDetails.d.ts
+++ b/src/@types/AuctionDetails.d.ts
@@ -21,7 +21,7 @@ declare module 'AuctionDetails' {
   }
 
   export interface IPreAuctionDetails extends IAuctionDetailsBase {
-    createdAt: string;
+    updatedAt: string;
     likeCount: number;
     isLiked: boolean;
     images: {
diff --git a/src/@types/Register.d.ts b/src/@types/Register.d.ts
index d45c25f4..89760756 100644
--- a/src/@types/Register.d.ts
+++ b/src/@types/Register.d.ts
@@ -5,6 +5,6 @@ declare module 'Register' {
     minPrice: number;
     auctionRegisterType?: string;
     category: string;
-    imageSequence?: Map<number, number>;
+    imageSequence?: { [k: string]: number };
   }
 }
diff --git a/src/assets/icons/error.svg b/src/assets/icons/error.svg
new file mode 100644
index 00000000..8b72b157
--- /dev/null
+++ b/src/assets/icons/error.svg
@@ -0,0 +1,9 @@
+<svg width="59" height="58" viewBox="0 0 59 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.5233 47.4066C56.0061 46.3849 54.7498 45.913 53.5326 45.913C49.6388 45.913 46.4822 43.0438 46.4822 39.5043C46.4822 38.8016 46.6067 38.1252 46.8366 37.4925C46.9062 37.3009 46.9778 37.1073 47.0501 36.9118C47.8855 34.6519 48.8064 32.161 47.7352 30.0447L34.3803 3.6606C32.4397 -0.173319 26.5593 -0.17333 24.6187 3.66059L21.7263 9.37481C20.8869 11.0332 21.3374 12.9714 21.7791 14.8715C21.9547 15.627 22.1289 16.3764 22.2201 17.0999C22.2436 17.2867 22.2557 17.4766 22.2557 17.6691C22.2557 20.4016 19.8188 22.6166 16.8128 22.6166C15.8422 22.6166 14.8358 22.9879 14.4233 23.8027L1.11704 50.0908C-0.561339 53.4067 2.0479 57.2154 5.99784 57.2154H53.0012C56.9511 57.2154 59.5604 53.4067 57.882 50.0908L56.5233 47.4066ZM25.8951 24.5681C26.3997 23.5523 27.4354 22.729 28.5243 22.4767C30.058 22.1314 31.8175 23.0344 32.5678 24.5615C32.9462 25.325 32.9661 25.7632 32.6939 27.7949C32.4682 29.4747 32.0831 32.3961 31.5254 36.7251C31.3195 38.2787 31.1137 39.6995 31.0606 39.8855C30.8481 40.6291 30.2506 41.2399 29.5999 41.3727C28.7169 41.5586 27.9201 41.0938 27.5085 40.1577C27.3624 39.8323 27.3425 39.7128 26.7184 34.9324C26.4993 33.2725 26.1607 30.7429 25.9681 29.322C25.7158 27.4497 25.6229 26.5069 25.6162 25.9292V25.7494C25.6162 25.3393 25.7117 24.9349 25.8951 24.5681ZM29.247 49.5968C27.8156 49.5968 26.6553 48.4364 26.6553 47.0051C26.6553 45.5737 27.8156 44.4133 29.247 44.4133C30.6784 44.4133 31.8387 45.5737 31.8387 47.0051C31.8387 48.4364 30.6784 49.5968 29.247 49.5968Z" fill="url(#paint0_linear_2498_4054)"/>
+<defs>
+<linearGradient id="paint0_linear_2498_4054" x1="29.5003" y1="0.785156" x2="29.5003" y2="57.2154" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAE44"/>
+<stop offset="1" stop-color="#F18800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icons/partial_error.svg b/src/assets/icons/partial_error.svg
new file mode 100644
index 00000000..5e4f44db
--- /dev/null
+++ b/src/assets/icons/partial_error.svg
@@ -0,0 +1,8 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8508 16.8693C19.6719 16.5158 19.2371 16.3525 18.816 16.3525C17.4686 16.3525 16.3764 15.3597 16.3764 14.135C16.3764 13.8918 16.4194 13.6578 16.499 13.4388C16.5231 13.3726 16.5479 13.3055 16.5729 13.2379C16.862 12.456 17.1806 11.594 16.8099 10.8618L12.1889 1.73227C11.5174 0.405651 9.48263 0.405647 8.81113 1.73227L7.81031 3.70951C7.51985 4.28334 7.67574 4.95401 7.82856 5.61149C7.88932 5.8729 7.9496 6.13223 7.98115 6.38256C7.98929 6.44719 7.99348 6.51292 7.99348 6.57953C7.99348 7.52501 7.15027 8.29147 6.11011 8.29147C5.77426 8.29147 5.42602 8.41994 5.28332 8.70188L0.679042 17.7981C0.0982862 18.9455 1.00114 20.2634 2.36791 20.2634H18.6321C19.9989 20.2634 20.9017 18.9455 20.321 17.7981L19.8508 16.8693ZM9.25278 8.96673C9.42739 8.61523 9.78578 8.33035 10.1626 8.24305C10.6933 8.12358 11.3021 8.43603 11.5617 8.96444C11.6926 9.22864 11.6995 9.38027 11.6053 10.0833C11.5272 10.6645 11.394 11.6754 11.201 13.1733C11.1298 13.7109 11.0585 14.2025 11.0402 14.2669C10.9667 14.5242 10.7599 14.7355 10.5347 14.7815C10.2292 14.8458 9.95349 14.685 9.81106 14.3611C9.76051 14.2485 9.75362 14.2071 9.53766 12.553C9.46185 11.9786 9.34468 11.1033 9.27806 10.6117C9.19075 9.96381 9.15859 9.63758 9.15629 9.4377V9.37548C9.15629 9.23359 9.18933 9.09365 9.25278 8.96673ZM10.4126 17.6272C9.91733 17.6272 9.51583 17.2257 9.51583 16.7304C9.51583 16.2351 9.91733 15.8336 10.4126 15.8336C10.9079 15.8336 11.3094 16.2351 11.3094 16.7304C11.3094 17.2257 10.9079 17.6272 10.4126 17.6272Z" fill="url(#paint0_linear_2498_4839)"/>
+<defs>
+<linearGradient id="paint0_linear_2498_4839" x1="10.5003" y1="0.737305" x2="10.5003" y2="20.2634" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAE44"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/bid/BidMain.tsx b/src/components/bid/BidMain.tsx
new file mode 100644
index 00000000..7c7ba4aa
--- /dev/null
+++ b/src/components/bid/BidMain.tsx
@@ -0,0 +1,101 @@
+import { getBidSchema } from "@/constants/schema";
+import { useEditableNumberInput } from "@/hooks/useEditableNumberInput";
+import { convertCurrencyToNumber } from "@/utils/convertCurrencyToNumber";
+import { formatCurrencyWithWon } from "@/utils/formatCurrencyWithWon";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import FormField from "../common/form/FormField";
+import AuctionItem from "../common/item/AuctionItem";
+import { useGetAuctionDetails } from "../details/queries";
+import Layout from "../layout/Layout";
+import { Input } from "../ui/input";
+import BidCaution from "./BidCaution";
+import BidFooter from "./BidFooter";
+import { usePatchBid, usePostBid } from "./queries";
+
+const BidMain = ({ auctionId }: { auctionId: number }) => {
+  const { auctionDetails } = useGetAuctionDetails(auctionId);
+  const { mutate: postBid } = usePostBid(auctionId);
+  const { mutate: patchBid } = usePatchBid(auctionId);
+  const [check, setCheck] = useState<boolean>(false);
+  const toggleCheckBox = () => setCheck((state) => !state);
+
+  const { imageUrls, productName, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipated, bidId } = auctionDetails;
+  const BidSchema = getBidSchema(minPrice);
+  type FormFields = z.infer<typeof BidSchema>;
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    setValue,
+    getValues,
+    handleSubmit,
+  } = useForm<FormFields>({
+    defaultValues: { bidAmount: '' },
+    resolver: zodResolver(BidSchema),
+  });
+
+  const { isEditing, handleBlur, handleFocus } = useEditableNumberInput({
+    name: 'bidAmount',
+    setValue,
+    getValues,
+  });
+
+  const onPostSubmit: SubmitHandler<FormFields> = async (data) => {
+    const bidData = {
+      auctionId: Number(auctionId),
+      bidAmount: convertCurrencyToNumber(data.bidAmount),
+    };
+
+    postBid(bidData);
+  };
+  const onPatchSubmit = () => {
+    if (bidId) patchBid(bidId);
+  };
+
+  return (
+    <>
+      <Layout.Main>
+        <div className='flex flex-col gap-8'>
+          <AuctionItem axis='row' label='입찰 상품'>
+            <AuctionItem.Image src={imageUrls[0]} time={timeRemaining} />
+            <AuctionItem.Main kind='register' name={productName} count={participantCount} price={minPrice} />
+          </AuctionItem>
+          {isParticipated && (
+            <div className='flex flex-col gap-2'>
+              <div className='text-heading3'>나의 참여 금액</div>
+              <div aria-label='나의 참여 금액' className='text-body1Bold text-cheeseYellow'>
+                {formatCurrencyWithWon(bidAmount)}
+              </div>
+            </div>
+          )}
+          <FormField
+            label='가격 제안하기'
+            name='bidAmount'
+            control={control}
+            error={errors.bidAmount?.message}
+            render={(field) => (
+              <Input
+                id='가격 제안하기'
+                type={isEditing ? 'number' : 'text'}
+                placeholder={`최소 입찰가는 ${formatCurrencyWithWon(minPrice)} 입니다.`}
+                className=' focus-visible:ring-cheeseYellow'
+                {...field}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+              />
+            )}
+          />
+          <BidCaution check={check} handleCheck={toggleCheckBox} />
+        </div>
+      </Layout.Main>
+      <Layout.Footer type={isParticipated ? 'double' : 'single'}>
+        <BidFooter remain={remainingBidCount} check={check} isSubmitting={isSubmitting} handlePatch={onPatchSubmit} handlePost={handleSubmit(onPostSubmit)} />
+      </Layout.Footer>
+    </>
+  );
+}
+
+export default BidMain;
diff --git a/src/components/bidderList/BidderListMain.tsx b/src/components/bidderList/BidderListMain.tsx
new file mode 100644
index 00000000..16adc288
--- /dev/null
+++ b/src/components/bidderList/BidderListMain.tsx
@@ -0,0 +1,61 @@
+import { BIDDER_LIST_PRICE_FILTER } from "@/constants/filter";
+import { formatCurrencyWithWon } from "@/utils/formatCurrencyWithWon";
+import type { IBidder } from "Bid";
+import { useState } from "react";
+import Button from "../common/Button";
+import AuctionItem from "../common/item/AuctionItem";
+import { useGetAuctionDetails } from "../details/queries";
+import Layout from "../layout/Layout";
+import { useGetBidderList } from "./queries";
+
+const BidderListMain = ({ auctionId }: { auctionId: number }) => {
+  const [filterState, setFilterState] = useState(BIDDER_LIST_PRICE_FILTER.HIGH);
+
+  const handleFilterState = () =>
+    setFilterState((prev) => (prev.name === BIDDER_LIST_PRICE_FILTER.HIGH.name ? BIDDER_LIST_PRICE_FILTER.LOW : BIDDER_LIST_PRICE_FILTER.HIGH));
+
+
+  const { auctionDetails } = useGetAuctionDetails(auctionId);
+  const { bidderList } = useGetBidderList(auctionId);
+
+  const filteredBidderList = filterState.sort === 'desc' ? bidderList : bidderList.sort((a, b) => a.bidAmount - b.bidAmount)
+  const { imageUrls, productName, minPrice, participantCount } = auctionDetails;
+
+  return (
+    <>
+      <Layout.Main>
+        <div className='flex flex-col gap-8 pt-4'>
+          <AuctionItem axis='row' label='입찰자 목록 상품'>
+            <AuctionItem.Image src={imageUrls[0]} />
+            <AuctionItem.Main kind='register' name={productName} count={participantCount} price={minPrice} />
+          </AuctionItem>
+          <div className='flex items-center justify-between'>
+            <h2 className='text-heading2'>참여 가격</h2>
+            <div onClick={handleFilterState} className='flex items-center gap-1 cursor-pointer text-body2 text-gray1'>
+              <span>{filterState.name}</span>
+              <img className='pb-1' src={filterState.icon} alt={filterState.name} />
+            </div>
+          </div>
+          <hr className='border my-[-16px] border-gray3' />
+          <ul className='flex flex-col gap-2'>
+            {filteredBidderList.map((el: IBidder, idx: number) => (
+              <li
+                key={el.bidderNickname}
+                className={`flex p-3 items-center justify-between text-gray1 ${idx === 0 && 'border border-cheeseYellow rounded-lg'}`}
+              >
+                <span className='text-body1'>{el.bidderNickname}</span>
+                <span className='text-body1Bold'>{formatCurrencyWithWon(el.bidAmount)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Layout.Main>
+      <Layout.Footer type='single'>
+        <Button type='button' color='cheeseYellow' className='w-full h-full' aria-label='최종 판매 버튼'>
+          확인 완료
+        </Button>
+      </Layout.Footer></>
+  );
+}
+
+export default BidderListMain;
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
index ffcfa3e0..81f86f0f 100644
--- a/src/components/common/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
 import classNames from 'classnames';
-import ButtonSpinner from './loadingAndError/ButtonSpinner';
+import { ReactNode } from 'react';
+import ButtonSpinner from './loading/ButtonSpinner';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
diff --git a/src/components/common/CustomCarousel.tsx b/src/components/common/CustomCarousel.tsx
index 2a8b0c5e..b83b9e31 100644
--- a/src/components/common/CustomCarousel.tsx
+++ b/src/components/common/CustomCarousel.tsx
@@ -15,8 +15,8 @@ const CustomCarousel = ({ contentStyle, length, children }: { contentStyle?: str
       <CarouselContent className={`flex items-center h-full ${contentStyle}`}>{children}</CarouselContent>
       {length > 1 && (
         <>
-          <CarouselPrevious className='z-50 ml-14' />
-          <CarouselNext className='z-50 mr-14' />
+          <CarouselPrevious type='button' className='ml-14' />
+          <CarouselNext type='button' className='mr-14' />
         </>
       )}
     </Carousel>
diff --git a/src/components/common/EmptyBoundary.tsx b/src/components/common/EmptyBoundary.tsx
deleted file mode 100644
index b71334ec..00000000
--- a/src/components/common/EmptyBoundary.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import EmptyFallback from './EmptyFallback';
-import { ReactNode } from 'react';
-
-interface EmptyBoundaryProps {
-  dataLength: number;
-  type: string;
-  children: ReactNode;
-}
-
-const EmptyBoundary = ({ dataLength, type, children }: EmptyBoundaryProps) => {
-  if (dataLength === 0) return <EmptyFallback type={type} />;
-
-  return children;
-};
-
-export default EmptyBoundary;
diff --git a/src/components/common/EmptyFallback.tsx b/src/components/common/EmptyFallback.tsx
deleted file mode 100644
index 0271abf8..00000000
--- a/src/components/common/EmptyFallback.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { EMPTY_MESSAGE } from '@/constants/emptyMessage';
-
-const EmptyFallback = ({ type }: { type: string }) => {
-  return <div className='flex items-center justify-center w-full h-full md:text-heading2 text-heading3 text-gray2'>{EMPTY_MESSAGE[type]}</div>;
-};
-
-export default EmptyFallback;
diff --git a/src/components/common/atomic/LikeCount.tsx b/src/components/common/atomic/LikeCount.tsx
index cb3acef7..6e6a049f 100644
--- a/src/components/common/atomic/LikeCount.tsx
+++ b/src/components/common/atomic/LikeCount.tsx
@@ -4,12 +4,12 @@ const LikeCount = ({ count }: { count: number }) => {
   return (
     <div
       aria-label="좋아요"
-      className="flex items-center text-body2 text-gray2"
+      className="flex items-center text-xs sm:text-body2 text-gray2"
     >
       <img src={PriceIcon} alt="좋아요" />
-      <span>
+      <span className='whitespace-nowrap'>
         {`좋아요 `}
-        <span className="text-black text-body2Bold">{count}명</span>
+        <span className="text-xs text-black sm:text-body2Bold">{count}명</span>
       </span>
     </div>
   );
diff --git a/src/components/common/atomic/MinPrice.tsx b/src/components/common/atomic/MinPrice.tsx
index 1c746c6f..905ec58a 100644
--- a/src/components/common/atomic/MinPrice.tsx
+++ b/src/components/common/atomic/MinPrice.tsx
@@ -6,11 +6,11 @@ const MinPrice = ({ price }: { price: number }) => {
   return (
     <div
       aria-label="시작가"
-      className="flex items-center text-body2 text-gray2"
+      className="flex items-center text-xs sm:text-body2 text-gray2"
     >
       <img src={PriceIcon} alt="시작가" />
-      <span>
-        시작가 <span className="text-black text-body2Bold">{formatted}</span>
+      <span className='overflow-hidden whitespace-nowrap'>
+        시작가 <span className="text-xs text-black sm:text-body2Bold">{formatted}</span>
       </span>
     </div>
   );
diff --git a/src/components/common/atomic/ParticipantCount.tsx b/src/components/common/atomic/ParticipantCount.tsx
index f80f743d..1f65c46f 100644
--- a/src/components/common/atomic/ParticipantCount.tsx
+++ b/src/components/common/atomic/ParticipantCount.tsx
@@ -4,11 +4,11 @@ const ParticipantCount = ({ count }: { count: number }) => {
   return (
     <div
       aria-label="참여자"
-      className="flex items-center text-body2 text-gray2"
+      className="flex items-center text-xs sm:text-body2 text-gray2"
     >
       <img src={UserIcon} alt="참여자" />
-      <span>
-        참여자 <span className="text-black text-body2Bold">{count}명</span>
+      <span className='whitespace-nowrap'>
+        참여자 <span className="text-xs text-black sm:text-body2Bold">{count}명</span>
       </span>
     </div>
   );
diff --git a/src/components/common/boundary/APIAsyncBoundary.tsx b/src/components/common/boundary/APIAsyncBoundary.tsx
new file mode 100644
index 00000000..10a8fe77
--- /dev/null
+++ b/src/components/common/boundary/APIAsyncBoundary.tsx
@@ -0,0 +1,43 @@
+import { ReactNode, Suspense } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+
+import ErrorIcon from '@/assets/icons/error.svg';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useLocation } from 'react-router-dom';
+import Button from '../Button';
+import { getErrorByCode } from '../error/ErrorCode';
+import GlobalSpinner from '../loading/GlobalSpinner';
+
+const FallbackComponent = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const { title, description } = getErrorByCode(error)
+  if (!isAxiosError(error)) throw error
+
+  return (
+    <div className='flex flex-col items-center min-w-[10rem] justify-center h-full gap-5'>
+      <img src={ErrorIcon} alt='에러 아이콘' />
+      <div className='space-y-2 text-center'>
+        <h2 className='sm:text-heading2 text-heading3 text-gray1'>{title}</h2>
+        <p className='text-gray2 text-body2'>{description}</p>
+      </div>
+      <Button type='button' color='cheeseYellow' className='' onClick={resetErrorBoundary}>
+        다시 불러오기
+      </Button>
+    </div>
+  );
+};
+
+const APIAsyncBoundary = ({ children }: { children: ReactNode }) => {
+  const { pathname, key } = useLocation();
+  const { reset } = useQueryErrorResetBoundary()
+
+  return (
+    <ErrorBoundary onReset={reset} FallbackComponent={FallbackComponent} resetKeys={[pathname, key]}>
+      <Suspense fallback={<GlobalSpinner />}>
+        {children}
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default APIAsyncBoundary;
diff --git a/src/components/common/boundary/EmptyBoundary.tsx b/src/components/common/boundary/EmptyBoundary.tsx
new file mode 100644
index 00000000..ad28f6e8
--- /dev/null
+++ b/src/components/common/boundary/EmptyBoundary.tsx
@@ -0,0 +1,20 @@
+import { EMPTY_MESSAGE } from '@/constants/emptyMessage';
+import { ReactNode } from 'react';
+
+const EmptyFallback = ({ name }: { name: string }) => {
+  return <div className='flex items-center justify-center w-full h-full md:text-heading2 text-heading3 text-gray2'>{EMPTY_MESSAGE[name]}</div>;
+};
+
+interface EmptyBoundaryProps {
+  length: number;
+  name: string;
+  children: ReactNode;
+}
+
+const EmptyBoundary = ({ length, name, children }: EmptyBoundaryProps) => {
+  if (length === 0) return <EmptyFallback name={name} />;
+
+  return children;
+};
+
+export default EmptyBoundary;
diff --git a/src/components/common/boundary/GlobalAsyncBoundary.tsx b/src/components/common/boundary/GlobalAsyncBoundary.tsx
new file mode 100644
index 00000000..edd0233b
--- /dev/null
+++ b/src/components/common/boundary/GlobalAsyncBoundary.tsx
@@ -0,0 +1,48 @@
+import { ReactNode, Suspense } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+
+import ErrorIcon from '@/assets/icons/error.svg';
+import Layout from '@/components/layout/Layout';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import Button from '../Button';
+import { getErrorByCode } from '../error/ErrorCode';
+import GlobalSpinner from '../loading/GlobalSpinner';
+
+const FallbackComponent = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const { title, description } = getErrorByCode(error)
+
+  return (
+    <div className='flex justify-center w-full h-screen'>
+      <div className='relative w-[46rem] min-w-[23rem] h-full'>
+        <Layout>
+          <Layout.Main>
+            <div className='flex flex-col items-center min-w-[10rem] justify-center h-full gap-5'>
+              <img src={ErrorIcon} alt='에러 아이콘' />
+              <div className='space-y-2 text-center'>
+                <h2 className='sm:text-heading2 text-heading3 text-gray1'>{title}</h2>
+                <p className='text-gray2 text-body2'>{description}</p>
+              </div>
+            </div>
+          </Layout.Main>
+          <Layout.Footer type='single'>
+            <Button type='button' color='cheeseYellow' className='w-full h-full' onClick={resetErrorBoundary}>
+              다시 시도하기
+            </Button>
+          </Layout.Footer>
+        </Layout>
+      </div>
+    </div>
+  );
+};
+
+const GlobalAsyncBoundary = ({ children }: { children: ReactNode }) => {
+  const { reset } = useQueryErrorResetBoundary()
+
+  return (
+    <ErrorBoundary onReset={reset} FallbackComponent={FallbackComponent}>
+      <Suspense fallback={<GlobalSpinner />}>{children}</Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default GlobalAsyncBoundary;
diff --git a/src/components/common/boundary/LocalAPIAsyncBoundary.tsx b/src/components/common/boundary/LocalAPIAsyncBoundary.tsx
new file mode 100644
index 00000000..3fd1f1ed
--- /dev/null
+++ b/src/components/common/boundary/LocalAPIAsyncBoundary.tsx
@@ -0,0 +1,43 @@
+import { ReactNode, Suspense } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+
+import ErrorIcon from '@/assets/icons/error.svg';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import Button from '../Button';
+import GlobalSpinner from '../loading/GlobalSpinner';
+
+interface FallbackComponentProps extends FallbackProps {
+  height: number
+}
+
+const FallbackComponent = ({ error, resetErrorBoundary, height }: FallbackComponentProps) => {
+  if (!isAxiosError(error)) throw error
+
+  return (
+    <div className={`flex flex-col items-center justify-center w-full h-[${height}px] gap-3 p-5 border rounded bg-error`}>
+      <img src={ErrorIcon} alt='에러 아이콘' className='sm:size-8 size-6' />
+      <div className='space-y-2 text-center'>
+        <h2 className='sm:text-body2 text-caption text-gray2'>데이터를 불러오는 도중
+          문제가 발생했습니다.</h2>
+      </div>
+      <Button type='button' color='cheeseYellow' className='text-xs sm:text-smallBtn' onClick={resetErrorBoundary}>
+        다시 불러오기
+      </Button>
+    </div>
+  );
+};
+
+const LocalAPIAsyncBoundary = ({ children, height }: { children: ReactNode, height: number }) => {
+  const { reset } = useQueryErrorResetBoundary()
+
+  return (
+    <ErrorBoundary onReset={reset} FallbackComponent={(props) => <FallbackComponent height={height} {...props} />}>
+      <Suspense fallback={<GlobalSpinner />}>
+        {children}
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default LocalAPIAsyncBoundary;
diff --git a/src/components/common/loadingAndError/NotFound.tsx b/src/components/common/boundary/RouteErrorBoundary.tsx
similarity index 51%
rename from src/components/common/loadingAndError/NotFound.tsx
rename to src/components/common/boundary/RouteErrorBoundary.tsx
index 228b5c49..231ddd12 100644
--- a/src/components/common/loadingAndError/NotFound.tsx
+++ b/src/components/common/boundary/RouteErrorBoundary.tsx
@@ -1,29 +1,32 @@
-import { useNavigate } from 'react-router';
 import MainImage from '@/assets/icons/main_cheese_icon.svg';
-import Layout from '../../layout/Layout';
+import Layout from '@/components/layout/Layout';
+import { useNavigate } from 'react-router';
 import Button from '../Button';
 
-const NotFound = () => {
+const RouteErrorBoundary = () => {
   const navigate = useNavigate();
-  const handleBack = () => navigate('/');
+  const handleBack = () => navigate('/', { replace: true });
+
   return (
     <div className='flex justify-center w-full h-screen'>
       <div className='relative w-[46rem] min-w-[23rem] h-full'>
         <Layout>
-          <Layout.Header title='잘못된 페이지' handleBack={handleBack} />
+          <Layout.Header title='치즈 마켓' />
           <Layout.Main>
             <div className='flex flex-col items-center justify-center h-full gap-5'>
               <img src={MainImage} alt='메인 로고' />
-              <h1 className=' text-heading1 text-cheeseYellow'>잘못된 페이지입니다.</h1>
-              <Button onClick={handleBack} type='button' color='cheeseYellow'>
-                홈으로 가기
-              </Button>
+              <h1 className=' text-heading1 text-cheeseYellow'>페이지를 찾을 수 없습니다.</h1>
             </div>
           </Layout.Main>
+          <Layout.Footer type='single'>
+            <Button onClick={handleBack} type='button' className='w-full' color='cheeseYellow'>
+              홈으로 가기
+            </Button>
+          </Layout.Footer>
         </Layout>
       </div>
     </div>
   );
 };
 
-export default NotFound;
+export default RouteErrorBoundary;
diff --git a/src/components/common/error/ErrorCode.ts b/src/components/common/error/ErrorCode.ts
new file mode 100644
index 00000000..1697f4d7
--- /dev/null
+++ b/src/components/common/error/ErrorCode.ts
@@ -0,0 +1,64 @@
+import { AxiosError } from 'axios';
+
+type ErrorCodeType = {
+  [key: string]: { title: string; description: string };
+};
+
+export const ERROR_CODE: ErrorCodeType = {
+  default: {
+    title: '알 수 없는 오류가 발생했습니다.',
+    description: '문제가 지속되면 관리자에게 문의하세요.',
+  },
+  // axios error
+  ERR_NETWORK: {
+    title: '지금은 접속이 원활하지 않습니다.',
+    description: '인터넷 연결을 확인하고, 문제가 지속되면 관리자에게 문의하세요.',
+  },
+  ECONNABORTED: {
+    title: '요청 시간이 초과되었습니다.',
+    description: '서버가 응답하지 않아서 요청이 취소되었습니다.',
+  },
+
+  // http status code 및 정의된 코드
+  400: {
+    title: '요청이 잘못되었습니다.',
+    description: '잘못된 데이터나 요청 형식으로 인해 요청을 처리할 수 없습니다.',
+  },
+  401: {
+    title: '인증이 필요합니다.',
+    description: '해당 요청을 수행하기 위해서는 로그인이 필요합니다.',
+  },
+  403: {
+    title: '접근 권한이 없습니다.',
+    description: '요청한 리소스에 접근할 수 있는 권한이 없습니다.',
+  },
+  404: {
+    title: '요청하신 페이지를 찾을 수 없습니다.',
+    description: '요청하신 페이지가 존재하지 않거나, URL이 잘못 입력되었습니다.',
+  },
+  500: {
+    title: '알 수 없는 오류가 발생했습니다.',
+    description: '문제가 지속되면 관리자에게 문의하세요.',
+  },
+} as const;
+
+export const getErrorByCode = (error: AxiosError<{ status: number; name: string; message: string[] }>) => {
+  const serverErrorCode = error?.response?.data ?? '';
+  const httpErrorCode = error?.response?.status ?? '';
+  const axiosErrorCode = error?.code ?? '';
+
+  if (serverErrorCode && serverErrorCode.status in ERROR_CODE) {
+    const englishPattern = /^[A-Za-z\s]+$/;
+
+    return englishPattern.test(serverErrorCode.message[0])
+      ? ERROR_CODE[serverErrorCode.status]
+      : { ...ERROR_CODE[serverErrorCode.status], description: serverErrorCode.message[0] };
+  }
+  if (httpErrorCode in ERROR_CODE) {
+    return ERROR_CODE[httpErrorCode];
+  }
+  if (axiosErrorCode in ERROR_CODE) {
+    return ERROR_CODE[axiosErrorCode];
+  }
+  return ERROR_CODE.default;
+};
diff --git a/src/components/common/loadingAndError/ErrorMessage.tsx b/src/components/common/error/ErrorMessage.tsx
similarity index 100%
rename from src/components/common/loadingAndError/ErrorMessage.tsx
rename to src/components/common/error/ErrorMessage.tsx
diff --git a/src/components/common/form/FormField.tsx b/src/components/common/form/FormField.tsx
index 4553be02..593390f0 100644
--- a/src/components/common/form/FormField.tsx
+++ b/src/components/common/form/FormField.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { Control, Controller, ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
-import ErrorMessage from '../loadingAndError/ErrorMessage';
+import ErrorMessage from '../error/ErrorMessage';
 
 interface FormFieldProps<T extends FieldValues> {
   name: Path<T>;
diff --git a/src/components/common/item/AuctionItem.tsx b/src/components/common/item/AuctionItem.tsx
index f7d3fb97..b9354510 100644
--- a/src/components/common/item/AuctionItem.tsx
+++ b/src/components/common/item/AuctionItem.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import ParticipantCount from '../atomic/ParticipantCount';
 import LikeCount from '../atomic/LikeCount';
 import MinPrice from '../atomic/MinPrice';
+import ParticipantCount from '../atomic/ParticipantCount';
 import TimeLabel from '../atomic/TimeLabel';
 
 interface AuctionItemProps {
@@ -22,8 +22,8 @@ const AuctionItem = ({ label, axis, children }: AuctionItemProps) => {
 
 const Image = ({ src, time = undefined }: { src: string; time?: number }) => {
   return (
-    <div className='relative border rounded'>
-      <img src={src} alt='이미지' className='object-cover w-full h-[12rem] rounded' />
+    <div className='relative border rounded basis-1/2'>
+      <img src={src} alt='이미지' className='object-cover rounded' />
       {time && <TimeLabel time={time} />}
     </div>
   );
diff --git a/src/components/common/loadingAndError/ButtonSpinner.tsx b/src/components/common/loading/ButtonSpinner.tsx
similarity index 100%
rename from src/components/common/loadingAndError/ButtonSpinner.tsx
rename to src/components/common/loading/ButtonSpinner.tsx
diff --git a/src/components/common/loading/GlobalSpinner.tsx b/src/components/common/loading/GlobalSpinner.tsx
new file mode 100644
index 00000000..781b7024
--- /dev/null
+++ b/src/components/common/loading/GlobalSpinner.tsx
@@ -0,0 +1,14 @@
+const GlobalSpinner = () => {
+  return (
+    <div className='flex justify-center w-full h-screen'>
+      <div className='relative w-[46rem] min-w-[23rem] h-full'>
+        <div className="flex flex-col items-center justify-center h-full gap-3">
+          <span className="border-4 border-white rounded-full size-16 border-b-mainCheeseYellow animate-spin" />
+        </div>
+      </div>
+    </div>
+
+  );
+};
+
+export default GlobalSpinner;
diff --git a/src/components/common/loadingAndError/AsyncBoundary.tsx b/src/components/common/loadingAndError/AsyncBoundary.tsx
deleted file mode 100644
index 7b1174ee..00000000
--- a/src/components/common/loadingAndError/AsyncBoundary.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ReactNode, Suspense } from 'react';
-
-import { ErrorBoundary } from 'react-error-boundary';
-import ErrorFallback from './ErrorFallback';
-import GlobalSpinner from './GlobalSpinner';
-import { useLocation } from 'react-router-dom';
-
-const AsyncBoundary = ({ children }: { children: ReactNode }) => {
-  const { pathname } = useLocation();
-  return (
-    <ErrorBoundary FallbackComponent={ErrorFallback} resetKeys={[pathname]}>
-      <Suspense fallback={<GlobalSpinner />}>{children}</Suspense>
-    </ErrorBoundary>
-  );
-};
-
-export default AsyncBoundary;
diff --git a/src/components/common/loadingAndError/ErrorFallback.tsx b/src/components/common/loadingAndError/ErrorFallback.tsx
deleted file mode 100644
index 3c8fb24f..00000000
--- a/src/components/common/loadingAndError/ErrorFallback.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Button from '../Button';
-import { FallbackProps } from 'react-error-boundary';
-
-const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
-  if (!error) return null;
-  return (
-    <div className='flex flex-col items-center justify-center w-full h-full gap-3'>
-      <span className='text-heading1 text-cheeseYellow'>Error</span>
-      <Button type='button' color='cheeseYellow' onClick={resetErrorBoundary}>
-        다시 시도하기
-      </Button>
-    </div>
-  );
-};
-
-export default ErrorFallback;
diff --git a/src/components/common/loadingAndError/GlobalSpinner.tsx b/src/components/common/loadingAndError/GlobalSpinner.tsx
deleted file mode 100644
index 2531bba3..00000000
--- a/src/components/common/loadingAndError/GlobalSpinner.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-const GlobalSpinner = () => {
-  return (
-    <div className="flex flex-col items-center justify-between w-full h-full gap-5">
-      <div className="flex flex-col items-center justify-center h-full gap-3">
-        <span className="border-4 border-white rounded-full size-16 border-b-mainCheeseYellow animate-spin" />
-      </div>
-    </div>
-  );
-};
-
-export default GlobalSpinner;
diff --git a/src/components/home/BestItemList.tsx b/src/components/home/BestItemList.tsx
new file mode 100644
index 00000000..f1170e8c
--- /dev/null
+++ b/src/components/home/BestItemList.tsx
@@ -0,0 +1,21 @@
+import CustomCarousel from "../common/CustomCarousel";
+import EmptyBoundary from "../common/boundary/EmptyBoundary";
+import HomeItem from "./HomeItem";
+import { useGetBestAuctions } from "./queries";
+
+const BestItemList = () => {
+  const { bestAuctions } = useGetBestAuctions()
+  const length = bestAuctions.length
+
+  return (
+    <EmptyBoundary length={length} name="best">
+      <CustomCarousel length={length}>
+        {bestAuctions.map((el) => (
+          <HomeItem<'auction'> item={el} key={el.auctionId} kind="best" />
+        ))}
+      </CustomCarousel>
+    </EmptyBoundary>
+  );
+}
+
+export default BestItemList;
diff --git a/src/components/home/CategoryList.tsx b/src/components/home/CategoryList.tsx
index 0fadfdaa..67f33685 100644
--- a/src/components/home/CategoryList.tsx
+++ b/src/components/home/CategoryList.tsx
@@ -8,7 +8,7 @@ const CategoryItem = ({ code, name, icon }: { code: string; name: string; icon:
     navigate(`/product/list?category=${code}`);
   };
   return (
-    <li className='flex flex-col items-center gap-3 cursor-pointer' onClick={onClickCategory}>
+    <li className='flex flex-col items-center w-full h-full gap-3 cursor-pointer' onClick={onClickCategory}>
       <img src={icon} alt={`${name} 카테고리`} className='sm:w-[5rem] sm:h-[5em] w-[3rem] h-[3rem] rounded-full bg-categoryColor sm:p-4 p-2' />
       <div className='text-body2 text-gray1'>{name}</div>
     </li>
@@ -18,14 +18,12 @@ const CategoryItem = ({ code, name, icon }: { code: string; name: string; icon:
 const CategoryList = () => {
   return (
     <section className='flex flex-col w-full gap-4'>
-      <label className='text-lg font-semibold'>카테고리</label>
-      <div className='flex gap-4'>
-        <ul className='flex flex-wrap items-center gap-5'>
-          {Object.values(CATEGORIES).map((el) => (
-            <CategoryItem key={el.value} code={el.code} name={el.value} icon={el.icon} />
-          ))}
-        </ul>
-      </div>
+      <label className='text-heading3'>카테고리</label>
+      <ul className='grid items-center justify-center grid-cols-2 gap-3 sm:gap-5 sm:grid-cols-4'>
+        {Object.values(CATEGORIES).map((el) => (
+          <CategoryItem key={el.value} code={el.code} name={el.value} icon={el.icon} />
+        ))}
+      </ul>
     </section>
 
   );
diff --git a/src/components/home/Home.test.tsx b/src/components/home/Home.test.tsx
index 05fb472a..4cedd077 100644
--- a/src/components/home/Home.test.tsx
+++ b/src/components/home/Home.test.tsx
@@ -1,15 +1,15 @@
-import { describe, expect, test, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { bestAuctionsData, imminentAuctionsData, preRegisterAuctionsData } from '@/mocks/data/homeAuctionsData';
+import { notificationData } from '@/mocks/data/notificationData';
 import Home from '@/pages/Home';
-import userEvent from '@testing-library/user-event';
 import { mockedUseNavigate } from '@/setupTests';
-import { notificationData } from '@/mocks/data/notificationData';
-import { bestAuctionsData, imminentAuctionsData, preRegisterAuctionsData } from '@/mocks/data/homeAuctionsData';
 import { getTimeColor } from '@/utils/getTimeColor';
-import { useGetNotifications } from '../notification/queries';
-import { useGetHomeAuctions } from './queries';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { describe, expect, test, vi } from 'vitest';
 import LayoutWithNav from '../layout/LayoutWithNav';
+import { useGetNotifications } from '../notification/queries';
+import { useGetBestAuctions, useGetImminentAuctions, useGetPreAuctions } from './queries';
 
 // vi.mock을 사용해 특정 모듈을 모킹할 수 있다.
 // 실제로 useGetBestAuctions 함수를 실행하는 대신, 원하는 반환값을 제공하는 모의 함수를 제공한다는 뜻
@@ -18,9 +18,13 @@ vi.mock('@/components/home/queries');
 
 // 모듈을 모킹한 후, 우리는 각 함수가 어떤 값을 반환할지 정의
 // 모킹을 통해 설정한 반환값은 실제로 테스트를 진행할 때, 컴포넌트가 이 훅에서 데이터를 가져오는 것처럼 작동하게 합니다. 이 과정에서 API 요청이 발생하지 않으며, 데이터가 항상 일관되게 제공됩니다.
-vi.mocked(useGetHomeAuctions).mockReturnValue({
+vi.mocked(useGetBestAuctions).mockReturnValue({
   bestAuctions: bestAuctionsData,
+});
+vi.mocked(useGetImminentAuctions).mockReturnValue({
   imminentAuctions: imminentAuctionsData,
+});
+vi.mocked(useGetPreAuctions).mockReturnValue({
   preAuctions: preRegisterAuctionsData,
 });
 
@@ -30,7 +34,7 @@ vi.mocked(useGetNotifications).mockReturnValue({
   notifications: notificationData,
 });
 
-describe('Home 테스트', () => {
+describe.only('Home 테스트', () => {
   const setup = () => {
     const utils = render(
       <MemoryRouter initialEntries={['/']}>
@@ -53,9 +57,8 @@ describe('Home 테스트', () => {
     test('경매 상품을 클릭하면 경매 상세 페이지로 이동한다.', async () => {
       const { user } = setup();
 
-      // 이 코드에서는 await을 사용해 findByRole이 요소를 찾을 때까지 기다린다. 이는 비동기적으로 로딩된 데이터를 처리하는 데 유용
       const bestAuctionsMockData = await screen.findAllByRole('figure', {
-        name: /register/,
+        name: /best/,
       });
       const firstBestAuctionsMockData = bestAuctionsMockData[0];
 
@@ -68,7 +71,7 @@ describe('Home 테스트', () => {
       const { user } = setup();
 
       const preRegisterAuctionsMockData = await screen.findAllByRole('figure', {
-        name: /pre-register/,
+        name: /preAuction/,
       });
 
       const firstPreRegisterAuction = preRegisterAuctionsMockData[0];
diff --git a/src/components/home/HomeItem.tsx b/src/components/home/HomeItem.tsx
index 5d5f48e7..0bebb585 100644
--- a/src/components/home/HomeItem.tsx
+++ b/src/components/home/HomeItem.tsx
@@ -18,7 +18,7 @@ const HomeItem = <T extends 'preAuction' | 'auction'>({ kind, item }: HomeItemPr
   const navigate = useNavigate();
   const { minPrice, productName, imageUrl } = item
   const handleClick = () => navigate(
-    kind === 'auction'
+    kind !== 'preAuction'
       ? `${ROUTERS.AUCTION.ITEM}/${(item as IAuctionItem).auctionId}`
       : `${ROUTERS.PRE_AUCTION.ITEM}/${(item as IPreAuctionItem).productId}`
   );
@@ -29,7 +29,7 @@ const HomeItem = <T extends 'preAuction' | 'auction'>({ kind, item }: HomeItemPr
       <figure className='flex flex-col gap-2 border rounded cursor-pointer text-body2' aria-label={kind} onClick={handleClick}>
         <div className='relative'>
           <img src={imageUrl} alt={`${kind}_이미지`} className='object-cover w-full h-[10rem] rounded-t' />
-          {kind === 'auction' && <TimeLabel time={(item as IAuctionItem).timeRemaining} />}
+          {kind !== 'preAuction' && <TimeLabel time={(item as IAuctionItem).timeRemaining} />}
         </div>
         <figcaption className='flex flex-col gap-2 p-2'>
           <div aria-label={`${kind}_이름`} className='text-gray1'>
@@ -37,7 +37,7 @@ const HomeItem = <T extends 'preAuction' | 'auction'>({ kind, item }: HomeItemPr
           </div>
           <div>
             <MinPrice price={minPrice} />
-            {kind === 'auction'
+            {kind !== 'preAuction'
               ? <ParticipantCount count={(item as IAuctionItem).participantCount} />
               : <LikeCount count={(item as IPreAuctionItem).likeCount} />}
           </div>
diff --git a/src/components/home/HomeItemField.tsx b/src/components/home/HomeItemField.tsx
new file mode 100644
index 00000000..5402d0fd
--- /dev/null
+++ b/src/components/home/HomeItemField.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+const HomeItemField = ({ children, name }: { children: ReactNode, name: string }) => {
+  return (
+    <section className='flex flex-col w-full gap-4'>
+      <label className='text-heading3'>{name}</label>
+      <div className='flex gap-4'>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export default HomeItemField;
diff --git a/src/components/home/HomeItemList.tsx b/src/components/home/HomeItemList.tsx
deleted file mode 100644
index 9d31c207..00000000
--- a/src/components/home/HomeItemList.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IAuctionItem, IPreAuctionItem } from "AuctionItem";
-import CustomCarousel from "../common/CustomCarousel";
-import EmptyBoundary from "../common/EmptyBoundary";
-import HomeItem from "./HomeItem";
-
-interface HomeItemListProps<T extends 'preAuction' | 'auction'> {
-  name: string
-  data: T extends 'preAuction' ? IPreAuctionItem[] : IAuctionItem[]
-}
-
-const HomeItemList = <T extends 'preAuction' | 'auction'>({ name, data }: HomeItemListProps<T>) => {
-  const kind = name === '사전 등록 경매' ? 'preAuction' : 'auction';
-
-  return (
-    <section className='flex flex-col w-full gap-4'>
-      <label className='text-lg font-semibold'>{name}</label>
-      <div className='flex gap-4'>
-        <EmptyBoundary dataLength={data.length} type={name}>
-          <CustomCarousel length={data.length}>
-            {data.map((el) => (
-              <HomeItem<T> key={kind === 'preAuction' ? (el as IPreAuctionItem).productId : (el as IAuctionItem).auctionId} kind={kind as T} item={el as (T extends 'preAuction' ? IPreAuctionItem : IAuctionItem)} />
-            ))}
-          </CustomCarousel>
-        </EmptyBoundary>
-      </div>
-    </section>
-  );
-};
-
-export default HomeItemList;
diff --git a/src/components/home/ImminentItemList.tsx b/src/components/home/ImminentItemList.tsx
new file mode 100644
index 00000000..64656f2e
--- /dev/null
+++ b/src/components/home/ImminentItemList.tsx
@@ -0,0 +1,21 @@
+import CustomCarousel from "../common/CustomCarousel";
+import EmptyBoundary from "../common/boundary/EmptyBoundary";
+import HomeItem from "./HomeItem";
+import { useGetImminentAuctions } from "./queries";
+
+const ImminentItemList = () => {
+  const { imminentAuctions } = useGetImminentAuctions()
+  const length = imminentAuctions.length
+
+  return (
+    <EmptyBoundary length={length} name="imminent">
+      <CustomCarousel length={length}>
+        {imminentAuctions.map((el) => (
+          <HomeItem<'auction'> item={el} key={el.auctionId} kind="종료 임박" />
+        ))}
+      </CustomCarousel>
+    </EmptyBoundary>
+  );
+}
+
+export default ImminentItemList;
diff --git a/src/components/home/PreAuctionItemList.tsx b/src/components/home/PreAuctionItemList.tsx
new file mode 100644
index 00000000..1af83dba
--- /dev/null
+++ b/src/components/home/PreAuctionItemList.tsx
@@ -0,0 +1,21 @@
+import CustomCarousel from "../common/CustomCarousel";
+import EmptyBoundary from "../common/boundary/EmptyBoundary";
+import HomeItem from "./HomeItem";
+import { useGetPreAuctions } from "./queries";
+
+const PreAuctionItemList = () => {
+  const { preAuctions } = useGetPreAuctions()
+  const length = preAuctions.length
+
+  return (
+    <EmptyBoundary length={length} name="preAuction">
+      <CustomCarousel length={length}>
+        {preAuctions.map((el) => (
+          <HomeItem<'preAuction'> item={el} key={el.productId} kind="preAuction" />
+        ))}
+      </CustomCarousel>
+    </EmptyBoundary>
+  );
+}
+
+export default PreAuctionItemList;
diff --git a/src/components/home/queries.ts b/src/components/home/queries.ts
index e2a989e0..9c61ce02 100644
--- a/src/components/home/queries.ts
+++ b/src/components/home/queries.ts
@@ -3,39 +3,45 @@ import type { IAuctionItem, IPreAuctionItem } from 'AuctionItem';
 import { httpClient } from '@/api/axios';
 import { API_END_POINT } from '@/constants/api';
 import { queryKeys } from '@/constants/queryKeys';
-import { useSuspenseQueries } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
-export const useGetHomeAuctions = () => {
+export const useGetBestAuctions = () => {
   const getBestAuctions = async (): Promise<IAuctionItem[]> => {
     const response = await httpClient.get(`${API_END_POINT.BEST}`);
     return response.data;
   };
+
+  const { data: bestAuctions } = useSuspenseQuery({ queryKey: [queryKeys.BEST_AUCTIONS], queryFn: getBestAuctions });
+
+  return { bestAuctions };
+};
+export const useGetImminentAuctions = () => {
   const getImminentAuctions = async (): Promise<IAuctionItem[]> => {
     const response = await httpClient.get(`${API_END_POINT.IMMINENT}`);
     return response.data;
   };
+
+  const { data: imminentAuctions } = useSuspenseQuery({
+    queryKey: [queryKeys.IMMINENT_AUCTIONS],
+    queryFn: getImminentAuctions,
+  });
+
+  return { imminentAuctions };
+};
+export const useGetPreAuctions = () => {
   const getPreAuctions = async (): Promise<IPreAuctionItem[]> => {
     const response = await httpClient.get(`${API_END_POINT.PRE_AUCTION}?sort=most-liked&page=0&size=5`);
+    if (!response.data || !response.data.items) {
+      throw new Error('No items found in the response');
+    }
+
     return response.data.items;
   };
 
-  const [bestAuctionsQuery, imminentAuctionsQuery, preAuctionsQuery] = useSuspenseQueries({
-    queries: [
-      { queryKey: [queryKeys.BEST_AUCTIONS], queryFn: getBestAuctions },
-      {
-        queryKey: [queryKeys.IMMINENT_AUCTIONS],
-        queryFn: getImminentAuctions,
-      },
-      {
-        queryKey: [queryKeys.PRE_AUCTIONS],
-        queryFn: getPreAuctions,
-      },
-    ],
+  const { data: preAuctions } = useSuspenseQuery({
+    queryKey: [queryKeys.PRE_AUCTIONS],
+    queryFn: getPreAuctions,
   });
 
-  const bestAuctions = bestAuctionsQuery.data;
-  const imminentAuctions = imminentAuctionsQuery.data;
-  const preAuctions = preAuctionsQuery.data;
-
-  return { bestAuctions, imminentAuctions, preAuctions };
+  return { preAuctions };
 };
diff --git a/src/components/layout/RealTimeNotification.test.tsx b/src/components/layout/RealTimeNotification.test.tsx
index e4f8d5d4..fd7fae7e 100644
--- a/src/components/layout/RealTimeNotification.test.tsx
+++ b/src/components/layout/RealTimeNotification.test.tsx
@@ -1,9 +1,11 @@
 import { act, render, screen } from '@testing-library/react';
 import { beforeAll, describe, expect, test, vi } from 'vitest';
 
-import { mockedUseNavigate } from '@/setupTests';
 import { realTimeNotificationData } from '@/mocks/data/realTimeNotificationData';
+import { mockedUseNavigate } from '@/setupTests';
+import { store } from '@/store';
 import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
 import { useReadNotification } from '../notification/queries';
 import GlobalLayout from './GlobalLayout';
 
@@ -38,7 +40,9 @@ describe('Layout 알림 테스트', () => {
   });
 
   const setup = () => {
-    const utils = render(<GlobalLayout />);
+    const utils = render(<Provider store={store}>
+      <GlobalLayout />
+    </Provider>);
     const user = userEvent.setup();
 
     return {
@@ -48,12 +52,14 @@ describe('Layout 알림 테스트', () => {
   };
 
   test('실시간 알림이 도착하면 전체 화면에 알림 팝업이 발생하고, 그 안에 제목, 메시지, 버튼이 존재한다.', async () => {
-    render(<GlobalLayout />);
+    render(<Provider store={store}>
+      <GlobalLayout />
+    </Provider>);
 
     const popup = await screen.findByLabelText(
       /알림 박스/,
       {},
-      { timeout: 1100 },
+      { timeout: 5000 },
     );
 
     const title = screen.getByRole('heading', { name: /제목/ });
diff --git a/src/components/notification/Notification.test.tsx b/src/components/notification/Notification.test.tsx
index d9b324b9..6b508f2a 100644
--- a/src/components/notification/Notification.test.tsx
+++ b/src/components/notification/Notification.test.tsx
@@ -1,10 +1,10 @@
+import { render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { describe, expect, test, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
 
+import { notificationData } from '@/mocks/data/notificationData';
 import Notification from '@/pages/Notification';
 import { mockedUseNavigate } from '@/setupTests';
-import { notificationData } from '@/mocks/data/notificationData';
 import userEvent from '@testing-library/user-event';
 import LayoutWithNav from '../layout/LayoutWithNav';
 import {
diff --git a/src/components/notification/NotificationItem.tsx b/src/components/notification/NotificationItem.tsx
index 74aca541..3fe8d342 100644
--- a/src/components/notification/NotificationItem.tsx
+++ b/src/components/notification/NotificationItem.tsx
@@ -4,15 +4,17 @@ import { getTimeAgo } from '@/utils/getTimeAgo';
 import type { INotification } from 'Notification';
 import { useNavigate } from 'react-router-dom';
 
+interface INotificationItem {
+  item: INotification;
+  handleDelete: (id: number) => void;
+  handleRead: (id: number) => void;
+}
+
 const NotificationItem = ({
   item,
   handleDelete,
   handleRead,
-}: {
-  item: INotification;
-  handleDelete: (id: number) => void;
-  handleRead: (id: number) => void;
-}) => {
+}: INotificationItem) => {
   const navigate = useNavigate();
   const { notificationId, isRead, imageUrl, message, createdAt, type, auctionId } = item;
   const time = getTimeAgo(createdAt);
diff --git a/src/components/notification/queries.ts b/src/components/notification/queries.ts
index 80e8076f..87488b20 100644
--- a/src/components/notification/queries.ts
+++ b/src/components/notification/queries.ts
@@ -13,7 +13,9 @@ export const useGetNotifications = () => {
 
   const getNotifications = async (): Promise<INotification[]> => {
     const response = await httpClient.get(`${API_END_POINT.NOTIFICATIONS}`);
-
+    if (!response.data || !response.data.items) {
+      throw new Error('No items found in the response');
+    }
     return response.data.items;
   };
 
@@ -32,6 +34,7 @@ export const useReadNotification = (): {
 
   const readNotification = async (id: number) => {
     const response = await httpClient.post(`${API_END_POINT.NOTIFICATIONS}/${id}/read`);
+
     return response.data.data;
   };
 
@@ -53,6 +56,7 @@ export const useDeleteNotification = (): {
 
   const deleteNotification = async (id: number) => {
     const response = await httpClient.delete(`${API_END_POINT.NOTIFICATIONS}/${id}`);
+
     return response.data.data;
   };
 
diff --git a/src/components/register/RegisterLabel.tsx b/src/components/register/RegisterLabel.tsx
index 27052760..f32cb7bb 100644
--- a/src/components/register/RegisterLabel.tsx
+++ b/src/components/register/RegisterLabel.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import ErrorMessage from '../common/loadingAndError/ErrorMessage';
+import ErrorMessage from '../common/error/ErrorMessage';
 
 const RegisterLabel = ({ label, children, error }: { label: string; children: ReactNode; error?: string }) => {
   return (
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..01b8b6d4
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/src/constants/emptyMessage.ts b/src/constants/emptyMessage.ts
index 458c757a..b630bb5f 100644
--- a/src/constants/emptyMessage.ts
+++ b/src/constants/emptyMessage.ts
@@ -1,13 +1,13 @@
 export const EMPTY_MESSAGE: { [key: string]: string } = Object.freeze({
-  알림: '받은 알림이 없어요.',
-  좋아요: '관심 있는 사전 경매가 없어요.',
-  '종료 임박 경매': '종료 임박 경매가 없어요.',
-  '베스트 경매': '베스트 경매가 없어요.',
-  '사전 경매': '사전 등록 경매가 없어요.',
-  '유저 등록 경매': '내가 등록한 경매가 없어요.',
-  '유저 사전등록 경매': '내가 등록한 사전 경매가 없어요.',
-  '유저 참여 경매': '입찰 참여한 경매가 없어요.',
-  '유저 성공 경매': '낙찰한 경매가 없어요.',
-  '유저 실패 경매': '입찰 실패한 경매가 없어요.',
-  카테고리: '해당 카테고리 목록이 없어요',
+  notification: '받은 알림이 없어요.',
+  heart: '관심 있는 사전 경매가 없어요.',
+  imminent: '종료 임박 경매가 없어요.',
+  best: '베스트 경매가 없어요.',
+  preAuction: '사전 등록 경매가 없어요.',
+  userAuction: '내가 등록한 경매가 없어요.',
+  userPreAuction: '내가 등록한 사전 경매가 없어요.',
+  participated: '입찰 참여한 경매가 없어요.',
+  won: '낙찰한 경매가 없어요.',
+  lost: '입찰 실패한 경매가 없어요.',
+  category: '해당 카테고리 목록이 없어요',
 });
diff --git a/src/constants/route.ts b/src/constants/route.ts
index 5a2b42ee..2ce64e0d 100644
--- a/src/constants/route.ts
+++ b/src/constants/route.ts
@@ -8,7 +8,7 @@ const ROUTERS = Object.freeze({
 
   SIGNUP: '/signup',
   LOGIN: '/login',
-  PROFILE_EDIT: 'user/profile/edit',
+  PROFILE_EDIT: '/user/profile/edit',
   PRODUCT_LIST: '/product/list',
   REGISTER: '/auctions/register',
   AUCTION: {
diff --git a/src/main.tsx b/src/main.tsx
index 52f3fa0b..9780a6ed 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,12 +8,22 @@ import App from './App';
 import ReactQueryProvider from './provider/queryProvider';
 import { storeLogin } from './store/authSlice';
 
+export const serverAPI = (path: string) => `${import.meta.env.VITE_API_URL}${path}`;
+
 // async function enableMocking(): Promise<void> {
-//   // if (import.meta.env.MODE !== 'development') {
-//   //   return;
-//   // }
-//   // const { worker } = await import('./mocks/browser');
-//   // await worker.start();
+//   if (import.meta.env.MODE !== 'development') {
+//     return;
+//   }
+
+//   const { worker } = await import('./mocks/browser');
+//   await worker.start({
+//     onUnhandledRequest: (req) => {
+//       const url = new URL(req.url);
+//       if (url.pathname.endsWith('.svg')) {
+//         return; // .svg 파일 요청을 무시
+//       }
+//     },
+//   });
 // }
 
 // enableMocking().then(() => {
@@ -26,8 +36,8 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <ReactQueryProvider showDevTools>
     <Provider store={store}>
       <App />
-      <Toaster richColors position='top-right' />
     </Provider>
+    <Toaster richColors position='top-right' />
   </ReactQueryProvider>
 );
 // });
diff --git a/src/mocks/handlers/home.ts b/src/mocks/handlers/home.ts
index 474fad5d..a6830c36 100644
--- a/src/mocks/handlers/home.ts
+++ b/src/mocks/handlers/home.ts
@@ -2,17 +2,20 @@ import { HttpHandler, HttpResponse, delay, http } from 'msw';
 import { bestAuctionsData, imminentAuctionsData, preRegisterAuctionsData } from '../data/homeAuctionsData';
 
 import { API_END_POINT } from '@/constants/api';
+import { serverAPI } from '@/main';
 
-export const bestAuctionsHandler: HttpHandler = http.get(`${API_END_POINT.BEST}`, async () => {
-  await delay(1500);
+export const bestAuctionsHandler: HttpHandler = http.get(serverAPI(API_END_POINT.BEST), async () => {
+  await delay(1000);
   return HttpResponse.json(bestAuctionsData);
 });
 
-export const imminentAuctionsHandler: HttpHandler = http.get(`${API_END_POINT.IMMINENT}`, async () => {
-  await delay(1500);
+export const imminentAuctionsHandler: HttpHandler = http.get(serverAPI(API_END_POINT.IMMINENT), async () => {
+  await delay(1000);
   return HttpResponse.json(imminentAuctionsData);
 });
-export const preRegisterAuctionsHandler: HttpHandler = http.get(`${API_END_POINT.PRE_AUCTION}`, async () => {
-  await delay(1500);
-  return HttpResponse.json(preRegisterAuctionsData);
+export const preRegisterAuctionsHandler: HttpHandler = http.get(`${serverAPI(API_END_POINT.PRE_AUCTION)}?sort=most-liked&page=0&size=5`, async () => {
+  await delay(1000);
+  return HttpResponse.json({
+    items: preRegisterAuctionsData,
+  });
 });
diff --git a/src/mocks/handlers/notification.ts b/src/mocks/handlers/notification.ts
index 15e72a18..c92de0da 100644
--- a/src/mocks/handlers/notification.ts
+++ b/src/mocks/handlers/notification.ts
@@ -1,32 +1,35 @@
 import { HttpHandler, HttpResponse, delay, http } from 'msw';
 
 import { API_END_POINT } from '@/constants/api';
+import { serverAPI } from '@/main';
 import type { INotification } from 'Notification';
 import { notificationData } from '../data/notificationData';
 
 let notifications = [...notificationData];
 
-export const notificationsHandler: HttpHandler = http.get(`${API_END_POINT.NOTIFICATIONS}`, async () => {
-  await delay(1500);
-  return HttpResponse.json(notifications);
+export const notificationsHandler: HttpHandler = http.get(`${serverAPI(API_END_POINT.NOTIFICATIONS)}`, async () => {
+  await delay(1000);
+  return HttpResponse.json({
+    items: notifications,
+  });
 });
 
-export const notificationReadHandler: HttpHandler = http.post(`${API_END_POINT.NOTIFICATIONS}/:id/read`, ({ params }) => {
+export const notificationReadHandler: HttpHandler = http.post(`${serverAPI(API_END_POINT.NOTIFICATIONS)}/:id/read`, ({ params }) => {
   const id = params.id as string;
 
   const notificationId = parseInt(id, 10);
 
-  notifications = notifications.map((el: INotification) => (el.auctionId === notificationId ? { ...el, isRead: true } : el));
+  notifications = notifications.map((el: INotification) => (el.notificationId === notificationId ? { ...el, isRead: true } : el));
 
-  return HttpResponse.json({ data: notifications, status: 204 });
+  return HttpResponse.json({ data: notifications });
 });
 
-export const notificationDeleteHandler: HttpHandler = http.delete(`${API_END_POINT.NOTIFICATIONS}/:id`, ({ params }) => {
+export const notificationDeleteHandler: HttpHandler = http.delete(`${serverAPI(API_END_POINT.NOTIFICATIONS)}/:id`, ({ params }) => {
   const id = params.id as string;
 
   const notificationId = parseInt(id, 10);
 
-  notifications = notifications.filter((el) => el.auctionId !== notificationId);
+  notifications = notifications.filter((el) => el.notificationId !== notificationId);
 
-  return HttpResponse.json({ data: notifications, status: 204 });
+  return HttpResponse.json({ data: notifications });
 });
diff --git a/src/mocks/handlers/realTimeNotification.ts b/src/mocks/handlers/realTimeNotification.ts
index 6c6142b5..3519ede9 100644
--- a/src/mocks/handlers/realTimeNotification.ts
+++ b/src/mocks/handlers/realTimeNotification.ts
@@ -1,28 +1,26 @@
 import { HttpHandler, HttpResponse, http } from 'msw';
 
 import { API_END_POINT } from '@/constants/api';
+import { serverAPI } from '@/main';
 import { realTimeNotificationData } from '../data/realTimeNotificationData';
 
 // 문자열을 UTF-8 형식으로 인코딩하는 객체
 const encoder = new TextEncoder();
 
-export const realTimeNotificationsHandler: HttpHandler = http.get(
-  `${API_END_POINT.REALTIME_NOTIFICATIONS}`,
-  () => {
-    const stream = new ReadableStream({
-      start(controller) {
-        realTimeNotificationData.forEach((message, idx) => {
-          setTimeout(() => {
-            controller.enqueue(encoder.encode(message));
-          }, [1000, 4000, 7000][idx]);
-        });
-      },
-    });
+export const realTimeNotificationsHandler: HttpHandler = http.get(serverAPI(API_END_POINT.REALTIME_NOTIFICATIONS), () => {
+  const stream = new ReadableStream({
+    start(controller) {
+      realTimeNotificationData.forEach((message, idx) => {
+        setTimeout(() => {
+          controller.enqueue(encoder.encode(message));
+        }, [1000, 4000, 7000][idx]);
+      });
+    },
+  });
 
-    return new HttpResponse(stream, {
-      headers: {
-        'Content-Type': 'text/event-stream',
-      },
-    });
-  },
-);
+  return new HttpResponse(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+    },
+  });
+});
diff --git a/src/pages/Bid.tsx b/src/pages/Bid.tsx
index 5ec77c29..d4e15978 100644
--- a/src/pages/Bid.tsx
+++ b/src/pages/Bid.tsx
@@ -1,105 +1,19 @@
-import { usePatchBid, usePostBid } from '@/components/bid/queries';
-import { SubmitHandler, useForm } from 'react-hook-form';
 import { LoaderFunction, useLoaderData } from 'react-router-dom';
 
-import BidCaution from '@/components/bid/BidCaution';
-import BidFooter from '@/components/bid/BidFooter';
-import FormField from '@/components/common/form/FormField';
-import AuctionItem from '@/components/common/item/AuctionItem';
-import { useGetAuctionDetails } from '@/components/details/queries';
 import Layout from '@/components/layout/Layout';
-import { Input } from '@/components/ui/input';
-import { getBidSchema } from '@/constants/schema';
-import { useEditableNumberInput } from '@/hooks/useEditableNumberInput';
-import { convertCurrencyToNumber } from '@/utils/convertCurrencyToNumber';
-import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useState } from 'react';
-import { z } from 'zod';
+
+import BidMain from '@/components/bid/BidMain';
+import APIAsyncBoundary from '@/components/common/boundary/APIAsyncBoundary';
 
 const Bid = () => {
-  const [check, setCheck] = useState<boolean>(false);
-  const toggleCheckBox = () => setCheck((state) => !state);
   const auctionId = useLoaderData() as number;
-  const { auctionDetails } = useGetAuctionDetails(auctionId);
-  const { mutate: postBid } = usePostBid(auctionId);
-  const { mutate: patchBid } = usePatchBid(auctionId);
-
-  const { imageUrls, productName, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipated, bidId } = auctionDetails;
-  const title = isParticipated ? '금액 수정하기' : '경매 참여하기';
-
-  const BidSchema = getBidSchema(minPrice);
-  type FormFields = z.infer<typeof BidSchema>;
-
-  const {
-    control,
-    formState: { errors, isSubmitting },
-    setValue,
-    getValues,
-    handleSubmit,
-  } = useForm<FormFields>({
-    defaultValues: { bidAmount: '' },
-    resolver: zodResolver(BidSchema),
-  });
-
-  const { isEditing, handleBlur, handleFocus } = useEditableNumberInput({
-    name: 'bidAmount',
-    setValue,
-    getValues,
-  });
-
-  const onPostSubmit: SubmitHandler<FormFields> = async (data) => {
-    const bidData = {
-      auctionId: Number(auctionId),
-      bidAmount: convertCurrencyToNumber(data.bidAmount),
-    };
-
-    postBid(bidData);
-  };
-  const onPatchSubmit = () => {
-    if (bidId) patchBid(bidId);
-  };
 
   return (
     <Layout>
-      <Layout.Header title={title} />
-      <Layout.Main>
-        <div className='flex flex-col gap-8'>
-          <AuctionItem axis='row' label='입찰 상품'>
-            <AuctionItem.Image src={imageUrls[0]} time={timeRemaining} />
-            <AuctionItem.Main kind='register' name={productName} count={participantCount} price={minPrice} />
-          </AuctionItem>
-          {isParticipated && (
-            <div className='flex flex-col gap-2'>
-              <div className='text-heading3'>나의 참여 금액</div>
-              <div aria-label='나의 참여 금액' className='text-body1Bold text-cheeseYellow'>
-                {formatCurrencyWithWon(bidAmount)}
-              </div>
-            </div>
-          )}
-          <FormField
-            label='가격 제안하기'
-            name='bidAmount'
-            control={control}
-            error={errors.bidAmount?.message}
-            render={(field) => (
-              <Input
-                id='가격 제안하기'
-                type={isEditing ? 'number' : 'text'}
-                placeholder={`최소 입찰가는 ${formatCurrencyWithWon(minPrice)} 입니다.`}
-                className=' focus-visible:ring-cheeseYellow'
-                {...field}
-                onBlur={handleBlur}
-                onFocus={handleFocus}
-              />
-            )}
-          />
-          <BidCaution check={check} handleCheck={toggleCheckBox} />
-        </div>
-      </Layout.Main>
-      <Layout.Footer type={isParticipated ? 'double' : 'single'}>
-        <BidFooter remain={remainingBidCount} check={check} isSubmitting={isSubmitting} handlePatch={onPatchSubmit} handlePost={handleSubmit(onPostSubmit)} />
-      </Layout.Footer>
+      <Layout.Header title='경매 참여하기' />
+      <APIAsyncBoundary>
+        <BidMain auctionId={auctionId} />
+      </APIAsyncBoundary>
     </Layout>
   );
 };
diff --git a/src/pages/BidderList.tsx b/src/pages/BidderList.tsx
index 6019305d..5f7aaffe 100644
--- a/src/pages/BidderList.tsx
+++ b/src/pages/BidderList.tsx
@@ -1,64 +1,18 @@
 import { LoaderFunction, useLoaderData } from 'react-router-dom';
 
-import { useGetBidderList } from '@/components/bidderList/queries';
-import Button from '@/components/common/Button';
-import AuctionItem from '@/components/common/item/AuctionItem';
-import { useGetAuctionDetails } from '@/components/details/queries';
+import BidderListMain from '@/components/bidderList/BidderListMain';
+import APIAsyncBoundary from '@/components/common/boundary/APIAsyncBoundary';
 import Layout from '@/components/layout/Layout';
-import { BIDDER_LIST_PRICE_FILTER } from '@/constants/filter';
-import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
-import type { IBidder } from 'Bid';
-import { useState } from 'react';
 
 const BidderList = () => {
   const auctionId = useLoaderData() as number;
-  const [filterState, setFilterState] = useState(BIDDER_LIST_PRICE_FILTER.HIGH);
-  const handleFilterState = () =>
-    setFilterState((prev) => (prev.name === BIDDER_LIST_PRICE_FILTER.HIGH.name ? BIDDER_LIST_PRICE_FILTER.LOW : BIDDER_LIST_PRICE_FILTER.HIGH));
-
-  const { auctionDetails } = useGetAuctionDetails(auctionId);
-  const { bidderList } = useGetBidderList(auctionId);
-
-  const filteredBidderList = filterState.sort === 'desc' ? bidderList : bidderList.sort((a, b) => a.bidAmount - b.bidAmount)
-  const { imageUrls, isSeller, status, productName, minPrice, participantCount } = auctionDetails;
-
-  if (!isSeller || status !== 'ENDED') throw new Error('접근 제한')
 
   return (
     <Layout>
       <Layout.Header title='경매 참여자 목록' />
-      <Layout.Main>
-        <div className='flex flex-col gap-8 pt-4'>
-          <AuctionItem axis='row' label='입찰자 목록 상품'>
-            <AuctionItem.Image src={imageUrls[0]} />
-            <AuctionItem.Main kind='register' name={productName} count={participantCount} price={minPrice} />
-          </AuctionItem>
-          <div className='flex items-center justify-between'>
-            <h2 className='text-heading2'>참여 가격</h2>
-            <div onClick={handleFilterState} className='flex items-center gap-1 cursor-pointer text-body2 text-gray1'>
-              <span>{filterState.name}</span>
-              <img className='pb-1' src={filterState.icon} alt={filterState.name} />
-            </div>
-          </div>
-          <hr className='border my-[-16px] border-gray3' />
-          <ul className='flex flex-col gap-2'>
-            {filteredBidderList.map((el: IBidder, idx: number) => (
-              <li
-                key={el.bidderNickname}
-                className={`flex p-3 items-center justify-between text-gray1 ${idx === 0 && 'border border-cheeseYellow rounded-lg'}`}
-              >
-                <span className='text-body1'>{el.bidderNickname}</span>
-                <span className='text-body1Bold'>{formatCurrencyWithWon(el.bidAmount)}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </Layout.Main>
-      <Layout.Footer type='single'>
-        <Button type='button' color='cheeseYellow' className='w-full h-full' aria-label='최종 판매 버튼'>
-          확인 완료
-        </Button>
-      </Layout.Footer>
+      <APIAsyncBoundary>
+        <BidderListMain auctionId={auctionId} />
+      </APIAsyncBoundary>
     </Layout>
   );
 };
diff --git a/src/pages/Heart.tsx b/src/pages/Heart.tsx
index c144997b..0832646b 100644
--- a/src/pages/Heart.tsx
+++ b/src/pages/Heart.tsx
@@ -1,7 +1,7 @@
 import { useDeletePreAuctionHeart, useGetPreAuctionHeartList } from '@/components/heart/queries';
 
 import Button from '@/components/common/Button';
-import EmptyBoundary from '@/components/common/EmptyBoundary';
+import EmptyBoundary from '@/components/common/boundary/EmptyBoundary';
 import AuctionItem from '@/components/common/item/AuctionItem';
 import type { IPreAuctionItem } from 'AuctionItem';
 import { useNavigate } from 'react-router-dom';
@@ -14,7 +14,7 @@ const Heart = () => {
   const handleDelete = (id: number) => mutate(id);
 
   return (
-    <EmptyBoundary dataLength={preAuctionHeartList.length} type='좋아요'>
+    <EmptyBoundary length={preAuctionHeartList.length} name='heart'>
       <ul className='grid items-center justify-center grid-cols-2 gap-4'>
         {preAuctionHeartList.map((el: IPreAuctionItem) => (
           <li key={el.productId} onClick={() => navigate(`/auctions/pre-auction/${el.productId}`)} className='cursor-pointer'>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f2df5b05..088c3ac8 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,21 +1,35 @@
 
+import LocalAPIAsyncBoundary from '@/components/common/boundary/LocalAPIAsyncBoundary';
+import BestItemList from '@/components/home/BestItemList';
 import CategoryList from '@/components/home/CategoryList';
-import HomeItemList from '@/components/home/HomeItemList';
+import HomeItemField from '@/components/home/HomeItemField';
 import HomeRegisterBtn from '@/components/home/HomeRegisterBtn';
-import { useGetHomeAuctions } from '@/components/home/queries';
+import ImminentItemList from '@/components/home/ImminentItemList';
+import PreAuctionItemList from '@/components/home/PreAuctionItemList';
 import { useScrollDetection } from '@/hooks/useScrollDetection';
 
 const Home = () => {
   const { isScrolled, elementRef } = useScrollDetection(0);
-  const { bestAuctions, imminentAuctions, preAuctions } = useGetHomeAuctions();
 
   return (
     <div ref={elementRef} role='main' aria-label='main_area' className='relative flex flex-col justify-between w-full h-full gap-6 overflow-y-scroll'>
       <div className='flex flex-col gap-10'>
-        <HomeItemList<'auction'> name='베스트 경매' data={bestAuctions} />
-        <HomeItemList<'auction'> name='종료 임박 경매' data={imminentAuctions} />
+        <HomeItemField name='베스트 경매'>
+          <LocalAPIAsyncBoundary height={250}>
+            <BestItemList />
+          </LocalAPIAsyncBoundary>
+        </HomeItemField>
+        <HomeItemField name='종료 임박 경매'>
+          <LocalAPIAsyncBoundary height={250}>
+            <ImminentItemList />
+          </LocalAPIAsyncBoundary>
+        </HomeItemField>
         <CategoryList />
-        <HomeItemList<'preAuction'> name='사전 등록 경매' data={preAuctions} />
+        <HomeItemField name='사전 경매'>
+          <LocalAPIAsyncBoundary height={250}>
+            <PreAuctionItemList />
+          </LocalAPIAsyncBoundary>
+        </HomeItemField>
       </div>
       <HomeRegisterBtn isScrolled={isScrolled} />
     </div>
diff --git a/src/pages/Notification.tsx b/src/pages/Notification.tsx
index 9c8f60d9..843c1a27 100644
--- a/src/pages/Notification.tsx
+++ b/src/pages/Notification.tsx
@@ -1,8 +1,8 @@
 import { useDeleteNotification, useGetNotifications, useReadNotification } from '@/components/notification/queries';
 
-import EmptyBoundary from '@/components/common/EmptyBoundary';
-import type { INotification } from 'Notification';
+import EmptyBoundary from '@/components/common/boundary/EmptyBoundary';
 import NotificationItem from '@/components/notification/NotificationItem';
+import type { INotification } from 'Notification';
 
 const Notification = () => {
   const { notifications } = useGetNotifications();
@@ -13,7 +13,7 @@ const Notification = () => {
   const clickRead = (id: number) => readNotification(id);
 
   return (
-    <EmptyBoundary dataLength={notifications.length} type='알림'>
+    <EmptyBoundary length={notifications.length} name='notification'>
       <div className='mx-[-32px] my-[-16px]'>
         {notifications.map((item: INotification) => (
           <NotificationItem key={item.notificationId} item={item} handleDelete={clickDelete} handleRead={clickRead} />
diff --git a/src/pages/ProductList.tsx b/src/pages/ProductList.tsx
index 3b18c721..f9cebaf6 100644
--- a/src/pages/ProductList.tsx
+++ b/src/pages/ProductList.tsx
@@ -2,7 +2,7 @@ import type { IAuctionItem, IPreAuctionItem } from 'AuctionItem';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import EmptyBoundary from '@/components/common/EmptyBoundary';
+import EmptyBoundary from '@/components/common/boundary/EmptyBoundary';
 import Layout from '@/components/layout/Layout';
 import OngoingProduct from '@/components/productList/OngoingProduct';
 import PreEnrollProduct from '@/components/productList/PreEnrollProduct';
@@ -76,13 +76,13 @@ const ProductList = () => {
         <ProductListTabs activeTab={activeTab} setActiveTab={setActiveTab} />
         <ProductButtons setSortType={setSortType} />
         {activeTab === 'ongoing'
-          ? <EmptyBoundary dataLength={ongoingItems.length} type='카테고리'>
+          ? <EmptyBoundary length={ongoingItems.length} name='category'>
             <div className='grid grid-cols-2 gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto'>
               {ongoingItems?.map((product: IAuctionItem) => <OngoingProduct key={product.auctionId} product={product} />)}
             </div>
           </EmptyBoundary>
           :
-          <EmptyBoundary dataLength={enrollItems.length} type='카테고리'>
+          <EmptyBoundary length={enrollItems.length} name='category'>
             <div className='grid grid-cols-2 gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto'>
               {enrollItems?.map((product: IPreAuctionItem) => <PreEnrollProduct key={product.productId} product={product} />)}
             </div>
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 4a04237d..34b80502 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -92,7 +92,7 @@ const Register = () => {
       category,
       description,
       minPrice: convertCurrencyToNumber(minPrice),
-      ...(preAuctionId ? { imageSequence } : { auctionRegisterType: caution }),
+      ...(preAuctionId ? { imageSequence: Object.fromEntries(imageSequence) } : { auctionRegisterType: caution }),
     };
 
     formData.append(
diff --git a/src/pages/UserParticipatedList.tsx b/src/pages/UserParticipatedList.tsx
index 33ebca0f..5f2b2bfd 100644
--- a/src/pages/UserParticipatedList.tsx
+++ b/src/pages/UserParticipatedList.tsx
@@ -1,7 +1,7 @@
 import type { IUserAuctionHistoryItem, IUserAuctionLostItem, IUserAuctionWonItem } from 'AuctionItem';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import EmptyBoundary from '@/components/common/EmptyBoundary';
+import EmptyBoundary from '@/components/common/boundary/EmptyBoundary';
 import OrderHistoryProduct from '@/components/order/OrderHistoryProduct';
 import OrderListTab from '@/components/order/OrderListTab';
 import OrderLostProduct from '@/components/order/OrderLostProduct';
@@ -85,7 +85,7 @@ const UserParticipatedList = () => {
     <div className='mx-[-32px] my-[-4px] h-full'>
       <OrderListTab activeTab={activeTab} setActiveTab={setActiveTab} />
       {activeTab === 'AuctionHistory' &&
-        <EmptyBoundary dataLength={historyItems.length} type='유저 참여 경매'>
+        <EmptyBoundary length={historyItems.length} name='participated'>
           <div className='grid gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto'>
             {
               historyItems.map((product: IUserAuctionHistoryItem) => <OrderHistoryProduct key={product.auctionId} product={product} />)
@@ -94,14 +94,14 @@ const UserParticipatedList = () => {
         </EmptyBoundary>
       }
       {activeTab === 'AuctionsWon' &&
-        <EmptyBoundary dataLength={wonItems.length} type='유저 성공 경매'>
+        <EmptyBoundary length={wonItems.length} name='won'>
           <div className='grid gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto'>
             {wonItems.map((product: IUserAuctionWonItem) => <OrderWonProduct key={product.auctionId} product={product} />)}
           </div>
         </EmptyBoundary>
       }
       {activeTab === 'AuctionsLost' &&
-        <EmptyBoundary dataLength={lostItems.length} type='유저 실패 경매'>
+        <EmptyBoundary length={lostItems.length} name='lost'>
           <div className='grid gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto'>
             {lostItems.map((product: IUserAuctionLostItem) => <OrderLostProduct key={product.auctionId} product={product} />)}
           </div>
diff --git a/src/pages/UserRegisteredList.tsx b/src/pages/UserRegisteredList.tsx
index 0aa5e572..6df23b27 100644
--- a/src/pages/UserRegisteredList.tsx
+++ b/src/pages/UserRegisteredList.tsx
@@ -1,7 +1,7 @@
 import { IAuctionRegisteredItem, IPreAuctionRegisteredItem } from 'AuctionItem';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import EmptyBoundary from '@/components/common/EmptyBoundary';
+import EmptyBoundary from '@/components/common/boundary/EmptyBoundary';
 import OngoingMyRegister from '@/components/user/OngoingMyRegister';
 import PreEnrollMyRegister from '@/components/user/PreEnrollMyRegister';
 import UserOrderTab from '@/components/user/UserOrderTab';
@@ -68,7 +68,7 @@ const UserRegisteredList = () => {
     <div className='mx-[-32px] my-[-4px] h-full'>
       <UserOrderTab activeTab={activeTab} setActiveTab={setActiveTab} />
       {activeTab ? (
-        <EmptyBoundary dataLength={ongoingItems.length} type='유저 등록 경매'>
+        <EmptyBoundary length={ongoingItems.length} name='userAuction'>
           <div className={`grid grid-cols-2 gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto`}>
             {ongoingItems.map((product: IAuctionRegisteredItem) => (
               <OngoingMyRegister product={product} key={product.createdAt} />
@@ -76,7 +76,7 @@ const UserRegisteredList = () => {
           </div>
         </EmptyBoundary>
       ) : (
-        <EmptyBoundary dataLength={enrollItems.length} type='유저 사전등록 경매'>
+        <EmptyBoundary length={enrollItems.length} name='userPreAuction'>
           <div className={`grid grid-cols-2 gap-4 p-4 h-[calc(100vh-100px)] overflow-y-auto`}>
             {enrollItems.map((product: IPreAuctionRegisteredItem) => (
               <PreEnrollMyRegister product={product} key={product.createdAt} />
diff --git a/src/provider/queryProvider.tsx b/src/provider/queryProvider.tsx
index fec25f30..73f73943 100644
--- a/src/provider/queryProvider.tsx
+++ b/src/provider/queryProvider.tsx
@@ -1,9 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+import { getErrorByCode } from '@/components/common/error/ErrorCode';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { toast } from 'sonner';
-import { useState } from 'react';
 import { AxiosError } from 'axios';
+import { useState } from 'react';
+import { toast } from 'sonner';
 
 interface ReactQueryProviderProps {
   children: React.ReactNode;
@@ -23,10 +24,9 @@ const ReactQueryProvider = ({ showDevTools = false, children }: ReactQueryProvid
         mutations: {
           throwOnError: false,
           onError: (error) => {
-            if (error instanceof AxiosError && error.response) {
-              toast.error(error.response.data.message);
-            } else {
-              toast.error('예기치 못한 에러 발생');
+            if (error instanceof AxiosError) {
+              const { title } = getErrorByCode(error)
+              toast.error(title);
             }
           },
         },
diff --git a/src/router.tsx b/src/router.tsx
index e304ad51..4214128b 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,28 +1,29 @@
+import AuctionDetails, { loader as auctionDetailsLoader } from './pages/AuctionDetails';
 import Bid, { loader as bidLoader } from './pages/Bid';
 import BidderList, { loader as bidderListLoader } from './pages/BidderList';
+import PreAuctionDetails, { loader as preAuctionDetailsLoader } from './pages/PreAuctionDetails';
 import Register, { loader as registerLoader } from './pages/Register';
 
-import AddressBook from './pages/AddressBook';
-import AsyncBoundary from './components/common/loadingAndError/AsyncBoundary';
-import AuctionDetails, { loader as auctionDetailsLoader } from './pages/AuctionDetails';
+import ROUTERS from '@/constants/route';
+import ProductList from '@/pages/ProductList';
+import { createBrowserRouter } from 'react-router-dom';
+import APIAsyncBoundary from './components/common/boundary/APIAsyncBoundary';
+import GlobalAsyncBoundary from './components/common/boundary/GlobalAsyncBoundary';
+import RouteErrorBoundary from './components/common/boundary/RouteErrorBoundary';
+import PrivateRoute from './components/common/route/PrivateRoute';
+import PublicRoute from './components/common/route/PublicRoute';
 import GlobalLayout from './components/layout/GlobalLayout';
+import LayoutWithNav from './components/layout/LayoutWithNav';
+import AddressBook from './pages/AddressBook';
 import Heart from './pages/Heart';
 import Home from './pages/Home';
-import LayoutWithNav from './components/layout/LayoutWithNav';
 import Login from './pages/Login';
-import NotFound from './components/common/loadingAndError/NotFound';
 import Notification from './pages/Notification';
-import OrderHistory from './pages/UserParticipatedList';
-import PreAuctionDetails, { loader as preAuctionDetailsLoader } from './pages/PreAuctionDetails';
-import PrivateRoute from './components/common/route/PrivateRoute';
-import ProductList from '@/pages/ProductList';
 import ProfileEdit from './pages/ProfileEdit';
-import PublicRoute from './components/common/route/PublicRoute';
-import ROUTERS from '@/constants/route';
 import Signup from './pages/Signup';
 import User from './pages/User';
+import OrderHistory from './pages/UserParticipatedList';
 import UserRegisteredList from './pages/UserRegisteredList';
-import { createBrowserRouter } from 'react-router-dom';
 
 const layoutWithNavRouteList = [
   {
@@ -94,56 +95,53 @@ const publicRouteList = [
 
 export const router = createBrowserRouter([
   {
-    element: <GlobalLayout />,
-    errorElement: <NotFound />,
+    // Global Boundary
+    element: <GlobalAsyncBoundary>
+      <GlobalLayout />
+    </GlobalAsyncBoundary>,
+    errorElement: <RouteErrorBoundary />,
     children: [
       {
+        // LayoutWithNav Boundary
         element: (
-          <AsyncBoundary>
-            <LayoutWithNav />
-          </AsyncBoundary>
+          <LayoutWithNav />
         ),
         children: layoutWithNavRouteList.map(({ path, element }) => ({
           path,
-          element: <AsyncBoundary>{path === '/' ? element : <PrivateRoute>{element}</PrivateRoute>}</AsyncBoundary>,
+          element: <APIAsyncBoundary>{path === '/' ? element : <PrivateRoute>{element}</PrivateRoute>}</APIAsyncBoundary>,
         })),
       },
+
       ...privateRouteList.map(({ path, element, loader }) => ({
         path,
         element: (
-          <AsyncBoundary>
-            <PrivateRoute>{element}</PrivateRoute>
-          </AsyncBoundary>
+          <PrivateRoute>{element}</PrivateRoute>
         ),
         ...(loader && { loader }),
       })),
+
       ...publicRouteList.map(({ path, element }) => ({
         path,
         element: <PublicRoute>{element}</PublicRoute>,
       })),
+
       {
         path: ROUTERS.PRODUCT_LIST,
         element: (
-          <AsyncBoundary>
-            <ProductList />
-          </AsyncBoundary>
+          <ProductList />
         ),
       },
       {
         path: `${ROUTERS.AUCTION.ITEM}/:auctionId`,
         element: (
-          <AsyncBoundary>
-            <AuctionDetails />
-          </AsyncBoundary>
+          <AuctionDetails />
         ),
         loader: auctionDetailsLoader,
       },
       {
         path: `${ROUTERS.PRE_AUCTION.ITEM}/:preAuctionId`,
         element: (
-          <AsyncBoundary>
-            <PreAuctionDetails />
-          </AsyncBoundary>
+          <PreAuctionDetails />
         ),
         loader: preAuctionDetailsLoader,
       },
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 15a29145..29535448 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -12,13 +12,48 @@ export const mockedUseNavigate = vi.fn();
 vi.mock('react-router-dom', async () => {
   // importActual은 실제 모듈의 원래 구현을 가져오는 기능을 한다.
   // 일부 기능은 실제 동작을 그대로 유지하면서 useNavigate만 모킹하려는 경우에 유용하다.
-  const mod =
-    await vi.importActual<typeof import('react-router-dom')>(
-      'react-router-dom',
-    );
+  const mod = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
   return {
     ...mod,
     // useNavigate 훅이 호출될 때마다 mockedUseNavigate 라는 모의 함수가 호출된다.
     useNavigate: () => mockedUseNavigate,
   };
 });
+
+function mockWindowProperty(property: string, implementation: any) {
+  Object.defineProperty(window, property, {
+    writable: true,
+    value: vi.fn().mockImplementation(implementation),
+  });
+}
+
+// ResizeObserver 모킹
+mockWindowProperty('ResizeObserver', () => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// matchMedia 모킹
+let matchingMediaQueries: string[] = [];
+
+mockWindowProperty('matchMedia', (query: string) => ({
+  matches: matchingMediaQueries.includes(query),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+}));
+
+export function setMatchingMediaQuery(queries: string | string[]): void {
+  matchingMediaQueries = Array.isArray(queries) ? queries : [queries];
+}
+
+export function resetMatchingMediaQuery(): void {
+  matchingMediaQueries = [];
+}
+
+// IntersectionObserver 모킹
+mockWindowProperty('IntersectionObserver', () => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
diff --git a/tailwind.config.js b/tailwind.config.js
index 57b79865..391debab 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,9 @@ module.exports = {
       },
     },
     extend: {
+      backgroundColor: {
+        error: '#f5f5f5'
+      },
       screens: {
         sm: '500px',
         lg: '750px',