feat: 반응형 사이즈 적용

Author: BaeZzi813

vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx

@@ -29,7 +29,7 @@ export default function ItemDetailPage() {
   console.log(commentInfo);
   return (
     <>
-      <div className="w-[1200px] h-[1257px] mx-auto">
+      <div className="tablet:w-[696px] mobile:w-[344px] w-[1200px] h-[1257px] mx-auto">
         <ItemInfo
           images={itemInfo.images}
           name={itemInfo.name}

vite-project/src/pages/ItemDetailPage/ItemInfo.jsx

@@ -20,16 +20,18 @@ export default function ItemInfo({
 
   return (
     <>
-      <section className="flex  mt-9  space-x-9 pb-10 border-solid border-b-[1px] border-[#e5e7eb]">
+      <section className="mobile:flex-col mobile:space-x-0 flex mt-9  space-x-9 pb-10 border-solid border-b-[1px] border-[#e5e7eb]">
         <img
-          className="w-[486px] h-[486px] rounded-2xl"
+          className="tablet:w-[340px] tablet:h-[340px] mobile:w-[343px] mobile:h-[343px] w-[486px] h-[486px] rounded-2xl"
           src={images}
           alt="상품 이미지"
         />
-        <div className="w-[690px] h-[496px]">
+        <div className="tablet:w-[340px] mobile:w-[344px] w-[690px] h-[496px]">
           <div className="pb-4 mb-10 border-b-[1px] border-[#e5e7eb] border-solid">
-            <h2 className="text-[24px] font-semibold text-[#1f2937]">{name}</h2>
-            <h1 className="text-[40px] font-semibold text-[#1f2937]">
+            <h2 className="tablet:text-[20px] text-[24px] font-semibold text-[#1f2937]">
+              {name}
+            </h2>
+            <h1 className="tablet:text-[32px] text-[40px] font-semibold text-[#1f2937]">
               {Number(price).toLocaleString()}원
             </h1>
           </div>
@@ -46,32 +48,32 @@ export default function ItemInfo({
               <span className="mb-7 block text-[16px] font-semibold text-[#4b5563]">
                 상품 태그
               </span>
-              <ul className="flex gap-[8px]">
+              <ul className="tablet:flex tablet:flex-wrap mobile:flex mobile:flex-wrap flex gap-[8px]">
                 {tags.map((tag, index) => (
                   <li
                     key={index}
-                    className="h-[36px] rounded-[26px] px-[16px] py-[6px] bg-[#f3f4f6] text-[16px] text-[#1f2937] text-center"
+                    className="tablet:inline-block mobile:inline-block h-[36px] rounded-[26px] px-[16px] py-[6px] bg-[#f3f4f6] text-[16px] text-[#1f2937] text-center"
                   >
                     #{tag}
                   </li>
                 ))}
               </ul>
             </div>
           </div>
-          <div className="w-[690px] flex items-center">
+          <div className="tablet:w-[340px] mobile:w-[344px] w-[690px] flex items-center">
             <img className="mr-6" src={ProfileImg} alt="" />
             {/* src={profileImage || defaultProfileImage} 예정 */}
-            <div className="flex w-[530px] flex-col border-r-[1px] border-[#e5e7eb] border-solid">
+            <div className="tablet:w-[180px] mobile:w-[190px] flex w-[530px] flex-col border-r-[1px] border-[#e5e7eb] border-solid">
               <span className="font-medium text-[14px] text-[#4b5563]">
                 {nickname}
               </span>
               <span className="font-normal text-[14px] text-[#9ca3af]">
                 {formattedDate}
               </span>
             </div>
-            <div className="gap-[10px] font-medium text-[16px] text-[#6b7280] w-[87px] h-[40px] px-[12px] py-[4px] rounded-[35px] border-[1px] border-[#e5e7eb] border-solid flex items-center ml-auto">
+            <div className="tablet:w-[79px] mobile:w-[79px] mobile:h-[32px] gap-[10px] font-medium text-[16px] text-[#6b7280] w-[87px] h-[40px] justify-center rounded-[35px] border-[1px] border-[#e5e7eb] border-solid flex items-center ml-auto">
               <img
-                className="w-[32px] h-[32px]"
+                className="mobile:w-[24px] mobile:h-[24px] w-[32px] h-[32px]"
                 src={likeIcon}
                 alt="좋아요 아이콘"
               />