From 319cd320eb35e759093a3c016cb3e3db2e52b9ea Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Wed, 13 May 2026 13:09:37 +0900 Subject: [PATCH] TEST --- src/components/SubHero.jsx | 128 ++++++++++---------- src/css/common.css | 179 ++++++++++++++++++++++++++- src/css/main.css | 13 +- src/pages/company/AboutPage.jsx | 206 ++++++++++++++++---------------- 4 files changed, 356 insertions(+), 170 deletions(-) diff --git a/src/components/SubHero.jsx b/src/components/SubHero.jsx index dd29b35..e2f0104 100644 --- a/src/components/SubHero.jsx +++ b/src/components/SubHero.jsx @@ -2,39 +2,29 @@ import { useEffect, useRef, useState } from "react"; import { Link, useLocation } from "react-router-dom"; const menuMap = { - "/company": { label: "Company", color: "dark" }, - "/uam": { label: "UAM / UATM", color: "dark" }, - "/business": { label: "Business", color: "dark" }, - "/solution": { label: "Solution", color: "dark" }, - "/contact": { label: "Contact Us", color: "dark" }, + "/company": { label: "Company" }, + "/uam": { label: "UAM / UATM" }, + "/business": { label: "Business" }, + "/solution": { label: "Solution" }, + "/contact": { label: "Contact Us" }, }; export default function SubHero({ title, desc, navItems, bgImage }) { const { pathname } = useLocation(); - const topPath = "/" + pathname.split("/")[1]; + const topPath = "/" + pathname.split("/")[1]; const topLabel = menuMap[topPath]?.label || ""; - const currentLabel = navItems?.find((n) => n.to === pathname)?.label || ""; + const curLabel = navItems?.find((n) => n.to === pathname)?.label || ""; const [dropOpen, setDropOpen] = useState(false); - const bgRef = useRef(null); - const txtRef = useRef(null); - const lineRef = useRef(null); - const fl1Ref = useRef(null); - const fl2Ref = useRef(null); - const descRef = useRef(null); + const [scrollY, setScrollY] = useState(0); const dropRef = useRef(null); - // 히어로 진입 애니 useEffect(() => { - const t1 = setTimeout(() => bgRef.current?.classList.add("sh-bg--zoomed"), 80); - const t2 = setTimeout(() => lineRef.current?.classList.add("sh-line--drawn"), 600); - const t3 = setTimeout(() => fl1Ref.current?.classList.add("sh-fill--on"), 200); - const t4 = setTimeout(() => fl2Ref.current?.classList.add("sh-fill--on"), 480); - const t5 = setTimeout(() => descRef.current?.classList.add("sh-desc--on"), 900); - return () => [t1, t2, t3, t4, t5].forEach(clearTimeout); - }, [pathname]); + const onScroll = () => setScrollY(window.scrollY); + window.addEventListener("scroll", onScroll, { passive: true }); + return () => window.removeEventListener("scroll", onScroll); + }, []); - // 외부 클릭 시 드롭다운 닫기 useEffect(() => { const handler = (e) => { if (!dropRef.current?.contains(e.target)) setDropOpen(false); @@ -43,75 +33,85 @@ export default function SubHero({ title, desc, navItems, bgImage }) { return () => document.removeEventListener("mousedown", handler); }, []); - const titleLines = typeof title === "string" ? title.split("\n") : [title]; + const parallaxY = scrollY * 0.45; + const fadeOpacity = Math.max(0, 1 - scrollY / 420); + const titleLines = typeof title === "string" ? title.split("\n") : [title]; return ( <> - {/* 히어로 */} -
-
-
-
- -
- {/* 브레드크럼 */} - - {/* 타이틀 */} -

+
{titleLines.map((line, i) => ( - +

{line} - +

))} -

- {desc && ( -

- {desc} -

- )} +
+ + {desc &&

{desc}

} +
-
+
+ scroll +
+
- {/* 서브 탭 네비 */} {navItems?.length > 1 && ( -