From 570e9cb1fc64487d4d32e0163b57e5548982fe5e Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Mon, 18 Nov 2024 23:00:44 +0900
Subject: [PATCH] hotfix: merge modal scroll and image error fix

---
 apps/web/src/app/[locale]/mypage/ProfileSection.tsx            | 3 ++-
 .../src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx    | 2 +-
 .../src/app/[locale]/mypage/my-pet/(merge)/MergePreview.tsx    | 2 +-
 apps/web/src/components/GNB/DesktopGNB.tsx                     | 3 ++-
 apps/web/src/components/GNB/MobileGNB.tsx                      | 3 ++-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/[locale]/mypage/ProfileSection.tsx b/apps/web/src/app/[locale]/mypage/ProfileSection.tsx
index 717d567b..cdc721c5 100644
--- a/apps/web/src/app/[locale]/mypage/ProfileSection.tsx
+++ b/apps/web/src/app/[locale]/mypage/ProfileSection.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client';
 
 import { memo } from 'react';
@@ -46,7 +47,7 @@ export const ProfileSection = memo(
       return (
         <section className={profileSectionStyle}>
           <div className={profileImageStyle}>
-            <Image src={data.profileImage ?? ''} alt="profile" width={160} height={160} />
+            <img src={data.profileImage ?? ''} alt="profile" width={160} height={160} />
           </div>
           <div className={profileTextStyle}>
             <p className={profileNameStyle}>{data?.username}</p>
diff --git a/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx b/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx
index 6a77e17b..6bd1a5c1 100644
--- a/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx
+++ b/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx
@@ -155,7 +155,7 @@ const listStyle = cx(
     overflowY: 'auto',
     display: 'flex',
     flexWrap: 'wrap',
-    maxHeight: 'calc(100vh - 542px)',
+    maxHeight: 'calc(100vh - 780px)',
     overflow: 'auto',
   }),
   customScrollStyle,
diff --git a/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePreview.tsx b/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePreview.tsx
index 162b6fe9..b3f8508d 100644
--- a/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePreview.tsx
+++ b/apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePreview.tsx
@@ -45,7 +45,7 @@ export const MergePreview = ({ materialPersona, targetPersona }: MergePersonaPro
 
 const containerStyle = css({
   position: 'relative',
-  padding: '32px',
+  padding: '32px 32px 12px',
   overflow: 'hidden',
   minHeight: 'fit-content',
 });
diff --git a/apps/web/src/components/GNB/DesktopGNB.tsx b/apps/web/src/components/GNB/DesktopGNB.tsx
index 6b784a96..2c62ad49 100644
--- a/apps/web/src/components/GNB/DesktopGNB.tsx
+++ b/apps/web/src/components/GNB/DesktopGNB.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import Image from 'next/image';
 import { getTranslations } from 'next-intl/server';
 import { css, cx } from '_panda/css';
@@ -41,7 +42,7 @@ export async function DesktopGNB() {
             <a href="/mypage" className={profileStyle}>
               <>
                 <div className="profile-image">
-                  <Image src={session.user.image} alt="profile" width={160} height={160} />
+                  <img src={session.user.image} alt="profile" width={160} height={160} />
                 </div>
                 <button className={center()}>
                   <span className="profile-name">{session.user.name}</span>
diff --git a/apps/web/src/components/GNB/MobileGNB.tsx b/apps/web/src/components/GNB/MobileGNB.tsx
index 6a9a3f6b..71ce9a78 100644
--- a/apps/web/src/components/GNB/MobileGNB.tsx
+++ b/apps/web/src/components/GNB/MobileGNB.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client';
 
 import type { ReactNode } from 'react';
@@ -48,7 +49,7 @@ export const MobileGNB = () => {
           {isAuth && (
             <Link href="/mypage">
               <div className="profile-image">
-                <Image src={data.user.image} alt="profile" width={28} height={28} />
+                <img src={data.user.image} alt="profile" width={28} height={28} />
               </div>
             </Link>
           )}