톡마커

디자인 견본

docs/DESIGN_SYSTEM.md의 토큰이 실제 화면에서 어떻게 보이는지 확인하는 페이지입니다. 위의 테마 버튼으로 밝게와 어둡게를 바꿔 가며 봐 주세요.

색

바탕과 면

  • --background앱 바탕
  • --card카드, 표, 입력
  • --muted가라앉힌 면
  • --accent호버
  • --border구분선
  • --input입력 테두리

글과 브랜드

  • --foreground본문 글
  • --muted-foreground보조 글
  • --primary주 버튼
  • --link링크
  • --ring포커스
  • --destructive오류, 위험

마커

  • --marker형광펜 채움
  • --marker-wash선택된 행
  • --marker-strong선택 표시 선

글자

Pretendard

  • 3xl, 30px
    대시보드 수치    1,284건
  • 2xl, 24px
    페이지 제목    발송 내역
  • xl, 21px
    구역 제목    오늘 보낼 메시지
  • lg, 18px
    카드 제목, 강조 문장    가을 신상 시럽젤 12종 입고 안내
  • base, 16px
    읽는 글, 모바일 입력    원장님, 안녕하세요. 이번 주에 가을 신상 시럽젤이 입고되어 안내드립니다.
  • sm, 14px
    화면 기본, 표, 버튼    네일하우스 모모, 서울 성동구, 최근 주문 9월 28일
  • xs, 12px
    배지, 표 머리, 보조 정보    마지막 접속 3분 전

마커

선택한 것과 꼭 봐야 할 것에만 긋습니다.

검색어와 일치하는 글자
  • 젤리네일 성수점
  • 성수 네일 아뜰리에
  • 네일룸 성수역점
메시지 본문의 변수

#{원장님}, 안녕하세요. #{샵명}에 맞는 가을 신상 시럽젤이 입고되어 안내드립니다.

한 화면에서 가장 중요한 수치 하나

32곳 중 4곳 제외

수신동의 없음 3, 수신거부 1

지금 보고 있는 메뉴
  • 거래처
  • 보내기
  • 발송 내역
  • 템플릿

버튼

종류

크기 (큰 것은 화면의 주 동작, 작은 것은 표 안)

상태

입력

카카오톡에 저장된 이름과 똑같아야 대화 상대를 찾습니다.

켜면 (광고) 머리말과 수신거부 안내가 자동으로 붙습니다.

발송 상태

색, 아이콘, 글자가 항상 함께 갑니다.

예약
정한 시각이 되면 보냅니다.
대기
보낼 차례를 기다립니다. PC가 가져가면 발송중으로 바뀝니다.
발송중
PC가 가져가서 카카오톡으로 보내고 있습니다.
성공
카카오톡으로 보냈습니다.
실패
보내지 못했습니다. 사유를 보고 다시 보낼 수 있습니다.
확인 필요
PC가 결과를 알려주지 않았습니다. 보내졌는지 직접 확인해야 합니다.
제외
수신거부이거나 동의가 없어 보내지 않았습니다.
취소
보내기 전에 예약을 취소했습니다.

표

선택한 행은 형광펜으로 칠합니다. 휴대폰에서는 카드 목록으로 바꿉니다.

2곳 선택

거래처원장님상태시각비고
네일하우스 모모김서연성공
젤리네일 성수점박지우성공
루미에르 네일이하은실패카카오톡에서 대화 상대를 찾지 못했습니다
오늘의 네일최민서확인 필요PC가 결과를 알려주지 않았습니다
네일룸 아뜰리에정유나발송중
봄날 네일한소율대기야간 동의 없음, 08:00 이후 발송
더 네일 스튜디오윤채원예약
핑거팁 네일강다인제외광고 수신동의 없음
네일 온오지안취소예약 취소

카드

사무실 PC
마지막 접속 방금 전
연결됨

오늘 발송42 / 100건

확인 필요 2건
PC가 결과를 알려주지 않은 메시지입니다. 카카오톡에서 보내졌는지 확인한 뒤 처리하세요.

  • 오늘의 네일

    가을 신상 시럽젤 안내, 오늘

  • 네일 포레

    가을 신상 시럽젤 안내, 오늘

토스트와 모달

토스트

모달