[FEAT/#101] Group / Group 화면 최소기능 완성

[TaewoongR]

• closed #101

📍 Work Description

• Group 화면 최소기능 완성

📸 Screenshot

https://github.com/user-attachments/assets/395b6057-2af5-4b29-ac46-0780762b3d95

📢 To Reviewers

1️⃣ 공통 사항

• 뷰모델과 구조

  • 각 화면에 대응되는 ViewModel은 state, intent, sideEffect를 관리.
  • 화면 구성은 Screen → Content → Field로 나뉨.
  • Screen: intent와 sideEffect를 처리하며, Content에 state를 전달.
  • Content, Field: 전달받은 state로 UI를 구성.
  • Scaffold의 시작점은 Content로 설정.

• SideEffect 수집

  • Screen에서 sideEffect를 수집하며, 화면의 생명주기 동안 유지.
  • collectAsStateWithLifecycle과 유사한 커스텀 함수를 제작하여 사용.
  • Channel로 초기화된 sideEffect를 Flow로 변환.
  • 초기값 없는 상태를 보완하기 위해 remember와 collectAsState를 합성한 상태 저장 함수 제작.
  • 초기값은 아무 동작도 하지 않는 Idle로 설정.

• 공통 사용 리소스

  • 모든 ViewModel은 도메인의 GroupRepository에서 정의된 함수 사용.
  • usecase 미적용.
  • UserPreferenceDataStore 활용 (단, GroupCreationScreen은 제외).
  • GroupScreen: User ID로 속한 그룹 조회.
  • GroupJoinScreen: 그룹 참여 시, User ID를 Firestore의 group/members와 user/group 필드에 저장.
  • GroupDetailScreen: 그룹 편집 버튼 노출 조건으로 adminUser ID와 User ID 비교.
  • GroupCreationScreen: 그룹 생성 시 adminUser ID를 User ID로 설정.

---

2️⃣ GroupScreen

• 기능
  • User ID 기반으로 사용자가 속한 그룹만 화면에 표시.
  • 내부 화면 이동 후 복귀 시 그룹 리스트를 다시 로드하여 최신 데이터 반영.
  • 특정 그룹을 터치하면 groupId를 Navigation으로 전달하여 GroupDetailScreen으로 이동.

---

3️⃣ GroupJoinScreen

• 초대 코드 입력

  • Firestore의 inviteCodes 컬렉션에서 document(id)를 탐색.
  • 존재할 경우, 해당 문서의 group 필드에서 groupId를 가져옴.
  • 이후, groupId를 사용하여 그룹 객체를 탐색.

• 참여 버튼 동작

  • Firestore에서 group/members에 User ID를 추가.
  • 동시에 user/group 필드에 groupId 추가.

• 오류 처리

  • 그룹 찾기 실패: 버튼 아래에 “그룹이 존재하지 않음” 문구 표시.
  • 인터넷 문제: Toast 메시지로 오류 알림.

---

4️⃣ GroupCreationScreen

• 입력 필드

  • 사진 선택, 제목, 내용 입력 필드가 존재하며 모두 필수 입력.
  • 제목: 2~20자 제한.
  • 내용: 최소 10자 이상 입력 요구.

• 생성 요청 조건

  • 그룹 객체의 프로퍼티 설정:
  • adminUser: User ID.
  • groupId: 랜덤 UUID.
  • members: User ID 포함.
  • createdAt: java.util.Date() 값.

• Firestore 연동

  • 그룹 객체를 group 컬렉션에 추가 요청.
  • 성공 시: Toast 메시지 표시 후 뒤로가기 전환.
  • 실패 시: Toast 메시지로 오류 알림.

---

5️⃣ GroupDetailScreen

• 그룹 정보 가져오기

  • GroupScreen에서 전달받은 groupId를 사용하여 Firestore에서 group 객체를 요청.
  • 요청한 group 객체의 members(String 리스트)를 통해 각 User 객체를 Firestore에서 추가로 요청.
  • 가져온 group 객체와 user 객체를 화면에 표시.

• 초대 코드 발급

  • 초대 코드 복사: 초대코드를 클립보드에 복사한 뒤 Toast 메시지로 알림.
  • 초대 코드 생성 과정:
    1. 해당 groupId에 이미 발급된 inviteCodes 컬렉션 탐색.
       • 존재한다면 해당 컬렉션의 document(id) 반환.
    2. 존재하지 않을 경우:
       • 새 inviteCodes 컬렉션 생성.
       • document(id)는 랜덤 UUID로 생성.
       • field 구성:
       • expiredBy: 오늘로부터 일주일 뒤의 날짜(Firebase의 Timestamp 타입 사용).
       • group: 해당 groupId.

• 에피소드 데이터 가져오기

  • User 객체 요청 이후, groupId를 통해 관련된 에피소드 데이터를 추가로 요청.
  • EpisodeRepository를 통해 Firestore에서 에피소드 객체를 가져옴.
  • 가져온 에피소드 데이터를 화면의 탭 오른쪽에 표시.

• 에피소드 정렬

  • 최초 정렬 방식은 최신순.
  • 드롭다운 메뉴를 통해 다음과 같은 방식으로 정렬 가능:
  • 최신순
  • 과거순
  • 날짜순

• GroupEditScreen으로 이동

  • 조건: adminUser ID가 현재 유저의 ID와 일치하는 경우에만, 탑바의 액션 버튼에 이동 버튼 표시.
  • 이동 시 GroupEditScreen에 groupId를 전달.

---

6️⃣ GroupEditScreen

• 그룹 데이터 가져오기

  • 전달받은 groupId를 사용하여 Firestore에서 해당 group 객체를 요청.
  • 가져온 데이터를 활용하여 다음 필드에 값 부여:
  • 사진 선택 필드
  • 타이틀 TextField
  • 내용 TextField

• 편집 제약사항

  • GroupCreationScreen의 제약사항과 동일:
  • 제목: 2~20자.
  • 내용: 10자 이상.
  • 사진 선택 필수.

• 그룹 정보 편집

  • 편집 버튼 클릭 시, 기존 group 객체를 복사하여 수정된 사항 반영.
  • Firestore에 업데이트 요청:
  • 객체에 저장된 groupId를 통해 group 컬렉션에서 해당 그룹 추적.
  • 덮어쓰기 방식으로 업데이트 수행.

• 결과 처리

  • 성공 시: Toast 메시지 표시 및 이전 화면으로 전환.
  • 실패 시: Toast 메시지로 오류 알림.

⏲️Time

- 24시간

[Ameri-Kano]

맨 위에 #101 추가해야 할 것 같아요!