feat : IBE 페이지 작업 중

src/css/common.css

@@ -684,7 +684,7 @@ body{overflow-x:hidden;}
    2. intro 
 ════════════════ */
 
-.fc-intro { display: flex; gap: 48px; align-items: center; margin: 0 0 8rem; }
+.fc-intro { display: flex; gap: 48px; align-items: center; margin: 0 0 2rem; padding: 60px 0;}
 .fc-intro__left { flex: 1; }
 .fc-intro__title { font-size: 2rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 16px 0 28px; }
 .fc-intro__desc { font-size: 0.9rem; color: #666; line-height: 1.9; margin-bottom: 48px; }
@@ -698,7 +698,7 @@ body{overflow-x:hidden;}
 /* ════════════════
    3. 기능 하이라이트
 ════════════════ */
-.fc-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 8rem; align-items: center; }
+.fc-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 8rem; align-items: center; padding: 60px 0;}
 .fc-highlight__item { display: flex; gap: 24px; align-items: center; }
 .fc-highlight__text { flex: 0 0 40%; }
 .fc-highlight__title { font-size: 1.75rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 10px 0 16px; }
@@ -865,6 +865,51 @@ body{overflow-x:hidden;}
   .fc-highlight__desc { font-size: 0.82rem; }
   .fc-highlight__float-icon { width: 48px; height: 48px; }
   .fc-highlight__img-scene { transform: scale(0.75); transform-origin: top center; }
+}
 
+/* ════════════════════════════════
+   IBEPAGE — common.css 추가분
+════════════════════════════════ */
+.ibe-channel-section { padding: 60px 0; }
 
-}
+.ibe-channel__title { font-size: 2rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 12px 0 16px; }
+
+.ibe-channel__desc { font-size: 0.9rem; color: #666; line-height: 1.9; margin-bottom: 56px; }
+
+.ibe-channel__diagram { position: relative; width: min(1540px, 100%); height: 430px; margin: 0 auto; display: grid; grid-template-columns: 420px 1fr 420px; align-items: center; }
+
+.ibe-channel__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
+.ibe-channel__svg path { fill: none; stroke: rgba(217,72,137,0.42); stroke-width: 2; }
+.ibe-channel__svg circle { fill: #d94889; opacity: 0.85; }
+
+.ibe-channel__col { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 34px; }
+.ibe-channel__col--left { align-items: flex-start; }
+.ibe-channel__col--right { align-items: flex-end; }
+
+.ibe-channel__card { width: 285px; height: 82px; display: flex; align-items: center; gap: 18px; padding: 0 28px; border: 1px solid rgba(232,234,243,0.9); border-radius: 18px; background: rgba(255,255,255,0.92); box-shadow: 0 8px 28px rgba(31,34,64,0.11); }
+.ibe-channel__card img { width: 44px; height: 44px; object-fit: contain; }
+.ibe-channel__card span { font-size: 1rem; font-weight: 700; color: #1a1f3a; }
+
+.ibe-channel__center { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; }
+
+.ibe-channel__center-img { width: 310px; object-fit: contain; filter: drop-shadow(0 24px 35px rgba(93,47,151,0.22)); }
+
+.ibe-channel__svg path { fill: none; stroke: rgba(139,92,246,0.35); stroke-width: 2; stroke-dasharray: 12 6; animation: ibe-flow 2s linear infinite; }
+
+.ibe-channel__svg path:nth-child(2) { animation-delay: 0.3s; }
+.ibe-channel__svg path:nth-child(3) { animation-delay: 0.6s; }
+.ibe-channel__svg path:nth-child(4) { animation-delay: 0.2s; }
+.ibe-channel__svg path:nth-child(5) { animation-delay: 0.5s; }
+.ibe-channel__svg path:nth-child(6) { animation-delay: 0.8s; }
+
+.ibe-channel__svg circle { fill: #8b5cf6; opacity: 0.7; }
+
+@media (max-width: 1024px) {
+  .ibe-channel__diagram { width: 100%; height: auto; grid-template-columns: 1fr; gap: 24px; }
+  .ibe-channel__svg { display: none; }
+  .ibe-channel__col { flex-direction: row; flex-wrap: wrap; justify-content: center; }
+  .ibe-channel__col--left, .ibe-channel__col--right { align-items: center; }
+  .ibe-channel__card { width: 220px; height: 72px; }
+  .ibe-channel__center-img { width: 240px; }
+}
+@keyframes ibe-flow { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }

src/pages/solution/FlightControlPage.jsx

@@ -177,7 +177,7 @@ function FlightControlPage() {
       <div className="sub-content">
         <div className="inner-wrap">
           {/* 1. 개요 */}
-          <section className="fc-overview" ref={overviewRef}>
+          {/* <section className="fc-overview" ref={overviewRef}>
             <motion.img
               src="./images/test111.png"
               alt=""
@@ -240,7 +240,7 @@ function FlightControlPage() {
                 </div>
               </motion.div>
             </div>
-          </section>
+          </section> */}
 
           {/* 개요 인트로 */}
           <section className="fc-intro" ref={introRef}>

src/pages/solution/IbePage.jsx

@@ -1,8 +1,18 @@
 import useFadeIn from "../../hooks/useFadeIn";
 import SubHero from "../../components/SubHero";
+import { useRef } from "react";
+import { motion, useInView, AnimatePresence } from "framer-motion";
+
+const ease = [0.22, 1, 0.36, 1];
 
 function IbePage() {
+  const basePath = import.meta.env.BASE_URL;
+
   const ref = useFadeIn();
+  const introRef = useRef(null);
+  const introInView = useInView(introRef, { once: true, margin: "-60px" });
+  const channelRef = useRef(null);
+  const channelInView = useInView(channelRef, { once: true, margin: "-60px" });
   const SOLUTION_NAV = [
     { label: "비행상황관리 시스템", to: "/solution/flight-control" },
     { label: "IBE", to: "/solution/ibe" },
@@ -26,28 +36,191 @@ function IbePage() {
       />
 
       <div className="sub-content">
-        <section className="sub-section">
+        <div className="inner-wrap">
-          <span className="sub-section-eyebrow sub-fade-in">IBE</span>
+          {/* 개요 인트로 */}
-          {/* <main className="sub-page">
+          <section className="fc-intro" ref={introRef}>
-            <section className="sub-visual">
+            <div className="fc-intro__left">
-              <div className="inner">
+              <motion.span
-                <h2>IBE</h2>
+                className="fc-eyebrow"
-                <p>Internet Booking Engine</p>
+                initial={{ opacity: 0, y: 16 }}
+                animate={introInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.6, ease }}
+              >
+                Overview
+              </motion.span>
+              <motion.h2
+                className="fc-intro__title"
+                initial={{ opacity: 0, y: 24 }}
+                animate={introInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.7, ease, delay: 0.1 }}
+              >
+                항공 예약의 모든 과정을
+                <br />
+                하나로 연결하는 통합 플랫폼
+              </motion.h2>
+              <motion.p
+                className="fc-intro__desc"
+                initial={{ opacity: 0, y: 16 }}
+                animate={introInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.6, ease, delay: 0.2 }}
+              >
+                IBE(Internet Booking Engine)는 항공권 검색부터 예약, 결제,
+                <br />
+                발권까지 모든 프로세스를 지원하는 차세대 예약 엔진 입니다.{" "}
+                <br />
+                다양한 채널과 시스템을 유연하게 연동하여 최적의 예약 경험을
+                제공합니다.
+              </motion.p>
+              <motion.div
+                className="fc-intro__icons"
+                initial={{ opacity: 0, y: 16 }}
+                animate={introInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.6, ease, delay: 0.3 }}
+              >
+                {[
+                  { img: "ibe_intro_icon1.png", label: "다중 채널 연동" },
+                  { img: "ibe_intro_icon2.png", label: "실시간 예약/재고" },
+                  { img: "ibe_intro_icon3.png", label: "안정성과 확장성" },
+                  { img: "ibe_intro_icon4.png", label: "데이터 기반 운영" },
+                ].map((item, i) => (
+                  <div key={i} className="fc-intro__icon-item">
+                    <img
+                      src={`${basePath}images/${item.img}`}
+                      alt={item.label}
+                    />
+                    <span>{item.label}</span>
+                  </div>
+                ))}
+              </motion.div>
             </div>
+
+            <motion.div
+              className="fc-intro__right"
+              initial={{ opacity: 0, x: 40 }}
+              animate={introInView ? { opacity: 1, x: 0 } : {}}
+              transition={{ duration: 0.9, ease, delay: 0.15 }}
+            >
+              <img
+                src={`${basePath}images/ibe_computer.png`}
+                alt="비행상황관리 시스템"
+                className="fc-intro__monitor"
+              />
+            </motion.div>
           </section>
 
-            <section className="sub-content-section">
+          {/* MULTI CHANNEL INTEGRATION */}
-              <div className="inner">
+          <section className="ibe-channel-section" ref={channelRef}>
-                <h3>항공 예약 · 발권 엔진</h3>
+            <motion.span
-                <p>
+              className="fc-eyebrow"
-                  온라인 항공 예약과 발권을 위한 통합 엔진으로
+              initial={{ opacity: 0, y: 16 }}
-                  <br />
+              animate={channelInView ? { opacity: 1, y: 0 } : {}}
-                  안정적이고 확장 가능한 예약 플랫폼을 제공합니다.
+              transition={{ duration: 0.6, ease }}
-                </p>
+            >
+              Multi Channel Integration
+            </motion.span>
+            <motion.h2
+              className="ibe-channel__title"
+              initial={{ opacity: 0, y: 24 }}
+              animate={channelInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.7, ease, delay: 0.1 }}
+            >
+              다양한 시스템과의 유연한 연동
+            </motion.h2>
+            <motion.p
+              className="ibe-channel__desc"
+              initial={{ opacity: 0, y: 16 }}
+              animate={channelInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, ease, delay: 0.2 }}
+            >
+              항공사 GDS, 호텔, 결제, 보험 등 다양한 외부 시스템과 API 기반
+              연동을 통해 확장성 높은 예약 환경을 제공합니다.
+            </motion.p>
+
+            <motion.div
+              className="ibe-channel__diagram"
+              initial={{ opacity: 0, y: 40 }}
+              animate={channelInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.8, ease, delay: 0.3 }}
+            >
+              <svg
+                className="ibe-channel__svg"
+                viewBox="0 0 1540 430"
+                preserveAspectRatio="none"
+              >
+                <path
+                  className="ibe-channel__path"
+                  d="M350 95 C520 95 560 185 710 185"
+                />
+                <path
+                  className="ibe-channel__path"
+                  d="M350 215 C520 215 560 215 710 215"
+                />
+                <path
+                  className="ibe-channel__path"
+                  d="M350 335 C520 335 560 245 710 245"
+                />
+                <path
+                  className="ibe-channel__path"
+                  d="M830 185 C980 185 1020 95 1190 95"
+                />
+                <path
+                  className="ibe-channel__path"
+                  d="M830 215 C980 215 1020 215 1190 215"
+                />
+                <path
+                  className="ibe-channel__path"
+                  d="M830 245 C980 245 1020 335 1190 335"
+                />
+
+                <circle cx="350" cy="95" r="4" className="ibe-channel__dot" />
+                <circle cx="350" cy="215" r="4" className="ibe-channel__dot" />
+                <circle cx="350" cy="335" r="4" className="ibe-channel__dot" />
+                <circle cx="1190" cy="95" r="4" className="ibe-channel__dot" />
+                <circle cx="1190" cy="215" r="4" className="ibe-channel__dot" />
+                <circle cx="1190" cy="335" r="4" className="ibe-channel__dot" />
+              </svg>
+              <div className="ibe-channel__col ibe-channel__col--left">
+                {[
+                  { img: "ibe_pal_icon1.png", label: "항공사" },
+                  { img: "ibe_pal_icon2.png", label: "GDS" },
+                  { img: "ibe_pal_icon3.png", label: "호텔" },
+                ].map((item, i) => (
+                  <motion.div key={i} className="ibe-channel__card">
+                    <img
+                      src={`${basePath}images/${item.img}`}
+                      alt={item.label}
+                    />
+                    <span>{item.label}</span>
+                  </motion.div>
+                ))}
               </div>
+
+              <div className="ibe-channel__center">
+                <img
+                  src={`${basePath}images/ibe_pal_item.png`}
+                  alt="PAL IBE"
+                  className="ibe-channel__center-img"
+                />
+              </div>
+
+              <div className="ibe-channel__col ibe-channel__col--right">
+                {[
+                  { img: "ibe_pal_icon4.png", label: "결제 시스템" },
+                  { img: "ibe_pal_icon5.png", label: "여행사/OTA" },
+                  { img: "ibe_pal_icon6.png", label: "보험" },
+                ].map((item, i) => (
+                  <motion.div key={i} className="ibe-channel__card">
+                    <img
+                      src={`${basePath}images/${item.img}`}
+                      alt={item.label}
+                    />
+                    <span>{item.label}</span>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
           </section>
-          </main> */}
+        </div>
-        </section>
       </div>
     </article>
   );