Skip to content

Commit 499ed96

Browse files
yuhoyeongyuhoyeong
authored
[FRONTEND] 가이드 자세히보기 리뉴얼 (#105)
자세히 보기 삭제, 아래로 스크롤? 추가
1 parent e3880da commit 499ed96

File tree

6 files changed

+105
-90
lines changed

6 files changed

+105
-90
lines changed

‎frontend/src/assets/image/icon/scroll.png‎

5.83 KB
Loading

‎frontend/src/components/common/Guide/ContentArea/ContentArea.tsx‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import type { GuideData } from "../../../../types/guide";
66
import category from "@/assets/image/guideNav/category.svg";
77
import mainboard from "@/assets/image/guideNav/mainboard.svg";
88
import GuidePartButton from "../GuidePartButton/GuidePartButton";
9-
import ShowMoreButton from "../ShowMoreButton/ShowMoreButton";
109
import info from "@/assets/image/info.svg";
1110
import check from "@/assets/image/check.svg";
1211
import warning from "@/assets/image/warning.svg";
@@ -16,6 +15,7 @@ import { useLayoutEffect, useRef } from "react";
1615
import ReactMarkdown from "react-markdown";
1716
import rehypeHighlight from "rehype-highlight";
1817
import remarkGfm from "remark-gfm";
18+
import scroll from "@/assets/image/icon/scroll.png";
1919
import "highlight.js/styles/github.css";
2020
import "../../../../styles/globals/markdown.css";
2121

@@ -64,8 +64,7 @@ const partIconMap: Record<string, string> = {
6464
};
6565

6666
export default function ContentArea() {
67-
const { selectCategory, contentPart, setContentPart, showMore, setShowMore } =
68-
useGuidePart();
67+
const { selectCategory, contentPart, setContentPart } = useGuidePart();
6968

7069
// useGuideData 훅으로 데이터 가져오기
7170
const { data: allGuides, isLoading, error } = useGuideData();
@@ -93,35 +92,30 @@ export default function ContentArea() {
9392
// 이전 ScrollTrigger 인스턴스 정리
9493
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
9594

96-
// showMore가 true일 때만 애니메이션 생성
97-
if (showMore) {
98-
const imageHeight = image.clientHeight;
99-
100-
gsap.fromTo(
101-
image,
102-
{ opacity: 1 }, //애니메이션 시작 상태
103-
{
104-
opacity: 0,
105-
ease: "none",
106-
scrollTrigger: {
107-
trigger: content,
108-
scroller: container,
109-
start: `top ${imageHeight}px`, //trigger 요소의 top이 scroll 대상의 imageHeight 위치에 도달했을 때 애니메이션 시작
110-
end: `+=${imageHeight}px`,
111-
scrub: true, //스크롤 위치에 따라 애니메이션 진행
112-
},
113-
}
114-
);
115-
} else {
116-
// showMore가 false일 때는 opacity를 1로 리셋
117-
gsap.set(image, { opacity: 1 });
118-
}
95+
// 항상 애니메이션 적용
96+
const imageHeight = image.clientHeight;
97+
98+
gsap.fromTo(
99+
image,
100+
{ opacity: 1 }, //애니메이션 시작 상태
101+
{
102+
opacity: 0,
103+
ease: "none",
104+
scrollTrigger: {
105+
trigger: content,
106+
scroller: container,
107+
start: `top ${imageHeight}px`, //trigger 요소의 top이 scroll 대상의 imageHeight 위치에 도달했을 때 애니메이션 시작
108+
end: `+=${imageHeight}px`,
109+
scrub: true, //스크롤 위치에 따라 애니메이션 진행
110+
},
111+
}
112+
);
119113

120114
// cleanup 함수
121115
return () => {
122116
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
123117
};
124-
}, [showMore, currentData]);
118+
}, [currentData]);
125119

126120
// 로딩 상태 처리
127121
if (isLoading) {
@@ -173,7 +167,7 @@ export default function ContentArea() {
173167
</div>
174168

175169
<div className={style.contentWrapper} ref={contentRef}>
176-
<div className={`${style.content} ${showMore ? style.showMore : ""}`}>
170+
<div className={`${style.content} ${style.showMore}`}>
177171
<div className={style.title}>
178172
<img src={iconMap[displayName]} alt="category icon" />
179173
<div className={style.category}>{displayName}</div>
@@ -188,12 +182,23 @@ export default function ContentArea() {
188182
isActive={item.title === contentPart}
189183
onClick={() => {
190184
setContentPart(item.title);
191-
setShowMore(false);
192185
}}
193186
/>
194187
))}
195188
</div>
196189
<div className={style.textContent}>
190+
{contentPart === "주요 특징" && (
191+
<div className={style.scrollGuide}>
192+
<div className={style.scrollText}>아래로 스크롤</div>
193+
<div className={style.scrollArrows}>
194+
<img
195+
className={style.scrollArrow}
196+
src={scroll}
197+
alt="scroll arrow"
198+
/>
199+
</div>
200+
</div>
201+
)}
197202
<div className={`${style.description} markdown-content`}>
198203
<ReactMarkdown
199204
remarkPlugins={[remarkGfm]}
@@ -202,27 +207,22 @@ export default function ContentArea() {
202207
{cleanMarkdown(currentPart?.description || "")}
203208
</ReactMarkdown>
204209
</div>
205-
{showMore && (
206-
<div className={style.detail}>
207-
{currentPart?.details.map((detail) => (
208-
<div key={detail.title} className={style.detailItem}>
209-
<div className={style.detailItemTitle}>{detail.title}</div>
210-
<div className={`${style.detailItemDesc} markdown-content`}>
211-
<ReactMarkdown
212-
remarkPlugins={[remarkGfm]}
213-
rehypePlugins={[rehypeHighlight]}
214-
>
215-
{cleanMarkdown(detail.description)}
216-
</ReactMarkdown>
217-
</div>
210+
211+
<div className={style.detail}>
212+
{currentPart?.details.map((detail) => (
213+
<div key={detail.title} className={style.detailItem}>
214+
<div className={style.detailItemTitle}>{detail.title}</div>
215+
<div className={`${style.detailItemDesc} markdown-content`}>
216+
<ReactMarkdown
217+
remarkPlugins={[remarkGfm]}
218+
rehypePlugins={[rehypeHighlight]}
219+
>
220+
{cleanMarkdown(detail.description)}
221+
</ReactMarkdown>
218222
</div>
219-
))}
220-
</div>
221-
)}
222-
<ShowMoreButton
223-
isExpanded={showMore}
224-
onClick={() => setShowMore(!showMore)}
225-
/>
223+
</div>
224+
))}
225+
</div>
226226
</div>
227227
</div>
228228
</div>

‎frontend/src/components/common/Guide/ContentArea/contentArea.module.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,56 @@
8181
padding: 26px 0;
8282
font-size: 15px;
8383
font-weight: 500;
84+
}
85+
86+
.scrollGuide {
87+
display: flex;
88+
flex-direction: column;
89+
align-items: center;
90+
gap: 8px;
91+
padding: 40px 0;
92+
margin: 10px 0;
93+
}
94+
95+
.scrollText {
96+
font-weight: 600;
97+
color: #000;
98+
letter-spacing: 2px;
99+
}
100+
101+
.scrollArrows {
102+
display: flex;
103+
flex-direction: column;
104+
gap: 2px;
105+
align-items: center;
106+
}
107+
108+
.scrollArrow {
109+
width: 48px;
110+
height: 48px;
111+
animation: scrollBounce 1.2s infinite;
112+
}
113+
114+
.scrollArrow:nth-child(2) {
115+
animation-delay: 0.2s;
116+
opacity: 0.7;
117+
}
118+
119+
.scrollArrow:nth-child(3) {
120+
animation-delay: 0.4s;
121+
opacity: 0.4;
122+
}
123+
124+
@keyframes scrollBounce {
125+
126+
0%,
127+
100% {
128+
transform: translateY(0);
129+
opacity: 1;
130+
}
131+
132+
50% {
133+
transform: translateY(10px);
134+
opacity: 0.3;
135+
}
84136
}

‎frontend/src/components/common/Guide/ShowMoreButton/ShowMoreButton.tsx‎

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

‎frontend/src/components/common/Guide/ShowMoreButton/showMoreButton.module.css‎

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

‎frontend/src/styles/globals/variables.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
:root {
22
/* ===== 색상 팔레트 ===== */
3+
/* brand colors */
4+
--color-brand-light: #f0f9ff;
5+
--color-brand: #ff5525;
6+
37
/* Primary Colors */
48
--color-primary-50: #eff6ff;
59
--color-primary-100: #dbeafe;

0 commit comments

Comments
 (0)