[미라클 TIL 3일차] 팀 프로젝트 기획 & 설계

TIL 24. 01. 06

내배캠 React 3기 A-7조 심화 프로젝트

📢 프로젝트 개요

23. 1. 4 - 24. 02. 08

• 프로젝트 명 : PUG(퍼피 그라운드)
• 주제: 반려견 중고 물품 거래 및 정보공유 플랫폼
• 소개: “PUG”는 반려견을 사랑하는 이들을 위한 플랫폼으로, 중고 반려동물 용품 거래와 유기견 입양을 지원합니다. 이웃들 간에 안전하고 간편한 거래를 제공하며, 가까운 보호소의 유기견 정보를 쉽게 확인할 수 있습니다.

👥 팀 소개

• 팀명: 막내 온 TOP
• 팀원: 염혜원, 손지원, 손창성, 이예지, 천영륜

💡 기능 목록

메인페이지	소개글, 해당 아이콘 선택시 페이지 이동( 중고물품, 반려견 동반 가능 시설, 유기견 공고)
회원가입	이메일 회원가입
로그인	소셜 로그인(카카오톡, 구글), 이메일 로그인
마이페이지	유저 정보 (프로필 사진, 닉네임) 알림, 채팅 최근 거래내역 찜목록 작성 글 목록
중고물품 리스트	페이지네이션 검색 기능(제목, 내용으로) 카테고리 필터링 물품목록(db)불러오기
중고물품 상세페이지	상세 정보 (db)불러오기 찜하기 채팅하기 공유하기 수정버튼(작성자만 보이게) db에 저장된 위치 불러와서 지도 API 에 뿌려주기
중고물품 등록페이지	정보 등록하기 - 사진 (최대 4개), - 상품 상세 설명, - 태그(선택하면 색깔달라지기), - 직거래 위치(지도 API에서 받아오기), - 가격 등 지도 API - 드래그 이벤트, - 현재 위치 커스텀 마커, - 마커 찍은곳 주소, - 경도/위도 얻어오기, - 빌딩네임(user에게 받기)
중고물품 수정페이지	정보 불러오기 - 사진, - 상품 상세 설명, - 태그 , - 직거래 위치(지도 API에서 받아오기), - 가격 등 지도 API - 드래그 이벤트, - 현재 위치 커스텀 마커, - 마커 찍은곳 주소, - 경도/위도 얻어오기, - 빌딩네임(user에게 받기) 수정된 정보 등록하기
채팅 목록	채팅 방 갯수 확인 가능
채팅 상세	채팅 보내기, 채팅 받기 채팅 내용 확인 기능, 이모티콘 보내기(선택)
자랑 페이지	사진 누르면 모달로 보기 기능, 좋아요 기능
자랑 등록 페이지	반려견을 자랑을 등록할 수 있는 기능 (사진 첨부 가능)
사진 모달	자랑 페이지에 있는 사진을 더 크게 볼 수 있음..?
동반시설 리스트	검색 시 지도로 위치 확인 가능, 마커 누르면 상세페이지로 이동
동반시설 상세페이지	해당 장소의 이름, 위치, 이미지 정보 확인 가능, 해당 장소에 대한 후기 확인 가능
유기동물 입양공고 페이지	지역별 필터링 가능

📝 역할 분담

손지원	손창성	염혜원	이예지	천영륜

🚩 개발 내용

💻 개발 환경

• IDE: Visual Studio Code
• OS: Windows, Mac
• Package Manager: Yarn Classic (v1.22.19)
• React boilerplate: Create Next App

📌 사용 기술과 사용한 이유

• React - 사용자와 상호작용 할 수 있는 UI를 효율적으로 구현

• Zustand - 전역 상태 관리 도구

  • 팀원들 모두 알고 있던 Redux와 유사한 기술. Redux는 불필요한 코드 작성이 많고 새로운 전역 상태 관리 도구를 적용하기 위해 선택
  • Recoil은 2월 이후 업데이트 X
• TypeScript - 코드 작성 단계에서 오류를 사전에 방지하고 코드 피드백 및 자동 완성 기능을 활용하여 개발 생산성 향상
• NextJS - 서버 사이드 렌더링과 정적 사이트 생성을 지원하는 리액트 프레임워크. 검색 엔진 최적화와 초기 로딩 성능 향상.

• postcss - 스타일링. CSS Module을 사용할 수 있게 해주는 플러그인.

  • styled components - 서버 컴포넌트 지원 X
  • tailwind - 짧은 프로젝트 내에 적용하기에 러닝 커브 높음

• Supabase - 사용자 인증과 데이터베이스 등의 서버 기능 제공

  • firebase에 비해 규모가 작지만 성장하고 있는 서비스. 오픈 소스.
• React Query - 비동기 작업과 상태를 관리