|
|
|
|
@ -270,10 +270,6 @@ function VennDiagram({ inView }) {
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="mt-venn"> |
|
|
|
|
{/* |
|
|
|
|
── 등장 애니메이션 ── |
|
|
|
|
SVG 전체: 오른쪽에서 슬라이드 인 + fade |
|
|
|
|
*/} |
|
|
|
|
<motion.svg |
|
|
|
|
className="mt-venn__svg" |
|
|
|
|
viewBox={`0 0 ${SVG_W} ${SVG_H}`} |
|
|
|
|
@ -296,7 +292,7 @@ function VennDiagram({ inView }) {
|
|
|
|
|
))} |
|
|
|
|
</defs> |
|
|
|
|
|
|
|
|
|
{/* 바깥 장식 원 — fade in */} |
|
|
|
|
{/* 바깥 장식 원 */} |
|
|
|
|
<motion.circle |
|
|
|
|
cx={CX} |
|
|
|
|
cy={CY} |
|
|
|
|
@ -309,7 +305,7 @@ function VennDiagram({ inView }) {
|
|
|
|
|
transition={{ duration: 1, ease, delay: 0.35 }} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
{/* 가이드 원 실선 — fade in + scale */} |
|
|
|
|
{/* 가이드 원 실선 */} |
|
|
|
|
<motion.circle |
|
|
|
|
cx={CX} |
|
|
|
|
cy={CY} |
|
|
|
|
@ -323,7 +319,7 @@ function VennDiagram({ inView }) {
|
|
|
|
|
style={{ transformOrigin: `${CX}px ${CY}px` }} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
{/* 그라데이션 호 — DOM 직접 조작 */} |
|
|
|
|
{/* 그라데이션 호 */} |
|
|
|
|
<circle |
|
|
|
|
ref={arcRef} |
|
|
|
|
cx={CX} |
|
|
|
|
@ -337,7 +333,7 @@ function VennDiagram({ inView }) {
|
|
|
|
|
fill="none" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
{/* 도트 3개 — fade in */} |
|
|
|
|
{/* 도트 3개 */} |
|
|
|
|
{initDots.map((pos, k) => ( |
|
|
|
|
<motion.g |
|
|
|
|
key={`dot-${k}`} |
|
|
|
|
@ -364,11 +360,7 @@ function VennDiagram({ inView }) {
|
|
|
|
|
</motion.g> |
|
|
|
|
))} |
|
|
|
|
|
|
|
|
|
{/* |
|
|
|
|
── 소원 5개: stagger scale + fade in ── |
|
|
|
|
각 원을 motion.g로 감싸서 자신의 중심 기준으로 scale |
|
|
|
|
delay: 0.45 + i * 0.1 → 순서대로 등장 |
|
|
|
|
*/} |
|
|
|
|
{/* 소원 5개 */} |
|
|
|
|
{centers.map(({ x, y }, i) => { |
|
|
|
|
const isActive = activeFill === i; |
|
|
|
|
return ( |
|
|
|
|
@ -383,10 +375,10 @@ function VennDiagram({ inView }) {
|
|
|
|
|
}} |
|
|
|
|
style={{ transformOrigin: `${x}px ${y}px` }} |
|
|
|
|
> |
|
|
|
|
{/* 흰색 fill — 호를 가림 */} |
|
|
|
|
{/* 흰색 fill */} |
|
|
|
|
<circle cx={x} cy={y} r={CR} fill="white" /> |
|
|
|
|
|
|
|
|
|
{/* 그라데이션 fill — 활성일 때만 */} |
|
|
|
|
{/* 그라데이션 fill */} |
|
|
|
|
<circle |
|
|
|
|
cx={x} |
|
|
|
|
cy={y} |
|
|
|
|
@ -411,12 +403,13 @@ function VennDiagram({ inView }) {
|
|
|
|
|
style={{ transition: "stroke 0.4s ease" }} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
{/* 텍스트 */} |
|
|
|
|
{/* 타이틀만 — 설명 제거, 폰트 24→28px, 수직 중앙 정렬 */} |
|
|
|
|
<text |
|
|
|
|
x={x} |
|
|
|
|
y={y - 32} |
|
|
|
|
y={y + 6} |
|
|
|
|
textAnchor="middle" |
|
|
|
|
fontSize="18" |
|
|
|
|
dominantBaseline="middle" |
|
|
|
|
fontSize="24" |
|
|
|
|
fontWeight="700" |
|
|
|
|
fontFamily="inherit" |
|
|
|
|
fill={isActive ? "white" : "#1a1f5e"} |
|
|
|
|
@ -425,32 +418,6 @@ function VennDiagram({ inView }) {
|
|
|
|
|
> |
|
|
|
|
{CIRCLES[i].title} |
|
|
|
|
</text> |
|
|
|
|
<line |
|
|
|
|
x1={x - 28} |
|
|
|
|
y1={y - 18} |
|
|
|
|
x2={x + 28} |
|
|
|
|
y2={y - 18} |
|
|
|
|
stroke={ |
|
|
|
|
isActive ? "rgba(255,255,255,0.3)" : "rgba(100,80,160,0.15)" |
|
|
|
|
} |
|
|
|
|
strokeWidth="0.8" |
|
|
|
|
style={{ transition: "stroke 0.4s ease" }} |
|
|
|
|
/> |
|
|
|
|
{CIRCLES[i].items.map((item, j) => ( |
|
|
|
|
<text |
|
|
|
|
key={j} |
|
|
|
|
x={x} |
|
|
|
|
y={y + 4 + j * 22} |
|
|
|
|
textAnchor="middle" |
|
|
|
|
fontSize="15" |
|
|
|
|
fontWeight="400" |
|
|
|
|
fontFamily="inherit" |
|
|
|
|
fill={isActive ? "rgba(255,255,255,0.88)" : "#999"} |
|
|
|
|
style={{ transition: "fill 0.4s ease" }} |
|
|
|
|
> |
|
|
|
|
{item} |
|
|
|
|
</text> |
|
|
|
|
))} |
|
|
|
|
</motion.g> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
@ -522,24 +489,6 @@ function MaintenancePage() {
|
|
|
|
|
<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.62 }} |
|
|
|
|
> |
|
|
|
|
서비스 자세히 보기 |
|
|
|
|
<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> */} |
|
|
|
|
</div> |
|
|
|
|
<div className="mt-intro__right"> |
|
|
|
|
<VennDiagram inView={introInView} /> |
|
|
|
|
|