Fix: img 태그에서 발생하는 빌드 에러 해결

src/app/mypage/page.tsx

@@ -33,7 +33,7 @@ export default function MyPage() {
                 </div>
                 <span className="text-[18px] text-center m-[10px] text-[#ededed]">|</span>
                 <div className="flex flex-col jsutify-center items-center w-[30%]">
-                    <Image src="/assets/icons/bell.svg" width={24} height={24} alt="벨 아이콘"/>
+                    <Image src="/assets/icons/alert.svg" width={24} height={24} alt="벨 아이콘"/>
                     <div className="text-caption2 text-gray-900 my-[5px]">알림함</div>
                 </div>
             </div>

src/components/sliders/Banner.tsx

@@ -4,6 +4,7 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css"; 
 import "slick-carousel/slick/slick-theme.css";
 import "./banner.css";
+import Image from 'next/image';
 
 function Banner() {
   const [activeIndex, setActiveIndex] = useState(0);
@@ -23,27 +24,46 @@ function Banner() {
   return (
     <div className="slider-container h-[133px] relative ">
       <Slider {...settings}>
-        <div className="flex flex-col justify-center items-center">
-          <div className="h-[100px] px-[2px] flex flex-col items-center justify-center relative">
-            <img className="w-full h-[100px] object-cover rounded-[7px]" src={"/assets/images/BannerImage1.svg"}/>
+        <div className="flex justify-center px-[2px]">
+          <div className="w-full h-[100px] relative">
+            <Image
+              src="/assets/images/BannerImage1.svg"
+              alt="배너"
+              layout="fill"
+              className="object-cover rounded-[7px]"
+            />
           </div>
         </div>
-        <div className="flex flex-col justify-center items-center">
-          <div className="h-[100px] px-[2px] flex flex-col items-center justify-center relative">
-            <img className="w-full h-[100px] object-cover rounded-[7px]" src={"/assets/images/BannerImage2.svg"}/>
+        <div className="flex justify-center px-[2px]">
+          <div className="w-full h-[100px] relative">
+            <Image
+              src="/assets/images/BannerImage2.svg"
+              alt="배너"
+              layout="fill"
+              className="object-cover rounded-[7px]"
+            />
           </div>
         </div>
-        <div className="flex flex-col justify-center items-center">
-          <div className="h-[100px] px-[2px] flex flex-col items-center justify-center relative">
-            <img className="w-full h-[100px] object-cover rounded-[7px]" src={"/assets/images/BannerImage1.svg"}/>
+        <div className="flex justify-center px-[2px]">
+          <div className="w-full h-[100px] relative">
+            <Image
+              src="/assets/images/BannerImage1.svg"
+              alt="배너"
+              layout="fill"
+              className="object-cover rounded-[7px]"
+            />
           </div>
         </div>
-        <div className="flex flex-col justify-center items-center">
-          <div className="h-[100px] px-[2px] flex flex-col items-center justify-center relative">
-            <img className="w-full h-[100px] object-cover rounded-[7px]" src={"/assets/images/BannerImage2.svg"}/>
+        <div className="flex justify-center px-[2px]">
+          <div className="w-full h-[100px] relative px-[2px]">
+            <Image
+              src="/assets/images/BannerImage2.svg"
+              alt="배너"
+              layout="fill"
+              className="object-cover rounded-[7px]"
+            />
           </div>
-        </div>
-
+        </div>  
       </Slider>
     </div>
   );

src/components/sliders/Carousel.tsx

@@ -4,7 +4,34 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css"; 
 import "slick-carousel/slick/slick-theme.css";
 import "./carousel.css";
-import Hotel from "../../../public/hotelImage.png";
+import Image from 'next/image';
+
+const items = [
+  {
+    title:"강릉 피크닉 앤 글램핑",
+    imgurl: "/HotelImage.png"
+  },
+  {
+    title:"울미숲 캠핑장",
+    imgurl: "/HotelImage.png"
+  },
+  {
+    title:"더존 카라반",
+    imgurl: "/HotelImage.png"
+  },
+  {
+    title:"강릉 피크닉 앤 글램핑",
+    imgurl: "/HotelImage.png"
+  },
+  {
+    title:"울미숲 캠핑장",
+    imgurl: "/HotelImage.png"
+  },
+  {
+    title:"더존 카라반",
+    imgurl: "/HotelImage.png"
+  }
+]
 
 function Carousel() {
   const [activeIndex, setActiveIndex] = useState(0);
@@ -21,14 +48,19 @@ function Carousel() {
     },
   };
   return (
-    <div className="slider-container h-[230px] relative ">
+    <div className="slider-container h-[248px] relative ">
       <Slider {...settings}>
-      {[...Array(6)].map((_, index) => (
-        <div key={index} className="mt-[55px] flex flex-col justify-center items-center">
-          <div className="item h-[100px] mx-[15px] p-[2%] flex flex-col items-center justify-center relative">
-            <img className="w-full h-[100px] object-cover rounded-[7px]" src={Hotel.src}/>
+      {items.map((item, index) => (
+        <div key={index} className="my-[50px] flex flex-col justify-center items-center">
+          <div className="item h-[110px] mx-[16px]  flex flex-col items-center justify-center relative">
+          <Image
+              src={item.imgurl}
+              alt="background"
+              layout="fill"
+              className="object-cover rounded-[7px]"
+            />
           </div>
-          <div className="text w-full text-[#8EDB9B] text-center text-[9px] px-[10px] font-Pretendard">강릉 피크닉 앤 글램핑</div>
+          <div className="text text-center font-Pretendard ">{item.title}</div>
         </div>
 
          ))}

src/components/sliders/MediumListItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from 'next/image';
 
 interface MediumListItemProps {
     label: string;
@@ -9,8 +10,8 @@ interface MediumListItemProps {
 export default function MediumListItem({label, imgurl, addr} : MediumListItemProps){
     return (
         <div className="w-[154px] h-fit">
-            <div className="w-[154px] h-[110px] mb-[8px]">
-                <img src={imgurl} className="w-full h-full rounded-[4px]"/>
+            <div className="w-[154px] h-[110px] mb-[8px] relative overflow-hidden rounded-[4px]">
+                <Image src={imgurl} alt={"backgroundImg"} layout="fill" objectFit="cover"/>
             </div>
                 <div className="flex flex-col">
                 <span className="text-[16px] block leading-[20px] whitespace-pre-wrap mb-[4px]">

src/components/sliders/SmallListItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from 'next/image';
 
 interface SmallListItemProps {
     label: string;
@@ -9,8 +10,8 @@ interface SmallListItemProps {
 export default function SmallListItem({label, imgurl} : SmallListItemProps){
     return (
         <div className="w-[140px]">
-            <div className="w-[140px] h-[105px] mb-[8px]">
-              <img src={imgurl} className="w-[140px] h-[105px] rounded-[4px] " />
+            <div className="w-[140px] h-[105px] mb-[8px] relative overflow-hidden rounded-[4px]">
+                <Image src={imgurl} alt={"backgroundImg"} layout="fill" objectFit="cover"/>
             </div>
             <span className="w-[140px] pt-[8px] text-body1 whitespace-pre-wrap">{label}</span>
         </div>

src/components/sliders/carousel.css

@@ -5,29 +5,32 @@
   }
 
   .slick-slider .item{
-    transform: scale(1.02, 1.2);
-    margin-bottom: 10px;
+    transform: scale(1, 1);
+    margin-bottom: 5px;
   }
 
   .slick-slider .text{
-    transform: scale(1, 1);
+    font-size: 8px;
+    color: #8EDB9B;
+    width: 100%;
+    padding: 0px 15px;
   }
 
   .center .slick-center .item {
       opacity: 1;
-      -ms-transform: scale(1.6, 1.7);
-      transform: scale(1.6, 1.95);
+      -ms-transform: scale(1.65, 1.7);
+      transform: scale(1.65, 1.7);
       margin-bottom: 50px;
   }
   .center .item {
       transition: all .3s ease;
   }
 
   .center .slick-center .text{
-    -ms-transform: scale(1.5, 1.5);
-    transform: scale(1.5, 1.5);
     font-weight: 600;
     color: #5FBA8E;
+    -ms-transform: scale(1.75, 1.75);
+    transform: scale(1.75, 1.75);
   }
 
   .center .text{