[design] #15 아이콘 렌더링 방식 변경 및 svgr 설치

next.config.mjs

@@ -0,0 +1,55 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    turbo: {
+      rules: {
+        "*.svg": {
+          loaders: ["@svgr/webpack"],
+          as: "*.js",
+        },
+      },
+    },
+  },
+
+  webpack: (config) => {
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg")
+    );
+
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: [
+          {
+            loader: "@svgr/webpack",
+            options: {
+              typescript: true,
+              ext: "tsx",
+            },
+          },
+        ],
+      }
+    );
+    fileLoaderRule.exclude = /\.svg$/i;
+    return config;
+  },
+
+  images: {
+    domains: [
+      "encrypted-tbn0.gstatic.com",
+      "www.gunsan.go.kr",
+      "www.ktriptips.com",
+      "www.saemangeum.go.kr",
+      "www.sdco.or.kr",
+    ],
+  },
+};
+
+export default nextConfig;

src/app/_components/LandingPage/index.tsx

@@ -3,7 +3,6 @@
 import { useEffect } from "react";
 import { createNewUser } from "@/utils/createNewUser";
 import { Info } from "lucide-react";
-import Image from "next/image";
 import Button from "@/components/Button";
 import Logo from "../../../../public/logo/logo.svg";
 
@@ -19,8 +18,7 @@ export default function LandingPage({
   return (
     <div className="m-auto flex h-screen w-full flex-col items-center justify-center gap-16 bg-gradient-to-t from-[#EBF0FA] to-white px-5 pt-10 sm:gap-20">
       <div className="flex w-full flex-col items-center gap-10">
-        <Image
-          src={Logo}
+        <Logo
           className="h-20 w-[86px] sm:h-[120px] sm:w-[112px]"
           alt="새길 로고"
         />
@@ -30,8 +28,8 @@ export default function LandingPage({
           </h1>
           <div className="flex flex-col gap-5 sm:gap-6">
             <div className="flex w-full max-w-[640px] gap-2 rounded-xl border border-[#C3E5E9] bg-[#E9F5F7] p-4">
-              <div className="mt-1 text-[#3C98A4]">
-                <Info size={14} />
+              <div className="mt-1">
+                <Info size={14} color="#3C98A4" />
               </div>
               <p className="text-link-small sm:text-link-large text-[#3C98A4]">
                 본 서비스는 새만금사업 보조 목적의 정주의향 확인 및 인구유입

src/app/_components/SurveyScreen/SurveyOption.tsx

@@ -1,7 +1,5 @@
 import clsx from "clsx";
-import Image from "next/image";
-import checkDefault from "@/assets/icons/check_default.svg";
-import checkActive from "@/assets/icons/check_active.svg";
+import { Check } from "lucide-react";
 
 interface SurveyOptionProps {
   text: string;
@@ -30,7 +28,7 @@ export default function SurveyOption({
       >
         {text}
       </p>
-      <Image src={isSelected ? checkActive : checkDefault} alt="" />
+      <Check size={24} color={isSelected ? "#3560C0" : "#B3B9C6"} />
     </div>
   );
 }

src/app/map/page.tsx

@@ -1,25 +1,14 @@
 "use client";
 
-import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk";
+import Bad from "../../../public/icons/emoji_bad.svg";
+import Image from "next/image";
 
-export default function KakaoMap() {
-  const [loading, error] = useKakaoLoader({
-    appkey: process.env.NEXT_PUBLIC_APPKEY!,
-  });
-  if (loading) return <div>Loading</div>;
-  if (error) return <div>Error</div>;
+export default function MapPage() {
   return (
-    <>
+    <div>
       <div>테스트 페이지</div>
-      <Map
-        level={3}
-        center={{ lat: 33.5563, lng: 126.79581 }}
-        style={{ width: "100%", height: "360px" }}
-      >
-        <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
-          <div style={{ color: "#000" }}>Hello World!</div>
-        </MapMarker>
-      </Map>
-    </>
+      <Bad className="text-red-500" />
+      <Image src={Bad} alt="" />
+    </div>
   );
 }

src/app/recommend/_components/MapView/RecommendationMarker.tsx

@@ -1,7 +1,7 @@
 import { CustomOverlayMap, MapMarker } from "react-kakao-maps-sdk";
 import { RecommendationResponse } from "@/lib/type";
 import Image from "next/image";
-import Temp from "@/assets/icons/temp.jpg";
+import Temp from "../../../../../public/images/temp.jpg";
 
 interface RecommendationMarkerProps extends RecommendationResponse {
   onClick?: () => void;

src/app/recommend/_components/NavBar.tsx

@@ -6,7 +6,7 @@ import LogoKR from "../../../../public/logo/logo_kr.png";
 export default function NavBar() {
   return (
     <div className="pointer-events-auto flex h-10 w-screen items-center border-r-1 border-[#EEEFF2] bg-white px-5 sm:h-screen sm:w-[72px] sm:flex-col sm:justify-between sm:px-0 sm:py-4">
-      <Image src={Logo} className="size-6 sm:size-10" alt="새길 로고" />
+      <Logo className="size-6 sm:size-10" alt="새길 로고" />
       <div className="hidden flex-col items-center justify-between gap-6 py-10 sm:flex">
         <Image src={LogoDev} width={32} height={32} alt=" 새만금 개발청" />
         <Image src={LogoKR} width={48} height={25} alt="새만금 사업단" />

src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx

@@ -3,7 +3,7 @@ import { getCity } from "@/utils/getCity";
 import { CATEGORY } from "@/constants/spaceData";
 import { MapPin } from "lucide-react";
 import Image from "next/image";
-import Temp from "@/assets/icons/temp.jpg";
+import Temp from "../../../../../public/images/temp.jpg";
 
 export default function SpaceCard({
   title,
@@ -29,8 +29,8 @@ export default function SpaceCard({
             <h2 className="text-title-small text-[#1F2229]">{title}</h2>
           </div>
           <div className="flex items-start gap-1">
-            <div className="size-4 py-0.5 text-[#616A80]">
-              <MapPin size={16} />
+            <div className="size-4 py-0.5">
+              <MapPin size={16} color="#616A80" />
             </div>
             <div className="text-body-small text-[#616A80]">{position}</div>
           </div>

src/constants/transitionData.ts

@@ -1,5 +1,5 @@
-import MoodFinder from "../../public/illusts/mood_finder.png";
-import CummuteRecommendation from "../../public/illusts/commute_recommendation.png";
+import MoodFinder from "../../public/images/mood_finder.png";
+import CummuteRecommendation from "../../public/images/commute_recommendation.png";
 
 export const transitionData = {
   toMood: {

svgr.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  import React from "react";
+  const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
+  export default SVG;
+}

tsconfig.json

@@ -27,8 +27,10 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "next.config.js",
-    "src/app/page.jsx"
+    "next.config.mjs",
+    "src/app/page.jsx",
+    "svgr.d.ts",
+    "src/**/*.d.ts"
   ],
   "exclude": ["node_modules"]
 }