Feat/change rending

src/app/layout.tsx

@@ -36,6 +36,13 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{

src/app/page.tsx

@@ -1,5 +1,5 @@
-import ScreenRoot from '@/feature/root/components/ScreenRoot';
+import ScreenNewRoot from '@/feature/root/components/ScreenNewRoot';
 
 export default function Page() {
-  return <ScreenRoot />;
+  return <ScreenNewRoot />;
 }

src/feature/root/components/FlashRending.tsx

@@ -0,0 +1,17 @@
+import Image from 'next/image';
+
+const FlashRending = () => {
+  return (
+    <div className='flex min-h-screen items-center justify-center bg-[#FFCD14]'>
+      <Image
+        src='/assets/login/white-cheese-logo.svg'
+        alt='Cheese Logo'
+        width={169}
+        height={36}
+        priority
+      />
+    </div>
+  );
+};
+
+export default FlashRending;

src/feature/root/components/RendingBody.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from '@/components/ui/carousel';
+import { buildQuery } from '@/global/utils/buildQuery';
+import Image from 'next/image';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const KAKAO_AUTH_URL = `https://dev.say-cheese.me/oauth2/authorization/kakao`;
+
+export const RendingBody = () => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const searchParams = useSearchParams();
+  const redirect = searchParams.get('redirect');
+
+  const slides = [
+    {
+      src: '/assets/rending/new-swipe/1.png',
+      alt: '앨범 목록 화면',
+      width: 260,
+      height: 530,
+      title: '이벤트마다 만드는 공유앨범',
+      description: '감튀 모임부터 찐친 여행까지',
+    },
+    {
+      src: '/assets/rending/new-swipe/2.png',
+      alt: 'QR 코드 공유',
+      width: 260,
+      height: 530,
+      title: '이벤트마다 모인 자리에서 바로 공유',
+      description: '감튀 모임부터 앨범 만들고 초대까지 딱 10초',
+    },
+    {
+      src: '/assets/rending/new-swipe/3.png',
+      alt: '베스트컷',
+      width: 312.5,
+      height: 530.3,
+      title: '이벤트마다 한눈에 보는 베스트컷',
+      description: '사진 고르는 고민 이제 끝',
+    },
+    {
+      src: '/assets/rending/new-swipe/4.png',
+      alt: '네컷추억',
+      width: 289,
+      height: 530,
+      title: '딱 네컷으로 남는 추억',
+      description: '앨범이 닫히면 사라지는 원본 사진들',
+    },
+  ];
+
+  // 캐러셀 API를 통해 현재 슬라이드 추적
+  useEffect(() => {
+    if (!api) return;
+
+    api.on('select', () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const handleKakaoLogin = async () => {
+    try {
+      const kakaoUrl = redirect
+        ? `${KAKAO_AUTH_URL}${buildQuery({ redirect })}`
+        : KAKAO_AUTH_URL;
+
+      window.location.href = kakaoUrl;
+    } catch (err) {
+      console.error('카카오 인증 GET 요청 실패:', err);
+    }
+  };
+
+  return (
+    <section className='bg-background-white-muted relative flex h-screen w-full flex-col'>
+      {/* 캐러셀 영역 */}
+      <div className='flex h-screen w-full flex-col items-center justify-start px-4 pt-12'>
+        <Carousel
+          setApi={setApi}
+          className='w-full max-w-md'
+          opts={{
+            loop: true,
+            align: 'center',
+          }}
+        >
+          <CarouselContent>
+            {slides.map((slide, index) => (
+              <CarouselItem key={index}>
+                <div className='flex items-center justify-center overflow-hidden rounded-3xl'>
+                  <Image
+                    src={slide.src}
+                    alt={slide.alt}
+                    width={slide.width}
+                    height={slide.height}
+                    className='object-contain'
+                    priority={index === 0}
+                  />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+
+      {/* 하단 흰색 배경 영역 - 이미지 위에 오버레이 */}
+      <div className='absolute bottom-0 z-10 flex h-[242px] w-full flex-col items-center bg-white px-4 pt-8 pb-5'>
+        {/* 텍스트 영역 */}
+        <div className='mb-6 flex flex-col items-center text-center'>
+          <h2 className='text-text-basic text-[24px] font-[600]'>
+            {slides[current].title}
+          </h2>
+          <p className='mt-1 text-[16px] font-[500] text-[#746181]'>
+            {slides[current].description}
+          </p>
+        </div>
+
+        {/* 인디케이터 점들 */}
+        <div className='flex gap-2'>
+          {slides.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => api?.scrollTo(index)}
+              className={`h-1.5 rounded-full transition-all ${
+                current === index ? 'w-6 bg-gray-700' : 'w-1.5 bg-gray-200'
+              }`}
+              aria-label={`슬라이드 ${index + 1}로 이동`}
+            />
+          ))}
+        </div>
+
+        {/* 카카오 로그인 버튼 */}
+        <div
+          className='mt-auto flex h-[56px] w-full cursor-pointer items-center justify-center gap-2 rounded-[6px] bg-[#FEE500]'
+          onClick={handleKakaoLogin}
+        >
+          <Image
+            src='/assets/login/kakao-logo.svg'
+            width={18}
+            height={18}
+            alt='카카오 로고'
+          />
+          <span className='text-[15px] font-[600] text-[rgba(0,0,0,0.85)]'>
+            카카오 로그인
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};

src/feature/root/components/ScreenNewRoot.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useCheckAuth } from '@/global/hooks/useCheckAuth';
+import { useEffect, useState } from 'react';
+import FlashRending from './FlashRending';
+import { RendingBody } from './RendingBody';
+
+const ScreenNewRoot = () => {
+  const { isAuthed } = useCheckAuth();
+  const [showSplash, setShowSplash] = useState(true);
+
+  console.log('ScreenNewRoot - isAuthed:', isAuthed, 'showSplash:', showSplash);
+
+  // 비로그인 상태일 때만 2초 후 스플래시 숨김
+  useEffect(() => {
+    if (isAuthed === false) {
+      const timer = setTimeout(() => {
+        setShowSplash(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [isAuthed]);
+
+  // 인증 확인 중이거나 비로그인 상태에서 스플래시 표시 중일 때
+  if (isAuthed === null || (isAuthed === false && showSplash)) {
+    return <FlashRending />;
+  }
+
+  // 로그인 상태이거나 스플래시 시간이 지난 비로그인 사용자
+  return (
+    <div className='bg-background-brand flex min-h-screen flex-col items-center justify-center'>
+      <RendingBody />
+    </div>
+  );
+};
+
+export default ScreenNewRoot;