fix: svg 제거

Author: ff1451

next.config.ts

@@ -18,15 +18,6 @@ const nextConfig: NextConfig = {
       { protocol: 'https', hostname: 'ca.slack-edge.com' },
     ],
   },
-
-  turbopack: {
-    rules: {
-      '**/*.svg': {
-        loaders: ['@svgr/webpack'],
-        as: '*.js',
-      },
-    },
-  },
 };
 
 export default nextConfig;

src/app/activity/components/ImageModal.tsx

@@ -107,7 +107,7 @@ export default function ImageModal({ images, alt, initialIndex, onClose }: Image
             className="absolute top-3 right-3 z-10 rounded-full bg-black/55 p-2"
             aria-label="닫기"
           >
-            <CloseIcon />
+            <Image src={CloseIcon} alt="" aria-hidden />
           </button>
         </div>
       </div>

src/app/layout.tsx

@@ -128,13 +128,13 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           </div>
           <div className="flex items-center justify-center gap-4">
             <Link href={URLS.SOCIAL.FACEBOOK}>
-              <FacebookIcon />
+              <Image src={FacebookIcon} alt="" aria-hidden />
             </Link>
             <Link href={URLS.SOCIAL.INSTAGRAM}>
-              <InstagramIcon />
+              <Image src={InstagramIcon} alt="" aria-hidden />
             </Link>
             <Link href={URLS.SOCIAL.YOUTUBE}>
-              <YoutubeIcon />
+              <Image src={YoutubeIcon} alt="" aria-hidden />
             </Link>
           </div>
         </footer>

src/app/recruit/components/BenefitCards.tsx

@@ -1,7 +1,8 @@
+import Image from 'next/image';
 import clsx from 'clsx';
 import { type Benefit, BENEFITS } from '@/static/recruit/benefit';
 
-function BenefitCard({ title, descriptions, Icon, offset }: Benefit) {
+function BenefitCard({ title, descriptions, iconSrc, offset }: Benefit) {
   return (
     <div
       className={clsx(
@@ -14,7 +15,7 @@ function BenefitCard({ title, descriptions, Icon, offset }: Benefit) {
       <div className="mt-1.5 pb-25 text-center text-[17px] leading-[150%] whitespace-pre-line text-neutral-200">
         {descriptions}
       </div>
-      <Icon />
+      <Image src={iconSrc} alt="" aria-hidden />
     </div>
   );
 }

src/app/track/components/TechStack.tsx

@@ -1,8 +1,8 @@
-import type { ComponentType, SVGProps } from 'react';
+import Image, { type StaticImageData } from 'next/image';
 import clsx from 'clsx';
 
 interface TechStackProps {
-  techStack: ComponentType<SVGProps<SVGSVGElement>>[];
+  techStack: StaticImageData[];
 }
 
 export default function TechStack({ techStack }: TechStackProps) {
@@ -26,9 +26,9 @@ export default function TechStack({ techStack }: TechStackProps) {
             !isEvenGrid && (techStack.length === 7 ? 'max-w-190' : 'max-w-250'),
           )}
         >
-          {techStack.map((Icon, i) => (
+          {techStack.map((iconSrc, i) => (
             <div key={i} className="flex items-center justify-center">
-              <Icon aria-hidden />
+              <Image src={iconSrc} alt="" aria-hidden />
             </div>
           ))}
         </div>

src/components/MentorSlider.tsx

@@ -67,7 +67,7 @@ export default function MentorSlider() {
           className="cursor-pointer"
           onClick={handleTogglePlay}
         >
-          {isPlaying ? <StopButtonIcon /> : <PlayButtonIcon />}
+          <Image src={isPlaying ? StopButtonIcon : PlayButtonIcon} alt="" aria-hidden />
         </button>
       </div>
     </div>

src/components/QnADropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRef, useState, useLayoutEffect, type MouseEvent } from 'react';
 import DownArrow from '@/assets/svg/main/dropdown-down-arrow.svg';
@@ -63,7 +64,7 @@ export default function QnADropdown() {
               >
                 <span className="text-[20px] leading-[130%] font-medium">{qna.question}</span>
                 <span className={`transition-transform duration-300 ${isDropDownOpen ? 'rotate-180' : ''}`}>
-                  <DownArrow />
+                  <Image src={DownArrow} alt="" aria-hidden />
                 </span>
               </button>
 

src/components/ScrollUpButton.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import UpButton from '@/assets/svg/track/up-icon.svg';
 
@@ -27,7 +28,7 @@ export default function ScrollUpButton() {
 
   return (
     <button type="button" aria-label="맨 위로 이동" onClick={scrollToTop} className="fixed right-30 bottom-20 z-10">
-      <UpButton />
+      <Image src={UpButton} alt="" aria-hidden />
     </button>
   );
 }

src/components/Selector.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useId, useRef, type KeyboardEvent, type MouseEvent } from 'react';
 import useHandleOutside from '@/hooks/useOutsideClick';
 import ArrowDown from '@/assets/svg/polygon-icon.svg';
@@ -79,7 +80,10 @@ export default function Selector({ options, value, onSelect }: SelectorProps) {
           className="relative flex w-full items-center justify-center rounded-full bg-[#f4f4f4] py-2"
         >
           <div className="mx-auto text-[17px]">{showLabel}</div>
-          <ArrowDown
+          <Image
+            src={ArrowDown}
+            alt=""
+            aria-hidden
             className={`absolute right-4 transform transition-transform duration-200 ${
               isOpen ? 'rotate-180' : 'rotate-0'
             }`}

src/static/recruit/benefit.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, SVGProps } from 'react';
+import type { StaticImageData } from 'next/image';
 import Group from '@/assets/svg/recruit/group-icon.svg';
 import Graph from '@/assets/svg/recruit/graph-icon.svg';
 import Up from '@/assets/svg/recruit/up-icon.svg';
@@ -7,31 +7,31 @@ import Chat from '@/assets/svg/recruit/chat-icon.svg';
 export interface Benefit {
   title: string;
   descriptions: string;
-  Icon: ComponentType<SVGProps<SVGSVGElement>>;
+  iconSrc: StaticImageData;
   offset?: boolean;
 }
 
 export const BENEFITS: Benefit[] = [
   {
     title: '온/오프라인 병행',
     descriptions: '모교 출신 멘토들과의\n 24시간 질의응답',
-    Icon: Group,
+    iconSrc: Group,
   },
   {
     title: '효율적인 프로세스',
     descriptions: '실제 스타트업에서 쓰이는\n 프로세스 차용',
-    Icon: Graph,
+    iconSrc: Graph,
     offset: true,
   },
   {
     title: '포트폴리오 강화',
     descriptions: '학부생으로서 가질 수 있는\n 최대의 프로젝트 경험',
-    Icon: Up,
+    iconSrc: Up,
   },
   {
     title: '취업 멘토링',
     descriptions: '서류와 면접 준비에\n 대한 멘토들과의 커피챗',
-    Icon: Chat,
+    iconSrc: Chat,
     offset: true,
   },
 ];