front-mbti-chat

Description

4명의 프론트엔드, 3명의 백엔드 개발자의 협업 프로젝트!

💬 React.js, Sass, styled-components, TypeScript를 활용하여 MBTI별 채팅, MBTI 테스트, 로그인 및 회원가입 등을 구현한 웹사이트입니다.

Contributors

이름	맡은 파트	github
이지윤	초기환경세팅, MBTI별 채팅 기능 구현	지윤 github
김다정	메인페이지(반응형, 사이드 메뉴바 등), MBTI 테스트 기능 구현	다정 github
정희섭	화면구성도, 마이페이지 구현	희섭 github
양동준	화면구성도, 로그인/회원가입 구현	동준 github

Features

초기 MBTI CHAT 화면 구성도

1. 메인페이지

반응형

모바일/태블릿 사이드바 (비로그인 사용자)

모바일/태블릿 사이드바 (로그인 사용자)

---

2. 캐러셀

기능 구현

1. 각 카드를 1개처럼 겹쳐 놓음
2. z축을 적절하게 transform(위에서 봤을 때 *모양)
3. x, y축을 밀어서 서로 겹치지 않도록 떨어트림
4. 시점을 고정시킴 (perspective이용)
5. 클릭 이벤트로 전체 판을 회전시킴

  // 현재 index에서 클릭한 index 위치를 계산해서 가까운 쪽으로 돌도록 구현
  const calculateRelativeIndex = (currentIndex: number, matchingIndex: number): number => {
    const distance = Math.abs(currentIndex - matchingIndex);
    if (distance > 8) {
      return matchingIndex > 8 + currentIndex ? 16 - distance : distance - 16;
    }
    return currentIndex - matchingIndex;
  };

---

3. MBTI별 채팅

Stomp 라이브러리를 이용해서 채팅 구현

---

4. MBTI 검사

닉네임 입력 후, 테스트 시작

MBTI 검사 결과지(16개 종류)

---

5. 로그인 & 회원가입

아이디/비밀번호 찾기

마이페이지

비밀번호 변경

회원 탈퇴

---

진행 과정

• 백엔드 3명, 프론트 4명으로 구성된 팀 프로젝트로 Slack, Notion 등의 Communication Tool 을 활용하여 협업했습니다.
• Swagger API 문서를 기반으로 백엔드 분들과 함께 소통하며 작업했습니다.
• 매주 주 3회 정기모임을 가지며 백엔드와 프론트엔드 사이의 진도를 조율했습니다.

구현한 기능

• 디자인
  • Figma를 이용한 UI/UX 설계
  • SASS를 이용한 반응형 웹 디자인 구현
• 초기 세팅
  • 타입스크립트, eslint를 통한 버그 관리
• 회원정보
  • ID/PW찾기, 회원가입, 로그인 관련 form validation 구현
  • 로그인한 유저의 token관리
• MBTI 채팅
  • 양방향 통신 채팅 기능
• MBTI 테스트
  • 16개의 Mbti 검사 기능