화면 피드백 메시지 — FE 메인테이너

SSOT

Toast의 디자인 정본은 @leysys/eds이다. 제품 저장소에서 .toast-icon, .toast-content, .toast-title, .toast-action, .toast-close의 위치·크기·margin을 재정의하지 않는다.

Toast 구조식

2행 Toast는 다음 수치 합성으로 고정한다.

text

first row slot 24
+ title-description gap 4
+ description line 20
= content 48

padding block 12 + content 48 + padding block 12
= outer layout height 72

--toast-slot-size: var(--button-height-xs) — 기본 24px
--toast-content-gap: 0.25rem — 4px
root는 align-items: flex-start
icon·close는 flex: 0 0 var(--toast-slot-size)로 축소 금지
title·action·close·icon의 첫 행 시작 좌표는 동일
상태 경계선은 inset paint layer라 레이아웃 크기를 늘리지 않음
margin-top: 1px|2px, transform, 제품 scoped override를 이용한 광학 보정 금지

설명이 두 줄로 줄바꿈되면 본문 높이만 20px 단위로 증가한다. 나머지 첫 행 슬롯은 계속 24px과 같은 시작 좌표를 유지한다.

컴포넌트 선택

상황	컴포넌트	이유
저장·삭제·복사 결과	Toast	일시적이고 비차단
화면 이용 전 알아야 할 설정	closable Alert	화면 맥락 안에서 지속
사용자가 시도한 동작이 차단됨	Alert Dialog	명시 응답 필요
특정 입력값 오류	Field inline error	문제 위치와 해결 위치 일치

비차단 안내를 큰 고정 카드로 반복 배치하지 않는다. 단, 닫은 뒤에도 업무상 계속 보여야 하는 감사·법적 상태는 별도 도메인 패턴으로 검토한다.

소비 지점

leyve-console-proto: 관리비 동적 테이블의 작업 결과 Toast
leyve-admin-frontend: src/components/AlertToast.vue

두 제품은 같은 EDS anatomy를 소비하며 로컬 정렬 CSS를 추가하지 않는다. 실제 제품의 Transition 스타일은 위치 계약과 무관하므로 유지할 수 있다.

회귀 검증

설치된 EDS 버전과 lockfile 버전을 exact로 일치시킨다.
2행 Toast의 외곽 높이 72px을 확인한다.
icon/title/action/close의 top과 높이 24px을 확인한다.
content gap 4px, 상하 padding 12px을 확인한다.
좁은 폭에서도 icon·close가 축소되지 않는지 확인한다.
제품 코드에 Toast 위치 override가 없는지 감사한다.

화면 피드백 메시지 — FE 메인테이너 ​

SSOT ​

Toast 구조식 ​

컴포넌트 선택 ​

소비 지점 ​