Feature/page lending

src/components/common/Gnb.tsx

@@ -14,14 +14,17 @@ function Gnb() {
   const { pathname } = useRouter();
 
   return (
-    <div
-      className={cn('z-50 fixed top-0 inset-x-0 bg-white/70 backdrop-blur-md', {
-        'bg-gray-100/70 backdrop-blur-md': pathname === '/', //랜딩 페이지용 배경 색
-      })}
-    >
-      {/*  ㄴ백드롭 필터 적용*/}
-      <header className='mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px]  min-w-[343px]'>
-        <nav className='flex justify-between items-center bg-black  w-full h-[50px] md:h-[70px] rounded-[12px] md:rounded-[16px] mt-[16px] md:mt-[24px] px-[20px] md:px-[60px]'>
+    <div className='z-50 fixed top-0 inset-x-0'>
+      <div
+        className={cn(
+          'absolute inset-0 h-12 backdrop-blur-[2px]',
+          pathname === '/' ? 'bg-gray-100/70' : 'bg-white/60',
+        )}
+      />
+      <div className='absolute inset-0  bg-gradient-to-b from-white/80 to-transparent' />
+
+      <header className='relative z-10 mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px] min-w-[343px]'>
+        <nav className='flex justify-between items-center bg-black w-full h-[50px] md:h-[70px] rounded-[12px] md:rounded-[16px] mt-[16px] md:mt-[24px] px-[20px] md:px-[60px]'>
           <Logo />
           <AuthMenu />
         </nav>

src/components/home/ContentSection.tsx

@@ -0,0 +1,120 @@
+import Image from 'next/image';
+
+import { ImageCard } from '../common/card/ImageCard';
+
+export const ContentSection = () => {
+  return (
+    <div className='mx-auto max-w-[640px]  min-w-[343px] mt-12 md:mt-[80px] xl:mt-[160px]'>
+      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] md:max-w-[640px] shadow'>
+        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div className='absolute top-[24px] md:top-[56px] left-[24px] md:left-[32px]'>
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block  mb-[8px]'>
+              매달 새롭게 만나는 <br />
+              와인 추천 콘탠츠
+            </span>
+            <p className='custom-text-xs-regular text-gray-500'>
+              매달 다양한 인기 와인을 만나보세요
+            </p>
+          </div>
+          <div className='absolute w-[290px] md:w-[356px] h-[241px] md:h-[277px] right-0 bottom-[24px] md:bottom-0 bg-gray-100 rounded-2xl overflow-hidden  md:overflow-visible top-[160px] md:top-[42px]'>
+            <span className='absolute text-[#7E7E7E] md:text-[#50545B] md:font-bold custom-text-lg-bold md:custom-text-2lg-bold left-5 top-5'>
+              이번 달 추천 와인
+            </span>
+            <div className='flex gap-2.5 ml-5 mt-[61px] '>
+              <div className='w-[193px] flex-shrink-0'>
+                <ImageCard
+                  className='bg-white h-[160px] rounded-lg border-none overflow-hidden shadow'
+                  imageSrc='/assets/lendingwine3.png'
+                  imageClassName='h-[165px] w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[9px] w-[80px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                    <span>별점 나중에</span>
+                    <p className='text-[10px] text-gray-500'>Sentinel Carbernet Sauvignon 2016</p>
+                  </div>
+                </ImageCard>
+              </div>
+              <div className='w-[193px] flex-shrink-0'>
+                <ImageCard
+                  className='bg-white h-[160px] rounded-lg border-none overflow-hidden shadow'
+                  imageSrc='/assets/lendingwine3.png'
+                  imageClassName='h-[165px] w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[9px] w-[80px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                    <span>별점 나중에</span>
+                    <p className='text-[10px] text-gray-500'>Sentinel Carbernet Sauvignon 2016</p>
+                  </div>
+                </ImageCard>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'>
+        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div className='absolute top-[24px] md:top-[55px] left-[24px] md:left-[32px]'>
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-2'>
+              다양한 필터로 찾는
+              <br />내 맞춤 와인
+            </span>
+            <p className='custom-text-xs-regular text-gray-500'>
+              와인 타입, 가격, 평점으로 <br />
+              나에게 맞는 와인을 쉽게 검색해요.
+            </p>
+          </div>
+          <div className='absolute top-[185px] left-[42px] hidden md:block'>
+            <Image width={180} height={100} alt='필터이미지2' src='/assets/lendingfilter2.png' />
+          </div>
+          <div className='absolute top-[245px] left-[32px] hidden md:block'>
+            <Image width={200} height={100} alt='필터이미지1' src='/assets/lendingfilter1.png' />
+          </div>
+          <Image
+            width={280}
+            height={100}
+            alt='필터로 찾은 내 맞춤 와인'
+            src='/assets/lendingwinecard.png'
+            className='absolute right-[-10px] top-[120px] md:top-[20px]'
+          />
+        </div>
+        <div
+          className='pointer-events-none absolute inset-0 rounded-xl'
+          style={{
+            background:
+              'linear-gradient(to top, #EBEEF4 0%, transparent 10%, transparent 90%, #EBEEF4 100%)',
+          }}
+        />
+      </div>
+      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[64px] md:mb-[80px] xl:mb-[104px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'>
+        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div className='absolute top-[24px] md:top-[55px] left-[24px] md:left-[28px]'>
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-2'>
+              직관적인
+              <br />
+              리뷰 시스템
+            </span>
+            <p className='custom-text-xs-regular text-gray-500'>
+              더 구체화된 리뷰 시스템으로
+              <br />
+              쉽고 빠르게 와인 리뷰를 살펴보세요
+            </p>
+          </div>
+          <Image
+            width={272}
+            height={100}
+            alt='와인 리뷰 예시 이미지'
+            src='/assets/lendingreviewcard.png'
+            className='absolute right-[-10px] top-[120px] md:right-[42px] md:top-[-65px]'
+          />
+        </div>
+        <div
+          className='pointer-events-none absolute inset-0 rounded-xl'
+          style={{
+            background:
+              'linear-gradient(to top, #EBEEF4 0%, transparent 5%, transparent 95%, #EBEEF4 100%)',
+          }}
+        />
+      </div>
+    </div>
+  );
+};

src/components/home/HeroSection.tsx

@@ -0,0 +1,106 @@
+import Image from 'next/image';
+
+import HeroSectionLayout from './HeroSectionLayout';
+import { ImageCard } from '../common/card/ImageCard';
+
+export const HeroSection = () => {
+  return (
+    <header>
+      <div className='relative h-[403px] md:h-[394px] xl:h-[535px] bg-[#171A21] flex items-center justify-center overflow-hidden rounded-lg'>
+        <div className='flex flex-col items-center h-full'>
+          <div>
+            <Image
+              src='/assets/lendinglogo.png'
+              alt='와인 로고 이미지'
+              width={100}
+              height={100}
+              className='w-[81px] md:w-[100px] h-[23px] md:h-[30px] text-primary mt-[58px] md:mt-[80px] xl:mt-[112px]'
+            />
+          </div>
+          <span className='text-white text-center custom-text-xl-bold md:custom-text-2xl-bold mt-6 md:mt-8'>
+            한 곳에서 관리하는 <br />
+            나만의 와인창고
+          </span>
+          <div className='relative w-[720px] h-[420px] mt-auto mx-auto translate-y-[80px] md:translate-y-[40px] xl:translate-y-[120px] scale-[1] md:scale-[0.7] xl:scale-[1]'>
+            {/* 기준 박스 translate-y 아래로-ㅁㅁ만큼 밀어내기 */}
+            <HeroSectionLayout className='top-4 left-1/2 z-30 -translate-x-1/2'>
+              <ImageCard
+                imageSrc='/assets/lendingwine3.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  {/* 모달쪽에 구현해둔 별점이 있음 */}
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+
+            {/* 좌우 위 박스 */}
+            <HeroSectionLayout className='top-10 left-[calc(50%-340px)] z-20'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+            <HeroSectionLayout className='top-10 left-[calc(50%+100px)] z-20'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+
+            {/* 좌우 아래 박스 */}
+            <HeroSectionLayout className='top-[80px] left-[calc(50%-480px)] z-10'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+            <HeroSectionLayout className='top-[80px] left-[calc(50%+240px)] z-10'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

src/components/home/HeroSectionLayout.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface HeroSectionLayoutProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const HeroSectionLayout = ({ children, className }: HeroSectionLayoutProps) => {
+  const baseClass = 'absolute w-[240px] h-[185px] rounded-xl shadow-xl bg-white';
+
+  return <div className={cn(baseClass, className)}>{children}</div>;
+};
+
+export default HeroSectionLayout;

src/pages/index.tsx

@@ -1,3 +1,28 @@
+import Link from 'next/link';
+
+import { ContentSection } from '@/components/home/ContentSection';
+import { HeroSection } from '@/components/home/HeroSection';
+import { Button } from '@/components/ui/button';
+
 export default function Home() {
-  return <main>메인</main>;
+  return (
+    <div className='mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px]  min-w-[343px] mt-6 xl:mt-[80px]'>
+      <HeroSection />
+      <main>
+        <ContentSection />
+      </main>
+      <footer>
+        <Link href='/wines'>
+          <Button
+            variant='purpleDark'
+            size='onlyLanding'
+            width='onlyLanding'
+            className='block mx-auto mb-[62px]'
+          >
+            와인 보러가기
+          </Button>
+        </Link>
+      </footer>
+    </div>
+  );
 }