🍞Bread Fit🥨

빵과 결이 맞는 사람들을 위한 서비스

[목차]

0. 팀원 소개
1. 목표와 기능
2. 개발 환경 및 배포 URL
3. 프로젝트 구조와 개발 일정
4. 역할 분담
5. UI / BM
6. 메인 기능
7. 추가 기능
8. 개발하면서 느낀점

🍞 팀원 소개

---

박유진

김상돈

오래규

박서영

🥐 목표와 기능

---

1.1 목표

• 빵을 좋아하는 사람들이 빵에 대한 정보를 서로 공유할 수 있는 SNS
• 판매자가 자신의 상품을 홍보할 수 있는 플랫폼
• 원하는 업체에 대한 정보를 찾을 수 있는 정보 네트워크

1.2 기능

• 빵에 대한 정보를 공유할 수 있습니다.
• 판매자가 본인의 빵을 홍보할 수 있습니다.
• 다양한 빵집의 계정을 이용하여 원하는 빵을 찾아볼 수 있습니다.
• 그날그날에 맞는 빵을 추천 받을 수 있습니다.

🥖 개발 환경 및 배포 URL

---

2.1 개발 환경

• 프론트 개발 환경 : React & emotionJS & axios
• 백엔드 개발 환경 : 제공된 API 사용

2.2 배포 URL

[ bread-fit ] https://bread-fit-react.vercel.app/

🫓 프로젝트 구조와 개발 일정

---

3.1 프로젝트 구조

├── README.md
├── package.json
├── public
│   ├── assets
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── constants
│   │   └── index.js
│   ├── index.css
│   ├── index.js
│   ├── pages
│   │   ├── Home
│   │   │   ├── Components
│   │   │   │   ├── Searchuser.jsx
│   │   │   │   └── Userfeed.jsx
│   │   │   ├── index.jsx
│   │   │   └── search.jsx
│   │   ├── Join
│   │   │   ├── index.jsx
│   │   │   ├── membership.jsx
│   │   │   └── setting.jsx
│   │   ├── Login
│   │   │   ├── components
│   │   │   │   ├── PrivateRoutes.jsx
│   │   │   │   └── PublicRoute.jsx
│   │   │   ├── email.jsx
│   │   │   └── index.jsx
│   │   ├── Post
│   │   │   ├── Components
│   │   │   │   ├── CommentList.jsx
│   │   │   │   ├── Inpreply.jsx
│   │   │   │   └── PostHeader.jsx
│   │   │   ├── Feeddetail.jsx
│   │   │   ├── edit.jsx
│   │   │   ├── index.jsx
│   │   │   └── upload.jsx
│   │   ├── Profile
│   │   │   ├── Components
│   │   │   │   ├── PostInfo.jsx
│   │   │   │   ├── PostTypeAlbum.jsx
│   │   │   │   ├── PostTypeList.jsx
│   │   │   │   ├── ProductInfo.jsx
│   │   │   │   ├── ProfileHeader.jsx
│   │   │   │   ├── ProfileInfo.jsx
│   │   │   │   └── Userlist.jsx
│   │   │   ├── [id].jsx
│   │   │   ├── follower.jsx
│   │   │   ├── following.jsx
│   │   │   ├── index.jsx
│   │   │   ├── modification.jsx
│   │   │   ├── product.jsx
│   │   │   ├── productEdit.jsx
│   │   │   └── product[id]DetailDelete.jsx
│   │   ├── Recommend
│   │   │   ├── Components
│   │   │   │   ├── Header.jsx
│   │   │   │   └── RecommendList.jsx
│   │   │   └── index.jsx
│   │   └── layouts
│   │       ├── FollowerHead.jsx
│   │       ├── Layout.jsx
│   │       ├── Mainform.jsx
│   │       ├── MenuHead.jsx
│   │       ├── MenuModal.jsx
│   │       ├── ModificationHead.jsx
│   │       ├── SaveHead.jsx
│   │       ├── Searchhead.jsx
│   │       ├── Searchuserhead.jsx
│   │       ├── Tabmenu.jsx
│   │       └── index.js
│   └── utils
│       └── isLogin.js
└── yarn.lock

3.2 개발 일정

내용	일정	기간
프로젝트 기획	2021년 12월 18일	1일
바닐라JS로 UI 구현	2021년 12월 19일 ~ 2021년 12월 23일	5일
바닐라JS로 기능 구현	2021년 12월 23일 ~ 2021년 12월 29일	7일
리액트로 UI 구현	2021년 12월 29일 ~ 2022년 1월 11일	15일
리액트로 기능 구현	2022년 1월 11일 ~ 2022년 1월 17일	7일
API 기능 구현	2022년 1월 17일 ~ 2022년 1월 26일	10일
배포 및 리뷰	2022년 1월 26일 ~ 2022년 1월 30일	5일

🔗  빵마켓 회의록
🔗  바닐라JS버전

🥨 역할 분담

---

• 팀장 : 박유진
• FE, BE : 박유진, 박서영, 오래규, 김상돈

🔗 로그인 페이지	🔗 회원가입	🔗 검색 페이지	🔗 홈 페이지
🔗 게시글 페이지	🔗 프로필 페이지	🔗 팔로워 페이지	🔗 상품 페이지

🥯 UI / BM

🥞 메인 기능

---

🛍️   스토어의 상품을 등록하여 상품을 판매할 수 있습니다.

• 본인의 프로필에 상품을 등록하여 상품을 판매할 수 있습니다.
• 나를 팔로우한 사용자에게 나의 새로운 피드가 보이기 때문에 상품을 홍보할 수 있습니다.

👨‍👩‍👧‍👧   비슷한 취향을 가진 사람들과 소통할 수 있습니다.

• 빵을 좋아하는 비슷한 취향의 사람들과 소통할 수 있습니다.
• 빵에 대한 정보를 공유하면서 원하는 정보를 얻을 수도 있습니다.

🎯   원하는 업체의 정보를 찾아볼 수 있습니다.

• 원하는 업체의 프로필을 검색하여, 해당 업체 정보를 찾아 볼 수 있습니다.
• 원하는 업체의 생생한 피드를 볼 수 있습니다.

🧇 추가 기능

---

🎁  오늘의 빵을 추천해드립니다.

• 매일매일 뭐먹을까 고민될 때, 매일 새로운 빵을 추천해 드립니다.

🥪 개발하며 느낀점

---

🙋‍♀️ 박유진

처음에는 바닐라js로 시작했다가 다시 리액트로 개선하면서 시행착오도 많고, 그만큼 배운것도 많은 프로젝트였습니다. 정말 멘땅의 헤딩식으로 처음 배우는 리액트로 프로젝트를 구성하면서, 실전을 통해 더 많이 배울 수 있었습니다. 프로젝트를 마치고 기초부터 리액트를 다시 살펴보며 깊게 공부해볼 예정입니다. 그리고 협업을 하면서 부족한 부분들이 굉장히 많았다고 생각하는데, 함께 부족한 점을 채워가면서 진행할 수 있어서 협업을 진행하는데 필요한 자세들도 배울 수 있는 경험이었습니다.

💁‍♂️ 오래규

React를 사용해 보면서 사용자의 경험은 물론 개발자의 경험도 함께 개선해 줄 수 있는 라이브러리라는 것을 느꼈습니다. 처음 바닐라 js로 구현한 결과물을 사용자 입장에서 보았을 때는 페이지 이동이 자연스럽지 않은 것에서 불편함을 느꼈고 개발자 입장에서는 코드의 재사용성이 매우 좋지 않았기 때문에 React를 통해 다시 구현하였습니다. React에 대한 지식이 많이 부족한 상태였지만 프로젝트에서 필요한 부분에 대해 찾아 학습하며 진행하였습니다. 주로 컴포넌트화, REST API 사용에 초점을 두고 학습하였으며 이 경험을 바탕으로 React에 대해 더욱 깊게 공부할 예정입니다.

👩‍💻 박서영

바닐라 자바스크립트로 완성한 프로젝트를 리액트로 옮기는 작업은 이번이 처음이었습니다. 덕분에 컴포넌트나 함수를 재사용할 수 있고, 단위별로 유지보수가 가능한 리액트의 장점을 확실하게 느낄 수 있었습니다. 또 이번 프로젝트는 get/post/put/delete 등 여러가지 메서드를 사용하여 데이터를 조회/등록/수정/제거 하는 작업이 주가 되는 프로젝트였습니다. 그래서 api 요청과정에서 발생할 수 있는 다양한 에러들을 만나고 이를 해결하면서 api와 좀 더 가까워질 수 있었습니다

🙋 김상돈

리액트로 진행되는 프로젝트를 하는 것이 이번이 처음이여 모르는 부분을 배우면서 진행하는 점에서 힘들었지만 많은 부분을 배우면서 진행할 수 있었습니다. 그리고 API를 사용하면서 오류를 수정하고, 서버와 통신을 하는 방법을 배울 수 있어서 추후에 있을 프로젝트나 업무에서도 적용할 수 있을 것 같다는 생각을 하게 되었습니다.