[REFACTOR] 상품 디테일 페이지 반응형 구현

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',
+    },
+  },
 });

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>

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,13 +74,24 @@ export const accordionAuthorContent = style({
   display: 'flex',
   alignItems: 'center',
   gap: '15px',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      width: '100%',
+    },
+  },
 });
 
 export const answerTitle = style({
   fontSize: '15px',
   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({

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/usePrefetchQueryWithCookie';
 
@@ -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>

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 (

src/app/page.tsx

@@ -7,23 +7,43 @@ 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',
     page: 0,
     size: 4,
   });
 
-  if (!data) return null;
+  const { data: urgentBasicAuctionList } = useGetBasicAuctionList({
+    title: '',
+    sort: 'endDate',
+    direction: 'ASC',
+    page: 0,
+    size: 4,
+  });
 
   return (
     <div>
       <MainCarousel />
       <SpecialSection />
       <MaxLayout>
-        <AuctionList data={data} isLink path="/basicauction" pathname="신규 경매 상품" />
-        <AuctionList data={data} 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>

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',
   },

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',
 });
 

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,17 +33,21 @@ 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}
             />
           </button>
         ))}
       </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}
         />

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') {

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>
+  );
 }

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,
     },
   ],
 });

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>

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}>