목차
웰핏(Well-Fit)은 운동과 다이어트에 관심 있는 이들을 위한 SNS 플랫폼으로, 운동 인플루언서와 강사들이 제공하는 다양한 서비스를 구매할 수 있으며 사용자 스스로도 자신의 서비스를 등록해 판매할 기회를 가집니다.
이 플랫폼에서는 상품 판매 외에도 다른 이용자들과 교류하며 운동 루틴, 식단 정보, 진행 중인 운동 목표 등의 일상을 글이나 사진으로 공유할 수 있습니다. 팔로우 기능을 통해 관심 있는 이들의 게시물을 홈 피드에서 살펴보고, 마음에 드는 콘텐츠에는 좋아요나 댓글을 남겨 소통을 더욱 활발하게 만들 수 있습니다.
또한, 개인 대 개인 메시지 기능을 통해 특정 사용자와 더 깊은 대화를 나눌 수 있는 공간도 제공됩니다. 초보자부터 운동 마니아까지, 모든 사람이 운동에 대한 열정을 공유하고 소통할 수 있는 웰핏은 운동에 관한 다양한 정보와 동기부여를 제공하는 커뮤니티입니다.
테스트 계정
ID: wellfit20@test.com
PW: wellfit12!@
| FE 신민재 | FE 장성우 | FE 조예슬 | FE 이수현 |
|---|---|---|---|
| 🔗GitHub | 🔗GitHub | 🔗GitHub | 🔗GitHub |
| - GitHub 관리 - 전체적인 플젝 계획 수립 - 회의록 작성 - 리드미 작성 - 배포 - 재롱 떠는 막내(?) |
- 전반적인 Api 통신 - 전반적인 계정 생성 및 test 담당 - 팀내 각종 질문 및 상담 전문 - 팀내 장교수(?) |
- 전반적인 유효성 검사 담당 - UI 디테일 수정 - 리드미 작성 - 오류 및 예외사항 찾기 마스터 - 분위기 메이커 담당(?) |
- 페이지별 마크업 오류 검사 - 아이디어 호수 - 오프라인 만남 총무(?) 담당 |
  |
 |
 |
 |
- 열심히 운동하면서 작업하기
- 건강하게 개발하기
- 모든 구성원들이 운동을 좋아하기 때문에 저희가 만든 서비스를 실제로 사용하자
🔥우리의 추억(?)🔥
😬 이렇게 어색하게 만난게 엊그제 같은데..
😩 설상가상으로 다 다른 성향을 가진 우리.. 잘 할 수 있을까?
🤤 하지만 식성이 같은 저흰 바로 첫 오프라인 만남을 가졌고! (음식 사진 안찍고 영수증 찍는 우리)
🤒 실연이 다가와도 격려와 응원하는 마음과 함께 프로젝트를 진행했습니다!
저희가 함께 작업한 결과물을 함께 보시죠!
| 주차 | 내용 |
|---|---|
| 1주차 (10/16 -10/20) |
- 주제 선정 및 계획 수립 - 기술 스택 및 협업 툴 조사 및 선정 - 디자인 작업 및 기획 - 컨벤션 설정 |
| 2주차 (10/23 -10/27) |
- 디자인 및 마크업 작업 - 페이지별 기능 역할 분담 |
| 3주차 (10/30 -11/03) |
필수 기능 구현 작업 - 기능 테스트 및 에러 수정 |
| 4주차 (11/06 -11/08) |
- 디자인 및 추가기능 보완 - 서비스 배포 작업 - README 작성 |
- 매일 아침 9시에 디스코드에 접속해서 진행 상황 확인과 추후계획을 세웠습니다.
- 머지할때는 모두 디스코드 화면 공유를 통해 충돌을 방지했습니다.
- 커밋 컨벤션과 코드 컨벤션을 통해서 코드 형식을 통일해, 동시작업을 수월하게 하였습니다.
| Front-End |
|
| 협업 |
|
| 디자인 |
|
| IDE |
|
| 컨벤션 |
|
| 배포 |
|
- 내 프로필 페이지
- 유저 프로필 페이지
- 공통 모달 및 공통 헤더
- 프로필 정보 및 이미지 불러오기
- 프로필 수정, 상품 등록 페이지 이동
- 댓글 프로필 이미지 불러오기
- 팔로잉, 팔로워 목록
- 앨범형,리스트형 피드 구현
- 게시글 상세보기
- 프로필 url 복사, 공유하기
- 홈 피드 페이지
- 검색 페이지
- 팔로잉/팔로워 목록 페이지
- 채팅 리스트 페이지
- 게시물 상세 페이지
- 팔로잉, 팔로워 리스트
- 채팅 리스트
- 유저 검색 기능
- 댓글 작성
- 좋아요 기능
- 피드 상세 페이지
- splash 페이지
- 404 페이지
- 로그인 페이지
- 회원가입 페이지
- 프로필 설정, 수정 페이지
- 상품 업로드 페이지
- 더보기 페이지
- 푸터
- 기본 프로필 이미지 작업
- 로그인, 회원가입, 프로필 설정 및 수정 시 유효성 검사
- 상품 및 프로필 이미지 유효성 검사 및 최적화
- API 모듈화
- 더보기 페이지 날짜 및 요일 기능, To Do List 작성
- 게시글 업로드 프로필 이미지 불러오기
- 로그아웃
- 로고 디자인
- 채팅 룸 페이지
- 게시글 작성 페이지
- 게시글 업로드
- 이미지 1~3장 업로드
| 스플래쉬 | 로그인 | 회원가입 |
|---|---|---|
| 회원가입 프로필 설정 | 계정 검색 | 팔로잉&팔로워 |
|---|---|---|
| 메인 | 좋아요 | 댓글 등록 |
|---|---|---|
| 상품 등록 | 게시글 등록 | 내 프로필 |
|---|---|---|
| 유저 프로필 | 로그아웃 | 더보기(캘린더+할일) |
|---|---|---|
📦wellfit-react
┣ 📂node_modules
┣ 📂public
┣ 📂src
┃ ┣ 📂Components
┃ ┃ ┣ 📂Button
┃ ┃ ┣ 📂Follow
┃ ┃ ┣ 📂Home
┃ ┃ ┣ 📂Input
┃ ┃ ┣ 📂More
┃ ┃ ┣ 📂Post
┃ ┃ ┣ 📂Profile
┃ ┃ ┣ 📂Search
┃ ┃ ┗ 📂common
┃ ┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┣ 📂Loading
┃ ┃ ┃ ┗ 📂Modal
┃ ┣ 📂Contexts
┃ ┣ 📂Pages
┃ ┃ ┣ 📂404
┃ ┃ ┣ 📂Chatting
┃ ┃ ┣ 📂Follow
┃ ┃ ┣ 📂Home
┃ ┃ ┣ 📂Login
┃ ┃ ┣ 📂More
┃ ┃ ┣ 📂Post
┃ ┃ ┣ 📂Profile
┃ ┃ ┣ 📂Search
┃ ┃ ┣ 📂Signup
┃ ┃ ┗ 📂Splash
┃ ┣ 📂Router
┃ ┣ 📂api
┃ ┣ 📂images
┃ ┣ 📂resetcss
┃ ┣ 📜App.js
┃ ┗ 📜index.js
┣ 📜.gitignore
┣ 📜README.md
┣ 📜package-lock.json
┗ 📜package.json
- 모듈화로 인한 코드의 재사용성과 통일성 향상
import axios from 'axios';
const URL = 'https://api.mandarin.weniv.co.kr/';
// 로그인, 회원가입, 이메일 및 계정 검증
export const infoInstance = axios.create({
baseURL: URL,
headers: {
'Content-Type': 'application/json',
},
});
// 이미지 업로드
export const imgInstance = axios.create({
baseURL: URL,
headers: {
'Content-Type': 'multipart/form-data',
},
});
// 기본
export const authInstance = axios.create({
baseURL: URL,
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json',
},
});
// 프로필 정보
export const tokenInstance = axios.create({
baseURL: URL,
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});
반응형 작업
다양한 기기가 많아진 만큼 다양한 사용자들이 편하게 이용할 수 있게 만들고 싶습니다. 시간과 역량이 조금 부족해 마크업 작업 시, 고정값으로 작업한 것이 많이 아쉬웠습니다. 반응형을 고려해서 우선 크게 태플릿부터 시작해서 pc까지 확장해 볼 예정입니다.선택기능과 부가적인 기능 추가
- 필수기능부터 하는 것이 목표로 잡아 선택기능 중 기능 구현을 못한 것이 있습니다. - 선택기능을 구현을 하여 완성도를 더 높일 예정입니다. 구체적으로 좋아요, 팔로우, 언팔로우기능과 같이 선택기능을 구현할 예정입니다. 선택 기능을 하면서 홈페이지 무한 스크롤 구현하기와 검색기능 중 불필요한 API 요청 줄여볼 예정입니다. - 추가적으로 넣은 더보기 페이지에서는 기능을 더 구현할 예정입니다. 식약처 오픈 API를 사용하여 식단별 칼로리 계산하는 기능을 넣고 유튜브 API 사용하여 원하는 운동부위나 음악을 선택하면 관련된 영상을 보여주는 기능도 넣을 예정입니다. - 오운완 커뮤니티도 만들어 볼 예정입니다.UI 수정
- 페이지 전반적으로 수정할 부분이 있어 리팩토링 작업을 하게 되면 우선 순위로 작업을 할 것입니다. 홈페이지, 피드 상세페이지, 게시글 등록페이지, 채팅방 페이지의 구조 수정을 할 예정입니다. 모달창과 페이지간 이동에서도 수정해야할 부분이 있어 이것도 추가적으로 수정을 할 입니다. - 동일한 스타일로 사용할 수 있고 컴포넌트화 할 수 있는 것들은 정리를 해서 코드를 깔끔하게 볼 수 있도록 할 예정입니다.- 팀장으로서 진행하는 프로젝트는 처음이라서 처음엔 뭐부터 해야할지 막막하고 부담감이 있었지만, 수업 때 배웠던 기술들을 바탕으로 직면한 문제들을 하나하나 해결하다 보니 수월하게 작업을 할 수 있었던 것 같습니다.
그리고 좋은 팀원들을 만나 서로가 맡은 부분을 하나 같이 다 책임감 있게 작업했기에 프로젝트를 무사히 마칠 수 있었던 것 같습니다.
프로젝트를 시작할 때부터 필수 기능만 구현하고 하고 싶은 추가 기능은 추후에 리팩토링 과정을 밟기로 했기에, 리팩토링을 통해 우리의 프로젝트를 더욱더 고도화하고 싶다는 생각이 들었습니다. 또한 디자인면에서도 좀더 완성도 있는 프로젝트도 해보고 싶다는 생각이 들었습니다.
무엇보다 4개월이라는 기간동안 버틸 수 있었던 건 함께한 멋사 7기 여러분, 훌륭한 강사진분들과 매니저분들, 웰핏 조원분들 그리고 무엇보다 회고 11조 분들과 함께였기에 더욱 소중했던 기간이었던 것 같습니다.
- 프로젝트를 진행하면서 무작정 개발을 시작하는 것이 중요한게 아니라 프로젝트 팀원들 간의 컨벤션, 프로젝트 구조, 컴포넌트 설계를 정해서 시작했다면 좀 더 원활하게 진행됐을 거라는 생각이 많이 들었습니다. 이러한 경험들이 다른 프로젝트를 진행할 떄 도움이 될거라고 생각했습니다.
처음 진행하는 협업 프로젝트여서 처음에는 부담과 긴장을 많이 했지만, 좋은 팀원들을 만나 프로젝트 진행이 원활했던 것 같습니다.
내가 개발한 부분과 다른 팀원이 개발한 부분에서 이슈가 발생하면 모든 팀원이 같이 고민하고 논의하는 팀 문화를 통해 프로젝트를 혼자하는 것이 아니라 같이 하는 느낌을 받았습니다. 앞으로도 리펙토링을 통해 부족했던 부분을 채워가고 싶습니다.
- 처음 프로젝트를 시작하기 전, 팀원들에게 하나라도 도움이 되어야겠다는 생각으로 시작을 했습니다. 덕분에 열심히 찾아보고 공부하며 많은 것을 배울 수 있는 기회가 되었습니다. 혼자 하는 프로젝트가 아닌 팀원들과 함께 하는 프로젝트인 만큼 팀원들과 소통하는 것이 중요하다는 것을 알게 되었습니다.
함께 고민하고, 해결하고, 공부하고, 배우며 같이 성장해 나간다는 느낌을 받아 저 또한 더 성장할 수 있었습니다. 이번 첫 프로젝트를 통해 협업의 기술에 대해서도 많이 배웠고, 이러한 경험은 앞으로의 리팩토링 작업이나 새로운 프로젝트에 임할 때 훨씬 더 효과적으로 접근할 수 있는 토대를 마련해주었습니다.
이제 앞으로 나아갈 길에 조금 더 자신감을 가지고, 더 나은 성과를 이루기 위해 노력하고 싶습니다.
- 프로젝트를 개발하면서 처음부터 구조를 잘 짜면 좋았겠다는 생각이 많이 들었습니다. 마크업 과정에서부터 구조를 제대로 짜지 않아서 CSS를 고칠 때 하나를 고치면 다른 문제가 생기고 그 문제를 고쳐도 또 다른 문제가 생기는 일들이 반복됐습니다. CSS가 이렇게 복잡하다는 걸 프로젝트를 하면서 느낀 것 같습니다.
그리고 여러모로 개발 능력이 많이 부족해서 UI를 만들고 기능을 구현하는 데 많은 어려움을 겪었고, 프론트엔드 개발자가 되기 위해선 훨씬 더 많이 공부해야겠다는 생각이 들었습니다.