|
|
|
|
@ -1,47 +1,201 @@
|
|
|
|
|
import { useRef, useState, useEffect } from "react"; |
|
|
|
|
import { motion, useInView, animate } from "framer-motion"; |
|
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
import { useRef } from "react"; |
|
|
|
|
import { motion, useInView } from "framer-motion"; |
|
|
|
|
|
|
|
|
|
function MaintenancePage() { |
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
const introRef = useRef(null); |
|
|
|
|
const introInView = useInView(introRef, { once: true, margin: "-60px" }); |
|
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
|
const BUSINESS_NAV = [ |
|
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
|
|
|
|
|
|
const BUSINESS_NAV = [ |
|
|
|
|
{ label: "System Integration", to: "/business/si" }, |
|
|
|
|
{ label: "R&D", to: "/business/rnd" }, |
|
|
|
|
{ label: "운영 · 유지보수", to: "/business/maintenance" }, |
|
|
|
|
]; |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const SERVICES = [ |
|
|
|
|
{ |
|
|
|
|
num: "01", |
|
|
|
|
title: "모니터링", |
|
|
|
|
desc: "시스템 및 네트워크 상태를 24/7 실시간 모니터링", |
|
|
|
|
img: "./images/mt_icon01.png", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
num: "02", |
|
|
|
|
title: "장애 대응", |
|
|
|
|
desc: "이상 감지 시 전문 인력이 신속하게 원인 분석 및 복구", |
|
|
|
|
img: "./images/mt_icon02.png", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
num: "03", |
|
|
|
|
title: "보안 관리", |
|
|
|
|
desc: "취약점 점검 및 패치 관리로 안전한 시스템 운영", |
|
|
|
|
img: "./images/mt_icon03.png", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
num: "04", |
|
|
|
|
title: "기술 지원", |
|
|
|
|
desc: "운영 가이드, 문의 응대 및 기술 지원 제공", |
|
|
|
|
img: "./images/mt_icon04.png", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
num: "05", |
|
|
|
|
title: "지속적 개선", |
|
|
|
|
desc: "정기 리포트 및 분석을 통한 지속적인 서비스 개선", |
|
|
|
|
img: "./images/mt_icon05.png", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const KPI = [ |
|
|
|
|
{ value: 99.9, suffix: "%", label: "서비스 가용성", icon: "⏱" }, |
|
|
|
|
{ value: 24, suffix: "/7", label: "365일 실시간 운영", icon: "📡" }, |
|
|
|
|
{ value: 10, suffix: "m 24s", label: "평균 응답 시간", icon: "⚡" }, |
|
|
|
|
{ value: 100, suffix: "%", label: "SLA 준수율", icon: "✓" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
function CountUp({ target, suffix, inView }) { |
|
|
|
|
const [display, setDisplay] = useState(0); |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (!inView) return; |
|
|
|
|
const controls = animate(0, target, { |
|
|
|
|
duration: 1.8, |
|
|
|
|
ease: "easeOut", |
|
|
|
|
onUpdate: (v) => setDisplay(Math.round(v * 10) / 10), |
|
|
|
|
}); |
|
|
|
|
return controls.stop; |
|
|
|
|
}, [inView, target]); |
|
|
|
|
return ( |
|
|
|
|
<span> |
|
|
|
|
{display} |
|
|
|
|
{suffix} |
|
|
|
|
</span> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function MaintenancePage() { |
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
const introRef = useRef(null); |
|
|
|
|
const kpiRef = useRef(null); |
|
|
|
|
const servicesRef = useRef(null); |
|
|
|
|
const introInView = useInView(introRef, { once: true, margin: "-80px" }); |
|
|
|
|
const kpiInView = useInView(kpiRef, { once: true, margin: "-80px" }); |
|
|
|
|
const servicesInView = useInView(servicesRef, { once: true, margin: "-60px" }); |
|
|
|
|
const [activeIdx, setActiveIdx] = useState(0); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<article ref={ref}> |
|
|
|
|
<SubHero |
|
|
|
|
label="BUSINESS" |
|
|
|
|
title={ |
|
|
|
|
<> |
|
|
|
|
{/* <span style={{ color: "#111" }}>안정적인 시스템 관리</span> |
|
|
|
|
<br /> */} |
|
|
|
|
<em>Maintenance</em> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
// desc="구축 이후에도 끊김 없는 서비스 운영을 위해 장기 파트너십 기반의 유지보수를 제공합니다." |
|
|
|
|
navItems={BUSINESS_NAV} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
{/* 개요 인트로 */} |
|
|
|
|
<section className="fc-intro" ref={introRef}> |
|
|
|
|
<div className="fc-intro__left"> |
|
|
|
|
<motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
Overview |
|
|
|
|
{/* ── 인트로 섹션 ── */} |
|
|
|
|
<section className="mt-intro" ref={introRef}> |
|
|
|
|
{/* 좌측 */} |
|
|
|
|
<div className="mt-intro__left"> |
|
|
|
|
<motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 14 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
OUR SERVICE |
|
|
|
|
</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 /> |
|
|
|
|
전문적인 관리 서비스 |
|
|
|
|
|
|
|
|
|
<div className="mt-intro__title-wrap"> |
|
|
|
|
{["운영부터 개선까지", "전문적인 관리 서비스"].map((line, i) => ( |
|
|
|
|
<div className="mt-title-line" key={i}> |
|
|
|
|
<motion.h2 className="mt-intro__title" initial={{ y: "105%" }} animate={introInView ? { y: "0%" } : {}} transition={{ duration: 1.1, ease, delay: 0.15 + i * 0.1 }}> |
|
|
|
|
{line} |
|
|
|
|
</motion.h2> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<motion.p className="mt-intro__desc" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.7, ease, delay: 0.45 }}> |
|
|
|
|
전문 엔지니어가 시스템 전반을 관리하고, |
|
|
|
|
<br /> |
|
|
|
|
문제 발생 시 신속하게 대응하여 서비스 안정성을 유지합니다. |
|
|
|
|
</motion.p> |
|
|
|
|
|
|
|
|
|
<motion.a className="mt-intro__cta" href="/contact" initial={{ opacity: 0, y: 12 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease, delay: 0.58 }}> |
|
|
|
|
서비스 자세히 보기 |
|
|
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"> |
|
|
|
|
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> |
|
|
|
|
</svg> |
|
|
|
|
</motion.a> |
|
|
|
|
|
|
|
|
|
{/* quote 카드 */} |
|
|
|
|
<motion.div className="mt-quote" initial={{ opacity: 0, y: 20 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.8, ease, delay: 0.7 }}> |
|
|
|
|
<div className="mt-quote__mark">"</div> |
|
|
|
|
<p className="mt-quote__text"> |
|
|
|
|
안정적인 운영은 |
|
|
|
|
<br /> |
|
|
|
|
지속 가능한 성장의 |
|
|
|
|
<br /> |
|
|
|
|
기반입니다. |
|
|
|
|
</p> |
|
|
|
|
<span className="mt-quote__brand">PAL Networks</span> |
|
|
|
|
</motion.div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 우측 서비스 리스트 */} |
|
|
|
|
<div className="mt-intro__right"> |
|
|
|
|
<ul className="mt-svc-list"> |
|
|
|
|
{SERVICES.map((svc, i) => ( |
|
|
|
|
<motion.li key={i} className={`mt-svc-item${activeIdx === i ? " is-active" : ""}`} initial={{ opacity: 0, x: 24 }} animate={introInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.6, ease, delay: 0.3 + i * 0.08 }} onMouseEnter={() => setActiveIdx(i)}> |
|
|
|
|
<span className="mt-svc-item__num">{svc.num}</span> |
|
|
|
|
<div className="mt-svc-item__body"> |
|
|
|
|
<span className="mt-svc-item__title">{svc.title}</span> |
|
|
|
|
<span className="mt-svc-item__desc">{svc.desc}</span> |
|
|
|
|
</div> |
|
|
|
|
<div className="mt-svc-item__icon-wrap"> |
|
|
|
|
<img src={svc.img} alt={svc.title} className="mt-svc-item__icon" /> |
|
|
|
|
</div> |
|
|
|
|
<div className="mt-svc-item__bar" /> |
|
|
|
|
</motion.li> |
|
|
|
|
))} |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* ── KPI 바 ── */} |
|
|
|
|
<section className="mt-kpi" ref={kpiRef}> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
<div className="mt-kpi__grid"> |
|
|
|
|
{KPI.map((k, i) => ( |
|
|
|
|
<motion.div key={i} className="mt-kpi__item" initial={{ opacity: 0, y: 20 }} animate={kpiInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease, delay: i * 0.1 }}> |
|
|
|
|
<span className="mt-kpi__icon">{k.icon}</span> |
|
|
|
|
<span className="mt-kpi__value"> |
|
|
|
|
<CountUp target={k.value} suffix={k.suffix} inView={kpiInView} /> |
|
|
|
|
</span> |
|
|
|
|
<span className="mt-kpi__label">{k.label}</span> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* ── 5컬럼 서비스 ── */} |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
<section className="mt-services" ref={servicesRef}> |
|
|
|
|
<motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 14 }} animate={servicesInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
SERVICE DETAIL |
|
|
|
|
</motion.span> |
|
|
|
|
<div className="mt-services__grid"> |
|
|
|
|
{SERVICES.map((svc, i) => ( |
|
|
|
|
<motion.div key={i} className="mt-service-card" initial={{ opacity: 0, y: 32 }} animate={servicesInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.65, ease, delay: i * 0.1 }}> |
|
|
|
|
<div className="mt-service-card__img-wrap"> |
|
|
|
|
<img src={svc.img} alt={svc.title} className="mt-service-card__img" /> |
|
|
|
|
</div> |
|
|
|
|
<span className="mt-service-card__num">{svc.num}</span> |
|
|
|
|
<h3 className="mt-service-card__title">{svc.title}</h3> |
|
|
|
|
<p className="mt-service-card__desc">{svc.desc}</p> |
|
|
|
|
<div className="mt-service-card__line" /> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
