Functional Speification
- 프로필 정보 업데이트 기능 (캐릭터 선택, 닉네임 선택)
- 전시공간 만들기 기능
- 전시공간 검색 기능
- 모든 전시공간/내가 만든 전시공간 탭 버튼으로 구분 페이지
- 유저 회원가입 (jwt, password hash)
- 유저 로그인 (email validator, password validator)
- 로그인 유지의 경우 cookie 저장하여 header에 token값 넣어서 전송
- 구글 로그인 구현
- 로그인 회원가입 실패 시 에러 메세지
- 소켓 통신으로 캐릭터의 좌표 값 이동 방향 등을 서버에 전송
- 서버는 받은 정보를 각기 다른 클라이언트에게 전달
- 전달 받은 클라이언트는 받은 정보를 바탕으로 캐릭터 위치 이동
- 같은 공간에 있을 경우, socket.io를 이용하여 채팅기능 구현
- 유저 간 캐릭터 거리가 가까워질 경우 영상 통화가 연결되도록 구현
- 메인 전시공간, 3D 전시공간, 파노라마 전시관 등 모든 장소에서 영상 통화 기능 작동
- SFU로 구현하여 10인 이상의 인원도 부드러운 영상 통화 가능
- 소켓 통신을 통하여 이미지를 공유하여 기능 구현
- 마우스 좌표를 소켓 통신으로 전달하므로서 마우스 위치 공유 기능 구현
- Three.js 사용하여 소실점 구현
- 큰 작품을 6등분으로 분할하여 각각 다른 각도를 줌으로서 파노라마 작품을 더 현장감 있게 구현할 수 있도록 구현
- Keydown 이벤트를 통하여 각도를 조절하고, 다가가거나 멀리 이동하는 등의 액션을 추가하여 더 다양한 각도에서 작품을 볼 수 있는 경험 제공
- 마찬가지로 Three.js로 구현
- 공간과 달리 캐릭터는 2D의 형태여서 유저가 서로 멀어질 경우 캐릭터끼리의 좌표를 계산하고 이미지가 일정한 비율로 작아지는 로직 구현
- 화면 전환에 대한 부분 또한 Keydown 이벤트를 통하여 구현
- CRUD 기능 구현