From 739130cc7604895e2225dab6b3d125cacd426ac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?= Date: Tue, 26 May 2026 18:01:17 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EA=B3=A0=EA=B0=9D=20=ED=8C=8C?= =?UTF-8?q?=ED=8A=B8=EB=84=88=20=EC=B9=B4=EB=93=9C=ED=98=95=EC=8B=9D=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/common.css | 155 +++++++++++++-- src/pages/company/PartnersPage.jsx | 306 +++++++---------------------- 2 files changed, 202 insertions(+), 259 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index 5c53199..95d24cd 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -105,23 +105,140 @@ body{overflow-x:hidden;} .ab-eyebrow--light{color:rgba(255,255,255,.3);} /* ── 공통 섹션 헤딩 — 가운데 정렬 ── */ -.partner-section-heading{text-align:center;margin-bottom:20px;} -.partner-section-title{font-size:clamp(32px,4.5vw,60px);font-weight:800;color:#0a0f1e;line-height:1.08;letter-spacing:-0.04em;margin-bottom:14px;} -.partner-section-sub{font-size:clamp(13px,1.2vw,16px);color:rgba(26,31,94,.42);letter-spacing:-0.01em;} -.partner-hub-section{padding:72px 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:#1a1f5e;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 #e0e0eb;border-left:1px solid #e0e0eb;} -.partner-logo-card{display:flex;align-items:center;justify-content:center;padding:32px 24px;border-right:1px solid #e0e0eb;border-bottom:1px solid #e0e0eb;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);}} -@keyframes orbitSpin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } +/* ── Partners Page ── */ +.partners-wrap { + padding: 48px 0px; + display: flex; + flex-direction: column; + gap: 40px; + max-width: 1440px; + margin: 0 auto; +} + + +.partners-eyebrow { + font-size: 11px; + font-weight: 700; + letter-spacing: .16em; + text-transform: uppercase; + color: rgba(26,31,94,.38); + margin-bottom: 10px; +} + +.partners-title { + font-size: 22px; + font-weight: 800; + color: #0a0f1e; + margin-bottom: 16px; + letter-spacing: -.03em; +} + +.partners-divider { + height: 1px; + background: rgba(26,31,94,.08); + margin-bottom: 16px; +} + +/* 고객사 8개 — 4열 */ +.partners-grid-8 { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; +} + +/* 협력사 15개 — 5열 */ +.partners-grid-15 { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 8px; +} + +.partner-card { + background: #fff; + border: 1px solid rgba(26,31,94,.09); + border-radius: 10px; + padding: 0 20px; + display: flex; + align-items: center; + justify-content: center; + height: 88px; /* 고정 높이 */ + transition: border-color .2s, background .2s; +} + + +.partner-card:hover { + border-color: rgba(26,31,94,.2); + background: #fafbff; +} + +.partner-card img { + width: 120px; /* 고정 너비 */ + height: 48px; /* 고정 높이 */ + object-fit: contain; +} +/* CTA */ +.partners-cta { + background: var(--color-primary); + border-radius: 16px; + padding: 32px 40px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + flex-wrap: wrap; +} + +.partners-cta-label { + font-size: 11px; + font-weight: 700; + letter-spacing: .12em; + text-transform: uppercase; + color: rgba(255,255,255,.5); + margin-bottom: 8px; +} + +.partners-cta-title { + font-size: clamp(18px, 2vw, 24px); + font-weight: 800; + color: #fff; + letter-spacing: -.03em; + line-height: 1.3; +} + +.partners-cta-btn { + display: inline-flex; + align-items: center; + height: 48px; + padding: 0 28px; + background: #fff; + border-radius: 999px; + font-size: 14px; + font-weight: 700; + color: var(--color-primary); + text-decoration: none; + white-space: nowrap; + flex-shrink: 0; + transition: opacity .2s; +} + +.partners-cta-btn:hover { + opacity: .88; +} + +/* 반응형 */ +@media (max-width: 1280px) { + .partners-wrap { padding: 48px 48px; } +} +@media (max-width: 1024px) { + .partners-wrap { padding: 40px 32px; } + .partners-grid-8 { grid-template-columns: repeat(4, 1fr); } + .partners-grid-15 { grid-template-columns: repeat(4, 1fr); } +} +@media (max-width: 768px) { + .partners-wrap { padding: 32px 20px; } + .partners-grid-8 { grid-template-columns: repeat(2, 1fr); } + .partners-grid-15 { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 480px) { + .partners-grid-15 { 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 96f77d1..f359600 100644 --- a/src/pages/company/PartnersPage.jsx +++ b/src/pages/company/PartnersPage.jsx @@ -14,22 +14,18 @@ const COMPANY_NAV = [ { label: "찾아오시는 길", to: "/company/location" }, ]; -const CX = 380; -const CY = 230; -const ORBIT_R = 165; - const CLIENTS = [ - { 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 }, + { id: "airport", logo: "01" }, + { id: "kac", logo: "09" }, + { id: "mod", logo: "15" }, + { id: "incheon", logo: "16" }, + { id: "jeju", logo: "20" }, + { id: "kiast", logo: "21" }, + { id: "kari", logo: "23" }, + { id: "molit", logo: "24" }, ]; -const PARTNER_LOGOS = [ +const PARTNERS = [ "02", "03", "04", @@ -47,192 +43,26 @@ const PARTNER_LOGOS = [ "22", ]; -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); - const orbitRef = 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, - }, - ); - - gsap.to(orbitRef.current, { - rotation: 360, - svgOrigin: `${CX} ${CY}`, - duration: 30, - ease: "none", - repeat: -1, - paused: true, // 추가 - scrollTrigger: { - trigger: svgRef.current, - start: "top 75%", - toggleActions: "play pause resume pause", - }, - }); - }, svgRef); - return () => ctx.revert(); - }, []); - +function ClientCard({ logo, basePath }) { return ( - - + - - {CLIENTS.map((c) => { - const pos = nodePos(c.angle); - return ( - - ); - })} - - - - - - 주요 - - - 고객사 - - - 8 clients - - - - {CLIENTS.map((c) => { - const pos = nodePos(c.angle); - const imgSrc = `${basePath}images/partner/banner${c.logo}.png`; - return ( - - - - - ); - })} - + ); } -function LogoItem({ num, basePath }) { - const src = `${basePath}images/partner/banner${num}.png`; +function PartnerCard({ logo, basePath }) { return ( -
- +
+
); } @@ -245,22 +75,16 @@ export default function PartnersPage() { 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)", - }, + ".partner-card", + { opacity: 0, y: 20, scale: 0.97 }, { opacity: 1, y: 0, scale: 1, - clipPath: "inset(0 0% 0 0 round 0px)", - duration: 0.85, + duration: 0.6, stagger: { each: 0.04, from: "start" }, ease: "power3.out", - scrollTrigger: { trigger: ".partner-logo-grid", start: "top 78%" }, + scrollTrigger: { trigger: ".partners-wrap", start: "top 80%" }, }, ); }, editorialRef); @@ -282,43 +106,45 @@ export default function PartnersPage() { navItems={COMPANY_NAV} /> -
-
- {/* 주요 고객사 */} -
-
-

- 함께 만들어온 -
- 신뢰의 네트워크 -

-

- 공공·항공·국방 분야 핵심 기관과 오랜 협력 관계를 이어오고 - 있습니다 -

-
- -
- - {/* 기술 협력사 */} -
-
-
- Partners -

기술 협력사

-
-
- 15 - 협력사 -
-
-
- {PARTNER_LOGOS.map((num) => ( - - ))} -
-
-
+
+ {/* 주요 고객사 */} +
+

Clients

+

주요 고객사

+
+
+ {CLIENTS.map((c) => ( + + ))} +
+
+ + {/* 기술 협력사 */} +
+

Partners

+

기술 협력사

+
+
+ {PARTNERS.map((num) => ( + + ))} +
+
+ + {/* CTA */} +
+
+

Become a Partner

+

+ 팔네트웍스와 함께 성장할 +
+ 파트너를 찾습니다 +

+
+ + 협력 문의하기 + +
);