Skip to content

UI.md

Latest commit

 

History

History
140 lines (115 loc) · 4.62 KB

UI.md

File metadata and controls

140 lines (115 loc) · 4.62 KB

BlockBlock Frontend UI Plan (MVP)

목표

move/blockblock/sources/blockblock.move 기능을 그대로 반영하는 MVP 핵심 흐름 중심 UI. 지갑 연결 후 단일 대시보드에서 역할 기반 섹션만 노출.

페이지 맵

  1. Landing / Connect
  • 지갑 연결 전 안내 + 연결 CTA
  1. Dashboard (Home)
  • 현재 기수/클럽 요약, 역할 배지, 빠른 작업 카드
  1. Member Registration
  • 멤버 등록 레지스트리 생성/요청/검증/반영
  1. Attendance
  • 출석 레지스트리 생성/등록/마감/분류/시트 저장
  1. Term Transition
  • 다음 회장 지정/전환 레지스트리/투표/전환 실행

공통 레이아웃

  • Header: 로고/프로젝트명, 네트워크/지갑 연결 버튼
  • Main: 섹션 카드 나열 (Dashboard → Member → Attendance → Transition)
  • Toast/Status: 트랜잭션 진행/성공/실패 상태 표시

1) Landing / Connect

목표: 지갑 미연결 상태에서 최소 안내와 연결 유도.

구성

  • Hero 제목: BlockBlock Club Ops
  • 서브텍스트: 기수/멤버/출석/전환을 온체인으로 관리
  • ConnectButton
  • 연결 후 자동으로 Dashboard 표시

빈 상태

  • 지갑 미연결 → Landing만 노출

2) Dashboard (Home)

목표: 현재 기수/클럽 상태 한눈에 확인 + 빠른 작업 진입.

핵심 데이터

  • BlockBlockRegistry: current_term, current_club, current_president
  • BlockBlockClub: president/vice/treasurer

구성

  • Summary Card
    • 현재 기수, 회장 주소, 클럽 ID
  • Role Badge
    • president / vice / treasurer / member
  • Quick Actions
    • 멤버 레지스트리 생성
    • 출석 레지스트리 생성
    • 전환 레지스트리 생성

권한 노출 규칙

  • 회장만 보이는 버튼: 멤버 레지스트리 생성, 전환 레지스트리 생성
  • 회장/부회장만 보이는 버튼: 출석 레지스트리 생성

3) Member Registration

목표: 멤버 요청 수집 → 회장 검증 → 클럽 저장.

관련 Move 함수

  • create_and_share_blockblock_member_registry
  • create_member_info
  • register_member_info_to_blockblock_member_registry
  • store_member_addresses_in_member_registry_to_current_blockblockclub

구성

  • Registry Status
    • 존재 여부/생성 일자/현재 term
  • Member Request Form (멤버용)
    • 이름, 전공, 주니어 여부, 제출 버튼
  • Pending List (회장용)
    • 요청 리스트 요약 + 최종 반영 버튼

빈 상태

  • 레지스트리 없음 → 회장에게 생성 CTA 표시

4) Attendance

목표: 출석 레지스트리 생성 → 출석 등록 → 마감 → 지각/결석/병결 분류 → 시트 저장.

관련 Move 함수

  • create_and_share_attendance_registry
  • register_member_info_to_attendance_registry
  • close_attendance_registry
  • register_member_info_to_late
  • register_member_info_to_absence
  • register_member_info_to_excused
  • convert_attendance_registry_to_attendance_sheet
  • store_attendance_sheet_to_blockblockclub

구성

  • Registry Status (open/closed)
  • 출석 버튼 (open일 때 멤버용)
  • 마감 버튼 (회장/부회장)
  • 분류 입력(마감 후)
    • 지각/결석/병결 리스트 입력
  • 시트 변환 + 저장 버튼 (회장)

빈 상태

  • 레지스트리 없음 → 생성 CTA

5) Term Transition

목표: 다음 회장 지정 → 전환 레지스트리 생성 → 투표 → 다음 기수 생성.

관련 Move 함수

  • create_and_share_transition_to_the_next_term_registry
  • vote_to_the_next_term_registry
  • transit_current_term_to_the_next_term_and_share_next_club

구성

  • Next President 입력 (주소)
  • 전환 레지스트리 생성 버튼 (회장)
  • 투표 상태 카드 (회장/부회장/총무)
  • 전환 실행 버튼 (회장)

상태/권한 규칙

  • 회장 판단: current_club.president == account.address
  • 부회장 판단: current_club.vice_president == account.address
  • 총무 판단: current_club.treasurer == account.address
  • 멤버 판단: senior_members/junior_members 포함 여부

트랜잭션 UX 규칙

  • 모든 버튼 클릭 시: Pending → Success/Error 토스트
  • 성공 시 관련 객체 재조회(refetch)
  • 실패 시 에러 메시지 노출

컴포넌트 목록 (초안)

  • AppShell
  • RoleBadge
  • SectionCard
  • RegistryStatus
  • MemberForm
  • MemberList
  • AttendancePanel
  • TransitionPanel

테스트/검증 시나리오

  1. 지갑 미연결 상태에서 Landing만 노출
  2. 회장 계정 접속 시 회장 전용 버튼 노출
  3. 멤버 레지스트리 미생성 상태에서 생성 CTA 노출
  4. 출석 마감 전/후 버튼 상태 변화
  5. 전환 투표 완료/미완료에 따른 전환 버튼 활성화