[feat] 로그인 온보딩 디자인 구현

package.json

@@ -21,6 +21,7 @@
     "next": "14.2.23",
     "react": "^18",
     "react-dom": "^18",
+    "swiper": "^11.2.4",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/login/page.tsx

@@ -1,11 +1,30 @@
-import KakaoLoginButton from '@/features/auth/ui/KakaoLoginButton';
+'use client';
+
+import { useState } from 'react';
+
+import { LoginFeature } from '@/features/auth/login/ui/LoginFeature';
+import { OnboardingFeature } from '@/features/onboarding/ui/OnboardingFeature';
+
+export default function LoginPage() {
+  const [showOnboarding, setShowOnboarding] = useState(true);
+
+  const handleOnboardingComplete = () => {
+    setShowOnboarding(false);
+  };
 
-function page() {
   return (
-    <div className="space-y-4">
-      <KakaoLoginButton />
+    <div className="flex h-dvh w-full justify-center">
+      <div
+        className="h-full w-full max-w-[600px] flex-col items-center justify-center bg-black"
+        style={{
+          backgroundImage: `url(${'/images/login/onboarding/onboarding-bg.png'})`,
+          backgroundSize: 'contain',
+          backgroundPosition: 'bottom',
+          backgroundRepeat: 'no-repeat',
+        }}
+      >
+        {showOnboarding ? <OnboardingFeature onComplete={handleOnboardingComplete} /> : <LoginFeature />}
+      </div>
     </div>
   );
 }
-
-export default page;

src/features/auth/login/ui/LoginFeature.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+import KakaoLoginButton from '../../ui/KakaoLoginButton';
+
+export function LoginFeature() {
+  const imgUrl = '/images/login/onboarding/onboarding-login.png';
+  return (
+    <div className="flex h-full w-full flex-col">
+      <div className="relative flex h-full w-full flex-col items-center justify-between">
+        {/* 이미지 배치가 안되서 임시로 top-[45%]사용했습니다. */}
+        <div className="absolute left-1/2 top-[45%] h-[23%] w-full -translate-x-1/2 -translate-y-1/2 transform">
+          {/* 이미지 가운데 배치가 안되서 임시로 pl-[1rem]사용했습니다. */}
+          <Image src={imgUrl} alt="온보딩 이미지" fill className="object-contain pl-[1rem]" priority />
+        </div>
+
+        <div className="absolute bottom-0 w-full space-y-4 px-6 pb-10">
+          <KakaoLoginButton />
+          <KakaoLoginButton /> {/* 구글 , 애플 로그인 버튼으로 바꿀 예정 */}
+        </div>
+      </div>
+    </div>
+  );
+}

src/features/auth/ui/KakaoLoginButton.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+// 추가적으로 디자인이 수정될 페이지 같아서 임시로 작성했습니다
+
+import { Typography } from '@/shared/ui/typography';
+
 import { kakaoLogin } from '../model/providers/kakao';
 
 function KakaoLoginButton() {
@@ -13,11 +17,13 @@ function KakaoLoginButton() {
   );
 
   return (
-    <button onClick={kakaoLogin} className="flex items-center rounded bg-yellow-300 px-4 py-2">
-      <span className="mr-2">
-        <KakaoIcon />
-      </span>
-      카카오 로그인
+    <button
+      onClick={kakaoLogin}
+      className="flex w-full items-center justify-between rounded-md bg-yellow-300 px-4 py-[15px] text-gray-800"
+    >
+      <KakaoIcon />
+      <Typography variant="body-2">카카오톡으로 시작하기</Typography>
+      <div></div>
     </button>
   );
 }

src/features/onboarding/config/slides.ts

@@ -0,0 +1,17 @@
+export const slides = [
+  {
+    id: 1,
+    description: ['과한 시작정보는 빼고', '내가 원하는 정보만'],
+    imageUrl: '/images/login/onboarding/onboarding-1.png',
+  },
+  {
+    id: 2,
+    description: ['QR로 쉽게 공유하고', '블루투스로 쉽게 아카이빙하는'],
+    imageUrl: '/images/login/onboarding/onboarding-2.png',
+  },
+  {
+    id: 3,
+    description: ['손쉽게 툭 공유하는', '나만의 명함'],
+    imageUrl: '/images/login/onboarding/onboarding-3.png',
+  },
+];

src/features/onboarding/ui/OnboardingCarousel.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Swiper as SwiperType } from 'swiper';
+import { Navigation, Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
+import { slides } from '@/features/onboarding/config/slides';
+import { Button } from '@/shared/ui/button';
+import { Typography } from '@/shared/ui/typography';
+
+import OnboardingSlide from './OnboardingSlide';
+
+interface OnboardingCarouselProps {
+  onComplete: () => void;
+}
+
+function OnboardingCarousel({ onComplete }: OnboardingCarouselProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const swiperRef = useRef<SwiperType | null>(null);
+
+  const handleNext = () => {
+    if (activeIndex === slides.length - 1) {
+      onComplete();
+    } else if (swiperRef.current) {
+      swiperRef.current.slideNext();
+    }
+  };
+
+  const handleSlideChange = (swiper: SwiperType) => {
+    setActiveIndex(swiper.realIndex);
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center">
+      <div className="relative w-full flex-1">
+        {/*module Pagination사용으로 수정 */}
+        <Swiper
+          modules={[Pagination, Navigation, Autoplay]}
+          onSwiper={(swiper) => {
+            swiperRef.current = swiper;
+          }}
+          onSlideChange={handleSlideChange}
+          pagination={{
+            clickable: true,
+            el: '.custom-pagination',
+            bulletClass: 'inline-block h-2 w-2 rounded-full mx-1 bg-white opacity-50',
+            bulletActiveClass: 'opacity-100',
+          }}
+          navigation={false}
+          slidesPerView={1}
+          autoplay={{ delay: 5000, disableOnInteraction: false }}
+          loop={true}
+          className="h-full w-full"
+        >
+          {slides.map((slide) => (
+            <SwiperSlide key={slide.id}>
+              <OnboardingSlide description={slide.description} imageUrl={slide.imageUrl} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        {/**
+         * 커스텀 페이지네이션 위치
+         * 반응형으로 위치 조정
+         */}
+        <div className="absolute bottom-28 left-0 right-0 z-10 sm:bottom-36 md:bottom-40 lg:bottom-48">
+          <div className="custom-pagination flex justify-center"></div>
+        </div>
+      </div>
+
+      <div className="mt-auto w-full bg-black p-6">
+        <Button onClick={handleNext} className="w-full">
+          <Typography variant="body-2">다음</Typography>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default OnboardingCarousel;

src/features/onboarding/ui/OnboardingFeature.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import OnboardingCarousel from './OnboardingCarousel';
+import { OnboardingHeader } from './OnboardingHeader';
+
+/**
+ * OnboardingFeatureProps 설명
+ * onComplete , showOnboarding 상태를 false로 바구는 함수입니다.
+ * 헤더의 건너뛰기 , 모든 온보딩 페이지를 다 확인했을 때 사용합니다.
+ * onComplete = 온보딩 마지막 페이지에서 사용
+ */
+
+interface OnboardingFeatureProps {
+  onComplete: () => void;
+}
+
+export function OnboardingFeature({ onComplete }: OnboardingFeatureProps) {
+  return (
+    <div className="flex h-full w-full flex-col">
+      <OnboardingHeader onComplete={onComplete} />
+      <OnboardingCarousel onComplete={onComplete} />
+    </div>
+  );
+}

src/features/onboarding/ui/OnboardingHeader.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@/shared/ui/typography';
+
+interface OnboardingHeaderProps {
+  onComplete: () => void;
+}
+
+export function OnboardingHeader({ onComplete }: OnboardingHeaderProps) {
+  return (
+    <header className="flex items-center justify-between p-4">
+      <div></div>
+      <button onClick={onComplete} className="font-medium text-gray-500">
+        <Typography variant="body-2">건너뛰기</Typography>
+      </button>
+    </header>
+  );
+}

src/features/onboarding/ui/OnboardingSlide.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image';
+
+import { Typography } from '@/shared/ui/typography';
+
+interface OnboardingSlideProps {
+  description: string[];
+  imageUrl: string;
+}
+
+function OnboardingSlide({ description, imageUrl }: OnboardingSlideProps) {
+  return (
+    <div className="relative flex h-full w-full flex-col items-center">
+      <div className="absolute inset-0 flex w-full items-center justify-center">
+        <div className="relative h-[75%] w-[65%]">
+          <Image src={imageUrl} alt="온보딩 이미지" fill className="object-contain" priority />
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-black via-black to-transparent pt-32">
+        <div className="flex flex-col items-center px-6 pt-16">
+          {description.map((line, index) => (
+            <Typography key={index} variant="title-2">
+              {line}
+            </Typography>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default OnboardingSlide;