함께하개 프로젝트 - withDog 프론트 엔드

⚠️ 주의사항
코드 및 이미지를 남용 및 악용할 경우 법적으로 문제될 수 있습니다.
해당 사이트에서 사용되고 있는 로고 및 캐릭터는 해당 프로젝트 팀 소유이므로 허가없이 사용할 수 없습니다.

📝 개요

• 내용 : 반려견 MBTI 검사를 통한 커뮤니티 웹 서비스
• 기간 : 2022.08.01 ~ 09.30
• 인원 : 총 6명 (프론트엔드: 5명, 백엔드: 1명)
• 필수 구현 기능
  • Nav, Footer, 메인페이지
  • 로그인 (소셜로그인) & 회원가입
  • 게시판 (메인, 글작성, 디테일)
  • MBTI (검사,결과)
  • 채팅방 (리스트, 채팅방)
  • 마이페이지
  • 관리자페이지
• 추가 구현 기능
  • 산책 시스템

📌 Focus

• 프로젝트 기획부터 디자인, 개발, 배포까지의 전 과정 팀 협업
• 이전 프로젝트에서 해보지 못했던 기능 구현
• 스프린트 일정에 맞는 작업 진행과 속도 개선
• 프론트엔드와 백엔드간의 커뮤니케이션 개선
• 라이브러리 연습
• 리덕스 및 타입스크립트 적용

⚙️ 사용한 stack & tool (front-end 공통)

• HTML5, CSS3(styled component), JavaScript, React, React-Router, React-Redux, TypeScript, Socket.IO, AWS(EC2)
• github, slack, notion

🖥 웹 사이트

https://withdog.me

💻 백앤드 저장소

https://github.com/stresszero/togedog-backend

📃 담당 페이지

김슬비 : 채팅방 (리스트, 채팅방)

김철회 : 관리자 페이지

안성주 : Nav, 메인페이지, 마이페이지, 로그인(소셜 로그인) 및 회원가입

윤경연 : MBTI (검사, 결과)

최현민 : 게시판 (게시판 메인리스트, 글 작성, 게시판 디테일)

✍️ 프로젝트 회고

프로젝트 채팅 UI

• ✨셋팅 및 UI 구성하기 👉 자체 프로젝트 with-dog UI

프로젝트 채팅기능

• ✨ with-dog 프로젝트 채팅 기능 구현 👉 채팅기능 구현하기

프로젝트 채팅 기능 구현에 앞서 Websocket과 Socket.IO 개념 알고 익히기. 실습 프로젝트 !

• JavaScript + Websocket 👉 WebSocket 으로 채팅기능 구현 해보기
  
• JavaScript + Socket.IO 👉 Socket.IO로 채팅기능 구현 해보기
  
• React + Socket.IO 👉 Socket.IO로 채팅기능 구현 해보기
  

✅ 구현 영상

📌 유튜브
1부 - 메인 & 회원가입, 로그인 & MBTI검사
2부 - 👉 채팅 ✅
3부 - 게시글 작성

✅ 채팅 기능

---

로그인 후 사용자 정보 수정

게시판 글 쓰기 & 댓글 입력, 좋아요

관리자 페이지

🌈 함께하개 BI