Skip to content

Commit cca0b82

Browse files
ono212ono212
authored
Merge pull request #119 from Devminjeong-eum/feat/DEV-186
[DEV-186] 랜딩 페이지 구현
2 parents ce58f9e + adb8431 commit cca0b82

9 files changed

+795
-15
lines changed

‎public/sw.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/pages/login/Carousel.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import FirstSlide from './FirstSlide';
2+
import SecondSlide from './SecondSlide';
3+
import ThirdSlide from './ThirdSlide';
4+
5+
import { Fragment, useEffect, useState } from 'react';
6+
7+
const slides = [<FirstSlide />, <SecondSlide />, <ThirdSlide />];
8+
9+
const Carousel = () => {
10+
const [currentSlide, setCurrentSlide] = useState(0);
11+
12+
useEffect(() => {
13+
const slideInterval = setInterval(() => {
14+
setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length);
15+
}, 4000);
16+
17+
return () => {
18+
clearInterval(slideInterval);
19+
};
20+
}, []);
21+
22+
return (
23+
<div className="relative overflow-hidden w-full h-full">
24+
{/* 캐러셀 슬라이드 */}
25+
<div
26+
className="flex flex-row items-center transition-transform duration-300 h-full"
27+
style={{
28+
transform: `translateX(-${currentSlide * (100 / slides.length)}%)`,
29+
width: `${slides.length * 100}%`,
30+
}}
31+
>
32+
{slides.map((slide, index) => (
33+
<Fragment key={index}>{slide}</Fragment>
34+
))}
35+
</div>
36+
37+
{/*페이징 인디케이터*/}
38+
<div className="flex justify-center mb-[1.375rem] space-x-2 w-full z-10 absolute bottom-1">
39+
{Array.from({ length: slides.length }).map((_, index) => (
40+
<button
41+
key={index}
42+
onClick={() => setCurrentSlide(index)}
43+
className={`h-1.5 rounded-full transition-all duration-300 ${
44+
currentSlide === index ? 'w-4 bg-[#4B4AC5]' : 'w-1.5 bg-[#D6DDF6]'
45+
}`}
46+
/>
47+
))}
48+
</div>
49+
</div>
50+
);
51+
};
52+
53+
export default Carousel;

‎src/components/pages/login/FirstSlide.tsx

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

‎src/components/pages/login/SecondSlide.tsx

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

‎src/components/pages/login/ThirdSlide.tsx

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

‎src/components/pages/login/index.tsx

+4-14
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,18 @@
22

33
import KakaotalkSvg from '@/components/svg-component/KakaotalkSvg';
44
import { WORD_LIST_PATH } from '@/routes/path.ts';
5-
import LogoSvg from '@/components/svg-component/LogoSvg';
65
import Link from 'next/link';
6+
import Carousel from './Carousel';
77

88
export default function Login() {
99
const handleKakaoLogin = () => {
1010
window.location.href = '/api/auth/kakao';
1111
};
1212

1313
return (
14-
<div className="flex flex-col items-center justify-between px-5 pt-44 pb-[2.375rem] h-full">
15-
<div className="flex flex-col items-center">
16-
<div className="w-[102px] h-[102px]">
17-
<LogoSvg />
18-
</div>
19-
<span className="font-gugi text-[#4B4AC5] text-2xl font-normal tracking-wide pt-1.5">
20-
데브말싸미
21-
</span>
22-
<span className="text-main-black text-base leading-5 font-normal pt-1">
23-
당신의 개발용어 발음을 도와드릴게요!
24-
</span>
25-
</div>
26-
<div className="w-full flex flex-col gap-2 pb-7">
14+
<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">
15+
<Carousel />
16+
<div className="w-full flex flex-col gap-2 pb-7 px-5">
2717
<button
2818
className="relative flex items-center justify-center bg-[#FFE34E] rounded-2xl p-3.5 w-full"
2919
onClick={handleKakaoLogin}

0 commit comments

Comments
 (0)