← 목록으로

조건부 UI 표시 로직

사용자 상태와 컨텍스트에 따른 UI 렌더링 조건을 시각화합니다

주요 조건 카테고리

🔐
인증 상태
  • 로그인 → 사용자 메뉴, 대시보드
  • 로그아웃 → 로그인/가입 버튼
  • 이메일 인증 → 전체 접근
  • 미인증 → 인증 배너
👥
사용자 역할
  • 관리자 → 관리 패널 링크
  • 회원 → 표준 기능
  • 게스트 → 제한된 기능, 업그레이드
  • 프리미엄 → 업그레이드 CTA 숨김
📦
데이터 상태
  • 로딩 중 → 스켈레톤/스피너
  • 빈 상태 → 일러스트와 CTA
  • 데이터 있음 → 콘텐츠 렌더링
  • 에러 → 에러 메시지
🏪
상품 상태
  • 재고 있음 → "장바구니 담기"
  • 품절 → "재입고 알림"
  • 제한 재고 → "X개 남음" 배지
  • 예약 판매 → "사전 주문"
🎯
피처 플래그
  • 활성화 → 기능 표시
  • 비활성화 → 숨김/대체
  • A/B 테스트 → 변형 컴포넌트
  • 베타 → 베타 배지
📱
디바이스 조건
  • 모바일 → 모바일 네비게이션
  • 데스크톱 → 데스크톱 레이아웃
  • 태블릿 → 적응형 컴포넌트
  • 터치 → 터치 타겟 확대
인증 상태 기반 UI 렌더링
❓
사용자가 로그인했는가?
인증 토큰 존재 및 유효성 확인
✅
로그인 상태
• 사용자 메뉴 표시
• 대시보드 링크 활성화
• 프로필 사진 표시
❓
이메일 인증 완료?
이메일 확인 상태 체크
✅
전체 접근 가능
모든 기능 활성화
⚠️
제한된 접근
인증 배너 표시, 일부 기능 제한
❌
로그아웃 상태
• 로그인/가입 버튼 표시
• 게스트 메뉴
• 제한된 콘텐츠 접근
인터랙티브 데모 - UI 조건 시뮬레이터
홈
상품
게스트
사용 가능한 기능
기본 기능
상품 탐색, 검색, 기본 정보 확인
위시리스트
관심 상품 저장 및 관리 🔒
주문 내역
과거 주문 확인 및 추적 🔒
프리미엄 전용
무료 배송, 우선 고객 지원 🔒
관리자 도구
사용자 관리, 상품 관리, 통계 🔒

디자인 프롬프트