🛠 fix : 네이티브에서 레이아웃 이상하게 보이는 현상

src/app/(Main)/layout.tsx

@@ -3,7 +3,7 @@ import { StrictPropsWithChildren } from '@/types';
 
 export default function MainLayout({ children }: StrictPropsWithChildren) {
   return (
-    <div className="px-20">
+    <div className="flex h-full flex-col px-20">
       <MainHeader />
       {children}
     </div>

src/app/(Main)/pick/page.tsx

@@ -43,11 +43,11 @@ export default function Page() {
       </div>
       <div className="relative flex flex-1">
         {(isLottie || !isRendered) && (
-          <div className="absolute inset-0 z-10 flex justify-center bg-black">
+          <div className="absolute inset-0 z-10 flex w-full justify-center bg-black">
             <Lottie animationData={lottiePick} play />
           </div>
         )}
-        <div className="absolute inset-0 flex justify-center bg-black">
+        <div className="absolute inset-0 flex w-full justify-center bg-black">
           <PoseImage src={image} onLoad={() => setIsRendered(true)} />
         </div>
       </div>

src/components/Feed/Photo.tsx

@@ -18,7 +18,7 @@ export default function Photo({ imageKey, source, id, isMarked }: Photo) {
   const router = useRouter();
 
   return (
-    <div className="relative mb-16 inline-block h-fit w-full rounded-8">
+    <div className="relative mb-16 inline-block w-full rounded-8">
       {imageKey && (
         <>
           <Image

src/components/Modal/PoseImage.tsx

@@ -17,29 +17,42 @@ export default function PoseImage({ src, responsive = false, onLoad }: DetailedI
         >
           <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-70" />
           <div className="h-screen w-full">
-            <Image src={src} alt="fullImage" fill className="object-contain" />
+            <Image
+              src={src}
+              alt="fullImage"
+              fill
+              style={{
+                objectFit: 'contain',
+              }}
+            />
           </div>
         </div>
       )}
       {responsive ? (
         <Image
           src={src}
-          alt="상세보기"
-          layout="responsive"
+          style={{
+            objectFit: 'contain',
+            width: '100%',
+            height: 'auto',
+          }}
           priority
+          alt="상세보기"
           width={400}
           height={0}
           onLoad={onLoad}
-          className="cursor-pointer object-contain"
           onClick={() => setIsModalShow(true)}
         />
       ) : (
         <Image
           src={src}
-          fill
-          className="cursor-pointer object-contain"
-          placeholder="blur"
-          blurDataURL={src}
+          width={400}
+          height={0}
+          style={{
+            objectFit: 'contain',
+            width: '100%',
+            height: '100%',
+          }}
           alt="포즈픽"
           onLoad={onLoad}
           onClick={() => setIsModalShow(true)}