Feat: 로그인/회원가입 페이지 배경 mansonry UI 적용

package.json

@@ -34,6 +34,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.59.0",
+    "react-responsive-masonry": "^2.7.1",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
@@ -49,6 +50,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-responsive-masonry": "^2.6.0",
     "@types/webpack": "^5.28.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",

src/components/auth/AuthLayout.tsx

@@ -1,21 +1,57 @@
 import React from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { cn } from '@/lib/utils';
 
+const MasonryGrid = dynamic(() => import('@/components/auth/MasonryGrid'), { ssr: false });
+
 interface AuthLayoutProps {
   children?: React.ReactNode;
   className?: string;
 }
 const AuthLayout = ({ children, className }: AuthLayoutProps) => {
-  const bgClass = 'flex justify-center items-center bg-gray-100 min-h-screen';
+  const wineImages = [
+    '/assets/wine1.jpg',
+    '/assets/wine2.jpg',
+    '/assets/wine3.jpg',
+    '/assets/wine4.jpg',
+    '/assets/wine5.jpg',
+    '/assets/wine6.jpg',
+    '/assets/wine7.jpg',
+    '/assets/wine8.jpg',
+    '/assets/wine9.jpg',
+    '/assets/wine10.jpg',
+    '/assets/wine11.jpg',
+    '/assets/wine12.jpg',
+    '/assets/wine13.jpg',
+    '/assets/wine14.jpg',
+    '/assets/wine15.jpg',
+    '/assets/wine16.jpg',
+    '/assets/wine17.jpg',
+    '/assets/wine18.jpg',
+    '/assets/wine19.jpg',
+  ];
+
+  const bgClass = 'relative flex justify-center items-center min-h-screen';
   const cardClass = cn(
     'w-full max-w-[21rem] md:max-w-[31rem] py-14 px-5 md:py-16 md:px-12 lg:py-20 flex flex-col items-center justify-center rounded-2xl bg-white border border-gray-300 shadow-[0px_2px_20px_rgba(0,0,0,0.04)]',
     className,
   );
 
   return (
     <div className={bgClass}>
-      <div className={cardClass}>{children}</div>
+      <div className={cardClass}>
+        <div className='absolute top-0 left-0 w-full h-full overflow-hidden z-[-1]'>
+          <div className='relative w-full h-full'>
+            <div className='absolute inset-0 bg-black/50 z-10' />
+            <div className='relative z-0'>
+              <MasonryGrid images={wineImages} />
+            </div>
+          </div>
+        </div>
+        {children}
+      </div>
     </div>
   );
 };

src/components/auth/MasonryGrid.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
+
+interface MasonryGridProps {
+  images: string[];
+}
+
+export default function MasonryGrid({ images }: MasonryGridProps) {
+  return (
+    <ResponsiveMasonry
+      columnsCountBreakPoints={{ 0: 1, 350: 1, 743: 3, 1400: 5 }}
+      className='w-full h-full'
+    >
+      <Masonry gutter='10px'>
+        {images.map((src, i) => (
+          <ImageWithSkeleton key={i} src={src} index={i} />
+        ))}
+      </Masonry>
+    </ResponsiveMasonry>
+  );
+}
+
+function ImageWithSkeleton({ src, index }: { src: string; index: number }) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <div
+      className={`w-full rounded overflow-hidden relative ${
+        !loaded ? 'bg-gray-200 animate-pulse' : ''
+      }`}
+    >
+      <Image
+        src={src}
+        alt={`image-${index}`}
+        width={300}
+        height={200}
+        className={`w-full h-auto block object-cover transition-opacity duration-500 ${
+          loaded ? 'opacity-100' : 'opacity-0'
+        }`}
+        onLoad={() => setLoaded(true)}
+        loading='lazy'
+      />
+    </div>
+  );
+}