feat : 고객 파트너 페이지 수정

src/css/common.css

@@ -104,141 +104,48 @@ 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);}
 
-/* ── 공통 섹션 헤딩 — 가운데 정렬 ── */
-/* ── 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); }
-}
+/* ── Partners Page ── */
+.partners-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem 6rem; }
+.partners-title-block { padding: 5rem 0 3.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
+.partners-title-main { font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: #333; letter-spacing: -0.01em; line-height: 1.5; }
+.partners-title-main em { font-style: normal; font-weight: 700; color: #333; background: none; }
+.partners-title-desc { font-size: 13px; color: #bbb; line-height: 1.8; letter-spacing: 0.02em; }
+.partners-section-row { display: grid; grid-template-columns: 180px 1fr; gap: 3rem; align-items: start; padding: 4rem 0; border-top: 1px solid #e8e8e8; }
+.partners-sidebar { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; position: sticky; top: 100px; }
+.partners-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #aaa; }
+.partners-heading { font-size: 22px; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; }
+.partners-count { font-size: 12px; color: #bbb; margin-top: 6px; }
+.partners-grid { display: grid; border: 1px solid #e8e8e8; border-radius: 16px; overflow: hidden; }
+.partners-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.partners-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.partners-logo-cell { display: flex; align-items: center; justify-content: center; padding: 1.75rem 1.5rem; min-height: 100px; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; transition: background 0.15s ease; }
+.partners-grid--4 .partners-logo-cell:nth-child(4n) { border-right: none; }
+.partners-grid--4 .partners-logo-cell:nth-last-child(-n+4) { border-bottom: none; }
+.partners-grid--5 .partners-logo-cell:nth-child(5n) { border-right: none; }
+.partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: none; }
+.partners-logo-cell img { max-width: 75%; max-height: 28px; width: auto; height: auto; object-fit: contain; }
+.partners-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 4rem 0 0; border-top: 1px solid #e8e8e8; }
+.partners-cta-left { display: flex; flex-direction: column; gap: 8px; }
+.partners-cta-title { font-size: 22px; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.4; }
+.partners-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.85rem 2rem; border: 1px solid #222; border-radius: 100px; font-size: 14px; font-weight: 500; color: #111; background: transparent; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; }
+.partners-cta-btn:hover { background: #111; color: #fff; }
 @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); }
+.partners-wrap { padding: 0 1.25rem 4rem; }
+.partners-title-block { padding: 3rem 0 2rem; text-align: left; align-items: flex-start; }
+.partners-section-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
+.partners-sidebar { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
+.partners-heading { font-size: 18px; }
+.partners-heading br { display: none; }
+.partners-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.partners-grid--4 .partners-logo-cell:nth-child(4n) { border-right: 1px solid #e8e8e8; }
+.partners-grid--4 .partners-logo-cell:nth-last-child(-n+4) { border-bottom: 1px solid #e8e8e8; }
+.partners-grid--4 .partners-logo-cell:nth-child(2n) { border-right: none; }
+.partners-grid--4 .partners-logo-cell:nth-last-child(-n+2) { border-bottom: none; }
+.partners-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.partners-grid--5 .partners-logo-cell:nth-child(5n) { border-right: 1px solid #e8e8e8; }
+.partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: 1px solid #e8e8e8; }
+.partners-grid--5 .partners-logo-cell:nth-child(3n) { border-right: none; }
+.partners-grid--5 .partners-logo-cell:nth-last-child(-n+3) { border-bottom: none; }
+.partners-cta { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
 }

src/pages/company/PartnersPage.jsx

@@ -43,21 +43,9 @@ const PARTNERS = [
   "22",
 ];
 
-function ClientCard({ logo, basePath }) {
+function LogoCard({ logo, basePath }) {
   return (
-    <div className="partner-card">
-      <img
-        src={`${basePath}images/partner/banner${logo}.png`}
-        alt=""
-        loading="lazy"
-      />
-    </div>
-  );
-}
-
-function PartnerCard({ logo, basePath }) {
-  return (
-    <div className="partner-card">
+    <div className="partners-logo-cell">
       <img
         src={`${basePath}images/partner/banner${logo}.png`}
         alt=""
@@ -69,25 +57,27 @@ function PartnerCard({ logo, basePath }) {
 
 export default function PartnersPage() {
   const ref = useFadeIn();
-  const editorialRef = useRef(null);
+  const wrapRef = useRef(null);
   const basePath = import.meta.env.BASE_URL;
 
   useEffect(() => {
     const ctx = gsap.context(() => {
       gsap.fromTo(
-        ".partner-card",
-        { opacity: 0, y: 20, scale: 0.97 },
+        ".partners-logo-cell",
+        { opacity: 0, y: 16 },
         {
           opacity: 1,
           y: 0,
-          scale: 1,
-          duration: 0.6,
-          stagger: { each: 0.04, from: "start" },
+          duration: 0.5,
+          stagger: { each: 0.03, from: "start" },
           ease: "power3.out",
-          scrollTrigger: { trigger: ".partners-wrap", start: "top 80%" },
+          scrollTrigger: {
+            trigger: ".partners-wrap",
+            start: "top 80%",
+          },
         },
       );
-    }, editorialRef);
+    }, wrapRef);
     return () => ctx.revert();
   }, []);
 
@@ -106,45 +96,68 @@ export default function PartnersPage() {
         navItems={COMPANY_NAV}
       />
 
-      <div className="partners-wrap" ref={editorialRef}>
+      <div className="partners-wrap" ref={wrapRef}>
+        <div className="partners-title-block">
+          <h2 className="partners-title-main">
+            오랜 신뢰, 깊은 협력
+            <br />
+            <em>함께하는 기관과 파트너</em>
+          </h2>
+          <p className="partners-title-desc">
+            공공·항공·국방 분야의 주요 기관 및 기술 협력사와 함께 더 나은 미래를
+            만들어갑니다.
+          </p>
+        </div>
         {/* 주요 고객사 */}
-        <section className="partners-section">
-          <p className="partners-eyebrow">Clients</p>
-          <h2 className="partners-title">주요 고객사</h2>
-          <div className="partners-divider" />
-          <div className="partners-grid-8">
+        <div className="partners-section-row">
+          <div className="partners-sidebar">
+            <p className="partners-eyebrow">Clients</p>
+            <h2 className="partners-heading">
+              주요
+              <br />
+              고객사
+            </h2>
+            <p className="partners-count">{CLIENTS.length}개사</p>
+          </div>
+          <div className="partners-grid partners-grid--4">
             {CLIENTS.map((c) => (
-              <ClientCard key={c.id} logo={c.logo} basePath={basePath} />
+              <LogoCard key={c.id} logo={c.logo} basePath={basePath} />
             ))}
           </div>
-        </section>
+        </div>
 
         {/* 기술 협력사 */}
-        <section className="partners-section">
-          <p className="partners-eyebrow">Partners</p>
-          <h2 className="partners-title">기술 협력사</h2>
-          <div className="partners-divider" />
-          <div className="partners-grid-15">
+        <div className="partners-section-row">
+          <div className="partners-sidebar">
+            <p className="partners-eyebrow">Partners</p>
+            <h2 className="partners-heading">
+              기술
+              <br />
+              협력사
+            </h2>
+            <p className="partners-count">{PARTNERS.length}개사</p>
+          </div>
+          <div className="partners-grid partners-grid--5">
             {PARTNERS.map((num) => (
-              <PartnerCard key={num} logo={num} basePath={basePath} />
+              <LogoCard key={num} logo={num} basePath={basePath} />
             ))}
           </div>
-        </section>
+        </div>
 
         {/* CTA */}
-        <section className="partners-cta">
-          <div>
-            <p className="partners-cta-label">Become a Partner</p>
-            <h3 className="partners-cta-title">
+        <div className="partners-cta">
+          <div className="partners-cta-left">
+            <p className="partners-eyebrow">Become a Partner</p>
+            <p className="partners-cta-title">
               팔네트웍스와 함께 성장할
               <br />
               파트너를 찾습니다
-            </h3>
+            </p>
           </div>
           <a href="/contact/inquiry" className="partners-cta-btn">
-            협력 문의하기
+            협력 문의하기 →
           </a>
-        </section>
+        </div>
       </div>
     </article>
   );