doridori-samsam / 4p-Market

4p Market repository

🐶 뽀삐뽀삐

📍 프로젝트 기간 : 2022.6.18 ~ 2022.7.30
📍 배포 URL : https://ppoppimarket.web.app

📌 개요

🐤 '뽀삐뽀삐'란 저희 팀이름인 '4P(뽀피)'와 사람들이 흔히 이름짓는 강아지 이름인 '뽀삐'의 의미를 가지고 있습니다.

🐡 뽀삐뽀삐는 반려동물을 키우는 반려인들의 고민과 공감, 꿀팁을 나눌 수 있는 SNS와 마켓 서비스를 제공합니다.

🐶 서비스 사용자들은 포스팅 기능을 통해 사진과 글을 기록하며 반려동물의 귀엽고 깜찍한 일상을 공유할 수 있습니다.

🐷 다른 사용자를 팔로우하면 피드에서 서로의 게시물을 볼 수 있고 좋아요와 댓글을 통해 소통할 수 있습니다.

🐱 나눔하고 싶거나 판매하고 싶은 물건이 있다면 상품 판매를 등록하고 본인의 SNS에 바로 홍보할 수 있습니다.

🐹 다른 사용자들과 채팅을 통해 대화를 할 수 있습니다. 또한 채팅으로 이미지를 주고 받을 수 있습니다.

🐰 반려동물을 키우는 반려인이 아니더라도 플랫폼의 모든 기능을 사용 하고 해당 플랫폼을 즐길 수 있습니다.

팀원 소개 👩🏻👩🏻👨🏻👩🏻 💖

FE 김세훈	FE 박소현	FE 이수빈	FE 임현지
blog: for-it-study github: Hun-Se	blog: doridori-samsam github: Sohyun Park	blog: waterbin.log github: Subin Lee	blog: usablepaper.log github: Hyeonji Lim

⚙️ 기술 및 개발환경

[기술]

📌 FrontEnd: React, SASS
📌 BackEnd: 제공된 API 사용
📌 Version:

react: `18.2.0`
react-router-dom: `6.3.0`
node-sass: `7.0.1`
scss-reset: `1.2.2`
axios: `0.27.2`

[개발 환경]

📍 GitHub : 뽀삐뽀삐 GitHub | 뽀삐뽀삐 Project Log | GitHub 전략
📍 WorkPlace: 뽀삐뽀삐 Notion
📍 Design : 뽀삐뽀삐 Figma
📍 Conference: GatherTown | Discord | 회의록

[코딩 컨벤션]

• Coding Convention: 코딩 컨벤션

⚙️ 구현 기능

• 🔐 계정

  • 로그인 / 로그아웃
  • 회원가입
  • 회원 정보 수정
  • 유효성 검증
  • 토큰 검증

• 🔍 피드

  • 유저 검색
  • 포스트 목록
  • 무한 스크롤 / 화면 최상단 이동

• 👥 프로필

  • 팔로우 / 언팔로우
  • 포스트 등록 / 수정 / 삭제 / 신고

• 🏞 포스트

  • 다중 이미지 파일 업로드 / 수정 / 미리보기
  • 포스트 앨범뷰 / 리스트뷰
  • 이미지 슬라이드
  • 좋아요

• 💬 댓글

  • 댓글 작성 / 삭제 / 신고
  • 댓글 시간 보기

• 🎁 상품

  • 상품 목록 / 등록 / 수정 / 삭제 / 신고
  • 이미지 파일 업로드 / 수정 / 미리보기
  • 유효성 평가

📝 역할 분담

🐷 김세훈

🏷️ ROLE

• 작업현황관리 리더
• 메인보드 관리

🎨 UI

• Splash 페이지, 로그인페이지 , 프로필 수정 페이지, 상품등록 페이지, 게시물등록 페이지

🔧 기능 구현

• Splash 페이지
  • 비동기 처리 방식을 사용하여 Splash 화면 구현
  • sessionstorage 사용하여 상태관리
  • 원하는 곳에 사용 할 수 있도록 컴포넌트화
• 내 프로필 수정 페이지
  • 기존 프롵필 데이터 유지 기능 구현
  • 유효성 검사 및 저장 버튼 활성화 기능
  • FormDate 객체를 사용하여 이미지 업로드 및 프리뷰 기능 구현
• 하단 탭 메뉴
  • 홈피드 페이지 경로에 해당하는 하단탭 활성화 기능
• 상품등록 페이지
  • 가격 입력 시 천 단위로 ,(콤마) 자동 입력 및 삭제 기능
  • FormDate와 FileReader 객체를 사용하여 이미지 업로드 및 프리뷰 기능 구현
  • 유효성 검사 통과시 저장 버튼 활성화

🧩 기타

• UserContext, Provider 코드 리펙토링
• 리드미 작성
• 이미지 슬라이드 적용

🐤 박소현

🏷️ ROLE

• 코드 리더
• 팀원들의 코드를 리뷰하고 더 좋은 결과를 위한 피드백 교환.
• 재사용성 높은 유저 프로필 정보 컴포넌트화

🎨 UI

• 이메일 회원가입, 프로필 설정, 이니셜 피드, 유저 검색 페이지 및 검색결과, 포스트 상세보기 댓글 페이지
• 유저 프로필,닉네임,계정이름 컴포넌트, 페이지 헤더 컴포넌트, 뒤로가기/검색/좋아요/저장/더 보기/로그인 버튼 컴포넌트

🔧 기능 구현

• 페이지 헤더
  • 헤더 버튼을 통한 페이지 뒤로가기 기능 구현
  • 헤더의 검색 버튼을 통한 유저 검색 페이지 이동
• 유저 검색 페이지
  • 사용자 입력값이 바뀔 때 마다 입력값과 일치하는 유저 검색 결과 구현
  • 등록된 사용자 프로필 이미지 렌더링 오류 예외처리
  • 검색된 사용자 클릭 시 해당 사용자의 프로필로 이동하는 링크 구현
• 게시물 업로드 페이지
  • 사용자 입력 텍스트와 이미지 파일 포스트 기능 구현
  • 텍스트 입력값과 업로드 할 이미지 파일 데이터가 없을 시 포스트 기능 비활성화 구현
  • 이미지 파일 3개 초과 시 사용자에게 보여지는 alert 구현
  • 포스트 할 이미지 미리보기 및 미리보기에서 삭제 기능 구현
• 사용자 프로필 페이지
  • 사용자의 현재 판매중인 상품 목록 구현
  • 정규표현식을 사용하여 상품 가격 표시
• 좋아요 기능
  • 사용자의 게시글에 하트 버튼 클릭을 통한 좋아요 및 좋아요 취소 기능 구현

🧩 기타

• 프로젝트 작업 매니징을 위한 공유 노션 페이지 작성 및 가이드 라인 제공
• 폴더트리 및 기본 파일 구성을 포함한 프로젝트 기초 작업
• IR 기법을 포함한 전역에 사용되는 스타일 변수와 reset 스타일을 위한 Sass(SCSS) 세팅
• 컨벤션 및 Git 커밋 메세지 컨벤션 설정
• 프로젝트 기능 파트 별 Branch명 설정

🐶 이수빈

🏷️ ROLE

• 커뮤니케이션 리더
• 깃헙 Project Board 관리
  • 작업에 대한 진척도를 가시적으로 표시하며 협업 능력 상승
• 회의록 작성 및 팀 노션 정리
• 팀원들 간의 원활한 소통 환경 제공
  • 게더타운 활용하여 팀원들간 유대감 형성
  • 디스코드 '오늘 할 일' 게시판 운영(서로의 진행 상황, 해야할 일 공유, 응원 한마디)

🎨 UI

• 모달창, 팝업창, 팔로잉, 팔로워 목록, 채팅목록, 채팅룸, 에러페이지 UI 구현
• 팀 로고 이미지와 컬러 적용하여 피그마 수정

🔧 기능 구현

• 로그인 페이지 (API 명세에 따름)

  • 로그인 유효성 검사
  • 정규표현식으로 이메일 형태 및 비밀번호 유효성 검증
  • 서버 데이터를 받아 회원가입 된 정보인지 확인
  • 회원 정보 데이터 존재 시 로그인 되게끔 구현

• 상품등록 페이지 (API 명세에 따름)

  • 상품 등록 포스트 업로드 구현
  • 유저가 등록한 웹사이트로 이동되도록 구현
  • 정규표현식으로 웹사이트 주소 유효성 검증
  • 천만 단위 이상의 가격을 입력 시 경고 표시
  • 이미지를 포함한 모든 인풋 창 입력 시 업로드 버튼 활성화

• 에러 페이지

  • 잘못된 주소 입력 시 에러페이지를 띄우도록 구현
  • 페이지에 두 가지 버튼(이전 페이지로 이동, 홈으로 이동)을 만들어 사용자의 페이지 이동 편의성 고려

• 모달/알림창

  • React portal 로 모달창 구현
  • 버튼을 클릭하면 화면 하단에 모달창이 나타나고, 버튼을 클릭했을 때 알림창이 뜨도록 구현
  • Account 에 따라 페이지 별로 다른 모달창 화면 구현
  • 모달창, 팝업창 내 모든 기능 구현 ( 로그아웃, 삭제, 신고, 수정, 페이지 이동 - API 명세에 따름 )
  • 로그아웃 기능
    • localStorage 내 저장된 유저 token clear
  • 삭제 기능
    • 작성한 게시글, 상품, 댓글 삭제 기능 구현
    • 삭제 후 페이지가 실시간 업데이트 되게끔 구현
  • 신고 기능
    • 다른 유저의 게시글, 상품, 댓글 신고 기능 구현
    • 신고가 완료되면 가시적으로 확인할 수 있게끔 alert 창을 띄우도록 구현
  • 수정 기능
    • 게시글, 상품 수정 기능 구현
    • 서버에 저장되어 있는, 기존에 작성된 데이터를 그대로 불러와 수정할 수 있도록 구현

🧩 기타

• Custom Hook

  • 여러 페이지에서 사용되는 코드(삭제, 신고)는 custom hook을 만들어 사용
  • 컴포넌트 로직을 재사용하여 반복적이고 불필요한 코드를 줄임
  • 더 빠른 성능에 도움

• 페이지 진입 시 인풋창 포커스 기능 구현

  • 클릭하지 않아도 input 창이 활성화되게끔 UX 측면 고려하여 구현

🐱 임현지

🏷️ ROLE

• 코드 리더
• 지속 가능한 통일된 웹사이트를 위한 설계 및 가이드라인 제공
  • 컨벤션, 폴더트리, 컴포넌트 설계
  • 서비스 전체 라우팅 설계 / 구축 및 예외 처리
  • git branch 사용 가이드 라인 제공
• 전반적인 웹사이트 개발 관리
  • 주기적인 코드 리뷰 / 개선안 제안
  • 기능 구현 역할 배분 및 일정 조율

🎨 UI

• 홈 피드 페이지, 프로필 페이지, 포스트 컴포넌트 UI 구현
• 웹사이트 로고 디자인, 페이지 내 기본 이미지 제작
• CSS keyframes 를 활용한 스플래시 애니메이션 구현

🔧 기능 구현

• 회원가입페이지
  • 사용자가 입력한 input 데이터를 state로 관리하여 API 명세에 맞게 한번에 전달하는 기능 구현
  • 회원가입 정보 유효성 검증
    • 계정 / 이메일 중복 검증 기능 (API 명세에 따름)
    • 정규표현식으로 형태 및 유효성 검증
    • 유효성 검증에 통과하지 못 할 경우 버튼 비활성화 및 경고 메세지 로드
  • 프로필 사진 첨부 및 미리보기 기능 구현
  • 회원가입 시 로그인 상태 전환 기능 구현하여 사용성 개선
• 홈 피드 페이지
  • 피드 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
  • 로그인 여부에 따른 페이지 로드 기능 구현
    • 로그아웃 상태일 때 로그인 페이지가 보이도록 / 로그인 상태일 때 피드 데이터를 요청하도록 구현
  • 시간 계산 로직을 사용하여 게시물 및 댓글 업로드 시간 UI 개선
• 프로필 페이지
  • 유저 정보 및 포스트 목록 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
  • 포스트 목록의 레이아웃을 리스트 형식 / 앨범 형식으로 선택해 볼 수 있는 기능 구현
  • 링크 직접 공유와 같은 상황에서도 모든 유저의 프로필 페이지에 정상적으로 url로 접근 가능하도록 useParams의 객체를 사용하여 데이터 요청 기능 구현 및 사용성 개선
• 팔로우 / 팔로잉 페이지
  • 팔로우 / 팔로잉 목록 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
  • 팔로우 / 언팔로우 기능 구현 (API 명세에 따름)
• 포스트 상세페이지
  • 포스트 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
  • 댓글 목록 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
  • 댓글 작성 기능 및 실시간 업데이트 기능 구현

🧩 기타

• 무한스크롤 기능 구현하여 웹 최적화 및 사용성 개선(피드, 댓글, 팔로우 페이지)
  • 스크롤이 완성되면, 그 다음 데이터를 요청하도록 구현
  • 추가 요청한 데이터를 다시 컨테이너에 리스트업 되도록 스프레드 문법 사용하여 구현
• 반복적으로 사용되는 이미지 예외처리 로직을 custom hook을 만들어 불필요한 중복 코드 제거
• 전역에서 필요한 데이터를 useContext 객체로 관리하여 페이지 이동 시에도 서버에 불필요한 데이터 요청하지 않도록 구현
• API 통신 중 pending status를 감지하여 로딩중 상태임을 표시하는 기능 추가 및 사용성 개선
• token 검증 기능 구현(API 명세에 따름)
• token이 유효하지 않거나 없는 경우 접근 차단 기능 구현
• firebase 사용하여 프로젝트 배포

🎨 구현 UI

0. Splash	1. 회원가입, 프로필 설정

2. 로그인	3. 로그아웃

4. 홈 피드	5. 계정 검색

6. 마이 프로필	6-1. 마이 프로필 수정

7. 유저 프로필	7-1. 댓글 등록 / 삭제 / 좋아요

9. 게시물 등록	9-1. 게시글 수정	9-2. 게시글 삭제

10. 상품 등록	10-1. 상품 등록 수정	10-2. 상품 삭제

11. 팔로잉 / 팔로우	12. 채팅	13. 신고

✨ 코드 포인트

useContext

• 전역에서 필요한 데이터를 useContext 객체로 관리
• 페이지 이동 시 서버에 불필요한 데이터 요청하지 않도록 구현

Custom Hook

• 삭제, 신고, 이미지 예외처리 로직 custom hook 생성
• 반복되는 로직을 합쳐줌으로써 불필요한 코드를 제거하고 재사용성 높임

SCSS

• 변수 선언으로 유지보수 편의성 향상
• 선택자 중첩 기능으로 코드의 가독성 및 유지보수 편의성 향상

컨벤션에 따른 코드 및 파일 통일성

• className
• 변수명, 함수명
• Import 순서
• 파일명, 폴더트리

✨ 스페셜 포인트

섬세한 UI로 더 나은 사용자 경험을 제공

• 이미지 슬라이드
• 무한 스크롤, 스크롤 top 버튼
• 뒤로가기로 유저검색페이지 이동 시 검색한 데이터 유지 기능
• 로딩이미지

디테일한 예외처리

• 악성 사용자 예외처리: 형식에 맞지 않는 데이터로 페이지에 오류를 일으키거나 UI를 해치는 사용자 예외처리
• 라우터 예외처리: 잘못된 라우터 및 형식에 맞지 않는 url 예외 처리
• 에러이미지 예외처리: 이미지 형식에 맞지 않거나 오류가 있는 이미지는 대체 이미지 출력

빠르고 일관성 있는 작업 방식

• 프로젝트 초기 폴더트리 구조 확립
• 자세한 컨벤션 규칙으로 일관성 있는 작업
• 빠르고 적극적인 피드백과 요구사항 요청

🗂 폴더트리

📦 src
 ┣📂 assets
 ┣📂 components
 ┃ ┣📂 button
 ┃ ┣📂 footer
 ┃ ┣📂 header
 ┃ ┣📂 modal
 ┃ ┃ ┣📂 alert
 ┃ ┃ ┃ ┣📂 alertBase
 ┃ ┃ ┃ ┗📂 alerts
 ┃ ┃ ┣📂 modalBase
 ┃ ┃ ┗📂 modals
 ┃ ┣📂 notFound
 ┃ ┣📂 post
 ┃ ┣📂 splash
 ┃ ┃ ┗📂 logo
 ┃ ┣📂 style
 ┃ ┗📂 user
 ┣📂 context
 ┣📂 hooks
 ┣📂 pages
 ┃ ┣📂 chatPage
 ┃ ┃ ┗📂 chatPageItem
 ┃ ┣📂 chatRoomPage
 ┃ ┃ ┗📂 chatRoomInput
 ┃ ┣📂 emailLoginPage
 ┃ ┣📂 followPage
 ┃ ┃ ┗📂 followList
 ┃ ┣📂 homePage
 ┃ ┃ ┗📂 initialFeed
 ┃ ┣📂 logInPage
 ┃ ┃ ┣📂 loginSection
 ┃ ┃ ┗📂 userAccount
 ┃ ┣📂 postDetailPage
 ┃ ┃ ┗📂 comment
 ┃ ┣📂 profileEditPage
 ┃ ┃ ┣📂 profileEditImg
 ┃ ┃ ┗📂 profileEditInfo
 ┃ ┣📂 profilePage
 ┃ ┃ ┣📂 userHeader
 ┃ ┃ ┣📂 userPost
 ┃ ┃ ┗📂 userProduct
 ┃ ┣📂 searchUserPage
 ┃ ┃ ┗📂 searchResult
 ┃ ┣📂 signUpPage
 ┃ ┃ ┣📂 emailSignUp
 ┃ ┃ ┗ 📂 profileSet
 ┃ ┣📂 updatePostPage
 ┃ ┣📂 updateProductPage
 ┃ ┣📂 uploadPostPage
 ┃ ┗📂 uploadProductPage
 ┃  ┣📂 uploadProductImg
 ┃  ┗📂 uploadProductInput
 ┣📜 App.jsx
 ┣📜 App.scss
 ┗📜 index.js