메신저 UI 컴포넌트 — crowny.org 본체 패턴 전면 통일
개요
메신저 v3 SPA의 모든 인터랙티브 컴포넌트(버튼/입력/모달/카드/배지/리스트/아바타)를 crowny.org /Users/ef/crowny-org/style.css 정본 패턴과 완전 통일.
한선씨 메신저테마.한선이 정본, index.html은 인라인 거울. 폰트·radius·패딩·hover 동작 모두 일치.
적용 패턴 매트릭스 (crowny.org → 메신저)
| 컴포넌트 | crowny.org 패턴 | 메신저 클래스 |
|---|
| btn-primary | gold bg / #FFF8F0 / padding 1rem 2rem / radius 6px / weight 600 / hover translateY(-2px) | .crowny-btn-primary |
| btn-secondary | bg-card / border / padding 0.6rem 1.2rem / radius 6px | .crowny-btn-secondary |
| btn-action | text-color bg / bg color / padding 1rem | .crowny-btn-action |
| btn-danger | danger bg / padding 0.6rem 1.2rem | .crowny-btn-danger |
| input | padding 1rem / radius 6px / border / focus border-gold | .crowny-input |
| input-sm | padding 0.6rem 0.8rem (검색바) | .crowny-input-sm |
| modal-content | padding 2rem / radius 12px / max-width 400px / backdrop rgba(61,43,31,0.5) | .crowny-modal-content |
| card | padding 1.5rem / radius 12px / hover translateY(-1px) | .crowny-card |
| list-item | padding 0.8rem 1rem / border-bottom | .crowny-list-item |
| avatar | 40×40 / radius 50% / accent-soft bg | .crowny-avatar (+ sm/lg) |
| badge | 골드 pill / padding 0.15rem 0.5rem | .crowny-badge (+ soft) |
| chip | bg-card / pill / padding 0.3rem 0.7rem | .crowny-chip |
폰트 위계 (crowny.org 본체 그대로)
| 요소 | 데스크탑 | 모바일 (≤768px) |
|---|
| body | 1rem | 14px base |
| h1 | 1.8rem · weight 700 · letter-spacing 1px | 1.4rem · letter-spacing 0.5px |
| h2 | 1.5rem · letter-spacing 0.5px | 1.2rem |
| h3 | 1.2rem | 1rem |
| h4 | 1rem | — |
| .small | 0.85rem | — |
| .tiny | 0.75rem | — |
폰트 패밀리:
-apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Apple SD Gothic Neo', 'Segoe UI', system-ui, sans-serifradius 토큰화
| 토큰 | 값 | 사용 위치 |
|---|
--radius-xs | 6px | 아이콘 버튼, 멘션 칩 |
--radius-btn | 6px | 버튼/입력 (crowny.org 표준) |
--radius-sm | 12px | 카드, 모달 폼 |
--radius-card | 12px | 카드, 모달 (crowny.org 표준) |
--radius | 18px | 말풍선, 이모지피커 |
--radius-bubble | 18px | 채팅 말풍선 (메신저 전용) |
--radius-pill | 50px | 배지, 칩, 토스트 |
--radius-full | 50% | 아바타, dot |
변경 내역
index.html (4,767줄)
<style> 끝에 150줄 crowny 컴포넌트 패턴 CSS 추가 (35건 .crowny-* 클래스 정의)
하드코딩 radius 토큰화:
입력바 아이콘 버튼 8px → var(--radius-xs) (6px)
마이크 버튼 8px → var(--radius-xs)
알림 배지 9px → var(--radius-pill) (50px, 자연스러운 pill)
배지 색상 #fff → #FFF8F0 (crowny 크림)메신저테마.한선 (정본, 249줄)
crowny컴포넌트CSS생성() 함수 신규 (96줄 추가)crowny전체CSS생성() 함수 (토큰 + 컴포넌트 통합 출력)- 28건 컴포넌트 클래스 한선씨 정본 정의
호버 패턴 통일
transition: all 0.2s 전 인터랙티브 요소transform: translateY(-2px) on hover (8건 → 이전 4건 대비 2배 증가)transform: translateY(-1px) for cards (subtler)box-shadow: var(--shadow) on hover
모달 backdrop
rgba(61,43,31,0.5) — 초콜릿 브라운 50% (crowny.org .modal 정본 값)
검증 결과
| 항목 | 결과 |
|---|
| 한선씨 컴파일 | 61/61 (100%) |
| index.html JS 문법 | OK (1개 스크립트, 에러 0) |
| crowny-* 클래스 라이브 노출 | 35건 |
| translateY(-2px) hover | 8건 (이전 4건 → 2배) |
| Noto Sans CJK KR 마커 | 정의 토큰 적용 |
| E2E | 15/15 통과 (UI 변경 후에도) |
| 6개 라이브 진입점 | 전부 HTTP 200 |
잔여 하드코딩 (의도적 보존)
border-radius: 2px × 7건 — 스크롤바 thumb (작은 장식 요소, 시각적 적절)border-radius: 3px × 2건 — 진행 바 (음성 메시지 등)border-radius: 4px × 1건 — 멘션 강조 (인라인 텍스트)border-radius: 8px × 1건 — 이모지 픽커 카테고리 칩border-radius: 10px / 14px / 16px / 24px × 각 1~2건 — 모달, PWA 배너 등 컨텍스트 적절
학습DB 등록
crowny컴포넌트패턴 — 한선씨 정본 함수 crowny컴포넌트CSS생성() 코드 패턴
한선씨 정본 위치
메신저테마.한선 crowny컴포넌트CSS생성() → 28 컴포넌트 클래스 + 모바일 반응형- 다른 사이트(crowny.org/tiomta.com) 측에 동일 패턴 적용하려면 이 함수를 호출하여 같은 CSS를 박을 수 있음
연동
- [[project-crowny-messenger]] — 메신저 v3 정본
- [[reference-ecosystem-crowny]] — ecosystem 등록
- [[project-tiomta-brand]] — tiomta 진입
- [[feedback-agent-directive-style]] — 차분한 지시 + 셀코어 베이스 컨텍스트