Accessibility : 최적화

src/app/(navigation)/home/_component/DetailAuctionFeed/index.tsx

@@ -30,10 +30,10 @@ const DetailAuctionFeed = ({ data }: DetailAuctionFeedProps) => {
               {auction.imgUrl ? (
                 <Image
                   src={auction.imgUrl}
-                  width={0}
-                  height={0}
+                  width={328}
+                  height={360}
                   alt="상품 이미지"
-                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                  priority
                 />
               ) : null}
               <div className="absolute flex justify-center flex-col items-center bottom-0 w-full h-[30px] bg-gradient-to-t from-[rgba(0,0,0,0.7)] transition-all group-hover:h-[80px]">

src/app/(navigation)/home/page.tsx

@@ -33,10 +33,8 @@ const MainPage = async () => {
     queryKey: ["auction", "bids"],
     queryFn: () => getSortedBids({ address })
   });
-  await queryClient.prefetchQuery({
-    queryKey: ["auction", "category"],
-    queryFn: getSortedCategory
-  });
+  const categoryData = await getSortedCategory();
+  queryClient.setQueryData(["auction", "category"], categoryData);
   const dehydratedState = dehydrate(queryClient);
 
   return (

src/app/_component/common/Loading/index.tsx

@@ -19,6 +19,7 @@ function Loading({ className }: LoadingProps) {
           width={200}
           height={200}
           alt="Hands Up Logo"
+          priority
         />
       </div>
       <p>잠시만 기다려주세요 :)</p>

src/app/_component/common/ProductCard/DefaultComponent.tsx

@@ -17,6 +17,7 @@ interface CardImageProps extends DefaultProps {
   titleImage: string;
   width: number;
   height: number;
+  priority?: boolean;
 }
 interface CardTitleProps extends DefaultProps {
   width?: number;
@@ -36,7 +37,8 @@ export const CardImage = ({
   width,
   height,
   titleImage,
-  className
+  className,
+  priority = false
 }: CardImageProps) => {
   return (
     <div
@@ -48,6 +50,7 @@ export const CardImage = ({
           className="bg-slate-100 object-cover group-hover:scale-125 transition-transform"
           alt="titleImage"
           fill
+          priority={priority}
         />
       ) : (
         <span

src/app/bookmark/page.tsx

@@ -2,7 +2,7 @@
 
 import getPastTime from "@/utils/function/getPastTime";
 import { BookMarkedAllCheckContent } from "@/utils/types/bookmark/allCheck";
-import tempLogoImage from "~/images/logoIcon.png";
+import tempLogoImage from "~/images/angel.webp";
 
 import ProductCard from "../_component/common/ProductCard";
 import useInfiniteScroll from "../_hooks/useInfiniteScroll";

src/app/globals.css

@@ -5,6 +5,7 @@
 @font-face {
   font-family: "Yeongdeok";
   src: url("../../public/assets/font/YeongdeokSea.ttf");
+  font-display: swap;
 }
 
 @layer base {

src/app/report/page.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import onGetImageFile from "@/utils/function/onGetImageFile";
-import tempImage from "~/images/tempImage.png";
+import tempImage from "~/images/angel.webp";
 
 import Icon from "../_component/common/Icon";
 import Modal from "../_component/common/Modal";

src/app/search/[searchString]/page.tsx

@@ -9,7 +9,7 @@ import useInfiniteScroll from "@/app/_hooks/useInfiniteScroll";
 import useGetSearchResult from "@/app/search/_hooks/queries/useGetSearchResults";
 import getPastTime from "@/utils/function/getPastTime";
 import { AuctionSearchResult } from "@/utils/types/search/search";
-import tempLogoImage from "~/images/logoIcon.png";
+import tempLogoImage from "~/images/angel.webp";
 
 import NotSearchResult from "./_component/NotSearchResult";
 import { SearchOptionContext } from "./layout";
@@ -35,15 +35,18 @@ const SearchResultPage = () => {
       <div className="pb-6">
         {searchResults !== null && searchResults?.length > 0 ? (
           searchResults.map(
-            ({
-              title,
-              auctionId,
-              currentBiddingPrice,
-              dong,
-              imageUrl,
-              createdAt,
-              bookmarkCount
-            }: AuctionSearchResult) => (
+            (
+              {
+                title,
+                auctionId,
+                currentBiddingPrice,
+                dong,
+                imageUrl,
+                createdAt,
+                bookmarkCount
+              }: AuctionSearchResult,
+              index
+            ) => (
               <div key={auctionId}>
                 <ProductCard
                   className="my-2"
@@ -53,6 +56,7 @@ const SearchResultPage = () => {
                     titleImage={imageUrl ? imageUrl : tempLogoImage.src}
                     width={100}
                     height={100}
+                    priority={index === 0 ? true : false}
                   />
                   <ProductCard.CardTitle width={200}>
                     <div className="text-lg text-ellipsis overflow-hidden">

src/utils/mocks/api/auctionDetail/index.ts

@@ -7,10 +7,6 @@ import { bidMockData } from "../../mockData/auctionPost/auctionBidRecord";
 import { commentMockData } from "../../mockData/auctionPost/auctionComment";
 import { auctionDetails } from "../../mockData/auctionPost/auctionDetail";
 import { sellerInfoMockData } from "../../mockData/sellerData";
-const delay = (ms: number) =>
-  new Promise((res) => {
-    setTimeout(res, ms);
-  });
 
 const handlers = [
   http.get(
@@ -81,8 +77,6 @@ const handlers = [
   http.get(
     `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/auctions/:auctionId`,
     async ({ params }) => {
-      await delay(1000);
-
       const requestAuctionId = Number(params.auctionId);
 
       const newAuctionDetail = auctionDetails.find(
@@ -102,8 +96,6 @@ const handlers = [
   http.get(
     `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/auctions/:auctionId/bids/top3`,
     async ({ params }) => {
-      await delay(1000);
-
       const requestAuctionId = Number(params.auctionId);
 
       const requestAuctionTop3Bids = bidMockData
@@ -121,8 +113,6 @@ const handlers = [
   http.get(
     `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/auctions/:auctionId/bids`,
     async ({ params }) => {
-      await delay(1000);
-
       const requestAuctionId = Number(params.auctionId);
 
       const requestAuctionTop3Bids = bidMockData

src/utils/mocks/api/searchApis.ts

@@ -23,17 +23,16 @@ const handler = [
       const size = Number(searchParams.get("size") || 5);
       const page = Number(searchParams.get("page") || 0);
 
-      interface RequestBody {
-        keyword: string;
-      }
+      const searchKeyWord: string = await (async () => {
+        try {
+          const { keyword } = (await request.json()) as { keyword: string };
+          return keyword;
+        } catch (error) {
+          return "";
+        }
+      })();
 
-      let body: RequestBody;
-      try {
-        body = (await request.json()) as RequestBody;
-      } catch (error) {
-        body = { keyword: "" };
-      }
-      const { keyword } = body;
+      console.log(searchKeyWord);
 
       const result = auctionDetails.map(
         ({
@@ -45,7 +44,7 @@ const handler = [
           dong,
           createdAt
         }) => {
-          if (title.includes(keyword)) {
+          if (title.includes(searchKeyWord)) {
             return {
               auctionId,
               title,

src/utils/mocks/mockData/auctionPost/auctionDetail.ts

@@ -1,6 +1,10 @@
 import { AuctionDetailResponse } from "@/utils/types/auction/auctionDetail";
+import mockingTempImage6 from "~/images/angel.webp";
+import mockingTempImage5 from "~/images/bad.webp";
 import mockingTempImage1 from "~/images/devil.webp";
+import mockingTempImage3 from "~/images/good.webp";
 import mockingTempImage2 from "~/images/soso.webp";
+import mockingTempImage4 from "~/images/veryGood.webp";
 
 import { sellerInfoMockData } from "../sellerData";
 
@@ -11,7 +15,7 @@ export const auctionDetails: AuctionDetailResponse[] = [
     productCategory: "신발",
     initPrice: 5000,
     currentBiddingPrice: 12000,
-    endDate: "2024-08-04",
+    endDate: "2024-12-01",
     productStatus: "깨끗해요",
     purchaseTime: "3개월 이하",
     auctionStatus: "입찰 중",
@@ -32,7 +36,7 @@ export const auctionDetails: AuctionDetailResponse[] = [
     productCategory: "신발",
     initPrice: 5000,
     currentBiddingPrice: 16000,
-    endDate: "2024-08-12",
+    endDate: "2024-12-01",
     productStatus: "깨끗해요",
     purchaseTime: "3개월 이하",
     auctionStatus: "입찰 중",
@@ -46,5 +50,89 @@ export const auctionDetails: AuctionDetailResponse[] = [
     dong: "논현동",
     bookmarkCount: 0,
     createdAt: "2024-02-12"
+  },
+  {
+    auctionId: 353256238,
+    title: "(mock)모킹3",
+    productCategory: "신발",
+    initPrice: 5000,
+    currentBiddingPrice: 12000,
+    endDate: "2024-12-01",
+    productStatus: "깨끗해요",
+    purchaseTime: "3개월 이하",
+    auctionStatus: "입찰 중",
+    description:
+      "2개월 정도 신었나? 잘 인신게 돼서 경매에 올려용. 상태는 깨끗합니다!",
+    tradeMethod: "직접 만나서",
+    sellerInfo: sellerInfoMockData[0],
+    imageUrls: [mockingTempImage3.src, mockingTempImage3.src],
+    si: "서울시",
+    gu: "강남구",
+    dong: "논현동",
+    bookmarkCount: 0,
+    createdAt: "2024-02-12"
+  },
+  {
+    auctionId: 353256239,
+    title: "(mock)모킹4",
+    productCategory: "신발",
+    initPrice: 5000,
+    currentBiddingPrice: 16000,
+    endDate: "2024-12-01",
+    productStatus: "깨끗해요",
+    purchaseTime: "3개월 이하",
+    auctionStatus: "입찰 중",
+    description:
+      "2개월 정도 신었나? 잘 인신게 돼서 경매에 올려용. 상태는 깨끗합니다!",
+    tradeMethod: "직접 만나서",
+    imageUrls: [mockingTempImage4.src, mockingTempImage4.src],
+    sellerInfo: sellerInfoMockData[0],
+    si: "서울시",
+    gu: "강남구",
+    dong: "논현동",
+    bookmarkCount: 0,
+    createdAt: "2024-02-12"
+  },
+  {
+    auctionId: 3532562381,
+    title: "(mock)모킹5",
+    productCategory: "신발",
+    initPrice: 5000,
+    currentBiddingPrice: 12000,
+    endDate: "2024-12-01",
+    productStatus: "깨끗해요",
+    purchaseTime: "3개월 이하",
+    auctionStatus: "입찰 중",
+    description:
+      "2개월 정도 신었나? 잘 인신게 돼서 경매에 올려용. 상태는 깨끗합니다!",
+    tradeMethod: "직접 만나서",
+    sellerInfo: sellerInfoMockData[0],
+    imageUrls: [mockingTempImage5.src, mockingTempImage5.src],
+    si: "서울시",
+    gu: "강남구",
+    dong: "논현동",
+    bookmarkCount: 0,
+    createdAt: "2024-02-12"
+  },
+  {
+    auctionId: 3532562392,
+    title: "(mock)모킹6",
+    productCategory: "신발",
+    initPrice: 5000,
+    currentBiddingPrice: 16000,
+    endDate: "2024-12-01",
+    productStatus: "깨끗해요",
+    purchaseTime: "3개월 이하",
+    auctionStatus: "입찰 중",
+    description:
+      "2개월 정도 신었나? 잘 인신게 돼서 경매에 올려용. 상태는 깨끗합니다!",
+    tradeMethod: "직접 만나서",
+    imageUrls: [mockingTempImage6.src, mockingTempImage6.src],
+    sellerInfo: sellerInfoMockData[0],
+    si: "서울시",
+    gu: "강남구",
+    dong: "논현동",
+    bookmarkCount: 0,
+    createdAt: "2024-02-12"
   }
 ];