fix: svgr 오류 수정 (#53)

* feat: tailwind pretendard 폰트 설정

* refactor: lint, prettier 설정

* feat: svg.webpack 추가

* feat: arrow 변경

* fix: svgr 오류 수정

* fix: svgr 오류 수정

src/app/about-us/_components/ActivicyCard/index.tsx

@@ -0,0 +1,19 @@
+// components/CardLayout.js
+import Image from 'next/image';
+
+const ActivityCard = ({ imageSrc, title, description, isImageRight, description2 }) => {
+  return (
+    <div className={`flex ${isImageRight ? 'flex-row-reverse' : 'flex-row'} items-center my-8`}>
+      <div className="w-1/2">
+        <Image src={imageSrc} alt={title} width={500} height={300} className="object-cover" />
+      </div>
+      <div className="w-1/2 px-6">
+        <h3 className="text-lg font-medium text-blue-500 mb-4">{title}</h3>
+        <p className="font-medium text-xl mb-4">{description}</p>
+        <p className="font-medium text-[#6B7684]">{description2}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityCard;

src/component/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 // import { FaAngleDown } from 'react-icons/fa';
-import DropDown from '@/public/icon/arrow-down.svg';
+import DropDown from '@/public/assets/arrow-down.svg';
 
 import { AnimatePresence, motion } from 'framer-motion';
 

src/component/ProfileCard.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+// SVG 파일은 React 컴포넌트로 사용
+import AvatarSvg from '@/public/profile.svg';
+
+interface ProfileCardProps {
+  name: string;
+  description: string | null;
+  avatar: string | null; // avatar가 URL이면 string
+  github: string | null;
+  instagram: string | null;
+  blog: string | null;
+  role: string | null;
+}
+
+export const ProfileCard: React.FC<ProfileCardProps> = ({
+  role,
+  name,
+  description,
+  avatar,
+  github,
+  instagram,
+  blog,
+}) => {
+  const URL = [
+    {
+      name: 'github',
+      url: github,
+    },
+    {
+      name: 'instagram',
+      url: instagram,
+    },
+    {
+      name: 'blog',
+      url: blog,
+    },
+  ];
+
+  return (
+    <div className="relative w-72 border border-wink-400 rounded-lg">
+      {role && (
+        <div className="absolute -top-3 left-5 bg-white px-3 py-0.5 rounded-full border border-wink-400 text-sm font-bold">
+          {role}
+        </div>
+      )}
+
+      <div className="flex space-x-2 p-4">
+        {/* avatar가 URL인 경우 next/image 사용, 그렇지 않으면 SVG 컴포넌트 렌더링 */}
+        {avatar ? (
+          <Image
+            src={avatar}
+            alt="Profile"
+            width={64}
+            height={64}
+            className="w-16 h-16 object-cover rounded-full"
+          />
+        ) : (
+          <AvatarSvg className="w-16 h-16 object-cover rounded-full" />
+        )}
+        <div className="flex flex-col">
+          <h2 className="text-lg font-bold mt-1.5">{name}</h2>
+          {description && <p className="w-44 text-gray-600 truncate">{description}</p>}
+        </div>
+      </div>
+
+      <div className="flex justify-around border-t border-wink-400 py-3 px-5">
+        {URL.map((url) => (
+          <Link
+            key={url.name}
+            href={url.url || ''}
+            aria-disabled={!url.url}
+            className="text-blue-600 font-roboto font-bold italic uppercase aria-disabled:cursor-default aria-disabled:text-wink-200"
+          >
+            {url.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};

src/component/page/Footer.tsx

@@ -1,49 +1,48 @@
 import React from 'react';
 
-import Image, { StaticImageData } from 'next/image';
 import Link from 'next/link';
 
-import Logo from '@/public/footer/logo.svg';
-import GithubIcon from '@/public/icon/footer/github.svg';
-import InstagramIcon from '@/public/icon/footer/instagram.svg';
-import TistoryIcon from '@/public/icon/footer/tistory.svg';
+import Logo from '@/public/wink_footer_logo.svg';
+import Github from '@/public/wink_github.svg';
+import Instagram from '@/public/wink_instagram.svg';
+import Tistory from '@/public/wink_tistory.svg';
 
 interface Link {
   id: string;
   href: string;
-  icon: StaticImageData;
+  icon: React.ReactNode;
 }
 
 const LINKS: Link[] = [
   {
     id: 'github',
     href: 'https://github.com/KMU-WINK',
-    icon: GithubIcon,
+    icon: <Github />,
   },
   {
     id: 'instagram',
     href: 'https://www.instagram.com/kmu_wink/',
-    icon: InstagramIcon,
+    icon: <Instagram />,
   },
   {
     id: 'tistory',
     href: 'https://cs-kookmin-club.tistory.com/category/WINK-%28Web%20%26%20App%29',
-    icon: TistoryIcon,
+    icon: <Tistory />,
   },
 ];
 
 export const Footer: React.FC = () => {
   return (
     <footer className="flex flex-col py-20 items-center justify-center w-full bg-white mt-auto">
       <div className="flex justify-center gap-1 mb-7">
-        <Image src={Logo} alt={'logo'} width={36} />
+        <Logo />
         <p className="text-lg text-slate-400">WINK</p>
       </div>
 
       <ul className="flex justify-center list-none gap-5 mb-7">
         {LINKS.map((link) => (
           <Link key={link.id} href={link.href}>
-            <Image className="h-14" src={link.icon} alt={link.id} />
+            {link.icon}
           </Link>
         ))}
       </ul>

src/component/page/Header.tsx

@@ -15,17 +15,15 @@ import { WinkApi } from '@/api';
 
 import Dropdown from '@/public/icon/arrow-down.svg';
 import logo from '@/public/logo.png';
-import avatar from '@/public/profile.svg';
+import AvatarPlaceholder from '@/public/profile.svg';
 
+// SVG를 컴포넌트로 사용
 import { AnimatePresence, motion } from 'framer-motion';
 
 export const Header: React.FC = () => {
   const router = useRouter();
-
   const pathname = usePathname();
-
   const { member } = useMemberStore();
-
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
 
   const ITEMS = [
@@ -74,7 +72,6 @@ export const Header: React.FC = () => {
 
   const handleLogout = () => {
     WinkApi.Request.removeToken();
-
     setActiveDropdown(null);
   };
 
@@ -90,7 +87,9 @@ export const Header: React.FC = () => {
               <div key={item.title} className={item.mobileHide ? 'hidden sm:block' : ''}>
                 <li className="font-medium text-sm relative cursor-pointer">
                   <div
-                    className={`flex items-center gap-1 ${pathname.startsWith(item.href) ? 'text-wink-500' : ''}`}
+                    className={`flex items-center gap-1 ${
+                      pathname.startsWith(item.href) ? 'text-wink-500' : ''
+                    }`}
                     onClick={() => {
                       if (item.dropdown) {
                         handleDropdownToggle(item.title);
@@ -114,7 +113,9 @@ export const Header: React.FC = () => {
                         {item.dropdown.map((subItem) => (
                           <li
                             key={subItem.href}
-                            className={`px-4 py-2 hover:bg-gray-100 ${pathname.startsWith(subItem.href) ? 'text-wink-500' : ''}`}
+                            className={`px-4 py-2 hover:bg-gray-100 ${
+                              pathname.startsWith(subItem.href) ? 'text-wink-500' : ''
+                            }`}
                             onClick={() => {
                               router.push(subItem.href);
                               setActiveDropdown(null);
@@ -136,13 +137,17 @@ export const Header: React.FC = () => {
                   className="flex items-center gap-2 cursor-pointer"
                   onClick={() => handleDropdownToggle('profile')}
                 >
-                  <Image
-                    src={member.avatar || avatar}
-                    alt="Profile"
-                    width={32}
-                    height={32}
-                    className="rounded-full"
-                  />
+                  {member.avatar ? (
+                    <Image
+                      src={member.avatar}
+                      alt="Profile"
+                      width={32}
+                      height={32}
+                      className="rounded-full"
+                    />
+                  ) : (
+                    <AvatarPlaceholder className="w-8 h-8 rounded-full" /> // SVG 로드
+                  )}
                   <span className="font-bold text-sm">{member.name}</span>
                   <Dropdown />
                 </div>