hereby Platform

한국어

English

한국어

English

다크 모드

Notice (인라인 알림) ​

모달·폼 내부의 맥락 안내·경고·오류를 한 가지 규격(크기·간격·모양)으로 표시하는 인라인 callout입니다. 기존의 제각각인 bg-yellow-50 border ... / bg-red-50 ... 알림 박스를 대체합니다. 선택적으로 앞에 아이콘(<svg class="ds-notice__icon">)을 둘 수 있습니다.

규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다

Notice 강제 규칙. 상세·미리보기는 아래 본문.

정보성 영역은 notice로 만듭니다 — 새 코드·수정 코드 모두 강제

  • 화면 안에서 맥락을 설명하거나 주의를 주는 박스(안내문 · 주의 · 경고 · 오류/반려 사유 · 조건 미충족 알림)는 반드시 .ds-notice + 변형으로 만듭니다. 새 기능이든 기존 화면 수정이든 같습니다.
  • 유틸리티로 직접 조합한 틴트 박스 금지 — bg-red-50 border border-red-200 text-red-600 / bg-yellow-50 … rounded-lg px-3 py-2.5 같은 조합으로 알림 박스를 만들지 마세요. 제각각인 크기·간격·색을 한 규격으로 모으는 것이 이 컴포넌트의 존재 이유입니다.
  • ⚠️ · ❗ 같은 이모지로 아이콘을 대신하지 마세요 — <svg class="ds-notice__icon"> 를 씁니다. 이모지는 OS·폰트마다 크기와 색이 달라 변형 색과 어긋나고, 크기 규격(16×16)도 못 맞춥니다.
  • notice가 아닌 것: 상태 배지(.ds-label) · 사용자의 결정을 막고 받아야 하는 확인창(모달) · 표 행 하이라이트 · 폼 필드 아래 한 줄 검증 문구(박스 없는 텍스트).
  • 레거시는 마이그레이션 대상이지 위반이 아닙니다 — 이미 있는 손조합 박스를 일괄 스윕하지 마세요. 지금 고치고 있는 파일 안에서만 바꿉니다. (2026-07-29 기준 앱 HTML에서 bg-*-50 유틸 조합이 310곳 잡히지만, 그중 상당수는 알림 박스가 아닌 배지·행 하이라이트라 기계적 치환 대상이 아닙니다.)

Notice는 CSS 전용입니다 — 컴포넌트가 없어요.

  • 구현은 packages/static/styles/design-system.css의 .ds-notice 블록("Notice / inline alert" 주석으로 시작) 뿐입니다. TS 컴포넌트도, 공유 HTML 파셜도 없습니다. import { Notice } from "@hereby/components" 같은 건 존재하지 않아요 — 마크업을 직접 작성하세요.
  • 복제본 없음 — 앱 main.css 어디에도 .ds-notice 재정의가 없습니다. 정본만 고치면 돼요(모달·페이지네이션과 달리 copy trap 없음).

마크업 (강제)

  • 변형 클래스는 필수입니다. .ds-notice 단독은 화면에서 사라져요 — 베이스 .ds-notice 블록은 border: 1px solid transparent만 있고 배경·글자색이 없어요. 배경·보더·글자색은 전부 변형이 공급합니다.
  • 변형은 4개: --info · --warning · --success · --danger. ⚠️ --error가 아니라 --danger입니다 — .ds-notice--error라고 쓰면 변형이 안 걸려서 투명 박스가 됩니다.
  • 아이콘은 독립 축입니다 — 4개 변형 전부에서 켜고 끌 수 있어요(4 변형 × on/off = 8상태). <svg class="ds-notice__icon">(16×16)를 넣으면 켜지고, 빼면 꺼져요. 아이콘 유무는 변형에 종속되지 않습니다 — "info는 아이콘 없음" 같은 규칙은 없어요.
  • 아이콘 색은 변형이 결정합니다(각 색군의 -500 톤). 아이콘에 색 유틸을 직접 붙이지 마세요 — 변형이 알아서 칠해요.
  • 본문 텍스트에 <p>를 쓰지 마세요 — <span>/<div>를 쓰세요. tokens.css의 전역 요소 규칙 p { font-size: var(--typo-b3-size) }(16px)가 .ds-notice의 12px를 이깁니다(요소 규칙이 상속을 이김). 모달의 <p> 구제 규칙은 text-* 클래스를 단 <p>만 살려주므로, notice 안의 맨 <p>는 구제되지 않습니다.

⚠️ 트랩

  • --info와 --warning은 시각적으로 완전히 동일합니다 — 배경·보더·글자·아이콘까지 전부 같아요(둘 다 yellow-50/200/700 + 아이콘 yellow-500). 화면에서 안내와 경고가 구분되지 않아요. "안내는 info, 경고는 warning"은 의미상 관례일 뿐 시각적으로 강제되지 않습니다 — 색만으로 경고를 구분하려 하지 말고 문구·아이콘 모양으로 구분하세요. 두 변형을 시각적으로 분리할지는 미결 디자인 과제예요.

언제 쓰나

  • Notice = 모달·폼 안쪽의 맥락 안내(흐름을 막지 않음).
  • Modal = 사용자의 결정을 막고 받아야 할 때 → 모달 패턴.
  • ⚠️ Toast는 아직 구현되지 않았습니다 — --ds-z-toast 토큰(z-index 80)만 있고 .ds-toast CSS도 컴포넌트도 없어요. "toast를 쓰라"는 지시를 따르지 마세요.

라이브 미리보기 ​

아래는 모두 실제 design-system.css의 .ds-notice 규칙으로 렌더됩니다.

아이콘은 모든 변형에서 선택입니다 — 변형(색) × 아이콘(on/off)은 독립된 두 축이에요. 왼쪽 열이 아이콘 있는 상태, 오른쪽 열이 없는 상태입니다.

아이콘 O
아이콘 X
안내: 비활성 직원은 목록에 보이지 않습니다.
안내: 비활성 직원은 목록에 보이지 않습니다.
경고: 저장하지 않은 변경 사항이 있습니다.
경고: 저장하지 않은 변경 사항이 있습니다.
완료: 권한 요청이 전송되었습니다.
완료: 권한 요청이 전송되었습니다.
반려 사유: 첨부 서류가 누락되었습니다.
반려 사유: 첨부 서류가 누락되었습니다.

사용법 ​

html
<!-- 아이콘 끈 상태 — 아무 변형에서나 가능 (svg를 빼면 끝) -->
<div class="ds-notice ds-notice--info">
  <span class="flex-1">맥락 안내 문구</span>
</div>

<!-- 아이콘 켠 상태 — 아무 변형에서나 가능. 아이콘 색은 변형이 결정 -->
<div class="ds-notice ds-notice--danger">
  <svg class="ds-notice__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span class="flex-1"><span class="font-medium">반려 사유:</span> 첨부 서류가 누락되었습니다.</span>
</div>

모달 내부에서는 <div>로

텍스트 노드는 <span>/<div>에 둡니다. admin 등 일부 앱은 모달 안에서 legacy p { font-size: 16px }(unlayered) 규칙이 살아 있어 <p>로 감싸면 .ds-notice의 text-b6(12px)가 덮입니다.

변형 ​

각 색군의 -50 배경 + -200 보더 + -700 글자, 아이콘은 -500으로 통일돼 있습니다.

변형(색)과 아이콘(on/off)은 독립된 두 축이에요. 아래 "아이콘" 열은 아이콘을 넣었을 때 칠해지는 색이고, 어느 변형이든 아이콘을 빼면 아이콘 없는 상태가 됩니다.

변형용도배경 / 보더 / 글자아이콘 (넣었을 때)
.ds-notice--info안내(정보)yellow-50 / yellow-200 / yellow-700yellow-500
.ds-notice--warning경고yellow-50 / yellow-200 / yellow-700yellow-500
.ds-notice--success완료·긍정green-50 / green-200 / green-700green-500
.ds-notice--danger오류·반려red-50 / red-200 / red-700red-500

규격 ​

속성값 (토큰)
padding10px 12px
border1px solid (변형별 -200)
radiusvar(--radius-4)
font-sizevar(--text-b6) (12px)
gap (아이콘↔본문)8px
아이콘 크기16 × 16, margin-top: 1px

단일 출처 ​

스타일packages/static/styles/design-system.css (.ds-notice · .ds-notice__icon · --info/--warning/--success/--danger)

적용 현황 ​

  • 로그인·계정 화면 전체(공용 signin-form · forgot-password-form · change-password-form · signup-form) — 로그인/인증 실패는 --danger, 인증코드 발송·비밀번호 찾기 안내는 --info, 비밀번호 변경·발송 완료는 --success. 공용 컴포넌트라 8개 앱 로그인 화면에 동시에 적용됩니다
  • PermissionDeniedModal — 권한 상세는 --info, 전송 완료는 --success, 요청 실패 에러는 --danger
  • 문서 결재 미리보기(team-manager doc-preview) — 반려 사유를 --danger로 표시
  • 연차 정책(admin 유형·기준 관리 → 연차 정책) — 정책 안내는 --info, "5인 미만 사업장인데 재직 직원이 5명 이상" 법정 위반 경고는 --danger + 아이콘
  • admin 계정 화면(워크스페이스 선택 · 회원가입 · 이메일 인증 · 초대 수락) — 오류를 --danger
  • 스케줄 경고 모달(admin·team-manager 근무표 → 경고) — 경고 항목 하나가 --warning 하나. 목록 반복도 notice 로 씁니다
  • 병동 설정(근무표 → 병동 설정) — 조직 전체 정책 안내·교대 매핑 안내·교육 정책 안내를 모두 --info
  • 치료 인센티브(team-manager) — 치료 항목 미등록 경고를 --warning
  • 급여 시트 셀 상세 패널 — 급여명세서 "발송 완료"를 --success
  • 직원앱 근무 형태 변경 — 승인 대기 중 안내를 --warning
  • 모듈 매니저 — API 연결 실패를 --danger(재시도 버튼은 notice 밖에 둡니다)
  • 휴직/복직 처리 안내 등 모달 내 안내문 — --info / --success

변경 이력 ​

전체 이력은 변경 이력 참고. 최근:

  • 2026-07-29 — 정보성 영역은 notice 사용을 강제로 승격. 유틸 조합 틴트 박스·이모지 아이콘 금지 규칙을 명시하고, 연차 정책의 5인 미만 경고 박스를 --danger + 아이콘으로 전환.
  • 2026-06-24 — .ds-notice--danger 변형 신설(오류·반려). 문서 결재 미리보기 반려 사유 + 권한 모달 에러의 임시 red 토큰 조합을 표준 변형으로 정규화.