Skip to content

Commit bd767b0

Browse files
mtm-git1018mtm-git1018
authored
Style/메인페이지 슬라이드영역 (#135)
* [style]마이페이지 슬라이드 퍼블리싱 * [style] 메인페이지 슬라이드 * [docs]provider문서 정리 * [style] 메인페이지 스타일 간격조정 * [feat]알림 설정처리 * [stype]메인페이지 반응형 * [feat] 나만의 바 삭제 동기화 * [feat] 마이페이지 전체삭제 * [style] 메인페이지 반응형 * [feat] 마이페이지 푸시 오류 수정 * [docs]미 사용 파일 삭제 * [style] 메인3d이미지 스크롤 실험div제거 * [style] 메인페이지 슬라이드 반응형 * [style]메인페이지 이미지교체 * [style] 시맨틱구조 * [style] 모바일 메인배경 위치조정 * [fix] 화면 리사이징시 슬라이드 고정 버그 해결 * [fix] 브라우저 리사이징 버그 수정 * [chore]포매팅
1 parent f071906 commit bd767b0

File tree

18 files changed

+237
-159
lines changed

18 files changed

+237
-159
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/community/api/fetchComment.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export const postComments = async (postId: number | ParamValue, content: string)
3232
credentials: 'include',
3333
body: JSON.stringify({ content }),
3434
});
35-
3635
const text = await res.text();
3736

3837
if (!res.ok) {

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

Lines changed: 35 additions & 37 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

@@ -18,7 +19,6 @@ function MainSlide() {
1819
const cleanupFnRef = useRef<(() => void) | null>(null);
1920
const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
2021

21-
// 초기 마운트
2222
useEffect(() => {
2323
setIsMobile(window.innerWidth < 1024);
2424
setMounted(true);
@@ -42,6 +42,9 @@ function MainSlide() {
4242

4343
// 상태 업데이트
4444
setIsMobile(newIsMobile);
45+
} else if (!newIsMobile) {
46+
// 데스크탑 내에서의 리사이즈 - ScrollTrigger refresh
47+
ScrollTrigger.refresh(true);
4548
}
4649
}, 200);
4750
};
@@ -68,27 +71,29 @@ function MainSlide() {
6871
const stage = el.querySelector('.stage') as HTMLElement;
6972
if (!stage) return;
7073

71-
// 약간의 지연을 줘서 DOM이 안정화되도록
7274
const timer = setTimeout(() => {
7375
if (!root.current) return;
7476

7577
const ctx = gsap.context(() => {
7678
const panels = Array.from(el.querySelectorAll<HTMLElement>('.panel'));
77-
const tl = gsap.timeline({ paused: true, defaults: { ease: 'none' } });
79+
const tl = gsap.timeline({ paused: true, defaults: { ease: 'power3.inOut' } });
7880

7981
panels.forEach((panel, i) => {
8082
const c = panel.querySelector<HTMLElement>('.slide-content');
8183
if (!c) return;
8284
const stageW = () => stage.clientWidth;
8385
const contentW = () => c.getBoundingClientRect().width;
8486

85-
gsap.set(c, { x: stageW() });
87+
gsap.set(c, {
88+
x: () => stageW(),
89+
immediateRender: false,
90+
});
8691

8792
tl.to(
8893
c,
8994
{
9095
x: () => stageW() - contentW(),
91-
duration: 1,
96+
duration: 2,
9297
immediateRender: false,
9398
onStart: () => c.classList.remove('invisible'),
9499
},
@@ -109,36 +114,26 @@ function MainSlide() {
109114
ScrollTrigger.refresh();
110115
}, root);
111116

112-
// cleanup 함수를 ref에 저장
113117
cleanupFnRef.current = () => {
114-
// ScrollTrigger를 먼저 완전히 제거
115118
const allTriggers = ScrollTrigger.getAll();
116119
allTriggers.forEach((st) => {
117120
if (st.trigger === el || el.contains(st.trigger as Node)) {
118121
st.kill(true);
119122
}
120123
});
121124

122-
// GSAP context revert
123125
try {
124126
ctx.revert();
125-
} catch (e) {
126-
// 무시
127-
}
127+
} catch {}
128128

129-
// 혹시 남아있는 pin-spacer 수동 제거
130129
const pinSpacers = document.querySelectorAll('.pin-spacer');
131130
pinSpacers.forEach((spacer) => {
132131
if (spacer.contains(el) || el.contains(spacer)) {
133-
try {
134-
const child = spacer.querySelector('section');
135-
if (child && spacer.parentElement) {
136-
spacer.parentElement.appendChild(child);
137-
}
138-
spacer.remove();
139-
} catch (e) {
140-
// 무시
132+
const child = spacer.querySelector('section');
133+
if (child && spacer.parentElement) {
134+
spacer.parentElement.appendChild(child);
141135
}
136+
spacer.remove();
142137
}
143138
});
144139
};
@@ -152,7 +147,6 @@ function MainSlide() {
152147
}
153148
};
154149
}, [isMobile, mounted]);
155-
156150
// SSR 방지
157151
if (!mounted) {
158152
return null;
@@ -161,24 +155,28 @@ function MainSlide() {
161155
return (
162156
<>
163157
{isMobile ? (
164-
<MobileSlide key="mobile" />
158+
<StarBg className="">
159+
<MobileSlide key="mobile" />
160+
</StarBg>
165161
) : (
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 />
170-
</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 />
162+
<StarBg className="bg-fixed">
163+
<section key="desktop" ref={root} className="stage h-screen">
164+
<div className="stage relative w-full h-full overflow-hidden">
165+
<div className="panel absolute inset-0">
166+
<MainSlideIntro />
167+
</div>
168+
<div className="panel absolute inset-0">
169+
<MainSlideTest />
170+
</div>
171+
<div className="panel absolute inset-0">
172+
<MainSlideCommunity />
173+
</div>
174+
<div className="panel absolute inset-0">
175+
<MainSlideAbv />
176+
</div>
179177
</div>
180-
</div>
181-
</section>
178+
</section>
179+
</StarBg>
182180
)}
183181
</>
184182
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function MainSlideAbv() {
4141
];
4242

4343
return (
44-
<div className="slide-content w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
44+
<section className="slide-content invisible w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
4545
<div className="flex flex-col gap-15">
4646
<span className="font-black text-[32px]">3</span>
4747
<div className="flex flex-col gap-5">
@@ -66,7 +66,7 @@ function MainSlideAbv() {
6666
</div>
6767
</div>
6868
</div>
69-
</div>
69+
</section>
7070
);
7171
}
7272
export default MainSlideAbv;

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
function MainSlideCommunity() {
22
return (
3-
<div className="slide-content w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
3+
<section className="slide-content invisible w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
44
<div className="flex flex-col justify-center">
55
<div className="flex flex-col gap-15">
66
<span className="text-[32px] font-black">2</span>
7-
<div className="flex flex-col gap-5">
7+
<header className="flex flex-col gap-5">
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>
17-
</div>
17+
</header>
1818
</div>
19-
<span className="h-[250px]"></span>
2019
</div>
21-
</div>
20+
</section>
2221
);
2322
}
2423
export default MainSlideCommunity;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface Props {
99

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

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
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 (
6-
<div className="relative w-full p-12 h-full">
7-
<Image src={background} alt="" fill className="-z-1" />
8-
<div className="flex flex-col gap-8">
6+
<article className="relative w-full p-12 h-full">
7+
<Image src={background} alt="" fill className="-z-1 object-right object-contain" />
8+
<header 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 /> 누구나 쉽게 즐길 수 있어요
1111
</h2>
1212
<p className="text-2xl font-normal">
1313
SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
1414
</p>
15-
</div>
16-
</div>
15+
</header>
16+
</article>
1717
);
1818
}
1919
export default MainSlideIntro;

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

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,37 +15,41 @@ const DUMMY_TEST = [
1515

1616
function MainSlideTest() {
1717
return (
18-
<div className="slide-content w-3/4 p-12 h-full bg-[#645a72] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center ">
18+
<section className="slide-content invisible w-3/4 p-12 h-full bg-[#645a72] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center ">
1919
<div className="flex flex-col gap-15">
2020
<span className="text-[32px] font-black text-secondary">1</span>
2121
<div className="flex flex-col gap-15">
22-
<div className="flex flex-col gap-5">
22+
<header className="flex flex-col gap-5">
2323
<h2 className=" text-5xl font-black text-secondary text-shadow text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
2424
AI기반 취향테스트
2525
</h2>
2626
<p className="text-2xl leading-[1.5] font-normal text-secondary">
2727
복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
2828
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
2929
</p>
30-
</div>
30+
</header>
3131
<ul className="flex gap-8">
32-
<MainTestDummy
33-
message={
34-
<>
35-
안녕하세요! 🍹바텐더 쑤리에요.
36-
<br />
37-
취향에 맞는 칵테일을 추천해드릴게요. <br />
38-
어떤 유형으로 찾아드릴까요?
39-
</>
40-
}
41-
option={DUMMY_TEST}
42-
type="option"
43-
/>
44-
<MainTestDummy type="text" />
32+
<li>
33+
<MainTestDummy
34+
message={
35+
<>
36+
안녕하세요! 🍹바텐더 쑤리에요.
37+
<br />
38+
취향에 맞는 칵테일을 추천해드릴게요. <br />
39+
어떤 유형으로 찾아드릴까요?
40+
</>
41+
}
42+
option={DUMMY_TEST}
43+
type="option"
44+
/>
45+
</li>
46+
<li>
47+
<MainTestDummy type="text" />
48+
</li>
4549
</ul>
4650
</div>
4751
</div>
48-
</div>
52+
</section>
4953
);
5054
}
5155
export default MainSlideTest;

‎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/MainTestDummy.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const DUMMY_CARD = [
3434

3535
function MainTestDummy({ message, option, type }: Props) {
3636
return (
37-
<li className="flex flex-col justify-end gap-2">
37+
<section className="flex flex-col justify-end gap-2">
3838
<header className="flex items-end">
3939
<div className="relative ">
4040
<Image
@@ -48,7 +48,7 @@ function MainTestDummy({ message, option, type }: Props) {
4848
<p className="tesx-xs">쑤리</p>
4949
</header>
5050
{message && (
51-
<div className="flex flex-col w-fit min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
51+
<section className="flex flex-col w-[215px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
5252
<p className="text-xs">{message}</p>
5353

5454
<div className="flex flex-col gap-2">
@@ -66,7 +66,7 @@ function MainTestDummy({ message, option, type }: Props) {
6666
</span>
6767
))}
6868
</div>
69-
</div>
69+
</section>
7070
)}
7171
{type == 'text' && (
7272
<div className="flex flex-col sm:flex-row gap-2">
@@ -75,7 +75,7 @@ function MainTestDummy({ message, option, type }: Props) {
7575
))}
7676
</div>
7777
)}
78-
</li>
78+
</section>
7979
);
8080
}
8181
export default MainTestDummy;

0 commit comments

Comments
 (0)