Refacotr: svg 쓰는 컴포넌트 lucide로 교체

frontend/src/assets/icons/bell.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 2C7.79 2 6 3.79 6 6V8C6 10.34 4.34 12 2 12H18C15.66 12 14 10.34 14 8V6C14 3.79 12.21 2 10 2ZM2 14H18V16H2V14ZM12 18H8V16H12V18Z" fill="currentColor"/>
-</svg>

frontend/src/assets/icons/user.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 2C8.34 2 7 3.34 7 5C7 6.66 8.34 8 10 8C11.66 8 13 6.66 13 5C13 3.34 11.66 2 10 2ZM10 10C7.79 10 5.67 10.79 4 12.07V14H16V12.07C14.33 10.79 12.21 10 10 10Z" fill="currentColor"/>
-</svg>

frontend/src/components/Header/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
-import bellIcon from '@/assets/icons/bell.svg';
-import userIcon from '@/assets/icons/user.svg';
+import { Bell, User } from 'lucide-react';
 
 export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -32,16 +31,8 @@ export default function Header({ className, ...props }: HeaderProps) {
         </nav>
       </div>
       <div className="flex items-center gap-4 md:gap-5">
-        <img
-          className="h-4 w-4 sm:h-5 sm:w-5"
-          src={bellIcon}
-          alt="Bell Icon"
-        />
-        <img
-          className="h-4 w-4 sm:h-5 sm:w-5"
-          src={userIcon}
-          alt="User Icon"
-        />
+        <Bell className="h-4 w-4 text-black sm:h-5 sm:w-5" />
+        <User className="h-4 w-4 text-black sm:h-5 sm:w-5" />
       </div>
     </header>
   );

frontend/src/components/ImageUploadModal/CloseButton.tsx

@@ -1,3 +1,4 @@
+import { X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface CloseButtonProps {
@@ -8,7 +9,7 @@ interface CloseButtonProps {
 }
 
 export default function CloseButton({
-  color = 'currentColor',
+  color = '#1e1e1e',
   onClick,
   className,
   size = 32,
@@ -18,30 +19,11 @@ export default function CloseButton({
       className={cn('cursor-pointer border-none bg-none p-1', className)}
       onClick={onClick}
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={size}
-        height={size}
-        viewBox={`0 0 ${size} ${size}`}
-        fill="none"
-        stroke={color}
+      <X
+        color={color}
+        size={size}
         strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <line
-          x1={size * 0.75}
-          y1={size * 0.25}
-          x2={size * 0.25}
-          y2={size * 0.75}
-        ></line>
-        <line
-          x1={size * 0.25}
-          y1={size * 0.25}
-          x2={size * 0.75}
-          y2={size * 0.75}
-        ></line>
-      </svg>
+      />
     </button>
   );
 }