Skip to content

Commit a115156

Browse files
EunbinJungEunbinJung
committed
Merge branch 'dev' into feat/write#19
2 parents 02d4a00 + 1d0e476 commit a115156

File tree

21 files changed

+270
-165
lines changed

21 files changed

+270
-165
lines changed

‎src/app/(no-layout)/layout.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import FooterWrapper from '@/shared/components/footer/FooterWrapper';
2+
import Header from '@/shared/components/header/Header';
3+
4+
function NoLayout({ children }: { children: React.ReactNode }) {
5+
return (
6+
<>
7+
<Header className="bg-transparent w-full h-[44px] md:h-[60px] flex items-center justify-between px-[12px] fixed top-0 left-0 z-50 transition-transform duration-200 ease-in-ou" />
8+
<main className="flex flex-1">{children}</main>
9+
<FooterWrapper />
10+
</>
11+
);
12+
}
13+
export default NoLayout;

‎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;

0 commit comments

Comments
 (0)