Skip to content

Commit 3f0e6f3

Browse files
ahk0413ahk0413
authored
[fix] MainSlide 수정 (#143)
* [fix] MainSlide 수정 * [style] MainSlide 사진 추가
1 parent 52e82c3 commit 3f0e6f3

File tree

15 files changed

+176
-140
lines changed

15 files changed

+176
-140
lines changed

‎src/domains/main/components/mainSlide/components/MainSlide.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
'use client';
22
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
3-
import MainSlideAbv from './MainSlideAbv';
43

54
import gsap from 'gsap';
65
import { ScrollTrigger } from 'gsap/ScrollTrigger';
76
import MobileSlide from './mobile/MobileSlide';
87
import MainSlideIntro from './MainSlideIntro';
9-
import MainSlideTest from './MainSlideTest';
10-
import MainSlideCommunity from './MainSlideCommunity';
8+
import MainSlideTest from './pc/MainSlideTest';
9+
import MainSlideCommunity from './pc/MainSlideCommunity';
10+
import MainSlideAbv from './pc/MainSlideAbv';
1111

1212
gsap.registerPlugin(ScrollTrigger);
1313

@@ -128,7 +128,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
128128
) : (
129129
<div ref={initialRoot} className="w-full overflow-hidden">
130130
<section key="desktop" ref={root} className="w-full stage h-screen" id="scroll-fixed">
131-
<div className="stage relative w-full h-full overflow-hidden bg-secondary/90 rounded-tl-4xl rounded-tr-4xl">
131+
<div className="stage relative w-full h-full overflow-hidden bg-secondary">
132132
<div className="panel absolute inset-0 overflow-hidden">
133133
<MainSlideIntro />
134134
</div>

‎src/domains/main/components/mainSlide/components/MainSlideCommunity.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/domains/main/components/mainSlide/components/MainSlideDummyCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ interface Props {
99

1010
function MainSlideDummyCard({ src, cocktailName }: Props) {
1111
return (
12-
<div className="relative flex flex-col w-50 sm:w-full min-w-[150px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
12+
<div className="relative flex flex-col w-full min-w-[120px] md:max-w-[160px] rounded-2xl overflow-hidden bg-white">
1313
<div className="relative w-full h-[100px]">
1414
<Image src={src} fill className="object-cover" alt="" sizes="100px" priority />
1515
</div>
1616

1717
<div className="p-3 flex flex-col gap-1 text-center">
18-
<strong className="text-black text-lg">{cocktailName}</strong>
18+
<strong className="text-black text-base">{cocktailName}</strong>
1919
<span className="text-gray-500 text-sm">+ 상세보기</span>
2020
</div>
2121
<Keep className="absolute top-2 right-2" fill="transparent" />

‎src/domains/main/components/mainSlide/components/MainSlideIntro.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ function MainSlideIntro() {
22
return (
33
<article className="relative w-full p-12 h-full">
44
<header className="flex flex-col gap-8 items-start justify-center h-full">
5-
<h2 className="text-3xl lg:text-[5rem] font-extrabold leading-[1.2] text-primary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
5+
<h2 className="text-3xl lg:text-[5rem] font-extrabold leading-[1.2] text-primary">
66
칵테일 <br /> 누구나 쉽게 즐길 수 있어요
77
</h2>
88
<p className="text-2xl font-normal text-primary/80">

‎src/domains/main/components/mainSlide/components/MainSsuryDrunk.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ function MainSsuryDrunk({ src, abv }: Props) {
2626
<p className={`text-lg sm:text-3xl font-bold ${className(abv)}`}>
2727
{abv}
2828
{abv !== 86 ? (
29-
<span className="text-xs text-primary">%</span>
29+
<span className="text-xs text-white">%</span>
3030
) : (
31-
<span className="text-xs text-primary">%~</span>
31+
<span className="text-xs text-white">%~</span>
3232
)}
3333
</p>
3434
<Image src={src} alt="" width={60} height={60} className="object-contain" />

‎src/domains/main/components/mainSlide/components/MainTestDummy.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ function MainTestDummy({ message, option, type }: Props) {
4848
<p className="tesx-xs">쑤리</p>
4949
</header>
5050
{message && (
51-
<section className="flex flex-col w-[215px] h-43.5 p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
52-
<p className="text-xs">{message}</p>
51+
<section className="flex flex-col w-[260px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
52+
<p className="text-sm">{message}</p>
5353

5454
<div className="flex flex-col gap-2">
5555
{type == 'option' &&
@@ -58,11 +58,13 @@ function MainTestDummy({ message, option, type }: Props) {
5858
<span
5959
key={id}
6060
className={clsx(
61-
'w-full rounded-3xl px-2 py-1 text-center',
62-
active ? 'bg-secondary' : 'bg-gray-light'
61+
'w-full rounded-3xl px-2 py-1 text-center text-sm',
62+
active
63+
? 'bg-secondary shadow-[inset_0_0_6px_rgba(255,196,1,1)]'
64+
: 'bg-gray-light'
6365
)}
6466
>
65-
<span className="text-xs">{message}</span>
67+
{message}
6668
</span>
6769
))}
6870
</div>

‎src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,12 @@ function MobileAbv() {
4545
];
4646

4747
return (
48-
<section className="bg-[#84739e] rounded-2xl sm:rounded-[30px] p-4 sm:p-12 flex flex-col justify-center">
49-
<article className="flex flex-col gap-5 lg:gap-0">
50-
<span className="hidden sm:block font-black text-xl md:text-2xl">3</span>
48+
<article className="p-4 sm:p-8 bg-primary rounded-2xl flex flex-col sm:justify-center gap-2">
49+
<div className="flex flex-col gap-5 lg:gap-0">
50+
<p className="hidden sm:block text-xl md:text-2xl text-white">3</p>
5151
<div className="flex flex-col gap-5">
52-
<header className="flex justify-between">
53-
<h2 className="text-xl sm:text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
54-
내 알콜도수 UP
55-
</h2>
52+
<header className="flex justify-between items-center">
53+
<h2 className="text-xl sm:text-2xl font-black text-white">내 알콜도수 UP</h2>
5654
<button
5755
type="button"
5856
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
@@ -69,26 +67,26 @@ function MobileAbv() {
6967
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
7068
)}
7169
>
72-
<p className="text-md md:text-xl font-normal leading-[1.5]">
70+
<p className="text-sm sm:text-md leading-[1.5] font-normal text-white">
7371
5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
7472
알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
7573
</p>
7674
<div className="mt-4 flex flex-col gap-2">
77-
<ul className="flex gap-[5%] md:gap-[8%]">
75+
<ul className="flex justify-between">
7876
{SSURY_DRUNK.map(({ id, src, abv }) => (
7977
<li key={id}>
8078
<MainSsuryDrunk src={src} abv={abv} />
8179
</li>
8280
))}
8381
</ul>
8482
<div className="w-full h-3 border border-gray rounded-full relative">
85-
<span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-1/2"></span>
83+
<span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-7/8"></span>
8684
</div>
8785
</div>
8886
</div>
8987
</div>
90-
</article>
91-
</section>
88+
</div>
89+
</article>
9290
);
9391
}
9492
export default MobileAbv;

‎src/domains/main/components/mainSlide/components/mobile/MobileSlide.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import MobileAbv from './MobileAbv';
44

55
function MobileSlide() {
66
return (
7-
<section className="py-8 px-6 sm:p-12 bg-secondary/90 w-full rounded-4xl" id="scroll-fixed">
8-
<h2 className="text-2xl md:text-3xl font-bold leading-[1.5] text-primary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
7+
<section className="py-8 px-3 sm:p-12 bg-secondary/90 w-full" id="scroll-fixed">
8+
<h2 className="text-2xl md:text-3xl font-bold leading-[1.5] text-primary">
99
칵테일 <br /> 누구나 쉽게 즐길 수 있어요
1010
</h2>
11-
<p className="text-md md:text-2xl font-normal mt-2 text-primary">
11+
<p className="text-md md:text-base font-normal mt-2 text-primary">
1212
SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
1313
</p>
1414
<div className="flex flex-col gap-10 mt-8">

‎src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import Add from '@/shared/assets/icons/add_24.svg';
22
import clsx from 'clsx';
33
import { useState } from 'react';
4+
import Image from 'next/image';
5+
import Community01 from '@/shared/assets/images/community_01.webp';
6+
import Community02 from '@/shared/assets/images/community_02.webp';
47

58
function MobileSlideCommunity() {
69
const [isClick, setIsClick] = useState(false);
710
return (
8-
<section className="p-4 sm:p-12 bg-[#77688d] rounded-2xl sm:rounded-[30px] flex flex-col justify-center">
9-
<article className="flex flex-col gap-5">
10-
<span className="hidden sm:block text-xl md:text-2xl font-black">2</span>
11-
<article className="flex flex-col gap-5">
12-
<header className="flex justify-between">
13-
<h2 className="text-xl sm:text-2xl md:text-3xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
14-
술술 즐기는, 커뮤니티
15-
</h2>
11+
<article className="p-4 sm:p-8 bg-primary rounded-2xl flex flex-col sm:justify-center gap-2">
12+
<div className="flex flex-col gap-5">
13+
<p className="hidden sm:block text-xl md:text-2xl text-white">2</p>
14+
<div className="flex flex-col gap-5">
15+
<header className="flex justify-between items-center">
16+
<h2 className="text-xl sm:text-2xl font-black text-white">함께 나누는 칵테일 이야기</h2>
1617
<button
1718
type="button"
1819
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
@@ -21,22 +22,43 @@ function MobileSlideCommunity() {
2122
<Add />
2223
</button>
2324
</header>
24-
<p
25+
<div
2526
className={clsx(
26-
`overflow-hidden text-md md:text-xl text-secondary font-normal leading-[1.5] flex flex-col gap-5 transition-all duration-500 `,
27+
`overflow-hidden flex flex-col gap-3 transition-all duration-500 `,
2728
isClick
2829
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
2930
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
3031
)}
3132
>
32-
칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
33-
초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
34-
<br />
35-
회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
36-
</p>
37-
</article>
38-
</article>
39-
</section>
33+
<p className="text-sm sm:text-md leading-[1.5] font-normal text-white">
34+
다양한 칵테일 레시피들을 SNS로 공유하고
35+
<br />
36+
커뮤니티에서 누구나 칵테일 관련 이야기를 나눌 수 있어요.
37+
</p>
38+
<div className="flex flex-col md:flex-row w-full gap-2 mt-4" aria-hidden>
39+
<div className="relative w-full max-w-[12.5rem] aspect-[0.96] overflow-hidden">
40+
<Image
41+
src={Community01}
42+
alt=""
43+
fill
44+
priority
45+
className="object-contain object-left-bottom"
46+
/>
47+
</div>
48+
<div className="relative w-full md:w-[75%] aspect-[2.09] overflow-hidden">
49+
<Image
50+
src={Community02}
51+
alt=""
52+
fill
53+
priority
54+
className="object-contain object-left-bottom"
55+
/>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</article>
4062
);
4163
}
4264
export default MobileSlideCommunity;

‎src/domains/main/components/mainSlide/components/mobile/MobileSlideTest.tsx‎

Lines changed: 41 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,55 +18,49 @@ const DUMMY_TEST = [
1818
function MobileSlideTest() {
1919
const [isClick, setIsClick] = useState(false);
2020
return (
21-
<section className="p-4 sm:p-12 bg-[#645a72] rounded-2xl sm:rounded-[30px] flex flex-col sm:justify-center">
22-
<span className=" hidden sm:text-xl sm:block md:text-2xl font-black text-secondary">1</span>
23-
<div className="flex flex-col gap-3">
24-
<article className="flex flex-col gap-5">
25-
<header className="flex justify-between items-center">
26-
<h2 className="text-xl sm:text-2xl md:text-3xl font-black text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
27-
AI기반 취향테스트
28-
</h2>
29-
<button
30-
type="button"
31-
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
32-
onClick={() => setIsClick(!isClick)}
33-
>
34-
<Add />
35-
</button>
36-
</header>
37-
<article
38-
className={clsx(
39-
`overflow-hidden flex flex-col gap-3 transition-all duration-500 `,
40-
isClick
41-
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
42-
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
43-
)}
21+
<article className="p-4 sm:p-8 bg-primary rounded-2xl flex flex-col sm:justify-center gap-2">
22+
<p className="hidden sm:block text-xl md:text-2xl text-white">1</p>
23+
<div className="flex flex-col gap-5">
24+
<header className="flex justify-between items-center">
25+
<h2 className="text-xl sm:text-2xl font-black text-white">AI기반 취향테스트</h2>
26+
<button
27+
type="button"
28+
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
29+
onClick={() => setIsClick(!isClick)}
4430
>
45-
<div>
46-
<p className="text-md sm:text-md leading-[1.5] font-normal text-secondary">
47-
복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
48-
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
49-
</p>
50-
</div>
51-
<ul className="flex flex-col mt-4 lg:flex-row gap-5">
52-
<MainTestDummy
53-
message={
54-
<>
55-
안녕하세요! 🍹바텐더 쑤리에요.
56-
<br />
57-
취향에 맞는 칵테일을 추천해드릴게요. <br />
58-
어떤 유형으로 찾아드릴까요?
59-
</>
60-
}
61-
option={DUMMY_TEST}
62-
type="option"
63-
/>
64-
<MainTestDummy type="text" />
65-
</ul>
66-
</article>
67-
</article>
31+
<Add />
32+
</button>
33+
</header>
34+
<div
35+
className={clsx(
36+
`overflow-hidden flex flex-col gap-3 transition-all duration-500 `,
37+
isClick
38+
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
39+
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
40+
)}
41+
>
42+
<p className="text-sm sm:text-md leading-[1.5] font-normal text-white">
43+
내 취향 칵테일 찾기 어려우셨나요? <br />
44+
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
45+
</p>
46+
<ul className="flex flex-col mt-4 lg:flex-row gap-5">
47+
<MainTestDummy
48+
message={
49+
<>
50+
안녕하세요! 🍹바텐더 쑤리에요.
51+
<br />
52+
취향에 맞는 칵테일을 추천해드릴게요. <br />
53+
어떤 유형으로 찾아드릴까요?
54+
</>
55+
}
56+
option={DUMMY_TEST}
57+
type="option"
58+
/>
59+
<MainTestDummy type="text" />
60+
</ul>
61+
</div>
6862
</div>
69-
</section>
63+
</article>
7064
);
7165
}
7266
export default MobileSlideTest;

0 commit comments

Comments
 (0)