From f3694212f6543b887ed6665b60d0d3341bd1062e Mon Sep 17 00:00:00 2001
From: CHOI GIHOAWN <rlghks3004@gmail.com>
Date: Mon, 30 Sep 2024 17:08:26 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20svg=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=88=EB=9F=AC=EC=98=A4=EB=8D=98=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20rollback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MyPlantAlimCheck.tsx |  9 ++----
 src/utils/home/getRandomIllustrator.ts   | 40 ++++++++++++------------
 2 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/components/main/MyPlantAlimCheck.tsx b/src/components/main/MyPlantAlimCheck.tsx
index 0c98177..601d4ec 100644
--- a/src/components/main/MyPlantAlimCheck.tsx
+++ b/src/components/main/MyPlantAlimCheck.tsx
@@ -31,7 +31,7 @@ const MyPlantAlimCheck: React.FC<MyPlantAlimCheckProps> = ({ plants }) => {
     });
   }, [api]);
 
-  const { icon, left, right } = useMemo(() => getRandomIllustrator(), []);
+  const { Icon, left, right } = useMemo(() => getRandomIllustrator(), []);
 
   return (
     <Carousel setApi={setApi}>
@@ -41,15 +41,10 @@ const MyPlantAlimCheck: React.FC<MyPlantAlimCheckProps> = ({ plants }) => {
         {plants.map((plant) => (
           <CarouselItem key={plant.myPlantId}>
             <div className="flex flex-col items-center justify-center">
-              <img
-                alt={'내 식물 일러스트 아이콘'}
-                src={icon}
-                loading={'lazy'}
+              <Icon
                 style={{
                   transform: `translateY(-20px) translateX(${(-1 * (left - right)) / 2 - 3}px)`,
                 }}
-                width={210}
-                height={234}
                 className={cn('mt-[10px] mb-[30px]')}
               />
               <div className="flex flex-col items-center justify-center">
diff --git a/src/utils/home/getRandomIllustrator.ts b/src/utils/home/getRandomIllustrator.ts
index cc41d57..b4a4100 100644
--- a/src/utils/home/getRandomIllustrator.ts
+++ b/src/utils/home/getRandomIllustrator.ts
@@ -1,64 +1,64 @@
 /// <reference types="vite-plugin-svgr/client" />
-import PlantIcon1 from '@/assets/icon/plants/1.svg';
-import PlantIcon2 from '@/assets/icon/plants/2.svg';
-import PlantIcon3 from '@/assets/icon/plants/3.svg';
-import PlantIcon4 from '@/assets/icon/plants/4.svg';
-import PlantIcon5 from '@/assets/icon/plants/5.svg';
-import PlantIcon6 from '@/assets/icon/plants/6.svg';
-import PlantIcon7 from '@/assets/icon/plants/7.svg';
-import PlantIcon8 from '@/assets/icon/plants/8.svg';
-import PlantIcon9 from '@/assets/icon/plants/9.svg';
-import PlantIcon10 from '@/assets/icon/plants/10.svg';
+import PlantIcon1 from '@/assets/icon/plants/1.svg?react';
+import PlantIcon2 from '@/assets/icon/plants/2.svg?react';
+import PlantIcon3 from '@/assets/icon/plants/3.svg?react';
+import PlantIcon4 from '@/assets/icon/plants/4.svg?react';
+import PlantIcon5 from '@/assets/icon/plants/5.svg?react';
+import PlantIcon6 from '@/assets/icon/plants/6.svg?react';
+import PlantIcon7 from '@/assets/icon/plants/7.svg?react';
+import PlantIcon8 from '@/assets/icon/plants/8.svg?react';
+import PlantIcon9 from '@/assets/icon/plants/9.svg?react';
+import PlantIcon10 from '@/assets/icon/plants/10.svg?react';
 import { random } from 'es-toolkit';
 
 const illustrators = [
   {
-    icon: PlantIcon1,
+    Icon: PlantIcon1,
     left: 71.74,
     right: 68.5,
   },
   {
-    icon: PlantIcon2,
+    Icon: PlantIcon2,
     left: 68.62,
     right: 67.84,
   },
   {
-    icon: PlantIcon3,
+    Icon: PlantIcon3,
     left: 73.72,
     right: 62.74,
   },
   {
-    icon: PlantIcon4,
+    Icon: PlantIcon4,
     left: 83.83,
     right: 52.63,
   },
   {
-    icon: PlantIcon5,
+    Icon: PlantIcon5,
     left: 69.82,
     right: 66.84,
   },
   {
-    icon: PlantIcon6,
+    Icon: PlantIcon6,
     left: 52.68,
     right: 83.78,
   },
   {
-    icon: PlantIcon7,
+    Icon: PlantIcon7,
     left: 65.97,
     right: 71.65,
   },
   {
-    icon: PlantIcon8,
+    Icon: PlantIcon8,
     left: 58.61,
     right: 77.85,
   },
   {
-    icon: PlantIcon9,
+    Icon: PlantIcon9,
     left: 65.23,
     right: 71.24,
   },
   {
-    icon: PlantIcon10,
+    Icon: PlantIcon10,
     left: 74.53,
     right: 62.25,
   },