{navItems.map((item) => (
-
+
{item.label}
))}
diff --git a/src/css/common.css b/src/css/common.css
index de8221c..8a70260 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -27,9 +27,19 @@ body{overflow-x:hidden;}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
/*sh4 subhero*/
-.sh4{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));padding:calc(var(--header-height) + 80px) 80px 96px;background:#fff;}
+.sh4 {
+ position: relative;
+ overflow: hidden;
+ margin-top: calc(-1 * var(--header-height));
+ padding: calc(var(--header-height) + 80px) 80px 96px;
+ background:
+ radial-gradient(ellipse 80% 60% at 70% 110%, rgba(217, 72, 137, 0.10) 0%, transparent 60%),
+ radial-gradient(ellipse 60% 50% at 10% -10%, rgba(123, 63, 160, 0.10) 0%, transparent 55%),
+ radial-gradient(ellipse 50% 40% at 90% 10%, rgba(25, 141, 199, 0.08) 0%, transparent 50%),
+ linear-gradient(155deg, #f5f4fb 0%, #faf5fc 35%, #f0f6fb 70%, #f8f4fa 100%);
+}
+/* .sh4{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));padding:calc(var(--header-height) + 80px) 80px 96px;background:#fff;} */
.sh4-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
-.sh4-left{}
.sh4-right{position:relative;height:100%;min-height:320px;}
.sh4-label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,31,94,.38);margin-bottom:20px;opacity:0;transform:translateY(10px);animation:sh4Up .55s cubic-bezier(.16,1,.3,1) forwards;}
.sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:var(--navy);}
@@ -94,3 +104,20 @@ body{overflow-x:hidden;}
.ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
.ab-eyebrow--light{color:rgba(255,255,255,.3);}
+/* ── 공통 섹션 헤딩 — 가운데 정렬 ── */
+.partner-section-heading{text-align:center;margin-bottom:24px;}
+.partner-section-title{font-size:clamp(28px,4vw,52px);font-weight:700;color:#0f1628;line-height:1.25;margin-bottom:24px;}
+.partner-section-sub{font-size:clamp(13px,1.4vw,16px);color:#9499b0;letter-spacing:-0.01em;}
+.partner-hub-section{padding:40px 0 0;}
+.client-hub-svg{display:block;width:100%;height:auto;}
+.partner-logo-section{padding:40px 0 60px;background:#f7f8fc;}
+.partner-logo-top{display:flex;justify-content:space-between;align-items:flex-end;max-width:1440px;margin:0 auto 24px;padding:0 40px;}
+.partner-logo-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;}
+.partner-logo-stat{display:flex;flex-direction:column;align-items:flex-end;}
+.partner-logo-stat__num{font-size:48px;font-weight:700;color:#0f1628;line-height:1;}
+.partner-logo-stat__label{font-size:12px;color:#9499b0;margin-top:4px;}
+.partner-logo-grid--partners{display:grid;grid-template-columns:repeat(5,1fr);max-width:1440px;margin:0 auto;background-color:#fff;border-top:1px solid #ebebf0;border-left:1px solid #ebebf0;}
+.partner-logo-card{display:flex;align-items:center;justify-content:center;padding:32px 24px;border-right:1px solid #ebebf0;border-bottom:1px solid #ebebf0;background:#fff;}
+.partner-logo-card img{max-width:120px;max-height:52px;width:100%;object-fit:contain;}
+@media(max-width:768px){.partner-logo-grid--partners{grid-template-columns:repeat(3,1fr);}}
+@media(max-width:480px){.partner-logo-grid--partners{grid-template-columns:repeat(2,1fr);}}
\ No newline at end of file
diff --git a/src/pages/company/PartnersPage.jsx b/src/pages/company/PartnersPage.jsx
index 26879b2..42e83cb 100644
--- a/src/pages/company/PartnersPage.jsx
+++ b/src/pages/company/PartnersPage.jsx
@@ -1,6 +1,12 @@
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
+gsap.registerPlugin(ScrollTrigger);
+
const COMPANY_NAV = [
{ label: "회사소개", to: "/company/about" },
{ label: "연혁", to: "/company/history" },
@@ -8,37 +14,233 @@ const COMPANY_NAV = [
{ label: "찾아오시는 길", to: "/company/location" },
];
+const CX = 380;
+const CY = 230;
+const ORBIT_R = 165;
+
const CLIENTS = [
- { name: "인천국제공항공사", type: "공공기관" },
- { name: "한국공항공사", type: "공공기관" },
- { name: "국방부", type: "정부기관" },
- { name: "인천광역시", type: "지방자치단체" },
- { name: "제주도관광공사", type: "공공기관" },
- { name: "항공안전기술원", type: "공공기관" },
- { name: "한국항공우주연구원", type: "연구기관" },
- { name: "국토교통부", type: "정부기관" },
+ { id: "airport", logo: "01", angle: -90 },
+ { id: "kac", logo: "09", angle: -45 },
+ { id: "mod", logo: "15", angle: 0 },
+ { id: "incheon", logo: "16", angle: 45 },
+ { id: "jeju", logo: "20", angle: 90 },
+ { id: "kiast", logo: "21", angle: 135 },
+ { id: "kari", logo: "23", angle: 180 },
+ { id: "molit", logo: "24", angle: -135 },
];
-const PARTNERS = [
- { name: "KT", type: "클라우드 파트너" },
- { name: "마이크로소프트", type: "기술 파트너" },
- { name: "오라클", type: "기술 파트너" },
- { name: "삼성SDS", type: "SI 파트너" },
- { name: "한화시스템", type: "방산·항공" },
- { name: "LG CNS", type: "SI 파트너" },
+const PARTNER_LOGOS = [
+ "02",
+ "03",
+ "04",
+ "05",
+ "06",
+ "07",
+ "08",
+ "10",
+ "11",
+ "12",
+ "13",
+ "14",
+ "18",
+ "19",
+ "22",
];
-function PartnerCard({ name, type }) {
+function toRad(deg) {
+ return (deg * Math.PI) / 180;
+}
+function nodePos(angle) {
+ return {
+ x: CX + ORBIT_R * Math.cos(toRad(angle)),
+ y: CY + ORBIT_R * Math.sin(toRad(angle)),
+ };
+}
+
+function ClientHub({ basePath }) {
+ const svgRef = useRef(null);
+
+ useEffect(() => {
+ const ctx = gsap.context(() => {
+ gsap.fromTo(
+ ".hub-edge",
+ { strokeDashoffset: 200, opacity: 0 },
+ {
+ strokeDashoffset: 0,
+ opacity: 1,
+ duration: 1.1,
+ stagger: 0.07,
+ ease: "power2.out",
+ scrollTrigger: { trigger: svgRef.current, start: "top 75%" },
+ },
+ );
+ gsap.fromTo(
+ ".hub-center",
+ { scale: 0.6, opacity: 0, transformOrigin: `${CX}px ${CY}px` },
+ {
+ scale: 1,
+ opacity: 1,
+ duration: 0.7,
+ ease: "back.out(1.6)",
+ scrollTrigger: { trigger: svgRef.current, start: "top 80%" },
+ },
+ );
+ gsap.fromTo(
+ ".hub-node",
+ { scale: 0, opacity: 0 },
+ {
+ scale: 1,
+ opacity: 1,
+ duration: 0.55,
+ stagger: 0.06,
+ ease: "back.out(1.4)",
+ scrollTrigger: { trigger: svgRef.current, start: "top 75%" },
+ delay: 0.35,
+ },
+ );
+ }, svgRef);
+ return () => ctx.revert();
+ }, []);
+
+ return (
+
+ );
+}
+
+function LogoItem({ num, basePath }) {
+ const src = `${basePath}images/partner/banner${num}.png`;
return (
-
-
{name}
-
{type}
+
+
);
}
export default function PartnersPage() {
const ref = useFadeIn();
+ const editorialRef = useRef(null);
+ const basePath = import.meta.env.BASE_URL;
+
+ useEffect(() => {
+ const ctx = gsap.context(() => {
+ gsap.fromTo(
+ ".partner-logo-card",
+ {
+ opacity: 0,
+ y: 36,
+ scale: 0.96,
+ clipPath: "inset(0 100% 0 0 round 0px)",
+ },
+ {
+ opacity: 1,
+ y: 0,
+ scale: 1,
+ clipPath: "inset(0 0% 0 0 round 0px)",
+ duration: 0.85,
+ stagger: { each: 0.04, from: "start" },
+ ease: "power3.out",
+ scrollTrigger: { trigger: ".partner-logo-grid", start: "top 78%" },
+ },
+ );
+ }, editorialRef);
+ return () => ctx.revert();
+ }, []);
return (
@@ -55,115 +257,43 @@ export default function PartnersPage() {
navItems={COMPANY_NAV}
/>
-
- {/* 주요 고객사 */}
-
- Clients
- 주요 고객사
-
- 인천국제공항공사, 국방부 등 항공·공공 분야 핵심 기관들과 장기
- 파트너십을 유지하며 안정적인 IT 서비스를 제공합니다.
-
-
-
- {CLIENTS.map((c, i) => (
-
-
+
+
+ {/* 주요 고객사 */}
+
+
+
+ 함께 만들어온
+
+ 신뢰의 네트워크
+
+
+ 공공·항공·국방 분야 핵심 기관과 오랜 협력 관계를 이어오고
+ 있습니다
+
+
+
+
+
+ {/* 기술 협력사 */}
+
+
+
+ Partners
+
기술 협력사
- ))}
-
-
-
- {/* 협력사 */}
-
- Partners
- 기술 협력사
-
- 국내외 선도 IT 기업들과의 협력을 통해 최적의 기술 솔루션을 고객에게
- 제공합니다.
-
-
-
- {PARTNERS.map((p, i) => (
-
-
-
- {/* 협력 제안 CTA */}
-
-
-
-
- Become a Partner
-
-
- 팔네트웍스와 함께 성장할
-
- 파트너를 찾습니다
-
-
- 협력 문의하기
-
-
-
+
+ {PARTNER_LOGOS.map((num) => (
+
+ ))}
+
+
+
);