UI.md

BlockBlock Frontend UI Plan (MVP)

목표

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

페이지 맵

1. Landing / Connect

• 지갑 연결 전 안내 + 연결 CTA

2. Dashboard (Home)

• 현재 기수/클럽 요약, 역할 배지, 빠른 작업 카드

3. Member Registration

• 멤버 등록 레지스트리 생성/요청/검증/반영

4. Attendance

• 출석 레지스트리 생성/등록/마감/분류/시트 저장

5. 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. 전환 투표 완료/미완료에 따른 전환 버튼 활성화