- 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
- 💙 칭찬하기
- 🏆 리워드
- 랭킹, 칭찬 개수에 따른 리워드 획득, 웨일 키우기
- Splash, NavBar animation
- marquee
- 칭찬하기 버튼
- 고래 키우기 버튼
- 상세 기능 설명은 각 페이지별 링크 연결해두었습니다.
| 1. 🔗리워드 페이지(획득, 랭킹) | 2. 🔗웨일 먹이구입 |
|---|---|
 |
 |
| 3. 🔗웨일 먹이주기 | 4. 🔗배부른 웨일 모습 |
|---|---|
 |
 |
npm install
npm start
- 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으로 이동할 수 있도록 해주었다.
- 랭킹 구현에서 전체 유저로 랭킹을 구현했더니 로딩에 너무 오랜 시간이 걸려 팔로잉 기준으로 고쳐주었다.
- 이 외에도, 서버에서 요청을 받아오는 곳이 이상해서 기능이 제대로 작동하지 않던 문제들이 여럿 있었는데, 제 위치에서 정상적으로 작동할 수 있도록 다 고쳐주었다.