From ebbbef15738efd04e1af2987615981f523248af0 Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Thu, 21 Nov 2024 14:20:24 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix:=20QA=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20padding,=20sort=20=EC=98=B5=EC=85=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                                   | 10 +++++++++-
 src/components/AuctionCategory/CategoryUnit.css.ts |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 74830703..defaec12 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,6 +15,14 @@ export default function Home() {
     size: 4,
   });
 
+  const { data: end } = useGetBasicAuctionList({
+    title: '',
+    sort: 'endDate',
+    direction: 'ASC',
+    page: 0,
+    size: 4,
+  });
+
   if (!data) return null;
 
   return (
@@ -23,7 +31,7 @@ export default function Home() {
       <SpecialSection />
       <MaxLayout>
         <AuctionList data={data} isLink path="/basicauction" pathname="신규 경매 상품" />
-        <AuctionList data={data} isLink path="/basicauction" pathname="마감 임박 상품" />
+        <AuctionList data={end} isLink path="/basicauction" pathname="마감 임박 상품" />
         {/* 특정 유저의 상품 모아 놓기(필수 아님) */}
         {/* <AuctionList data={data} pathname="000 판매자" />  */}
       </MaxLayout>
diff --git a/src/components/AuctionCategory/CategoryUnit.css.ts b/src/components/AuctionCategory/CategoryUnit.css.ts
index 02607f77..5b80de37 100644
--- a/src/components/AuctionCategory/CategoryUnit.css.ts
+++ b/src/components/AuctionCategory/CategoryUnit.css.ts
@@ -56,7 +56,7 @@ export const unitContent = style({
 
 export const unitContentForSpan = style({
   cursor: 'pointer',
-
+  padding: '4px 0 4px 4px',
   ':hover': {
     fontWeight: '700',
   },

From 5f138350e683beded098e5385d2d297324deb0c9 Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Thu, 21 Nov 2024 14:32:07 +0900
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20QA=20=EB=B0=98=EC=98=81=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A7=A4=20=EC=A2=85=EB=A3=8C=20=EC=8B=9C=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=EB=A8=B8=EB=A5=BC=200?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AuctionInfo/AuctionCountdown.tsx | 2 +-
 src/hooks/useCountdownTimer.ts                  | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/AuctionInfo/AuctionCountdown.tsx b/src/components/AuctionInfo/AuctionCountdown.tsx
index df374785..b06941e9 100644
--- a/src/components/AuctionInfo/AuctionCountdown.tsx
+++ b/src/components/AuctionInfo/AuctionCountdown.tsx
@@ -11,7 +11,7 @@ interface AuctionCountdownProps {
 }
 
 function AuctionCountdown({ auctionStatus, endTime, setExpired }: AuctionCountdownProps) {
-  const { isTimeout, day, hour, minute, second } = useCountdownTimer({ endTime });
+  const { isTimeout, day, hour, minute, second } = useCountdownTimer({ endTime, auctionStatus });
 
   useEffect(() => {
     if (auctionStatus === 'CONCLUDED') {
diff --git a/src/hooks/useCountdownTimer.ts b/src/hooks/useCountdownTimer.ts
index 3cf04fdf..522affe2 100644
--- a/src/hooks/useCountdownTimer.ts
+++ b/src/hooks/useCountdownTimer.ts
@@ -6,13 +6,14 @@ import calcRemainingTime from '@/utils/calcRemainingTime';
 
 interface UseCountdownTimerProps {
   endTime: Date | string;
+  auctionStatus?: string;
 }
 
 const MINUTE_IN_MILLIS = 1000 * 60;
 const HOUR_IN_MILLIS = MINUTE_IN_MILLIS * 60;
 const DAY_IN_MILLIS = HOUR_IN_MILLIS * 24;
 
-function useCountdownTimer({ endTime }: UseCountdownTimerProps) {
+function useCountdownTimer({ endTime, auctionStatus }: UseCountdownTimerProps) {
   const [remainingTime, setRemainingTime] = useState<number>(0);
 
   useEffect(() => {
@@ -40,6 +41,10 @@ function useCountdownTimer({ endTime }: UseCountdownTimerProps) {
   const second = Math.floor((remainingTime % MINUTE_IN_MILLIS) / 1000) ?? '-';
   const isTimeout = remainingTime <= 0;
 
+  if (auctionStatus === 'CONCLUDED' || auctionStatus === 'COMPLETE') {
+    return { isTimeout, remainingTime, day: 0, hour: 0, minute: 0, second: 0 };
+  }
+
   return { isTimeout, remainingTime, day, hour, minute, second };
 }
 

From d476900d1e98c3d2d9dbf711c8281557ef939e7a Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Thu, 21 Nov 2024 16:50:48 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../basicauction/[id]/QnAInputSection.css.ts  |  20 ++++
 src/app/basicauction/[id]/QnAInputSection.tsx |   8 +-
 src/app/basicauction/[id]/QnAUnit.css.ts      |  38 ++++++
 .../AuctionInstantBuyConfirmModal.tsx         |   4 +-
 .../MobileSlideNav/MobileSlideNav.css.ts      | 109 ++++++++++++++++++
 src/components/Modal/Modal.css.ts             |   9 +-
 src/components/Modal/Modal.tsx                |   4 +-
 src/components/Modal/ModalFooter.tsx          |  16 ++-
 src/components/Modal/ModalHeaderFooter.tsx    |   4 +-
 9 files changed, 194 insertions(+), 18 deletions(-)
 create mode 100644 src/components/HeaderSection/components/MobileSlideNav/MobileSlideNav.css.ts

diff --git a/src/app/basicauction/[id]/QnAInputSection.css.ts b/src/app/basicauction/[id]/QnAInputSection.css.ts
index 6dd8ba58..f369346d 100644
--- a/src/app/basicauction/[id]/QnAInputSection.css.ts
+++ b/src/app/basicauction/[id]/QnAInputSection.css.ts
@@ -47,6 +47,11 @@ export const accordionPostQnAContent = style({
   selectors: {
     '&[data-state="open"]': {
       padding: '10px 20px',
+      '@media': {
+        'screen and (max-width: 700px)': {
+          padding: '5px 10px',
+        },
+      },
     },
   },
 });
@@ -139,14 +144,29 @@ export const postQnANoticeSection = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '10px',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      marginTop: '15px',
+    },
+  },
 });
 
 export const postQnANoticeTitle = style({
   fontSize: '14px',
   fontWeight: 'bold',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      fontSize: '12px',
+    },
+  },
 });
 
 export const postQnANoticeUnit = style({
   fontSize: '14px',
   listStylePosition: 'inside',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      fontSize: '11px',
+    },
+  },
 });
diff --git a/src/app/basicauction/[id]/QnAInputSection.tsx b/src/app/basicauction/[id]/QnAInputSection.tsx
index dca3563b..18bb474f 100644
--- a/src/app/basicauction/[id]/QnAInputSection.tsx
+++ b/src/app/basicauction/[id]/QnAInputSection.tsx
@@ -68,9 +68,11 @@ function QnAInputSection({ id, userId, userEmail }: QnAInputSectionProps) {
                 <textarea id="content" name="content" className={S.postQnATextAreaContent} />
               </div>
               <div className={S.buttonWrapper}>
-                <button type="button" className={S.postQnAButton.close}>
-                  닫기
-                </button>
+                <Collapsible.Trigger>
+                  <button type="button" className={S.postQnAButton.close}>
+                    닫기
+                  </button>
+                </Collapsible.Trigger>
                 <button type="submit" className={S.postQnAButton.submit}>
                   등록
                 </button>
diff --git a/src/app/basicauction/[id]/QnAUnit.css.ts b/src/app/basicauction/[id]/QnAUnit.css.ts
index 6c849cdd..59a7b45c 100644
--- a/src/app/basicauction/[id]/QnAUnit.css.ts
+++ b/src/app/basicauction/[id]/QnAUnit.css.ts
@@ -39,6 +39,13 @@ export const accordionTrigger = style({
   color: 'black',
   backgroundColor: 'var(--accordion-bg-color)',
   transition: 'background-color 0.3s',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      padding: '10px 10px',
+      fontSize: '12px',
+      minHeight: 'auto',
+    },
+  },
 });
 
 export const questionWrapper = style({
@@ -47,6 +54,15 @@ export const questionWrapper = style({
   alignItems: 'center',
   width: '100%',
   gap: '10px',
+  textAlign: 'start',
+
+  '@media': {
+    'screen and (max-width: 700px)': {
+      flexDirection: 'column-reverse',
+      width: '100%',
+      alignItems: 'flex-start',
+    },
+  },
 });
 
 export const userEmail = style({
@@ -58,6 +74,11 @@ export const accordionAuthorContent = style({
   display: 'flex',
   alignItems: 'center',
   gap: '15px',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      width: '100%',
+    },
+  },
 });
 
 export const answerTitle = style({
@@ -65,6 +86,12 @@ export const answerTitle = style({
   fontWeight: 'bold',
   color: 'rgb(55, 95, 255)',
   margin: '15px 0',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      fontSize: '13px',
+      margin: '12px 0',
+    },
+  },
 });
 
 export const answerPostSection = style({
@@ -95,6 +122,12 @@ export const accordionContent = style({
   selectors: {
     '&[data-state="open"]': {
       padding: '10px 20px',
+      '@media': {
+        'screen and (max-width: 700px)': {
+          padding: '10px 10px',
+          fontSize: '13px',
+        },
+      },
     },
   },
 });
@@ -152,6 +185,11 @@ export const haveAnswerBase = style({
   fontSize: '12px',
   padding: '5px',
   color: 'white',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      marginLeft: 'auto',
+    },
+  },
 });
 
 export const haveAnswerVariants = styleVariants({
diff --git a/src/components/AuctionInfo/AuctionInstantBuyConfirmModal.tsx b/src/components/AuctionInfo/AuctionInstantBuyConfirmModal.tsx
index e861ac8f..1ee82dc8 100644
--- a/src/components/AuctionInfo/AuctionInstantBuyConfirmModal.tsx
+++ b/src/components/AuctionInfo/AuctionInstantBuyConfirmModal.tsx
@@ -5,5 +5,7 @@ interface AuctionInstantBuyConfirmModalProps {
 export default function AuctionInstantBuyConfirmModal({
   InstantBuyPrice,
 }: AuctionInstantBuyConfirmModalProps) {
-  return <div>{`${InstantBuyPrice.toLocaleString('ko-KR')} 원에 입찰을 진행하시겠습니까?`}</div>;
+  return (
+    <div>{`${InstantBuyPrice.toLocaleString('ko-KR')} 원에 즉시 구매를 진행하시겠습니까?`}</div>
+  );
 }
diff --git a/src/components/HeaderSection/components/MobileSlideNav/MobileSlideNav.css.ts b/src/components/HeaderSection/components/MobileSlideNav/MobileSlideNav.css.ts
new file mode 100644
index 00000000..1ecce79b
--- /dev/null
+++ b/src/components/HeaderSection/components/MobileSlideNav/MobileSlideNav.css.ts
@@ -0,0 +1,109 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import colors from '@/styles/color';
+
+export const container = style({ padding: '0 16px', display: 'flex', flexDirection: 'column' });
+
+export const logo = style({ fontSize: '24px', color: colors.primary9 });
+
+export const hr = style({
+  padding: '0px',
+  height: '1px',
+  border: 'none',
+  backgroundColor: 'rgb(234, 237, 239)',
+  margin: '20px 0px',
+});
+
+export const hrTitle = style({ fontSize: '14px', color: colors.gray12 });
+
+export const userWrapper = style({
+  display: 'flex',
+  gap: '4px',
+  marginTop: '24px',
+});
+
+export const profileImage = style({
+  borderRadius: '50%',
+});
+
+export const authWrapper = style({
+  display: 'flex',
+  gap: '8px',
+  marginTop: '16px',
+});
+
+export const userName = style({
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: colors.gray11,
+});
+
+export const buttonBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  width: '100%',
+  height: '40px',
+  borderRadius: '4px',
+});
+
+export const normalNavButtonBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: '100%',
+  textAlign: 'left',
+  height: '40px',
+  borderRadius: '4px',
+  fontSize: '14px',
+  color: colors.gray11,
+  padding: '0 8px',
+  boxSizing: 'border-box',
+  ':hover': {
+    backgroundColor: colors.gray3,
+  },
+});
+
+export const bottomNavButtonBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: '100%',
+  textAlign: 'left',
+  borderRadius: '4px',
+  fontSize: '12px',
+  color: colors.gray11,
+  padding: '4px 8px',
+  boxSizing: 'border-box',
+});
+
+export const button = styleVariants({
+  login: [
+    buttonBase,
+    {
+      fontSize: '12px',
+      color: colors.primary9,
+      backgroundColor: colors.white,
+      border: `1px solid ${colors.primary9}`,
+    },
+  ],
+  join: [
+    buttonBase,
+    {
+      fontSize: '12px',
+      backgroundColor: colors.primary9,
+      color: colors.white,
+      border: `1px solid ${colors.primary9}`,
+    },
+  ],
+  uploadAuction: [
+    buttonBase,
+    {
+      fontSize: '14px',
+      color: colors.primary9,
+      backgroundColor: colors.primary3,
+      border: `1px solid ${colors.primary9}`,
+    },
+  ],
+});
diff --git a/src/components/Modal/Modal.css.ts b/src/components/Modal/Modal.css.ts
index a1b930d4..2030d158 100644
--- a/src/components/Modal/Modal.css.ts
+++ b/src/components/Modal/Modal.css.ts
@@ -1,5 +1,7 @@
 import { keyframes, style, styleVariants } from '@vanilla-extract/css';
 
+import colors from '@/styles/color';
+
 const overlayShow = keyframes({
   '0%': {
     opacity: '0',
@@ -47,8 +49,9 @@ export const modal = style({
 
 export const closeButton = style({
   display: 'flex',
+  width: '100%',
   justifyContent: 'flex-end',
-  borderBottom: '1.5px solid black',
+  borderBottom: `1px solid rgba(0, 0, 0, 0.3)`,
   backgroundColor: 'transparent',
   paddingBottom: '10px',
   cursor: 'pointer',
@@ -83,13 +86,13 @@ export const button = styleVariants({
   positiveButton: [
     buttonBase,
     {
-      backgroundColor: 'rgb(196,39,39)',
+      backgroundColor: colors.primary9,
     },
   ],
   negativeButton: [
     buttonBase,
     {
-      backgroundColor: 'black',
+      backgroundColor: colors.gray10,
     },
   ],
 });
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index f293e7ed..ee2b0fa4 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -2,6 +2,8 @@ import * as Dialog from '@radix-ui/react-dialog';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { CircleXIcon } from 'lucide-react';
 
+import colors from '@/styles/color';
+
 import * as S from './Modal.css';
 
 export interface ModalProps {
@@ -24,7 +26,7 @@ export function Modal(SAMPLE: ModalProps) {
           <Dialog.Description aria-describedby="undefined" />
           <Dialog.Close asChild>
             <div className={S.closeButton}>
-              <CircleXIcon />
+              <CircleXIcon stroke={colors.gray9} />
             </div>
           </Dialog.Close>
           <div className={S.content}>{children}</div>
diff --git a/src/components/Modal/ModalFooter.tsx b/src/components/Modal/ModalFooter.tsx
index b792da1b..3a198c48 100644
--- a/src/components/Modal/ModalFooter.tsx
+++ b/src/components/Modal/ModalFooter.tsx
@@ -1,7 +1,8 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { CircleXIcon } from 'lucide-react';
 
+import colors from '@/styles/color';
+
 import * as S from './Modal.css';
 
 interface ModalFooterProps {
@@ -21,15 +22,12 @@ export default function ModalFooter(props: ModalFooterProps) {
         <Dialog.Overlay className={S.overlay} />
         <Dialog.Content className={S.modal} aria-describedby={undefined}>
           <Dialog.Close asChild>
-            <>
-              <VisuallyHidden.Root asChild>
-                <Dialog.Title />
-              </VisuallyHidden.Root>
-              <div className={S.closeButton}>
-                <CircleXIcon />
-              </div>
-            </>
+            <div className={S.closeButton}>
+              <CircleXIcon stroke={colors.gray9} />
+            </div>
           </Dialog.Close>
+          <Dialog.Title />
+          {/* 없으면 에러나서 넣어둠. */}
           <div className={S.content}>{children}</div>
           <div className={S.footerButton}>
             <button className={S.button.positiveButton} type="button" onClick={positiveButtonEvent}>
diff --git a/src/components/Modal/ModalHeaderFooter.tsx b/src/components/Modal/ModalHeaderFooter.tsx
index 3011e46a..60518d23 100644
--- a/src/components/Modal/ModalHeaderFooter.tsx
+++ b/src/components/Modal/ModalHeaderFooter.tsx
@@ -1,6 +1,8 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { CircleXIcon } from 'lucide-react';
 
+import colors from '@/styles/color';
+
 import * as S from './Modal.css';
 
 interface ModalHeaderFooterProps {
@@ -23,7 +25,7 @@ export default function ModalHeaderFooter(SAMPLE: ModalHeaderFooterProps) {
           <div className={S.header}>
             <Dialog.Title className={S.headerTitle}>{title}</Dialog.Title>
             <Dialog.Close asChild>
-              <CircleXIcon />
+              <CircleXIcon stroke={colors.gray9} />
             </Dialog.Close>
           </div>
           <div className={S.content}>{children}</div>

From 1798e39207e9c7a2a1be8c66c881269e6f231630 Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Thu, 21 Nov 2024 17:18:24 +0900
Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=EB=B8=8C=EB=9E=98=EB=93=9C=ED=81=AC?=
 =?UTF-8?q?=EB=9F=BC=20Disable=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/basicauction/[id]/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/basicauction/[id]/page.tsx b/src/app/basicauction/[id]/page.tsx
index eb4f6e6e..ff0eca63 100644
--- a/src/app/basicauction/[id]/page.tsx
+++ b/src/app/basicauction/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 
 import { BasicAuctionResponseData } from '@/apis/types/basicAuction';
-import { Breadcrumb } from '@/components/Breadcrumb';
+// import { Breadcrumb } from '@/components/Breadcrumb';
 import MaxLayout from '@/components/MaxLayout';
 import usePrefetchQueryWithCookie from '@/hooks/usePrefetchQueryWithCoookie';
 
@@ -24,11 +24,11 @@ async function BasicAuctionDetailPage({ params }: BasicAuctionDetailPageProps) {
 
   return (
     <MaxLayout>
-      <Breadcrumb>
+      {/* <Breadcrumb>
         <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
         <Breadcrumb.Item href="/basicauction">Products</Breadcrumb.Item>
         <Breadcrumb.Item>Product {params.id}</Breadcrumb.Item>
-      </Breadcrumb>
+      </Breadcrumb> */}
       <HydrationBoundary state={dehydrate(queryClient)}>
         <BasicAuctionInfo id={params.id} />
       </HydrationBoundary>

From 11270b5d063cb12429acc0e4433e5dbabe35496f Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Thu, 21 Nov 2024 17:37:07 +0900
Subject: [PATCH 5/7] =?UTF-8?q?test:=20tsc=20=EC=97=90=EB=9F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/keyword/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/mypage/keyword/page.tsx b/src/app/mypage/keyword/page.tsx
index d7d4164c..f2088709 100644
--- a/src/app/mypage/keyword/page.tsx
+++ b/src/app/mypage/keyword/page.tsx
@@ -47,7 +47,7 @@ function Home() {
   const keywordRequired = watch('keywordRequired');
 
   const onSubmit: SubmitHandler<Input> = async data => {
-    console.log(data);
+    console.log('onSubmit', data);
   };
 
   return (

From af5981605c57201dbfbef6cb56d31f70d11f6a10 Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Thu, 21 Nov 2024 17:43:03 +0900
Subject: [PATCH 6/7] =?UTF-8?q?fix:=20ts=20=EC=97=90=EB=9F=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index defaec12..b6853df9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,7 +7,7 @@ import MaxLayout from '@/components/MaxLayout';
 import SpecialSection from '@/components/SpecialSection';
 
 export default function Home() {
-  const { data } = useGetBasicAuctionList({
+  const { data: basicAuctionList } = useGetBasicAuctionList({
     title: '',
     sort: 'createdAt',
     direction: 'DESC',
@@ -15,7 +15,7 @@ export default function Home() {
     size: 4,
   });
 
-  const { data: end } = useGetBasicAuctionList({
+  const { data: urgentBasicAuctionList } = useGetBasicAuctionList({
     title: '',
     sort: 'endDate',
     direction: 'ASC',
@@ -23,15 +23,27 @@ export default function Home() {
     size: 4,
   });
 
-  if (!data) return null;
-
   return (
     <div>
       <MainCarousel />
       <SpecialSection />
       <MaxLayout>
-        <AuctionList data={data} isLink path="/basicauction" pathname="신규 경매 상품" />
-        <AuctionList data={end} isLink path="/basicauction" pathname="마감 임박 상품" />
+        {basicAuctionList && (
+          <AuctionList
+            data={basicAuctionList}
+            isLink
+            path="/basicauction"
+            pathname="신규 경매 상품"
+          />
+        )}
+        {urgentBasicAuctionList && (
+          <AuctionList
+            data={urgentBasicAuctionList}
+            isLink
+            path="/basicauction"
+            pathname="마감 임박 상품"
+          />
+        )}
         {/* 특정 유저의 상품 모아 놓기(필수 아님) */}
         {/* <AuctionList data={data} pathname="000 판매자" />  */}
       </MaxLayout>

From 37af643998231918f89989c5a8f726cea9a2b528 Mon Sep 17 00:00:00 2001
From: dbshaejin <dbshaejin@gmail.com>
Date: Fri, 22 Nov 2024 09:29:35 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AuctionImageInfo/AuctionImageInfo.css.ts          |  6 +++---
 src/components/AuctionImageInfo/index.tsx             | 11 ++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/AuctionImageInfo/AuctionImageInfo.css.ts b/src/components/AuctionImageInfo/AuctionImageInfo.css.ts
index a75a0317..67801427 100644
--- a/src/components/AuctionImageInfo/AuctionImageInfo.css.ts
+++ b/src/components/AuctionImageInfo/AuctionImageInfo.css.ts
@@ -13,8 +13,9 @@ export const subImageWrapper = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '10px',
-  marginRight: '10px',
+  marginRight: '5px',
   overflowY: 'auto',
+  minWidth: '62px',
 });
 
 export const subImageWrapperButton = styleVariants({
@@ -37,8 +38,7 @@ export const subImageWrapperButton = styleVariants({
 });
 
 export const subImage = style({
-  height: '60px',
-  width: '60px',
+  display: 'flex',
   objectFit: 'contain',
 });
 
diff --git a/src/components/AuctionImageInfo/index.tsx b/src/components/AuctionImageInfo/index.tsx
index 0f953a7b..343b24c0 100644
--- a/src/components/AuctionImageInfo/index.tsx
+++ b/src/components/AuctionImageInfo/index.tsx
@@ -1,7 +1,8 @@
-/* eslint-disable jsx-a11y/img-redundant-alt */
 /* eslint-disable @next/next/no-img-element */
 import { useState } from 'react';
 
+import Image from 'next/image';
+
 import * as S from './AuctionImageInfo.css';
 
 interface AuctionImageInfoProps {
@@ -32,8 +33,10 @@ function AuctionImageInfo({ imageList }: AuctionImageInfoProps) {
             }
             onClick={() => setFocusImage(image)}
           >
-            <img
+            <Image
               src={`${process.env.NEXT_PUBLIC_S3_URL}${image}`}
+              width={60}
+              height={60}
               alt="Auction Image"
               className={S.subImage}
             />
@@ -41,8 +44,10 @@ function AuctionImageInfo({ imageList }: AuctionImageInfoProps) {
         ))}
       </div>
       <div className={S.mainImageWrapper}>
-        <img
+        <Image
           src={`${process.env.NEXT_PUBLIC_S3_URL}${focusImage}`}
+          width={440}
+          height={440}
           alt="Auction Image"
           className={S.mainImage}
         />