Skip to content

Commit a08aac6

Browse files
mtm-git1018mtm-git1018
committed
[style]메인페이지 이미지교체
1 parent f852a05 commit a08aac6

File tree

10 files changed

+40
-29
lines changed

10 files changed

+40
-29
lines changed

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import MobileSlide from './mobile/MobileSlide';
88
import MainSlideIntro from './MainSlideIntro';
99
import MainSlideTest from './MainSlideTest';
1010
import MainSlideCommunity from './MainSlideCommunity';
11+
import StarBg from '@/domains/shared/components/star-bg/StarBg';
1112

1213
gsap.registerPlugin(ScrollTrigger);
1314

@@ -161,24 +162,28 @@ function MainSlide() {
161162
return (
162163
<>
163164
{isMobile ? (
164-
<MobileSlide key="mobile" />
165+
<StarBg className=''>
166+
<MobileSlide key="mobile" />
167+
</StarBg>
165168
) : (
166-
<section key="desktop" ref={root} className="h-screen">
167-
<div className="stage relative w-full h-full overflow-hidden">
168-
<div className="panel absolute inset-0">
169-
<MainSlideIntro />
169+
<StarBg className="bg-fixed">
170+
<section key="desktop" ref={root} className="h-screen">
171+
<div className="stage relative w-full h-full overflow-hidden">
172+
<div className="panel absolute inset-0">
173+
<MainSlideIntro />
174+
</div>
175+
<div className="panel absolute inset-0">
176+
<MainSlideTest />
177+
</div>
178+
<div className="panel absolute inset-0">
179+
<MainSlideCommunity />
180+
</div>
181+
<div className="panel absolute inset-0">
182+
<MainSlideAbv />
183+
</div>
170184
</div>
171-
<div className="panel absolute inset-0">
172-
<MainSlideTest />
173-
</div>
174-
<div className="panel absolute inset-0">
175-
<MainSlideCommunity />
176-
</div>
177-
<div className="panel absolute inset-0">
178-
<MainSlideAbv />
179-
</div>
180-
</div>
181-
</section>
185+
</section>
186+
</StarBg>
182187
)}
183188
</>
184189
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ function MainSlideCommunity() {
88
<h2 className="text-5xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
99
술술 즐기는, 커뮤니티
1010
</h2>
11-
<p className="text-xl xl:text-2xl text-secondary font-normal leading-[1.5]">
11+
<p className="text-xl pb-[250px] xl:text-2xl text-secondary font-normal leading-[1.5]">
1212
칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
1313
초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
1414
<br />
1515
회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
1616
</p>
1717
</div>
1818
</div>
19-
<span className="h-[250px]"></span>
19+
2020
</div>
2121
</div>
2222
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import background from '@/shared/assets/images/main_slide.webp';
1+
import background from '@/shared/assets/images/cocktailBg.webp';
22
import Image from 'next/image';
33

44
function MainSlideIntro() {
55
return (
66
<div className="relative w-full p-12 h-full">
7-
<Image src={background} alt="" fill className="-z-1" />
7+
<Image src={background} alt="" fill className="-z-1 object-right object-contain" />
88
<div className="flex flex-col gap-8">
99
<h2 className="text-3xl lg:text-5xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
1010
칵테일 <br /> 누구나 쉽게 즐길 수 있어요

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function MainSsuryDrunk({ src, abv }: Props) {
3131
<span className="text-xs text-primary">%~</span>
3232
)}
3333
</p>
34-
<Image src={src} alt="" width={60} height={60} className="w-15 h-15 object-contain"></Image>
34+
<Image src={src} alt="" width={60} height={60} className="object-contain"/>
3535
</div>
3636
);
3737
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function MobileAbv() {
5151
<span className="hidden sm:block font-black text-xl md:text-2xl">3</span>
5252
<div className="flex flex-col gap-5">
5353
<header className="flex justify-between">
54-
<h2 className="text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
54+
<h2 className="text-xl sm:text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
5555
내 알콜도수 UP
5656
</h2>
5757
<button
@@ -74,7 +74,7 @@ function MobileAbv() {
7474
5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
7575
알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
7676
</p>
77-
<div className="flex flex-col gap-2">
77+
<div className="mt-4 flex flex-col gap-2">
7878
<ul className="flex gap-[5%] md:gap-[8%]">
7979
{SSURY_DRUNK.map(({ id, src, abv }) => (
8080
<li key={id}>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

2-
import background from '@/shared/assets/images/main_slide.webp';
2+
import background from '@/shared/assets/images/cocktailBg.webp';
33
import MobileSlideTest from './MobileSlideTest';
44
import MobileSlideCommunity from './MobileSlideCommunity';
55
import MobileAbv from './MobileAbv';
66

77
function MobileSlide() {
88
return (
99
<div className='sticky p-4 sm:p-12'
10-
style={{ backgroundImage: `url(${background.src})`, backgroundAttachment: 'fixed' }}>
10+
style={{ backgroundImage: `url(${background.src})`, backgroundAttachment: 'fixed', backgroundSize: 'contain' }}>
1111

1212
<h2 className="text-xl md:text-3xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
1313
칵테일 <br /> 누구나 쉽게 즐길 수 있어요

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function MobileSlideCommunity() {
1010
<span className="hidden sm:block text-xl md:text-2xl font-black">2</span>
1111
<article className="flex flex-col gap-5">
1212
<header className='flex justify-between'>
13-
<h2 className="text-2xl md:text-3xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
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)]">
1414
술술 즐기는, 커뮤니티
1515
</h2>
1616
<button

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function MobileSlideTest() {
2121
<section className="p-4 sm:p-12 bg-[#645a72] rounded-2xl sm:rounded-[30px] flex flex-col sm:justify-center">
2222
<span className=" hidden sm:text-xl sm:block md:text-2xl font-black text-secondary">1</span>
2323
<div className="flex flex-col gap-3">
24-
<article className="flex flex-col gap-5">
24+
<article className="flex flex-col gap-5">
2525
<header className="flex justify-between items-center">
2626
<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)]">
2727
AI기반 취향테스트
@@ -36,7 +36,7 @@ function MobileSlideTest() {
3636
</header>
3737
<article
3838
className={clsx(
39-
`overflow-hidden flex flex-col gap-5 transition-all duration-500 `,
39+
`overflow-hidden flex flex-col gap-3 transition-all duration-500 `,
4040
isClick
4141
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
4242
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
@@ -48,7 +48,7 @@ function MobileSlideTest() {
4848
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
4949
</p>
5050
</div>
51-
<ul className="flex flex-col lg:flex-row gap-8">
51+
<ul className="flex flex-col mt-4 lg:flex-row gap-5">
5252
<MainTestDummy
5353
message={
5454
<>

‎src/shared/assets/images/cocktailBg.webp‎

545 KB
Loading

0 commit comments

Comments
 (0)