- {/*
- ── 등장 애니메이션 ──
- SVG 전체: 오른쪽에서 슬라이드 인 + fade
- */}
- {/* 바깥 장식 원 — fade in */}
+ {/* 바깥 장식 원 */}
- {/* 가이드 원 실선 — fade in + scale */}
+ {/* 가이드 원 실선 */}
- {/* 그라데이션 호 — DOM 직접 조작 */}
+ {/* 그라데이션 호 */}
- {/* 도트 3개 — fade in */}
+ {/* 도트 3개 */}
{initDots.map((pos, k) => (
))}
- {/*
- ── 소원 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 */}
- {/* 그라데이션 fill — 활성일 때만 */}
+ {/* 그라데이션 fill */}
- {/* 텍스트 */}
+ {/* 타이틀만 — 설명 제거, 폰트 24→28px, 수직 중앙 정렬 */}
{CIRCLES[i].title}
-
- {CIRCLES[i].items.map((item, j) => (
-
- {item}
-
- ))}
);
})}
@@ -522,24 +489,6 @@ function MaintenancePage() {
시스템의 가용성과 안정성을 지속적으로 보장합니다.
- {/*
- 서비스 자세히 보기
-
- */}