[merge] 폼 컴포넌트화 및 마이페이지 반응형 제작

폼 컴포넌트화 및 마이페이지 반응형 제작

client/src/components/common/Advertisement/index.tsx

@@ -1,9 +1,13 @@
-import Image from 'next/image';
+// react
 import React from 'react';
+
+// thrid-party
+import { Icon } from '@iconify/react';
+
 export default function Advertisement() {
   return (
     <div className="flex-col items-center justify-center hidden bg-white border-2 border-gray-100 rounded-lg w-60 md:flex bg-blue-5 h-60">
-      <Image src="/images/advertise.png" alt="Ads" width="60" height="60" />
+      <Icon icon="ri:advertisement-fill" fontSize={60} />
       <p>준비중...</p>
     </div>
   );

client/src/components/common/Avatar/index.tsx

@@ -3,6 +3,9 @@ import Image from 'next/image';
 
 import { positionStyle, avatarSizeStyle } from '@/styles/styleConstant';
 
+// thrid-party
+import { Icon } from '@iconify/react';
+
 // service
 import { BASE_URL } from '@/service/base/api';
 
@@ -24,15 +27,20 @@ export default function Avatar({
   const avatarStyle = `relative rounded-full border border-slate-200 ${avatarSizeStyle[size]} max-w-[200px] max-h-[200px] overflow-hidden`;
   return (
     <div className={avatarStyle}>
-      <Image
-        src={
-          src === `${BASE_URL}` || src === '' ? '/images/user_icon.png' : src
-        }
-        width={80}
-        height={80}
-        alt={alt}
-        className="object-cover w-full h-full"
-      />
+      {src === BASE_URL || src === '' ? (
+        <Icon
+          icon="iconamoon:profile-fill"
+          className="object-cover w-full h-full"
+        />
+      ) : (
+        <Image
+          src={src}
+          width={80}
+          height={80}
+          alt={alt}
+          className="object-cover w-full h-full"
+        />
+      )}
       {hasDot && (
         <div
           className={`${positionStyle[position]} absolute z-10 bg-white rounded-full p-4`}