서버팀의 Grafana 모니터링 시스템 적용으로 인한 서버점검 안내를 위해 MaintenanceView를 구현했다. 기존 앱의 디자인 시스템을 준수하면서도 사용자에게 명확한 정보를 전달할 수 있도록 구성했다.
1. MaintenanceView 구현
struct MaintenanceView: View {
var body: some View {
VStack(spacing: 30) {
// 상단 아이콘
ZStack {
Circle()
.fill(Color.softBlue)
.overlay {
Circle()
.fill(.white.opacity(0.2))
}
.frame(width: 120, height: 120)
Image(systemName: "wrench.and.screwdriver.fill")
.font(.system(size: 50))
.foregroundStyle(.white)
}
.padding(.top, 50)
// 제목
VStack(alignment: .leading, spacing: 10) {
Text("서버 점검 안내")
.font(.custom("GmarketSansBold", size: 28))
.foregroundStyle(Color.darkNavy)
Text("더 나은 서비스로 곧 돌아오겠습니다.")
.font(.custom("GmarketSansLight", size: 14))
.foregroundStyle(.gray)
}
// 점검 정보 카드
VStack(alignment: .leading, spacing: 20) {
VStack(alignment: .leading, spacing: 8) {
Text("점검 일시")
.font(.custom("GmarketSansMedium", size: 16))
.foregroundStyle(Color.darkNavy)
Text("2024년 3월 21일 17:00 ~ 3월 22일 09:00")
.font(.custom("GmarketSansBold", size: 18))
.foregroundStyle(Color.softBlue)
}
VStack(alignment: .leading, spacing: 8) {
Text("점검 내용")
.font(.custom("GmarketSansMedium", size: 16))
.foregroundStyle(Color.darkNavy)
VStack(alignment: .leading, spacing: 5) {
Text("• Grafana 모니터링 시스템 적용")
Text("• 서버 성능 개선 및 안정화")
}
.font(.custom("GmarketSansLight", size: 14))
.foregroundStyle(.gray)
}
}
.padding(25)
.background(
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.softBlue)
.overlay(alignment: .leading) {
Circle()
.fill(Color.softBlue)
.overlay {
Circle()
.fill(.white.opacity(0.2))
}
.scaleEffect(2, anchor: .topLeading)
.offset(x: -50, y: -40)
}
)
.clipShape(RoundedRectangle(cornerRadius: 25, style: .continuous))
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(uiColor: .systemGroupedBackground))
}
}