Skip to content

Commit 892ee2c

Browse files
semnil5202semnil5202
committed
wip
1 parent bf579f5 commit 892ee2c

17 files changed

+309
-28
lines changed

โ€Žpublic/images/login/onboarding/onboarding-1.png

369 KB
Loading

โ€Žpublic/images/login/onboarding/onboarding-2.png

303 KB
Loading

โ€Žpublic/images/login/onboarding/onboarding-3.png

409 KB
Loading

โ€Žpublic/images/login/onboarding/onboarding-4.png

420 KB
Loading

โ€Žpublic/images/login/onboarding/onboarding-bg.png

-93.6 KB
Binary file not shown.

โ€Žsrc/app/login/page.tsx

+2-17
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
import { useState } from 'react';
44

5-
import { LoginFeature } from '@/features/auth/login/ui/LoginFeature';
6-
import { OnboardingFeature } from '@/features/onboarding/ui/OnboardingFeature';
5+
import OnboardingScreen from '@/features/onboarding/screen';
76

87
export default function LoginPage() {
98
const [showOnboarding, setShowOnboarding] = useState(true);
@@ -12,19 +11,5 @@ export default function LoginPage() {
1211
setShowOnboarding(false);
1312
};
1413

15-
return (
16-
<div className="flex h-dvh w-full justify-center">
17-
<div
18-
className="h-full w-full max-w-[600px] flex-col items-center justify-center bg-black"
19-
style={{
20-
backgroundImage: `url(${'/images/login/onboarding/onboarding-bg.png'})`,
21-
backgroundSize: 'contain',
22-
backgroundPosition: 'bottom',
23-
backgroundRepeat: 'no-repeat',
24-
}}
25-
>
26-
{showOnboarding ? <OnboardingFeature onComplete={handleOnboardingComplete} /> : <LoginFeature />}
27-
</div>
28-
</div>
29-
);
14+
return <OnboardingScreen />;
3015
}

โ€Žsrc/features/onboarding/components/FirstOnboarding/Background.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { HTMLAttributes } from 'react';
2+
3+
import { cn } from '@/shared/lib/utils';
4+
5+
export const Background = (props: HTMLAttributes<HTMLDivElement>) => {
6+
const { className, ...restProps } = props;
7+
8+
return (
9+
<div className={cn(className, 'relative z-[-1] h-full w-full')} {...restProps}>
10+
<div className="bg-[rgba(255,255,255, 0.2)] absolute top-0 h-dvh w-[600px] backdrop-blur-[70px]" />
11+
<svg width="479" height="538" viewBox="0 0 479 538" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<path
13+
d="M244.002 116.429C311.817 75.3484 384.783 67.1636 412.302 112.59C454.511 182.269 402.926 267.201 335.11 308.283C267.294 349.364 161.865 361.991 134.347 316.564C106.829 271.137 176.186 157.511 244.002 116.429Z"
14+
fill="#5A23FF"
15+
fillOpacity="0.6"
16+
/>
17+
<path
18+
d="M116.211 196.08C84.1408 130.484 81.8652 63.2779 124.421 42.4719C189.696 10.5582 238.249 55.139 270.319 120.735C302.39 186.33 260.756 300.544 218.201 321.35C175.645 342.156 148.282 261.675 116.211 196.08Z"
19+
fill="#0073FF"
20+
fillOpacity="0.4"
21+
/>
22+
<path
23+
d="M35.985 335.983C51.8997 276.588 109.468 238.503 185.659 258.918C302.527 290.233 327.812 350.519 311.897 409.913C295.982 469.308 136.755 500.158 60.5644 479.743C-15.6266 459.328 20.0703 395.377 35.985 335.983Z"
24+
fill="#C3D3FF"
25+
fillOpacity="0.4"
26+
/>
27+
</svg>
28+
</div>
29+
);
30+
};

โ€Žsrc/features/onboarding/components/FirstOnboarding/DecoAura.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { SVGProps } from 'react';
2+
3+
import { cn } from '@/shared/lib/utils';
4+
5+
export const DecoAura = (props: SVGProps<SVGSVGElement>) => {
6+
const { className, ...restProps } = props;
7+
8+
return (
9+
<svg
10+
className={cn(className)}
11+
width="529"
12+
height="529"
13+
viewBox="0 0 529 529"
14+
fill="none"
15+
xmlns="http://www.w3.org/2000/svg"
16+
{...restProps}
17+
>
18+
<g opacity="0.4" filter="url(#filter0_di_6472_998)">
19+
<circle cx="264.818" cy="264.818" r="251.818" fill="#6C4BFF" fillOpacity="0.04" shapeRendering="crispEdges" />
20+
</g>
21+
<g opacity="0.6" filter="url(#filter1_di_6472_998)">
22+
<circle cx="264.817" cy="264.817" r="164" fill="#6C4BFF" fillOpacity="0.08" shapeRendering="crispEdges" />
23+
</g>
24+
<defs>
25+
<filter
26+
id="filter0_di_6472_998"
27+
x="0.867884"
28+
y="0.867884"
29+
width="527.901"
30+
height="527.901"
31+
filterUnits="userSpaceOnUse"
32+
colorInterpolationFilters="sRGB"
33+
>
34+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
35+
<feColorMatrix
36+
in="SourceAlpha"
37+
type="matrix"
38+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
39+
result="hardAlpha"
40+
/>
41+
<feOffset />
42+
<feGaussianBlur stdDeviation="6.06606" />
43+
<feComposite in2="hardAlpha" operator="out" />
44+
<feColorMatrix type="matrix" values="0 0 0 0 0.402214 0 0 0 0 0.268018 0 0 0 0 1 0 0 0 0.2 0" />
45+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6472_998" />
46+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6472_998" result="shape" />
47+
<feColorMatrix
48+
in="SourceAlpha"
49+
type="matrix"
50+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
51+
result="hardAlpha"
52+
/>
53+
<feOffset />
54+
<feGaussianBlur stdDeviation="27.7815" />
55+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
56+
<feColorMatrix type="matrix" values="0 0 0 0 0.81654 0 0 0 0 0.763949 0 0 0 0 1 0 0 0 0.2 0" />
57+
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_6472_998" />
58+
</filter>
59+
<filter
60+
id="filter1_di_6472_998"
61+
x="87.2636"
62+
y="87.2636"
63+
width="355.106"
64+
height="355.106"
65+
filterUnits="userSpaceOnUse"
66+
colorInterpolationFilters="sRGB"
67+
>
68+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
69+
<feColorMatrix
70+
in="SourceAlpha"
71+
type="matrix"
72+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
73+
result="hardAlpha"
74+
/>
75+
<feOffset />
76+
<feGaussianBlur stdDeviation="6.7764" />
77+
<feComposite in2="hardAlpha" operator="out" />
78+
<feColorMatrix type="matrix" values="0 0 0 0 0.402214 0 0 0 0 0.268018 0 0 0 0 1 0 0 0 0.3 0" />
79+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6472_998" />
80+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6472_998" result="shape" />
81+
<feColorMatrix
82+
in="SourceAlpha"
83+
type="matrix"
84+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
85+
result="hardAlpha"
86+
/>
87+
<feOffset />
88+
<feGaussianBlur stdDeviation="31.0348" />
89+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
90+
<feColorMatrix type="matrix" values="0 0 0 0 0.81654 0 0 0 0 0.763949 0 0 0 0 1 0 0 0 0.3 0" />
91+
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_6472_998" />
92+
</filter>
93+
</defs>
94+
</svg>
95+
);
96+
};

โ€Žsrc/features/onboarding/components/FirstOnboarding/DecoCircle.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { HTMLAttributes } from 'react';
2+
3+
import { cn } from '@/shared/lib/utils';
4+
5+
export const DecoCircle = (props: HTMLAttributes<HTMLDivElement>) => {
6+
const { className, ...restProps } = props;
7+
8+
return (
9+
<div className={cn(className)} {...restProps}>
10+
<div className="bg-[rgba(255,255,255, 0.2)] absolute top-0 h-[221px] w-[220px] rounded-full backdrop-blur-[16px]" />
11+
<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<g filter="url(#filter0_i_6472_1001)">
13+
<g clipPath="url(#clip0_6472_1001)">
14+
<foreignObject x="-56.8537" y="-127.717" width="564.827" height="1090.1"></foreignObject>
15+
<rect
16+
data-figma-bg-blur-radius="43.258"
17+
x="-13.5957"
18+
y="-84.459"
19+
width="478.31"
20+
height="1003.59"
21+
fill="#6D61FF"
22+
/>
23+
<path
24+
d="M100.935 68.0509C133.52 48.3113 168.581 44.3785 181.803 66.2061C202.085 99.6867 177.298 140.497 144.713 160.237C112.127 179.976 61.4682 186.044 48.2456 164.216C35.023 142.388 68.3493 87.7904 100.935 68.0509Z"
25+
fill="#5A23FF"
26+
/>
27+
<path
28+
d="M15.7033 111.443C0.0356814 79.3971 -1.07602 46.5643 19.7141 36.3997C51.6034 20.8087 75.3232 42.5881 90.9908 74.634C106.658 106.68 86.319 162.478 65.5289 172.642C44.7389 182.807 31.3709 143.489 15.7033 111.443Z"
29+
fill="#0073FF"
30+
fillOpacity="0.4"
31+
/>
32+
<path
33+
d="M18.5836 168.496C24.616 145.983 46.4372 131.547 75.317 139.285C119.615 151.155 129.199 174.006 123.167 196.519C117.134 219.032 56.7802 230.726 27.9003 222.988C-0.97953 215.249 12.5512 191.009 18.5836 168.496Z"
34+
fill="#C3D3FF"
35+
fillOpacity="0.8"
36+
/>
37+
<path
38+
d="M88.1991 180.55C88.3005 151.275 97.9645 126.7 114.48 126.757C139.812 126.845 153.977 159.433 153.875 188.707C153.774 217.982 140.023 253.644 123.508 253.587C106.992 253.53 88.0977 209.824 88.1991 180.55Z"
39+
fill="#B682FF"
40+
fillOpacity="0.6"
41+
/>
42+
</g>
43+
</g>
44+
<defs>
45+
<filter
46+
id="filter0_i_6472_1001"
47+
x="0"
48+
y="0.820312"
49+
width="219.998"
50+
height="219.998"
51+
filterUnits="userSpaceOnUse"
52+
colorInterpolationFilters="sRGB"
53+
>
54+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
55+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
56+
<feColorMatrix
57+
in="SourceAlpha"
58+
type="matrix"
59+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
60+
result="hardAlpha"
61+
/>
62+
<feOffset />
63+
<feGaussianBlur stdDeviation="12.5448" />
64+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
65+
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0" />
66+
<feBlend mode="plus-lighter" in2="shape" result="effect1_innerShadow_6472_1001" />
67+
</filter>
68+
<clipPath id="bgblur_1_6472_1001_clip_path" transform="translate(56.8537 127.717)">
69+
<rect x="-13.5957" y="-84.459" width="478.31" height="1003.59" />
70+
</clipPath>
71+
<clipPath id="clip0_6472_1001">
72+
<rect y="0.820312" width="219.998" height="219.998" rx="109.999" fill="white" />
73+
</clipPath>
74+
</defs>
75+
</svg>
76+
</div>
77+
);
78+
};

โ€Žsrc/features/onboarding/components/FirstOnboarding/TagGroup.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const TagGroup = (props) => {};

โ€Žsrc/features/onboarding/config/slides.ts โ€Žsrc/features/onboarding/config/slides.tsx

File renamed without changes.

โ€Žsrc/features/onboarding/containers/FirstOnboardingContainer.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Background } from '../components/FirstOnboarding/Background';
2+
import { DecoAura } from '../components/FirstOnboarding/DecoAura';
3+
import { DecoCircle } from '../components/FirstOnboarding/DecoCircle';
4+
5+
export const FirstOnboardingContainer = () => {
6+
return (
7+
<div className="flex w-full flex-col items-center justify-center">
8+
<Background />
9+
<div className="relative">
10+
<DecoCircle className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]" />
11+
<DecoAura className="absolute left-[50%] top-[50%] z-[-1] translate-x-[-50%] translate-y-[-50%]" />
12+
</div>
13+
</div>
14+
);
15+
};

โ€Žsrc/features/onboarding/screen/index.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
'use client';
2+
3+
import { useRef, useState } from 'react';
4+
import { Swiper as SwiperType } from 'swiper';
5+
import { Pagination, Autoplay } from 'swiper/modules';
6+
import { Swiper, SwiperSlide } from 'swiper/react';
7+
8+
import { slides } from '../config/slides';
9+
import { FirstOnboardingContainer } from '../containers/FirstOnboardingContainer';
10+
11+
export default function OnboardingScreen() {
12+
const [activeIndex, setActiveIndex] = useState(0);
13+
const [showOnboarding, setShowOnboarding] = useState(true);
14+
const swiperRef = useRef<SwiperType | null>(null);
15+
16+
const handleOnboardingComplete = () => {
17+
setShowOnboarding(false);
18+
};
19+
20+
const handleNext = () => {
21+
if (activeIndex === slides.length - 1) {
22+
handleOnboardingComplete();
23+
} else if (swiperRef.current) {
24+
swiperRef.current.slideNext();
25+
}
26+
};
27+
28+
const handleSlideChange = (swiper: SwiperType) => {
29+
setActiveIndex(swiper.realIndex);
30+
};
31+
32+
return (
33+
<>
34+
{showOnboarding && (
35+
<Swiper
36+
className="mx-auto h-dvh w-full max-w-[600px]"
37+
modules={[Pagination, Autoplay]}
38+
onSwiper={(swiper) => {
39+
swiperRef.current = swiper;
40+
}}
41+
onSlideChange={handleSlideChange}
42+
pagination={{
43+
clickable: true,
44+
el: '.custom-pagination',
45+
bulletClass: 'inline-block h-2 w-2 rounded-full mx-1 bg-white opacity-50',
46+
bulletActiveClass: '!opacity-100',
47+
}}
48+
navigation={false}
49+
>
50+
<SwiperSlide>
51+
<FirstOnboardingContainer />
52+
</SwiperSlide>
53+
</Swiper>
54+
)}
55+
</>
56+
);
57+
}

โ€Žsrc/features/onboarding/ui/OnboardingCarousel.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { slides } from '@/features/onboarding/config/slides';
1313
import { Button } from '@/shared/ui/button';
1414
import { Typography } from '@/shared/ui/typography';
1515

16-
import OnboardingSlide from './OnboardingSlide';
16+
import { getOnboardings } from './components/getOnboardings';
1717

1818
interface OnboardingCarouselProps {
1919
onComplete: () => void;
@@ -38,7 +38,6 @@ function OnboardingCarousel({ onComplete }: OnboardingCarouselProps) {
3838
return (
3939
<div className="flex h-full w-full flex-col items-center">
4040
<div className="relative w-full flex-1">
41-
{/*module Pagination์‚ฌ์šฉ์œผ๋กœ ์ˆ˜์ • */}
4241
<Swiper
4342
modules={[Pagination, Navigation, Autoplay]}
4443
onSwiper={(swiper) => {
@@ -52,15 +51,10 @@ function OnboardingCarousel({ onComplete }: OnboardingCarouselProps) {
5251
bulletActiveClass: '!opacity-100',
5352
}}
5453
navigation={false}
55-
slidesPerView={1}
56-
autoplay={{ delay: 5000, disableOnInteraction: false }}
57-
loop={true}
58-
className="h-full w-full"
54+
className="max-content w-full"
5955
>
60-
{slides.map((slide) => (
61-
<SwiperSlide key={slide.id}>
62-
<OnboardingSlide description={slide.description} imageUrl={slide.imageUrl} />
63-
</SwiperSlide>
56+
{getOnboardings().map(({ id, render }) => (
57+
<SwiperSlide key={id}>{render()}</SwiperSlide>
6458
))}
6559
</Swiper>
6660

โ€Žsrc/features/onboarding/ui/OnboardingSlide.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function OnboardingSlide({ description, imageUrl }: OnboardingSlideProps) {
1212
<div className="relative flex h-full w-full flex-col items-center">
1313
<div className="absolute inset-0 flex w-full items-center justify-center">
1414
<div className="relative h-[75%] w-[65%]">
15-
<Image src={imageUrl} alt="์˜จ๋ณด๋”ฉ ์ด๋ฏธ์ง€" fill className="object-contain" priority />
15+
<Image src={imageUrl} alt="์˜จ๋ณด๋”ฉ ์ด๋ฏธ์ง€" fill className="object-contain" priority quality={100} />
1616
</div>
1717
</div>
1818

โ€Žsrc/features/onboarding/ui/components/FirstOnboarding.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Image from 'next/image';
2+
3+
import { slides } from '../../config/slides';
4+
5+
export const FirstOnboarding = () => {
6+
const { id, description, imageUrl } = slides[0];
7+
8+
return <Image src={imageUrl} alt={`onboarding-${id}`} width={375} height={812} priority quality={100} />;
9+
};

โ€Žsrc/features/onboarding/ui/components/getOnboardings.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { FirstOnboarding } from './FirstOnboarding';
2+
3+
export const getOnboardings = () => [
4+
{
5+
id: 1,
6+
render: () => <FirstOnboarding />,
7+
},
8+
{
9+
id: 2,
10+
render: () => null,
11+
},
12+
{
13+
id: 3,
14+
render: () => null,
15+
},
16+
];

0 commit comments

Comments
ย (0)