Recent Posts
Recent Comments
Archives
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- nextjs
- 코드카타
- useRouter
- array정적메서드
- 프로젝트 셋팅
- 모던 자바스크립트
- deep dive
- React
- 리터럴
- 소셜 로그인
- 코딩테스트
- domain
- 코테
- 모던자바스크립트
- error
- vercel
- 스파르타코딩클럽
- vscode
- 셋팅
- 티스토리챌린지
- CORS
- 내일배움캠프
- js
- 프로그래머스
- 자주 까먹는
- 초기셋팅
- git
- 구글 로그인
- 오블완
- Next
- Today
- Total
파피루스
[팀플] 구현에 필요한 기능 나열하고 소요 시간 가늠해보기 본문
[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 요구사항
- 항상 우측 하단에 떠있도록
- 클릭 시,
- overlay 깔기 (overlay 클릭 시 펼쳐있는 아이콘 닫기)
- [하] 한바퀴 회전 + 위로 아이콘 펼쳐지듯 나오기
- 버튼 각 hover 시 밝게 처리
- 버튼 클릭 시, 펼쳐있는 아이콘 닫기
각버튼 기능
- 북마크한 장소 추가
- 동작 순서 : 버튼 클릭 → 북마크 목록 페이지 → 북마크 선택 → plan에 schedule 추가 → API update sort → 성공 시 plan 목록 페이지로, 실패 시 재시도 요청 알림
- 필요한 기능
- API : userId 기준 bookmarks
- API : create schdule by 북마크
- page : 북마크 장소 목록
- page : 일정 조회 (스케줄 목록)
- 장소 추가
- 동작 순서 : 버튼 클릭 → 바텀시트 open → 사용자 입력 → API create schedule → API update sort → 바텀시트 close
- 필요한 기능
- API : create schdule by 사용자 입력
- 바텀시트 open + close
- 바텀시트 form UI + 오버레이 클릭 시 close 된다? 안된다? (안된다가 더 좋아보임)
- 할일(memo) 추가
- 동작 순서 : 버튼 클릭 → plan 페이지에 현재 입력 중인 memo UI 추가 (memo : update mode)→ 내용 입력 후 완료 버튼 클릭 → API create memo → API update sort → memo : read mode
- 필요한 기능
- plan에 memo update mode로 추가하는 UI + 명령어 (ex 바텀시트 오픈처럼 memo.create, memo.update, memo.read 명령어가 필요함)
- memo.create : 일정에 메모 입력하는 UI
- memo.update : 일정에 기존 메모 수정할 수 있는 UI
- memo.read : 추가/수정한 메모를 readonly로 만드는 UI
- memo.read가 될 때, API 2가지(create/update)가 콜백으로 쓰일 수 있음
- plan에 memo update mode로 추가하는 UI + 명령어 (ex 바텀시트 오픈처럼 memo.create, memo.update, memo.read 명령어가 필요함)
위 세가지 기능에서 공통으로 사용되는 것은
- API update plan.sort
'Today I Learned > diary' 카테고리의 다른 글
[임시] 진입점 없어 링크로 시연예정 (0) | 2024.07.30 |
---|---|
[팀플] 회고로 시작하여, 차주 목표로 이어지도록 (0) | 2024.07.26 |
[팀플] 회원 API 설계 (0) | 2024.07.22 |
[팀플] 마무리가 좋으면 다 됐다 (0) | 2024.07.17 |
[팀플] 팀 아이디어 정하기 (0) | 2024.07.17 |