Alerts

알림(Alert)은 피드백/상태 전달에 필수입니다. Kosmos DSL로 일관된 경고/정보/성공/위험 메시지를 구성하세요.

기본 Alert

Bootstrap의 컨텍스트 색을 활용합니다. 아이콘/ARIA를 함께 사용하면 접근성이 좋아집니다.

public class CompAlert implements HtmlComponent {
  private final String severity;   // primary | secondary | success | danger | warning | info | light | dark
  private final String message;    // HTML-safe text
  private final boolean dismissible;

  public CompAlert(String severity, String message, boolean dismissible) {
    this.severity = severity; this.message = message; this.dismissible = dismissible;
  }

  @Override public String render(RenderContext ctx) {
    var cls = "alert alert-" + severity + (dismissible ? " alert-dismissible fade show" : "");
    var root = El.div().css(cls).attr("role", "alert").child(
      El.span().text(message)
    );
    if (dismissible) {
      root.child(
        El.button().css("btn-close").attr("type","button")
          .attr("data-bs-dismiss","alert").attr("aria-label","닫기")
      );
    }
    return root.render(ctx);
  }
}

사용 예시

// 정보
new CompAlert("info", "가이드 문서를 먼저 확인하세요.", false);

// 성공 (닫기 가능)
new CompAlert("success", "저장에 성공했습니다.", true);

// 경고 (아이콘 추가)
El.div().child(
  El.i().css("bi bi-exclamation-triangle me-2").attr("aria-hidden","true"),
  new CompAlert("warning", "필수 항목을 확인하세요.", false)
);

변형(Variants)

유형 사용 상황 DSL 힌트
정보 (info) 일반 안내/도움말 alert alert-info
성공 (success) 저장/완료/승인 alert alert-success
경고 (warning) 주의/검토 필요 alert alert-warning
위험 (danger) 실패/권한 없음/에러 alert alert-danger
해제 가능 일시적 피드백 alert-dismissible fade show + btn-close

심화: 폼 검증과 통합

// 검증 실패 메시지 묶음 표출
public class CompValidationAlert implements HtmlComponent {
  private final List<String> errors;
  public CompValidationAlert(List<String> errors) { this.errors = errors; }
  @Override public String render(RenderContext ctx) {
    if (errors == null || errors.isEmpty()) return "";
    return El.div().css("alert alert-danger").attr("role","alert").children(
      El.h3().css("h6 mb-2").text("입력값을 확인하세요."),
      El.ul().css("mb-0").children(
        errors.stream().map(e -> El.li().text(e)).toList()
      )
    ).render(ctx);
  }
}

Alert 해부도

alert alert-warning role="alert" btn-close

접근성 & UX 체크리스트

  • role="alert"로 보조기기 인식을 돕습니다.
  • 중요 알림은 페이지 상단 또는 폼 상단에 배치합니다.
  • 해제 가능한 알림은 닫기 버튼에 aria-label="닫기"를 제공합니다.
  • 모달 내부 알림은 포커스 흐름을 고려하고, 색상만으로 의미를 전달하지 않도록 아이콘/텍스트를 병행합니다.

주의사항

남용 금지: 페이지 내 알림이 많으면 사용자가 둔감해집니다. 우선순위를 정리하세요.
HTML 주입: 서버가 신뢰하지 않는 HTML을 메시지로 직접 출력하지 마세요. 반드시 이스케이프하거나 화이트리스트 렌더링을 사용하세요.

다음으로