Merge pull request #119 from Devminjeong-eum/feat/DEV-186

[DEV-186] 랜딩 페이지 구현

src/components/pages/login/Carousel.tsx

@@ -0,0 +1,53 @@
+import FirstSlide from './FirstSlide';
+import SecondSlide from './SecondSlide';
+import ThirdSlide from './ThirdSlide';
+
+import { Fragment, useEffect, useState } from 'react';
+
+const slides = [<FirstSlide />, <SecondSlide />, <ThirdSlide />];
+
+const Carousel = () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(() => {
+    const slideInterval = setInterval(() => {
+      setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length);
+    }, 4000);
+
+    return () => {
+      clearInterval(slideInterval);
+    };
+  }, []);
+
+  return (
+    <div className="relative overflow-hidden w-full h-full">
+      {/* 캐러셀 슬라이드 */}
+      <div
+        className="flex flex-row items-center transition-transform duration-300 h-full"
+        style={{
+          transform: `translateX(-${currentSlide * (100 / slides.length)}%)`,
+          width: `${slides.length * 100}%`,
+        }}
+      >
+        {slides.map((slide, index) => (
+          <Fragment key={index}>{slide}</Fragment>
+        ))}
+      </div>
+
+      {/*페이징 인디케이터*/}
+      <div className="flex justify-center mb-[1.375rem] space-x-2 w-full z-10 absolute bottom-1">
+        {Array.from({ length: slides.length }).map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentSlide(index)}
+            className={`h-1.5 rounded-full transition-all duration-300 ${
+              currentSlide === index ? 'w-4 bg-[#4B4AC5]' : 'w-1.5 bg-[#D6DDF6]'
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;

src/components/pages/login/FirstSlide.tsx

@@ -0,0 +1,21 @@
+import LogoSvg from '@/components/svg-component/LogoSvg';
+
+const FirstSlide = () => {
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-full rounded-[30px] bg-landing-first-illust-gradient mx-5">
+      <div className="w-[7.25rem] h-[7.25rem]">
+        <LogoSvg />
+      </div>
+      <span className="font-gugi text-[#5b5bde] text-3xl leading-7 tracking-wide font-normal pt-5">
+        데브말싸미
+      </span>
+      <span className="text-[#46474F] text-[1.063rem] leading-[1.625rem] text-center font-medium pt-3">
+        개발 용어의 발음이 궁금할땐?
+        <br />
+        데브말싸미로 검색해 보세요!
+      </span>
+    </div>
+  );
+};
+
+export default FirstSlide;

src/components/pages/login/SecondSlide.tsx

@@ -0,0 +1,26 @@
+import LandingCarouselSecond from '@/components/svg-component/LandingCarouselSecond';
+
+const SecondSlide = () => {
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-full rounded-[30px] bg-landing-first-illust-gradient mx-5">
+      <div className="w-[17.5rem] h-[15.6rem]">
+        <LandingCarouselSecond className="w-full h-full" />
+      </div>
+      <span className="text-main-black text-xl leading-[1.125rem] tracking-tight font-semibold pt-7">
+        궁금한 IT 용어를 검색해 보세요.
+      </span>
+      <span className="text-[#52535B] text-base leading-6 text-center tracking-tight font-medium pt-3 pb-[43px]">
+        해당 용어의
+        <span className="text-[#4046E4] font-semibold">
+          {' '}
+          올바른/잘못된 발음
+        </span>
+        을 알려주고
+        <br />
+        용어의 의미와 예문까지 볼 수 있어요.
+      </span>
+    </div>
+  );
+};
+
+export default SecondSlide;

src/components/pages/login/ThirdSlide.tsx

@@ -0,0 +1,22 @@
+import LandingCarouselThird from '@/components/svg-component/LandingCarouselThird';
+
+const ThirdSlide = () => {
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-full rounded-[30px] bg-landing-first-illust-gradient mx-5">
+      <div className="w-[17.5rem] h-[15.6rem]">
+        <LandingCarouselThird className="w-full h-full" />
+      </div>
+      <span className="text-main-black text-xl leading-[1.125rem] tracking-tight font-semibold pt-7">
+        퀴즈를 풀고, 친구와 공유해요.
+      </span>
+      <span className="text-[#52535B] text-base leading-6 text-center tracking-tight font-medium pt-3 pb-[43px]">
+        <span className="text-[#4046E4] font-semibold">IT 용어 발음 퀴즈</span>
+        로 나의 실력을 확인하고
+        <br />
+        나의 점수를 친구에게 공유해 보세요.
+      </span>
+    </div>
+  );
+};
+
+export default ThirdSlide;

src/components/pages/login/index.tsx

@@ -2,28 +2,18 @@
 
 import KakaotalkSvg from '@/components/svg-component/KakaotalkSvg';
 import { WORD_LIST_PATH } from '@/routes/path.ts';
-import LogoSvg from '@/components/svg-component/LogoSvg';
 import Link from 'next/link';
+import Carousel from './Carousel';
 
 export default function Login() {
   const handleKakaoLogin = () => {
     window.location.href = '/api/auth/kakao';
   };
 
   return (
-    <div className="flex flex-col items-center justify-between px-5 pt-44 pb-[2.375rem] h-full">
-      <div className="flex flex-col items-center">
-        <div className="w-[102px] h-[102px]">
-          <LogoSvg />
-        </div>
-        <span className="font-gugi text-[#4B4AC5] text-2xl font-normal tracking-wide pt-1.5">
-          데브말싸미
-        </span>
-        <span className="text-main-black text-base leading-5 font-normal pt-1">
-          당신의 개발용어 발음을 도와드릴게요!
-        </span>
-      </div>
-      <div className="w-full flex flex-col gap-2 pb-7">
+    <div className="flex flex-col items-center justify-between gap-[1.125rem] pt-[1.375rem] pb-[2.375rem] w-full h-full bg-landing-gradient">
+      <Carousel />
+      <div className="w-full flex flex-col gap-2 pb-7 px-5">
         <button
           className="relative flex items-center justify-center bg-[#FFE34E] rounded-2xl p-3.5 w-full"
           onClick={handleKakaoLogin}