하루 기록

[팀플] 구현에 필요한 기능 나열하고 소요 시간 가늠해보기 본문

Today I Learned/diary

[팀플] 구현에 필요한 기능 나열하고 소요 시간 가늠해보기

떼굴펜 2024. 7. 26. 09:17

[1d][plan] 내 여행 리스트 페이지 (plan list) : 1d

페이지 : plan list page components

- [상] 일정 추가하기 버튼

[3d][plan] 내 여행 페이지 (plan detail)

페이지 : plan detail page (특이점 : read 페이지면서 내부 요소의 create/update 처리함)
components
- header (
  - 햄버거 메뉴 버튼 : (드로어라서 작업 미필요)
  - [상] 지도 버튼 -> 클릭 시 경로로 보기
  - [하] ... 버튼 : 여행 정보 수정 (제목, 기간, 메이트, 나라, 여행스타일(테마,계절,동행인)
  - [하] 스크롤 시 헤더 크기 펼쳐보기, 위에 딱 붙기
  - [중] 일정 함께 보는 사람 프로필 그리기
  - [상] 작성자 프로필 보이기
- [하] 공유한/받은 여행 메이트 프로필 보여주기
- 일자 tab
- [하] 선택한 날자의 schedule 목록 보여주기 (DB는 가능하도록 설계하되 1일차만 구현한다.)
- [하] 날짜 추가 기능 클릭 시, plan 기간 변경 + 탭 추가
- [상] 스케줄 목록 보여주기 
  -> DB 변경 필요, 아래 5가지 요소를 자연스럽게 create/update/read 할 수 있어야 함
  - schedule : 
  - memo : 
  - moveSchedule : 
  - flight : 
  - checklist : 

 

[3d][plan] 우측 하단의 + 버튼 (create schedule)

fixed button UI 요구사항

  1. 항상 우측 하단에 떠있도록
  2. 클릭 시,
    1. overlay 깔기 (overlay 클릭 시 펼쳐있는 아이콘 닫기)
    2. [하] 한바퀴 회전 + 위로 아이콘 펼쳐지듯 나오기
  3. 버튼 각 hover 시 밝게 처리
  4. 버튼 클릭 시, 펼쳐있는 아이콘 닫기

각버튼 기능

  1. 북마크한 장소 추가
    1. 동작 순서 : 버튼 클릭 → 북마크 목록 페이지 → 북마크 선택 → plan에 schedule 추가 → API update sort → 성공 시 plan 목록 페이지로, 실패 시 재시도 요청 알림
    2. 필요한 기능
      1. API : userId 기준 bookmarks
      2. API : create schdule by 북마크
      3. page : 북마크 장소 목록
      4. page : 일정 조회 (스케줄 목록)
  2. 장소 추가
    1. 동작 순서 : 버튼 클릭 → 바텀시트 open → 사용자 입력 → API create schedule → API update sort → 바텀시트 close
    2. 필요한 기능
      1. API : create schdule by 사용자 입력
      2. 바텀시트 open + close
      3. 바텀시트 form UI + 오버레이 클릭 시 close 된다? 안된다? (안된다가 더 좋아보임)
  3. 할일(memo) 추가
    1. 동작 순서 : 버튼 클릭 → plan 페이지에 현재 입력 중인 memo UI 추가 (memo : update mode)→ 내용 입력 후 완료 버튼 클릭 → API create memo → API update sort → memo : read mode
    2. 필요한 기능
      1. plan에 memo update mode로 추가하는 UI + 명령어 (ex 바텀시트 오픈처럼 memo.create, memo.update, memo.read 명령어가 필요함)
        1. memo.create : 일정에 메모 입력하는 UI
        2. memo.update : 일정에 기존 메모 수정할 수 있는 UI
        3. memo.read : 추가/수정한 메모를 readonly로 만드는 UI
        4. memo.read가 될 때, API 2가지(create/update)가 콜백으로 쓰일 수 있음

위 세가지 기능에서 공통으로 사용되는 것은

  • API update plan.sort