Bebe Market은 육아 중인 부모들을 위한 커뮤니티 플랫폼입니다.
이 플랫폼은 육아에 필요한 정보를 공유하고 교류할 수 있는 장을 제공합니다.
육아 꿀팁육아템 추천아기용품 거래이유식 레시피 공유
배포 URL : https://bebemarket.netlify.app
Test ID : [email protected]
Test PW : 123123
📚 팀 스터디 레포지토리
📝 팀 워크스페이스
🎨 디자인 피그마
| 이석형 | 임수정 | 임지인 | 정수연 |
|---|---|---|---|
 |
 |
 |
 |
❤️ 이석형
-
UI
- 페이지 : 회원가입, 홈 피드, 채팅 리스트, 채팅 방, 검색
- 공용 컴포넌트 : InputBox, user
-
기능
- 회원가입
- 홈 피드
- 검색
- 팔로우 언팔로우 기능 구현
- 홈피드 / 팔로우 / 팔로잉 무한스크롤 기능 구현
- 프로필 수정 기능 구현
- 로그아웃
-
협업
- 깃 이슈 템플릿 작성
- 브렌치 전략 설정(git flow)
💜 임수정
-
UI
- 페이지: 마이 프로필, 사용자 프로필, 프로필 수정, 소셜 로그인 화면
- 컴포넌트: 버튼, 게시글 앨범형
-
기능
- 프로필 수정 페이지 사용자 이름, 계정 유효성 검사
- 프로필 페이지 (판매 중인 상품 불러오기, 게시글 불러오기) 구현
- 판매 중인 상품 리스트 구현
-
협업
- README.md 작성, Wiki 작성, 노션 작성
💚 ️임지인
-
UI
- 홈 포스트, 프로덕트 공통 컴포넌트 마크업
- 이메일 로그인 마크업
- 상품 등록 마크업
- 팔로잉/팔로워 목록 페이지 마크업
-
기능
- 이메일 로그인 기능 및 토큰 검증, 유효성 검사를 통해 입력값이 적절한지 확인
- 상품 등록 기능 구현
- 팔로우, 언팔로우 목록 기능 구현
-
협업
- README.md 작성
💙 정수연
-
UI
- 페이지 : 게시글 작성 및 수정, 게시글 상세, Splash 화면
- 공통 컴포넌트 : Modal, NavBar
-
기능
- 게시글 등록 ( + 이미지 업로드), 게시글 수정, 삭제, 신고
- 게시글 상세 페이지 확인
- 댓글 등록, 삭제, 신고
- 좋아요 및 좋아요 취소
- 상 하단 Nav 및 모달 기능
- 상품 수정 및 삭제, 웹사이트 방문
- Splash 페이지 animation
-
디자인
- 로고 및 아이콘 등 컨셉 디자인 담당
- Mockup 이미지 제작
1. 소통은 자유롭게
- 매일 오전9시 데일리 스크럼을 통해 프로젝트 진행 현황을 공유합니다
- 프로젝트 진행 시 어려운 부분이 있다면, 2인 1조로 같이 해결해나갑니다
2. 함께 회고하는 습관
- 자신이 맡은 부분을 주 단위로 계획을 세우고, 금요일에 주간 회고를 가집니다
- 너무 힘들진 않았는지, 매일 저녁 컨디션을 공유하여 개발 일정을 함께 수정합니다
3. 지식공유하며 같이 성장하는 팀
- 주 1회 이상 3시간 이상 스터디를 진행하였습니다
- 익숙하지 않은 라이브러리 및 코드는 오프라인 스터디에서 공유하였습니다
4. Git Issue 활용
- 이슈 생성
- 각자 맡은 진행 작업에 대해 GitHub Issue 생성 (이슈 템플릿 사용)
- 프로젝트 문제점, 버그, 개선 사항 등을 이슈로 등록 → 프로젝트의 중요 항목들 추적 가능
- 이슈 라벨링
- 이슈에 적절한 라벨을 할당하여 이슈 유형(버그, 개선, 문서 등)을 구분
- 이슈와 PR 연계
- 작업 중인 이슈에 해당하는 커밋 메시지와 PR에서 이슈 번호를 사용하여 항목들의 관련성을 추적 가능
- 이슈 상태 관리
- 이슈 처리 완료 시 이슈를 close하고 필요한 경우 리오픈하여 이슈 상태를 명확히 관리
5. 노션에 진행상황 정리
| Front-end |    |
|---|---|
| Back-end | 제공된 API 활용 |
| 협업 툴 |   |
| 디자인 |  |
| 이슈 관리 |   |
|---|---|
| 브랜치 전략 | Git-Flow |
| splash | 로그인 | 회원 가입 |
|---|---|---|
 |
 |
 |
| 홈 피드 | 검색 |
|---|---|
 |
 |
| 채팅 | 404 페이지 |
|---|---|
 |
 |
| 게시글 작성 | 게시글 수정 | 게시글 삭제 |
|---|---|---|
 |
 |
 |
| 게시글 상세 및 댓글 | 댓글 삭제 | 댓글 신고 |
|---|---|---|
 |
 |
 |
| 게시글 신고 | 좋아요, 좋아요 취소 |
|---|---|
 |
 |
| 내 프로필 | 프로필 수정 |
|---|---|
 |
 |
| 타 유저 프로필 및 팔로우, 언팔로우 | 팔로우 목록 |
|---|---|
 |
 |
| 상품 등록 | 상품 수정 | 상품 삭제 |
|---|---|---|
 |
 |
 |
- 맵 API 활용: 위치 기반 서비스를 제공하기 위해 맵 API를 활용해 볼 계획입니다.
Google Maps 또는 OpenStreetMap 같은 다양한 맵 API를 사용하여, 사용자들에게 실시간 위치 정보 제공 및 주변 시설 검색 등의 서비스를 제공할 수 있습니다. 이를 통해 웹 사이트나 애플리케이션의 사용성과 가치를 높일 수 있을 것입니다. - 웹 접근성을 고려해 시각, 청각, 지체, 인지적 장애 등 다양한 장애를 가진 사용자들이 웹 사이트나 애플리케이션을 사용할떄 이용에 불편함이 없도록 개선할 예정입니다. 웹 콘텐츠 접근성 지침(WCAG)을 따르고, 키보드 사용이 가능한 네비게이션 기능을 추가하며, 스크린 리더와 호환되는 텍스트와 레이아웃 등을 구현할 것입니다.
❤️ 이석형
브랜치 전략 설정, 깃 이슈를 통한 프로젝트 관리, 초기 개발 환경 세팅 등 프로젝트 초기 과정이 낯설고 어려웠습니다. 그렇지만 테스트 레포에서 해본 꾸준한 실습과 팀원들과의 원활한 소통 덕분에 잘 해결해 나갈 수 있었습니다.
개발 과정에서는 컴포넌트 간 데이터 전달, styled-componets에서 props를 이용한 조건부 스타일링, 리코일을 이용한 전역 상태 관리, 그리고 API 요청 및 응답 데이터 처리 등 복잡한 기능을 효율적으로 구현하기 위해 고민하고 학습했습니다.
프로젝트 진행 과정에서 겪었던 에러와 해결과정을 좀 더 상세하게 기록하지 못한 것이 아쉬움으로 남았습니다.
그렇지만 초기 목표로 설정한 필수 과제와 선택 과제를 모두 완성하였고 좋은분들과 함께 프로젝트를 진행할 수 있어서 만족스러운 프로젝트였습니다.
💜 임수정
협업하며 작업하는 과정에서 팀워크와 소통의 중요성을 많이 느꼈습니다.
처음에는 실력이 부족한 상태에서 팀원들에게 폐를 끼칠까봐 걱정이 되었는데 팀원분들이 많이 이끌어주셨고
서로 의견을 제시하고 공유하면서 배우고 깨닫는 점도 많아서 이번 팀 프로젝트가 성장하는데 큰 도움이 된 것 같습니다.
특히나 혼자서 깃헙을 사용할 때는 겪어보지 못했던 충돌을 겪고 해결하면서 어려웠던 git과 자연스럽게 가까워진 것 같습니다.
💚 ️임지인
코드에 대한 두려움이 조금 사라지고 팀원들과의 협력을 통해 새로운 도전을 할 수 있었습니다.
좋은 분들과 팀이 되어서 오래 기억에 남을거 같은 시간이었습니다.
💙 정수연
리액트도, 프로젝트도 모든 게 처음인 상태였기에 처음에 내가 할 수 있을까라는 생각이 많았지만 팀원들 덕분에 성공적으로 마무리하였습니다.
개발뿐만 아니라 기획, 디자인도 경험해볼 수 있어서 더 값지고 재밌었던 경험이었습니다.
이번 리액트 프로젝트를 통해 컴포넌트를 import 해오는 방식이 다른 팀원의 코드도 쉽게 이해할 수 있었고, 오류 파악도 용이하여 리액트의 매력을 알게 되었습니다.
팀원들과 함께 프로젝트를 하다보니 커뮤니케이션의 중요성을 다시 한 번 더 느꼈고, 오류가 나더라도 팀원들과 의견을 나누며 함께 해결해나가는 과정을 통해 협업의 장점을 느낄 수 있었습니다. 모두 수고하셨습니다~