호그와톡

💁 프로젝트 정보

주어진 API와 소켓을 활용한 채팅앱 제작 프로젝트입니다.
호그와트 학생 체험을 할 수 있도록 구성하였습니다.
개발기간: 2023.11.06 ~ 2023.11.16

🌐 배포 주소

배포 주소: https://hogwartalk.vercel.app/
테스트 계정 : ID : dumbledore / Password : dumbledore

🚖 개발 팀 소개

어승준	이승연	이승현	배경규	장문용
@seungjun222	@ewinkite	@seungsimdang	@kyungkyuBae	@moonyah
채팅 기능	퀴즈, 클럽 페이지 관련 기능	채팅 기능	로그인/ 회원가입 기능	공통 컴포넌트(헤더 - 마이페이지, 친구 목록)

💻 개발 스택

환경

VSC GIT GITHUB

개발

Next.js REACT FIREBASE TYPESCRIPT Recoil

🌙 이슈 관리 및 소통

JIRA SLACK NOTION

🤝 협업 방식

커밋 컨벤션, 코딩 컨벤션, 깃허브 규칙 등의 내용은 아래의 노션 페이지를 참고해주세요!

🔗 노션 페이지

🤝 요구사항 반영 여부

필수 구현 사항

✅ useState, useReducer를 활용한 상태 관리 구현
✅ Sass 또는 styled-component를 활용한 스타일 구현
✅ react 상태를 통한 CRUD 구현
✅ 상태에 따라 달라지는 스타일 구현
✅ custom hook을 통한 비동기 처리 구현
✅ 유저인증 시스템(로그인, 회원가입) 구현
✅ jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)
✅ 소켓을 이용한 채팅 구현

선택 구현 사항

✅ Next.js를 활용한 서버 사이드 렌더링 구현
✅ typescript를 활용한 앱 구현

🔍 팀원별 세부 구현 사항

어승준: 💬 채팅

1. 실시간 채팅

💡 소켓 연결을 통해 실시간 채팅을 할 수 있습니다. 클라이언트 화면 높이를 계산해 스크롤 맨 밑으로 이동 가능합니다.

2. 클럽 채팅방 생성 동적라우팅

💡 Next.js 동적라우팅을 통해 클럽 채팅방 생성 시, id, name값을 쿼리파라미터로 넘겨 정보에 맞게 페이지 렌더링을 시켜줍니다.

3. 내가 참여중인 대화방

💡 내가 참여중인 대화방을 보여줍니다. Polling 방식을 통해 latestMessages를 5초마다 업데이트 해줍니다.

이승연: 🌐 퀴즈, 클럽, 공통

1. 기숙사 배정 퀴즈 페이지 (회원가입)

시나리오에 따른 기숙사 배정 로직 구현

💡 시나리오에 따라 답변을 클릭하면 점수가 누적되며, 이에 따른 기숙사 배정이 이루어집니다.
문항별 선택한 답변 정보를 저장하여 이전/다음 이동시에도 답변이 유지됩니다.

2. 클럽 페이지

채팅방 목록 조회

💡 네 개의 기숙사 채팅방을 제외한 모든 채팅방을 불러옵니다.
이때 update 일시를 기준, 최신순으로 정렬되어 노출됩니다.
로그인한 사용자가 참여중인 채팅방의 경우 개별적으로 표기합니다.

채팅방 생성

💡 새로운 채팅방을 생성하며, 생성이 완료되면 해당되는 채팅방으로 이동합니다.
제목은 필수값이며 채팅방 공개 여부 설정에 따라 목록 조회가 업데이트 됩니다.

채팅방 참여

💡 현재 참여중인 채팅방의 경우 바로 해당되는 채팅방으로 이동하며,
참여중이지 않은 채팅방의 경우 참여 여부를 묻는 다이얼로그가 노출됩니다.

3. 공통

로딩 페이지

💡 API 호출 중 로딩 페이지가 노출됩니다.

BGM(헤더)

💡 홈페이지 최초 진입 후 특정 영역을 클릭시 BGM이 재생됩니다.
헤더에서 아이콘을 통해 제어가 가능하며, 경로 이동되어도 재생 상태가 유지됩니다.

이승현: 💬 채팅

1. 기숙사 선택 페이지

💡 로그인 후에 처음으로 표시되는 페이지입니다.
사용자가 배정받은 기숙사 채팅방만 입장할 수 있으며, 가운데의 클럽 로고를 누르면 클럽 페이지로 이동합니다.

2. 채팅방

채팅방 헤더

💡 채팅방에 참여, 초대를 받아 현재 채팅방의 제목과 인원수가 표시됩니다.
노란 뱃지를 눌러 사용자를 초대할 수 있으며 더보기 버튼을 눌러 채팅방 정보를 보거나 채팅방에서 나갈 수 있습니다.

채팅방 초대 모달

💡 기숙사 채팅방을 제외한 모든 클럽 채팅방에서 사용자를 초대할 수 있습니다.
현재 채팅방에 참여하고있는 사람을 제외한 모든 사용자가 보여지며, 사용자의 프로필 사진, 닉네임, 기숙사 정보가 표시됩니다.

채팅방 정보 모달

💡 현재 채팅방의 정보를 보여줍니다.
채팅방 제목, 인원수, 호스트 이름, 채팅방 개설일, 참여자 목록을 확인할 수 있습니다.

배경규: 🔑 로그인/ 회원가입

로그인시 Jwt토큰 발급하여 쿠키에 저장

토큰은 액세스 토큰,리프레시 토큰

회원가입

제공된 api의 이미지 용량이슈 때문에 타db를 사용하여 이미지를 저장하고 url사용
회원가입시 빈칸 있는지 유효성 검사
중복된 아이디가 있는지 체크
퀴즈를 보러가도 회원가입 폼 상태저장

모든 페이지에서 액세스 토큰 만료시 재발급

모든 페이지에서 액세스토큰 만료시 axios 요청 가로채서 인터셉터로 액세스토큰을 재발급 하는 로직구현

권한 없을 시(리프레시 토큰x) 로그인 페이지 유도

로그인 페이지 유도

장문용: 📑 공통 컴포넌트

1. 헤더 제작

💡각 아이콘은 클릭 및 토글 상태에 따라 스타일이 변합니다.

2. 마이페이지 토글

MyPageToggle 컴포넌트는 사용자의 프로필 정보를 표시하고 편집하는 기능을 제공하는 사이드바입니다.

로그인된 사용자 정보 표시

💡쿠키에 저장된 accessToken을 사용해 이름을 가져오고 Firebase Storage에서 프로필 이미지, Firebase Database에서 기숙사 정보를 가져옵니다.

로그인된 사용자 정보 편집하기

💡사용자가 편집 모드로 전환하면 이름, 기숙사, 프로필 이미지를 변경할 수 있습니다. 각 변경 사항은 제공된 서버와 Firebase에 업데이트됩니다.

3. 친구목록 토글

FriendSearchToggle 컴포넌트는 친구를 검색하고 확인하는 역할을 하는 사이드바입니다.

사용자 목록 출력 (이름, 기숙사 정보, 접속 유무 표시)

💡 서버와 소켓 통신을 통해 전체 유저와 접속 중인 유저 정보를 가져와, 각 사용자의 접속 상태를 실시간으로 표시합니다. Firebase 데이터베이스에서는 사용자의 기숙사 정보를 가져옵니다.

화면에는 각 사용자의 프로필 이미지, 이름, 학급, 그리고 실시간으로 변하는 접속 상태가 표시됩니다. 사용자의 기숙사 정보도 표시되며, 데이터는 계속해서 업데이트되어 화면에 실시간으로 반영됩니다.

4. 로그아웃

페이지 이동 & 쿠키 삭제

💡로그아웃 버튼을 누르면 로그인 페이지로 이동하고 js-cookie 라이브러리를 사용하여 'accessToken'과 'refreshToken' 쿠키를 삭제하여 로그아웃을 수행합니다.