![KakaoTalk_20240125_184131837_01](https://private-user-images.githubusercontent.com/64480531/299641543-5e047c58-8926-432f-ab40-f7cb92e8d401.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2MDcwODgsIm5iZiI6MTczOTYwNjc4OCwicGF0aCI6Ii82NDQ4MDUzMS8yOTk2NDE1NDMtNWUwNDdjNTgtODkyNi00MzJmLWFiNDAtZjdjYjkyZThkNDAxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA4MDYyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNjYTdjNGFiYjNhN2M2MGI0OTg1ZGVlZjU2MjExYjMyZjMxMjNiMTA0ODFmYTZkZGM3NzZhMjU0ZDIwZGNkNDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.8pZ60jVX7Efal0fAvPlO19wdMdg8HKjqskoeDwzkYJI)
- 기본 사진 객체 (Basic Photo Object): "Snapshot"
- 사진전 (Photo Exhibition): "Showcase"
- 사진전들을 여는 작가 (Artist Opening Exhibitions): "Spirit"
![KakaoTalk_20240125_184131837_02](https://private-user-images.githubusercontent.com/64480531/299642418-1f71c68f-502d-4402-b3a8-640b569bf1aa.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2MDcwODgsIm5iZiI6MTczOTYwNjc4OCwicGF0aCI6Ii82NDQ4MDUzMS8yOTk2NDI0MTgtMWY3MWM2OGYtNTAyZC00NDAyLWIzYTgtNjQwYjU2OWJmMWFhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA4MDYyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUwOGIzNDhmZjQ5MTllNGQ5MmIxNWNlMzNlNzY1YjI3YTA4YTcxN2Y2ZjRkM2U1YTAxZjVkNTRhYmU5ZThmNmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.nnbkllk5UaVjKw_Eijwv6oZyDeWXb0cSTF5BgI0xc_4)
SPIRIT의 초기 화면은 React의 Threejs를 이용해 구현했습니다.
밝게 빛나는 영역을 클릭하면 로그인을 진행할 수 있습니다. Kakao 로그인을 통해 하나의 Spirit이 될 수 있습니다.
![KakaoTalk_20240125_184131837_03](https://private-user-images.githubusercontent.com/64480531/299642744-632891b8-c36d-46b8-8462-708fb6fa9bc7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2MDcwODgsIm5iZiI6MTczOTYwNjc4OCwicGF0aCI6Ii82NDQ4MDUzMS8yOTk2NDI3NDQtNjMyODkxYjgtYzM2ZC00NmI4LTg0NjItNzA4ZmI2ZmE5YmM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA4MDYyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM4NWQ5ODkxMDgwZDQzMjRmYTZlZjM5OTJkYmE5MjgwMGI3MzdkMzU3YzY4YWQwNjQzY2RiNDQ2YzM5ZDY0YjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.h_CJtVan5KhIW4tYpVxPflf1eWAhs9uk5ZEH1gOzZiY)
showcase를 클릭하면 Modal 창이 나타납니다. Modal 창에서 작품을 미리 볼 수 있고, 자세히 보고 싶다면 실제 showcase로 이동해서 감상할 수 있습니다.
socket io를 이용해 실시간 채팅이 가능하도록 구현했습니다.
새로운 사용자에게 채팅을 시작할 수 있고, 기존 채팅에 접속해 이어서 이야기할 수 있습니다.
사진을 잘 감상할 수 있도록 조명을 설정했고, 낮/밤의 컨셉을 자유롭게 바꿀 수 있습니다 (E 키)
서비스 개발을 위해 사용된 기술들에 대해 설명하는 섹션입니다.
- React
- 3D 공간을 렌더링 하기 위해 선택
- Threejs
- 사진전의 현실감을 위해 선택
- 필요한 asset을 만들어 사용
- Express
- 게시글 형태로 작동하기 때문에 I/O가 많을 것으로 예상해 선택
- React와의 호환성
- MongoDB
- url, message 등의 정보를 쉽게 저장하기 위해 선택
- Docker
- 서버에 독립적인 환경을 부여하기 위해 사용
- 로컬 서버(개인 서버) 활용