프로젝트 4차 회의(23.09.05)

✅ 해야할 일

• 시안을 기반으로 기능별 페이지 분배
• 깃허브 프로젝트 백로그 작성을 위한 템플릿 제작
• 팀원의 역량 및 원하는 기능에 맞춰 페이지 배분

🕒 진행상황

기능별 페이지 분석

공통

• 아이콘의 경우 내장된 이모티콘을 활용하여 저작권 문제를 해결하고 익숙함을 이끌어 냄
• Button, Input, Modal Dialog와 같이 재사용성이 높은 요소는 아토믹 컴포넌트로 제작

메인 페이지

• Splash: Framer-motion Path 기능을 활용
• 상단 메뉴(추천 / 채소 / 과일 / 곡류 / 육류): Swiper.js 활용
• 지도: 새로고침, 현재위치, 위치 표시 기능 추후 적용 여부 확인 필요
• 지도 API: 카카오 지도 API(상세한 설명, 보편적 사용, 기능별 활용성이 높음)
• 알림 기능: 채팅 알림, 관심상품 알림(회원가입 또는 프로필에서 설정 가능), 진행 상태 알림
• 더하기 버튼: 방 개설 페이지로 전환
• 하단 메뉴: 링크 연결

상품 리스트 페이지

• 뒤로가기 버튼: 메인 페이지로 이동
• 리스트 내용:
  • 카테고리: 메인페이지 상단 메뉴에 해당하는 카테고리
  • 상태: 상세 기재 사항에 포함(대기중 - 진행중 - 공구종료)
  • 설명: 상세 기재 사항에 포함, 2줄 이상일 시 말줄임표 처리
  • 업로드 시간(필수 구현사항 아님)
  • 픽업시간: 상세 기재사항에 포함
  • 정원: 기본값 5명이며, 인원 조절 가능

방 개설 페이지

• 카테고리: 메인 페이지 카테고리와 동일
• 상품 정보
• 상품명: 직접 기재
• 개수: 버튼으로 조정
• 가격: 직접 기재
• 내용: 직접 기재
• 만날 장소: 지도 API를 활용하여 위치 설정
• 픽업 날짜: 태그 활용
• 정산 방법: 만나서 결제, 계좌이체 중 선택(추후 추가 여부 논의 필요)
• 인원: 기본값 5명, 버튼으로 조정 가능

상품 상세 페이지

• pocketbase, pocketHost를 활용하여 렌더링
• 기존 방 개설 페이지에 기재한 사항이 반영될 수 있도록 함
• 상품명, 픽업 시간, 장소, 내용, 참여인원, 1인당 정산비(함수 활용), 메뉴 버튼 클릭 시 진행상태, 참여자 관리, 게시물 수정, 모임 삭제 리스트 확인

진행 상태

• 대기중 - 진행중 - 공구종료 버튼 구현
• 공구 완료 토스트 도구 사용
• 아토믹 컴포넌트를 활용하여 모달 다이얼로그 구현

채팅 / 댓글 기능

• 채팅하기 버튼
• 채팅 입력창
• 내용 실시간 업로드
• 채팅 날짜, 시간 계산
• 엔터로 전송 가능하도록 구현
• socket.io 사용

백로그

• 페이지별 구현 기능에 들어가기 전 이슈(백로그용) 템플릿에 내용과 시안 이미지를 첨부하여 등록
• 매일 달성도를 댓글로 작성하여 팀 전체적으로 진행률을 파악할 수 있도록 함

페이지 배분

• 이은빈: 메인 페이지, 카테고리, 상품 목록 -> 지도 API, Framer-motion
• 조지현: 판매자 방 개설 페이지, 픽업 주소 검색 -> 포켓베이스, 지도 API
• 서진만: 구매자 상품 확인 페이지, 참여 취소, 진행 메뉴, 참여자 목록 -> 포켓베이스, 지도 API, Modal Dialog
• 홍다영: 채팅 페이지, 진행상태 변경, 공구 진행 및 종료 안내 -> 포켓베이스 realtime, Modal Dialog, react-hot-toast

🧑🏻‍💻 내일 할 일

• 로고 확정
• 작업 페이지에 대한 백로그 작성
• 코드 작업 진행