[Work 26] 약속 목록 화면의 UI를 구성했습니다.

[snughnu]

JIRA

📝 작업 내용

📌 요약

• 탭바 두 번째 탭(약속)에 들어갈 약속 목록 화면과 지난 약속 화면을 더미데이터로 구현했습니다.
• 채팅/지도 화면, 서버 연동, 실제 탭바 연결은 작업 범위에서 제외했습니다.

🔍 상세

1. 날짜/시간 표시 로직

• Date+RemainingTime.swift (Presentation)
  • 약속까지 남은 시간을 문자열로 변환하는 로직
  • 이미 지난 약속은 nil 반환 (오늘 약속이라도 시간이 지났으면 남은 시간 표시 안 함)
  • 1시간 미만 → "곧 시작"
  • 24시간 미만 → "N시간 남음"
  • 30일 미만 → "N일 남음"
  • 365일 미만 → "N개월 남음" (30일 = 1개월로 근사)
  • 그 외 → "N년 남음" (365일 = 1년으로 근사)
• Date+AppointmentDisplay.swift (Presentation) + Date+Format.swift (Core)
  • 올해면 연도 생략, 올해가 아니면 연도 포함해 표시.
  • 홈 화면의 upcoming 카드에도 동일하게 적용

---

2. 약속 목록 화면 (AppointmentListViewController + AppointmentListViewModel)

• 오늘 참여 약속과 예정된 약속이 모두 있으면 "오늘 약속" / "예정된 약속" 헤더로 분리,
  한쪽만 있으면 헤더 없이 카드만 표시
• 참여 중인 약속이 아예 없으면 "약속이 없습니다." 문구 표시
• 카드 오른쪽 상단에 남은 시간 라벨 표시
• 카드를 꾹 누르면 컨텍스트 메뉴(알림 켜기/끄기, 약속 나가기) 표시. 나가기는 확인 얼럿 후 목록에서 제거
• 우측 하단 floating 버튼으로 지난 약속 화면 push 이동

---

3. 지난 약속 화면 (PastAppointmentListViewController + PastAppointmentListViewModel)

• 지난 약속 목록 표시
• 삭제는 카드 롱프레스 컨텍스트 메뉴(약속 나가기)로만 접근
• 삭제 시 확인 얼럿 표시 후 목록에서 제거

---

4. 공용 컴포넌트

• AppointmentCardBase
  • 홈 화면 카드(UpcomingAppointmentCard)와 약속 목록/지난 약속 카드(AppointmentListCard)가
    공유하는 카드 뼈대 (배경/그림자/제목/인원·장소·날짜 3줄)
  • 오른쪽 상단 액세서리(남은시간 라벨 등, 없으면 nil)는 하위 클래스가 주입
• AppointmentListCard
  • 대화 열기/지도 열기 버튼 + 롱프레스 컨텍스트 메뉴를 가진 카드
  • 카드 자체는 탭 불가, 버튼만 탭 가능 (홈 화면 카드는 카드 전체가 탭 가능해 별도 컴포넌트로 분리)
• AppointmentListItem
  • 약속 목록/지난 약속 화면 전용 표시 모델 (알림 on/off 상태 포함)
• UIAlertController+LeaveConfirm.swift
  • 약속 목록/지난 약속 화면에서 공통으로 쓰는 나가기 확인 얼럿

💬 리뷰 노트

피그마와 다르게 처리한 부분

• 지난 약속 이동 버튼 아이콘
  • 명세서 아이콘 에셋이 좌우 비대칭이라 48x48 버튼 안에서 정중앙 정렬이 어려워,
    대칭적인 SF Symbol(clock.arrow.trianglehead.counterclockwise.rotate.90)로 대체했습니다.
• 지난 약속 이동 버튼 스타일
  • 피그마 상 리퀴드 글래스(Liquid Glass) 스타일이었으나,
    이 UIKit API(UIGlassEffect)는 iOS 26 이상에서만 지원되고
    현재 배포 대상(iOS 17~)과 맞지 않아 적용하지 않았습니다.
  • 대신 흰 배경 + 그림자로 "떠 있는" 느낌만 표현했습니다.
• 남은 시간 표시 규칙
  • 명세서는 "12시간 이내 → 시간 단위"였으나,
    13~23시간 구간을 "일 단위"로 계산하면 정수 나눗셈으로 "0일 남음"이 되는 문제가 있어
    경계를 24시간으로 조정했습니다(24시간 미만은 항상 시간 단위).
  • 추가로 1시간 미만은 "곧 시작"으로 표시하도록 문구를 하나 더 추가했습니다.

📸 영상 / 이미지

약속 목록 화면	약속 목록 화면	지난 약속 화면

약속 나가기 컨텍스트 메뉴	약속 나가기 얼럿

약속 목록 화면	지난 약속 화면

[github-actions]

🤖 AI 코드 리뷰 - 아키텍처 관점

약속 목록 화면을 위한 ViewModel, ViewController, 카드 뷰, 공통 베이스 뷰를 추가하는 PR이다. AppointmentCardBase를 도입해 UpcomingAppointmentCard와 AppointmentListCard 간 중복 레이아웃 코드를 제거한 점은 구조적으로 적절하다. 다만 ViewModel이 더미 데이터 생성 책임을 직접 가지고 있고, ViewController가 ViewModel을 직접 생성(강한 결합)하는 구조여서 테스트 가능성과 확장성에 문제가 있다. 또한 컨텍스트 메뉴의 델리게이트 구현이 View 레이어인 AppointmentListCard 내부에 있어 SRP 위반 소지가 있다.

[github-actions]

🤖 AI 코드 리뷰 - 아키텍처 관점

약속 목록/지난 약속 화면을 위한 카드 컴포넌트, 베이스 뷰, ViewModel, Presentation 모델을 추가하는 PR이다. AppointmentCardBase로 공통 UI를 추출하고 UpcomingAppointmentCard를 상속 구조로 전환한 점은 방향이 맞다. 다만 ViewModel이 더미 데이터를 직접 생성하는 loadDummyData를 내부에 포함하고 있어 실제 데이터 계층과의 연결 방식이 불분명하고, ViewController가 ViewModel을 직접 초기화(concrete 타입 하드코딩)하여 의존성 역전이 적용되지 않았다. AppointmentListCard가 UIContextMenuInteractionDelegate를 직접 채택하는지 여부가 diff에서 잘리고 없어 확인 불가이나, View 레이어가 알림 토글/나가기 등 비즈니스 액션의 진입점을 직접 보유하는 구조에 대해 주의가 필요하다.

[sangYuLv]

약속 카드 베이스를 만든 점도, 리뷰 노트에 적어주신 내용들도 모두 좋게 봤습니다!
아래 코멘트 한 부분들에 대해 의견 부탁드립니다. 🦦

[sangYuLv]

리뷰 반영 감사합니다! 수고 많으셨어요 🦦