조용함, 집중,
그리고 한 권의 여백.

하나의 디자인 언어, 세 페르소나의 톤.

회원에겐 따뜻한 베이지 위에 다크 그린의 헤로 카드와 골드 액센트의 마이페이지를, 운영자에겐 동일한 톤의 콘솔과 실시간 활동 피드를 제공합니다. 모바일은 하단 탭바, 데스크탑은 상단 메뉴+사이드바로 — 디바이스에 맞게 정보 밀도를 달리 합니다.

Notice 이 페이지는 데모용으로 실제 동작하는 페이지가 아닙니다. 모든 버튼들이 동작되는 건 아니니 참고용으로 확인해주시기 바랍니다. 시연은 우상단 “시연 페이지 열기”를 통해 가능합니다.

회원 앱 — 한 손에 들어오는 스터디카페.

회원의 모바일 라이프사이클(좌석 예약 → 입실 → 통계 → 갱신)을 390px 폭에 최적화했습니다.

Home

다크 그린 히어로 카드,
FocusZone의 첫 인상.

“조용함, 집중, 그리고 한 권의 여백.” — 큰 세리프 헤딩이 정독의 정체성을 한 줄로 전달합니다. 우상단 LIVE 시계가 운영 중임을 실시간으로 보여주며, 그 아래 좌석/운영/이용권 3개 미니 통계 카드가 즉시 핵심 수치를 알립니다.

• 긴급 공지가 있을 때만 빨강 배너 상단 자동 노출
• WHY JEONGDOK — 24시간/안전/와이파이/라운지 4그리드
• 이용권 4종 + 베스트 후기 + 공지사항 미리보기

My Page

Active Pass —
한 화면에 보이는 잔여 시간.

다크 그린 Active Pass 카드는 잔여 분(分)을 큰 세리프 폰트로 표시합니다. 만료일과 자동 연장 상태가 한 줄로 따라붙고, 진행 바는 사용량을 시각화합니다. QR 입장과 연장하기 버튼이 카드 하단에 풀-width pill 형태로 배치되어 한 손 사용 최적화.

• 이번달 체류 시간 / 연속 출석 / 단골 좌석 KPI 3개
• 최근 방문 리스트 — 라이브 입장 중일 땐 초록 LIVE 칩
• 월별 이용시간 막대 차트, 결제 내역, 1:1 문의 탭

좌석 예약

30석 · 실시간 현황

이용권 안내

4시간 / 10시간 / 1개월 / 3개월

예약 내역

QR 입실/퇴실 시뮬

알림함

예약·결제·문의 답변

전체 메뉴

햄버거 → 4 섹션

공지사항

긴급/이벤트/점검/일반

이용 후기

별점 · 좋아요 · 신고

자유게시판

공부법/모각공/정보/잡담

운영자 콘솔 — 오늘 매장을 한눈에.

관리자는 데스크탑에서 좌측 사이드바 + 풀 콘텐츠로, 모바일에서는 하단 탭바 + KPI 2×2로 같은 정보를 디바이스 폭에 맞춰 다시 배치해 보여줍니다.

Dashboard · Desktop

인사말 · KPI · 차트 · 실시간 활동 한 화면에.

상단에 “안녕하세요, 운영자님” + 현재 시각, 우측에 이번주/리포트 받기 액션. 그 아래 KPI 4개(매출·이용자·입장·신규회원)와 미답변 문의 노란 배너, 매출/이용률 차트 2개, 실시간 활동 피드까지 1280px 한 화면에 정렬됩니다.

• 매출 라인 차트 그라데이션 영역, 좌석 이용률 골드 막대
• 실시간 활동: 입장(베이지) · 결제(골드) · 퇴장(라인) · 문의(레드)
• 좌측 사이드바: 현황/운영/콘텐츠/설정 4섹션

Dashboard · Mobile

같은 정보, 다른 정보 밀도.

모바일에서는 상단에 작은 정독 로고 + 운영자 콘솔 + ON 토글, 그 아래 “Tuesday Overview” 이탤릭 + 인사말, KPI 4개를 2×2로 재배치합니다. 하단 탭바는 대시보드 / 좌석 / 회원 / 정산 4개로 — 운영의 핵심만 추렸습니다.

회원 관리

검색 · 등급 변경 · CSV

예약/좌석

취소 · 노쇼 · 점검 토글

이용권/결제

환불 · 매출 통계

공지사항

상단 고정 · 긴급

1:1 문의

템플릿 답변

사이트 설정

운영정보 · SEO · 약관

최신 Next.js, 실용적인 선택들.

백엔드 없이도 데모가 가능한 클라이언트 사이드 아키텍처. 모든 데이터는 브라우저 localStorage(zustand persist)에 보관되어 백엔드 셋업 없이도 회원가입 → 예약 → 결제 → 환불 전체 흐름을 시연할 수 있습니다.