palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

TEST

remotes/origin/main
김지은 2 months ago
parent
1793381e57
commit
16696a8b3d
3 changed files with 93 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/components/ScrollToTop.jsx
  2. 10
      src/components/main/MainVisual.jsx
  3. 97
      src/pages/company/AboutPage.jsx

29
src/components/ScrollToTop.jsx
Unescape View File

@ -1,21 +1,38 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
// 이전 페이지 ScrollTrigger 전부 정리 (핀 잔재 제거)
// 모든 ScrollTrigger 인스턴스 완전 제거
ScrollTrigger.getAll().forEach((t) => t.kill());
ScrollTrigger.clearScrollMemory();
window.history.scrollRestoration = "manual";
gsap.killTweensOf("*");
// pin이 body에 추가한 스타일 강제 제거
document.body.style.removeProperty("overflow");
document.body.style.removeProperty("padding-bottom");
document.body.style.removeProperty("height");
document.documentElement.style.removeProperty("overflow");
document.documentElement.style.removeProperty("height");
// is-dark-hero 클래스 제거
document.body.classList.remove("is-dark-hero");
// 맨 위로 이동
// 스크롤 맨 위로
window.scrollTo({ top: 0, behavior: "instant" });
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// ScrollTrigger 리셋
ScrollTrigger.clearScrollMemory();
window.history.scrollRestoration = "manual";
// DOM 안정화 후 refresh
requestAnimationFrame(() => ScrollTrigger.refresh());
requestAnimationFrame(() => {
ScrollTrigger.refresh(true);
});
}, [pathname]);
return null;

10
src/components/main/MainVisual.jsx
Unescape View File

@ -88,7 +88,15 @@ function MainVisual() {
};
}, sectionRef);
return () => ctx.revert();
return () => {
ctx.revert();
// pin 잔재 강제 제거
ScrollTrigger.getAll().forEach((t) => t.kill());
document.body.style.removeProperty("overflow");
document.body.style.removeProperty("padding-bottom");
document.documentElement.style.removeProperty("overflow");
document.body.classList.remove("is-dark-hero");
};
}, []);
return (
<section className="main-section" ref={sectionRef}>

97
src/pages/company/AboutPage.jsx
Unescape View File

@ -37,7 +37,7 @@ const AWARDS = [
function animateCount(el, target, suffix, duration = 1600) {
const from = target > 100 ? target - 4 : 0;
let start = null;
const step = ts => {
const step = (ts) => {
if (!start) start = ts;
const p = Math.min((ts - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 3);
@ -61,53 +61,36 @@ export default function AboutPage() {
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 },
});
gsap.to(".ab-vid-txt", {
y: -80, opacity: 0,
y: -80,
opacity: 0,
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "55% top", scrub: 1 },
});
// 철학 텍스트 라인
gsap.fromTo(".ab-phil-line",
{ opacity: 0, x: -40 },
{ opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } }
);
gsap.fromTo(".ab-phil-line", { opacity: 0, x: -40 }, { opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
// 철학 오른쪽
gsap.fromTo(".ab-phil-right",
{ opacity: 0, x: 50 },
{ opacity: 1, x: 0, duration: 1.1, ease: "power3.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } }
);
gsap.fromTo(".ab-phil-body",
{ opacity: 0, y: 24 },
{ opacity: 1, y: 0, duration: 0.8, ease: "power2.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } }
);
gsap.fromTo(".ab-phil-right", { opacity: 0, x: 50 }, { opacity: 1, x: 0, duration: 1.1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
gsap.fromTo(".ab-phil-body", { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } });
// 핵심가치
gsap.fromTo(".ab-val-item",
{ opacity: 0, y: 40 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out",
scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } }
);
gsap.fromTo(".ab-val-item", { opacity: 0, y: 40 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out", scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } });
// 수상
gsap.fromTo(".ab-awd-row",
{ opacity: 0, y: 22 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out",
scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } }
);
gsap.fromTo(".ab-awd-row", { opacity: 0, y: 22 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out", scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } });
// CTA
gsap.fromTo(".ab-cta-inner > *",
{ opacity: 0, y: 28 },
{ opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out",
scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } }
);
gsap.fromTo(".ab-cta-inner > *", { opacity: 0, y: 28 }, { opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } });
// stats fade
gsap.fromTo(".ab-si",
gsap.fromTo(
".ab-si",
{ opacity: 0, y: 32 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out",
{
opacity: 1,
y: 0,
stagger: 0.1,
duration: 0.7,
ease: "power3.out",
scrollTrigger: {
trigger: ".ab-stats",
start: "top 78%",
@ -118,9 +101,9 @@ export default function AboutPage() {
if (!el) return;
setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 80);
});
}
}
}
},
},
},
);
});
@ -129,12 +112,7 @@ export default function AboutPage() {
return (
<article>
<SubHero
title={"가치를 실천하는\n항공 IT 전문기업"}
desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다."
navItems={COMPANY_NAV}
bgImage="/images/hero1.png"
/>
<SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} bgImage="/images/hero1.png" />
{/* 수치 */}
<section className="ab-stats">
@ -143,7 +121,10 @@ export default function AboutPage() {
<div className="ab-stats-grid">
{STATS.map((s, i) => (
<div className="ab-si" key={s.label}>
<strong className="ab-si-num" ref={el => statRefs.current[i] = el}>{s.num}{s.suffix}</strong>
<strong className="ab-si-num" ref={(el) => (statRefs.current[i] = el)}>
{s.num}
{s.suffix}
</strong>
<span className="ab-si-lbl">{s.label}</span>
<span className="ab-si-bar" />
</div>
@ -158,8 +139,16 @@ export default function AboutPage() {
<div className="ab-vid-overlay" />
<div className="ab-vid-txt">
<span className="ab-vid-kicker">PAL Networks × UAM</span>
<h2 className="ab-vid-title">미래의 하늘을<br />설계합니다</h2>
<p className="ab-vid-desc">도심항공교통(UAM)의 안전한 운항을 위한<br />통합 관제 기술을 연구·개발합니다</p>
<h2 className="ab-vid-title">
미래의 하늘을
<br />
설계합니다
</h2>
<p className="ab-vid-desc">
도심항공교통(UAM)의 안전한 운항을 위한
<br />
통합 관제 기술을 연구·개발합니다
</p>
</div>
</section>
@ -191,7 +180,7 @@ export default function AboutPage() {
<span className="ab-vals-ew">Core Values</span>
<h2 className="ab-vals-title">우리가 지키는 가치</h2>
<div className="ab-vals-list">
{VALUES.map(v => (
{VALUES.map((v) => (
<div className="ab-val-item" key={v.num}>
<span className="ab-val-num">{v.num}</span>
<div className="ab-val-body">
@ -233,11 +222,19 @@ export default function AboutPage() {
<div className="ab-cta-glow" />
<div className="ab-cta-inner">
<span className="ab-cta-chip">Contact Us</span>
<h2 className="ab-cta-title">팔네트웍스와<br />함께하세요</h2>
<h2 className="ab-cta-title">
팔네트웍스와
<br />
함께하세요
</h2>
<p className="ab-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
<div className="ab-cta-btns">
<Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w">문의하기</Link>
<Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g">채용 안내</Link>
<Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w">
문의하기
</Link>
<Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g">
채용 안내
</Link>
</div>
</div>
</section>

Write Preview
Loading…
Cancel
Save