세상을 움직일 칭찬 앱 웨일 마켓

[배포 URL]

• URL: https://whalemarket.netlify.app/
• 계정
  • ID: [email protected]
  • PassWord: whalemarket

💡 개요

🐳 웨일마켓은 '칭찬은 고래도 춤추게 한다'는 말에서 의미를 가져왔습니다.

👭 서비스 사용자는 칭찬을 공유할 수 있는 소셜 네트워크 서비스입니다.

🚀 사용자가 칭찬을 받으면 리워드를 획득할 수 있으며, 먹이를 구입하여 웨일이를 키울 수 있습니다.

💬 웨일마켓은 게시물 및 댓글 작성, 사용자 검색, 팔로우 기능을 제공합니다.

🌍 칭찬을 통해 서로에게 긍정적인 에너지를 주기 위해 웨일마켓이 도와줍니다!

⚙️ 개발 환경

[개발 기간]

• 2022-06-26 ~ 2022-07-31

[개발 환경]

• vscode

[회의 내용]

• EarthMarket WorkPlace: 웨일마켓 워크플레이스
• Coding Convention: ⚙️ 함께 정한 코딩 컨벤션

[기술]

• FrontEnd: React, Styled-components, Axios, react-router-dom v5.2.0
• BackEnd: 제공된 API 사용
• 서비스 배포 환경: Netlify

📌 플로우 차트

👀 웨일마켓 둘러보기

👨🏻‍🤝‍👨🏻 팀원 소개

임희래	여소희	이소민	문 희
github: rapidmon	github: soheeyeo	github: nimoseel	github: moonhee0507

📌 역할 분담

👨🏻‍💻 임희래

• 웨일마켓 프로젝트 아이디어 기획
• 프로젝트 팀 테크 리드
• 게시물 작성 페이지 화면 및 기능 구현
• 물품 업로드 화면 및 기능 구현
• 라우터 설계 및 useContext를 사용한 데이터 바인딩
• 애니메이션 기능 구현
• 고래에게 먹이주기 기능 구현
• 칭찬하기 기능 구현
• 코드 리팩토링

👩🏻‍💻 여소희

• 프로젝트 팀 디자인 리드
• 로고 제작 및 피그마 세팅
• 게시물 업로드 날짜 및 시간 기능 구현
• 프로필 페이지, 프로필 수정 페이지, 메인 프로필 페이지 화면 구현
• 프로필 유효성 검사 및 화면 이동 기능 구현
• 프로필 이미지 업로드 기능 구현
• 반응형 웹 구현

👩🏻‍💻 이소민

• Splash 화면 및 기능 구현
• 계정 검색, 404 화면 구현
• 피드 UI 제작 및 피드 데이터 연결
• 게시글, 물품 삭제하기 기능 구현
• 기본 모달, alert 모달, 인용구 모달 구현 및 연결
• 반응형 웹 구현

👩🏻‍💻 문 희

• 로그인 및 회원가입 페이지 구현
• 로그인 및 회원가입 유효성 검사 및 데이터 요청/연결
• 팔로워 목록 데이터 요청/연결
• 계정 검색 기능 구현
• 피드 데이터 연결, 게시물 수정 기능 구현
• 프로필 이미지 업로드 기능 및 미리보기 기능 구현
• 프로필 수정 기능 구현

💡 기능 구현

[기능]

- 🔐 인증
    - 로그인
    - 회원 가입
        - 이메일, 비밀번호 / 이미지, 이름, ID, 자기소개
    - 회원 정보 수정
        - 이미지, 이름, ID, 자기소개
    - 유효성 검사
    - 토큰 검증

- 🎁 물품
    - 물품 목록 / 등록 / 수정 / 삭제
    - 이미지 파일 업로드 / 수정 / 미리보기
    - 유효성 검사
        - 이미지, 물품명, 가격, 등록링크

- 📱 게시물
    - 게시물 목록 / 등록 / 수정 / 삭제 / 신고
    - 다중 이미지 파일 업로드(최대 3개) / 수정 / 미리보기

- 💬 댓글
    - 댓글 등록 / 삭제 / 신고

- 🔍 계정 검색

- 👭 follow / unfollow

- 💙 칭찬하기

- 🏆 리워드
    - 랭킹, 칭찬 개수에 따른 리워드 획득, 웨일 키우기

[UI Animation]

- Splash, NavBar animation
- marquee
- 칭찬하기 버튼
- 고래 키우기 버튼

💻 페이지 시연

• 상세 기능 설명은 각 페이지별 링크 연결해두었습니다.

1) 홈

1. 🔗splash	2. 🔗회원가입

3. 🔗로그인	4. 🔗홈화면

5. 🔗계정 검색	6. 🔗날씨 확인

2) 게시물

1. 🔗게시물 작성	2. 🔗게시물 상세

3. 🔗게시물 수정	4. 🔗게시물 삭제

5. 🔗게시물 및 댓글 신고	6. 🔗댓글 작성

7. 🔗댓글 삭제	8. 🔗칭찬하기

3) 프로필

1. 🔗마이 프로필	2. 🔗유저 프로필

3. 🔗팔로워	4. 🔗팔로잉

5. 🔗프로필 수정	6. 🔗로그아웃

4) 등록물품

1. 🔗물품 등록	2. 🔗물품 수정, 삭제

5) 웨일 키우기

1. 🔗리워드 페이지(획득, 랭킹)	2. 🔗웨일 먹이구입

3. 🔗웨일 먹이주기	4. 🔗배부른 웨일 모습

🚀 실행방법

  npm install
  npm start

⚙️ Defendency

📁 폴더트리

• assets/ : 이미지, 아이콘 디렉토리
• components/ : 기능별 컴포넌트 분리 디렉토리
• constants/ : API_URL 및 IMG_EXTENSION 상수 모음
• context/ : 데이터 바인딩을 위한 Context 모음
• hook/ : Custom Hook 디렉토리
• pages/ : 페이지별 컴포넌트 분리 디렉토리
• routes/ : Main routes 관리
• theme/ : 프로젝트에서 사용되는 keyframes 모음

📦src
 ┣ 📂asset
 ┣ 📂components
 ┃ ┣ 📂emaillogin
 ┃ ┃ ┣ 📂button
 ┃ ┃ ┗ 📂LoginForm
 ┃ ┣ 📂JoinForm
 ┃ ┣ 📂login
 ┃ ┣ 📂main
 ┃ ┃ ┣ 📂homeFeed
 ┃ ┃ ┣ 📂homeSearch
 ┃ ┃ ┣ 📂mainProfile
 ┃ ┃ ┃ ┣ 📂follow
 ┃ ┃ ┃ ┣ 📂productUpload
 ┃ ┃ ┃ ┃ ┣ 📂productDetailUpload
 ┃ ┃ ┃ ┃ ┣ 📂productImgUpload
 ┃ ┃ ┃ ┃ ┗ 📂productUploadHeader
 ┃ ┃ ┃ ┣ 📂profile_edit
 ┃ ┃ ┃ ┃ ┣ 📂profileDetailUpload
 ┃ ┃ ┃ ┃ ┣ 📂profileEditHeader
 ┃ ┃ ┃ ┃ ┗ 📂profileImgUpload
 ┃ ┃ ┃ ┗ 📂user_profile
 ┃ ┃ ┣ 📂market
 ┃ ┃ ┣ 📂postDetail
 ┃ ┃ ┣ 📂posting
 ┃ ┃ ┃ ┣ 📂imageuploadbutton
 ┃ ┃ ┃ ┣ 📂postingheader
 ┃ ┃ ┃ ┗ 📂postingsection
 ┃ ┃ ┣ 📜ChatProfileHeader
 ┃ ┃ ┣ 📜Homeheader
 ┃ ┃ ┣ 📜HomeSection
 ┃ ┃ ┗ 📜Navbar
 ┃ ┣ 📂modal
 ┃ ┣ 📂notFound
 ┃ ┣ 📂profile
 ┃ ┣ 📂splash
 ┣ 📂constants
 ┣ 📂context
 ┣ 📂fonts
 ┣ 📂hook
 ┣ 📂pages
 ┃ ┣ 📂login_page
 ┃ ┣ 📂main_page
 ┃ ┣ 📜LoadingPage
 ┃ ┗ 📜NotFoundPage
 ┣ 📂routes
 ┣ 📂theme
 ┣ 📜App.js
 ┣ 📜index.js
 ┗ 📜Portal.js

⚽ 트러블 슈팅

• 아이폰 사파리 브라우저에서 모달 창 확인 시 버튼의 색깔이 파란색이 되어있던 현상이 있었다. 찾아보니 기본적으로 적용되어 있는 css이기 때문에 설정을 따로 해주어야 했다.
• 파일에 이미지를 넣을 때 프리뷰 형식을 ReadResult로 따로 설정해주었는데, 프리뷰를 하겠다고 서버에 요청을 보내면 메모리 낭비가 생길 것 같았기 때문이다. 그러다 보니 txt같은 형식의 파일도 일단 들어가지게 되었는데, 그래서 넣을 수 있는 파일 형식을 따로 설정해 주었다.
• 서버에서 요청을 받아온 이미지의 파일이 이상할 때가 있었다. 이런 파일들이 빈 파일로 보이지 않도록 '이미지를 찾을 수 없습니다.'용 이미지를 따로 만들어 두고 조건에 부합하면 이 이미지가 뜨도록 하였다.
• 물품의 가격을 서버에서 받아서 localeString으로 한국식 화폐단위로 만들어주었는데, 물품의 가격이 null이거나 문자인 경우가 있었다. 이런 경우를 대비해서, 조건식을 넣어 처리해주었다.
• /main으로 들어갈 경우 navbar를 제외한 아무 것도 없는 창이 뜨길래 /main으로 들어가면 자동으로 /main/home으로 이동할 수 있도록 해주었다.
• 랭킹 구현에서 전체 유저로 랭킹을 구현했더니 로딩에 너무 오랜 시간이 걸려 팔로잉 기준으로 고쳐주었다.
• 이 외에도, 서버에서 요청을 받아오는 곳이 이상해서 기능이 제대로 작동하지 않던 문제들이 여럿 있었는데, 제 위치에서 정상적으로 작동할 수 있도록 다 고쳐주었다.