Elevation · Motion

다크에서는 shadow만으로 깊이를 만들기 어렵습니다. border + shadow를 함께 써서 표면 위계를 분리하세요.

Shadows

--elev-1 topbar · --elev-2 tooltip / toast · --elev-3 dropdown / popover · --elev-4 modal

Motion

Easings

--ease-standard:   cubic-bezier(0.2, 0, 0, 1);     /* 기본 - 대부분의 UI 전환 */
--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);     /* 강조 - modal, page */
--ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);  /* 오버슈트 - 서버 버튼 round, switch */

Button · Input · Avatar · Badge

기본 블록. 모든 변형은 dark/light에서 동일한 시각 계층을 유지합니다.

Button

Variants

Sizes

<button class="qf-btn qf-btn--primary">Send</button>
<button class="qf-btn qf-btn--secondary qf-btn--sm">Cancel</button>
<button class="qf-btn qf-btn--ghost qf-btn--icon"><svg/></button>

Input

Avatar · Status dots

Badge

Modal · Menu · Toast · Tabs · Tooltip

플로팅 UI. z-index 레이어는 tooltip(80) > toast(70) > modal(61) > settings(51) > tabbar(40) > sticky(30) > dropdown(20) > drawer(15) > header(10).

Modal

Menu

Toast

Tabs

Tooltip

Message · Reaction · Embed · Code

채팅 도메인의 핵심. 연속 메시지는 qf-message--cont로 아바타/메타를 접어 읽기 흐름을 만듭니다.

TSX<img src="/brand-assets/svg/fox-symbol-dark.svg"
     alt="qufox" width={40} height={40} />

Thread

Inline thread chip (Discord 스타일)

원본 메시지 바로 아래에 참여자 아바타 스택 + 답글 수 + 마지막 활동 시각이 요약된 칩. 클릭하면 우측에 스레드 패널이 열립니다.

Slack 스타일 followup

더 조용한 표시가 필요할 때. 메타 라인 한 줄로만 요약 — 호버 시 강조.

Thread panel (우측 사이드)

원본 메시지를 상단에 고정 + 스레드 답글 목록 + 전용 composer. 메인 채널 컨텍스트는 왼쪽에 그대로 유지됩니다.

Mention · Code inline · Link

ServerList · ChannelList · MemberList

세 개의 수직 컬럼 네비게이션. Discord와 동일한 mental model이지만 라운딩과 여백은 qufox 시스템 값을 사용합니다.

Server list

Channel list

Member list

Typing indicator

Settings · Toggle rows · Empty states

설정 화면 공통 패턴. 좌측 네비 + 제목 + 토글 row 반복이 기본.

Empty state

No messages yet

Be the first to say something in #release-notes.

Send your first message

Loading (skeleton)

Full chat mockup

위 컴포넌트로만 조립한 실제 화면. Discord와 동일한 3-column 레이아웃.

Icon pack · 100+

채팅 UI에 필요한 아이콘을 한 세트로. 모두 24×24 viewBox · SVG path · stroke=currentColor로 그려졌고, Discord/Slack 패턴을 덮습니다. 색상은 CSS color로, 크기는 사이즈 modifier로 조절해요.

Usage

<!-- 1. 한 번만 문서에 로드 -->
<link rel="stylesheet" href="icons.css">

<!-- 2. symbol ID로 참조 -->
<svg class="qf-icon"><use href="icons.svg#qf-i-send"/></svg>

<!-- 사이즈 / 색상 modifier -->
<svg class="qf-icon qf-icon--sm">...</svg>      /* 16 */
<svg class="qf-icon qf-icon--lg qf-icon--accent">...</svg>

Sizes

Colors

In-context examples

전체 목록

Workspace · Discover

새 워크스페이스 생성 플로우와 공개 워크스페이스 둘러보기. 카테고리 메타(이모지·라벨)는 WORKSPACE_CATEGORY_META를 따릅니다.

Discover · Desktop

상단 검색 + 카테고리 segment + 카드 그리드. 참여 버튼은 .qf-btn--primary.

Create workspace · Desktop modal

Mobile

Channel settings

개요 · 멤버 · 권한 탭으로 분리. Discord와 같은 좌측 nav 패턴이지만 모바일에서는 단일 스크롤 + segment로 압축.

Desktop · Overview tab

Desktop · Members tab

Mobile

Channel · Category modals

새 채널, 새 카테고리, 카테고리 안에 채널 만들기. 모두 같은 modal 컴포넌트 + .qf-toggle-row 패턴.

Desktop · Create Channel

Desktop · Create Category

Mobile · Bottom sheet

Threads

메시지의 후속 대화를 인라인으로 분리. 데스크톱은 우측 사이드 패널, 모바일은 풀스크린 라우트.

Desktop · Thread panel beside chat

Mobile · Full-screen thread

DM shell

워크스페이스 없이도 친구와 1:1 대화. 좌측 DM 리스트 + 메인 대화 영역. 모바일은 리스트와 대화가 별도 라우트.

Desktop · DM list + active conversation

Mobile

Friends

친구 목록 + 받은/보낸 요청 + 사용자 차단. 4-탭 segment 패턴은 데스크톱·모바일 동일.

Desktop · All friends

Desktop · Pending requests

Mobile

Mobile system

Discord/Slack 패턴 기반의 모바일 레이아웃. 터치 타겟 44×44 이상, safe-area inset 자동 처리, bottom tab + bottom sheet 조합으로 한 손 조작 최적화.

Layout patterns

Mobile-only tokens

--m-topbar-h:   52px;     /* top nav 높이 */
--m-tabbar-h:   56px;     /* bottom tab bar (safe-area 제외) */
--m-composer-h: 56px;     /* 메시지 입력창 */
--m-touch:      44px;     /* 최소 히트 타겟 (Apple HIG) */
--m-gutter:     16px;     /* 좌우 여백 */
--m-sheet-r:    20px;     /* bottom sheet top radius */

핵심 컴포넌트

규칙

• 터치 타겟: 모든 인터랙티브 요소는 최소 44×44. 작아 보여야 하는 경우 padding으로 hit area 확보.
• Safe area: topbar는 env(safe-area-inset-top), tabbar/composer는 bottom inset 반영. 이미 컴포넌트에 내장.
• Drawer 패턴: 서버/채널 리스트는 햄버거 메뉴 → 좌측 drawer. 멤버 리스트는 우측 drawer (Discord 방식).
• Bottom sheet: 데스크톱의 context menu/modal은 모바일에서 bottom sheet로 변환. 옵션 5개 이상이면 스크롤 가능하게.
• Long-press = context menu: 메시지 long-press → bottom sheet + 반응 이모지 row.
• Swipe to reply: 메시지 우측 스와이프 → 답글 모드 (네이티브 패턴).
• 키보드 dodge: composer는 키보드 올라올 때 함께 올라감. body는 자동 축소.

React 컴포넌트 매핑 예시

// Discord-style mobile chat screen
<div className="qf-m-screen">
  <header className="qf-m-topbar">
    <button className="qf-m-topbar__back">☰</button>
    <div className="qf-m-topbar__titleBlock">
      <div className="qf-m-topbar__title"># general</div>
      <div className="qf-m-topbar__subtitle">qufox team</div>
    </div>
    <button className="qf-m-topbar__action">👥</button>
  </header>

  <main className="qf-m-body">
    {messages.map(m => <MobileMessage key={m.id} {...m}/>)}
  </main>

  <footer className="qf-m-composer">
    <button className="qf-m-composer__plus">+</button>
    <textarea className="qf-m-composer__input" />
    <button className="qf-m-composer__send">➤</button>
  </footer>
</div>

Composer · Autocomplete

Slack 수준의 rich 컴포저와 드롭업 자동완성이에요. 포맷바는 qf-composer--rich 또는 focus-within 시 펼쳐지고, @멘션·#채널·:이모지·슬래시 커맨드가 한 골격을 공유합니다.

Composer

Autocomplete

Slash menu

Command Palette · Emoji

⌘K 빠른 전환기와 이모지 피커예요. 데모에서는 fixed backdrop 없이 inner 카드만 인라인으로 보여줍니다 — 실제 앱에서는 .qf-cmd-palette-backdrop 위에 떠 있어요.

Command palette

Emoji picker

Overlays · Banners

상태 피커 · hovercard · 배너 4종 · 단축키 시트 · 역할 칩 · 검색/업로드 오버레이 · 임베드 변형이에요. 플로팅 면은 backdrop 없이 카드만 인라인으로 렌더했습니다.

Status picker · Hovercard

Banner

Keyboard shortcut sheet · Role chips

Search overlay

Upload overlay

Embed variants

Message actions · Density

메시지 hover 빠른 반응 · 반응 추가 pill · 코드블록 헤더/복사 · 스레드 참여 아바타 스택, 그리고 같은 메시지를 cozy와 compact 밀도로 나란히 비교합니다.

Quick-react · Reaction add

Code block header · Thread follow-up

const density = useDensity(); // 'cozy' | 'compact'

Density — cozy vs compact

Mobile nav · IA

모바일 정보구조 업그레이드예요. 하단 탭바 활성 pill · OverlappingPanels 좌 드로어 · 메시지 화면 ergonomics · Home 퀵타일/필터/프로필, 그리고 이모지 드로어를 한 컷씩 보여줍니다.

Tab bar · Panels · Message ergonomics

Home IA · You · Emoji drawer