🎆프로젝트 소개
데모 : https://monumentgallery.ddns.net/
저희의 고민들 : Monument Gallery Notion
시연영상 : 시연영상 보러가기
발표영상 : 발표영상 보러가기
🪦 당신의 기록을 예술로 만들어드립니다!
노션 API를 이용해 사용자의 노션 글, 그림 데이터들을 받아오고 3D 공간 안에서 시각화 해주는 프로젝트입니다.
- Notion OAuth 진행 후 시각화할 페이지를 선택하고 기록물(갤러리)로 만들 수 있습니다.
- 갤러리 내부에서는 1인칭 시점 조작으로 결과물을 플레이어 움직임을 통해 경험합니다.
- 갤러리는 유저 히스토리로서 관리되며 하나의 유저 당 여러 히스토리가 존재하게 됩니다.
- 메인 로비에서는 다른 유저들의 갤러리를 탐방할 수 있습니다.
- 유저의 갤러리들이 하나의 형태(모뉴먼트)로 존재합니다.
- 3인칭 시점 조작으로 나의 캐릭터를 움직여 해당 유저의 갤러리로 이동합니다.
자주묻는 질문 : 프로젝트 상세 소개
👨👨👦👦팀 소개
| 🧑🚀J215 한기종 | 🥷J010 고세연 | 🙉J154 이정욱 | 🕵️J155 이종찬 |
|---|---|---|---|
 |
 |
 |
 |
| 팀의 휴식담당 | 팀의 맏형담당 | 팀의 꼬마담당 | 팀의 낮잠담당 |
| 민트초코 좋아함 | 아자아자파이팅 | 난집게리아가아냐 | 기계는부숴야제맛 |
🪄주요 기능
🎨Notion 데이터 시각화
- Notion OAuth를 이용한 구조적 데이터 불러오기
- 키워드 자연어 처리 및 통계 추출
- 키워드 기반 페이지 분류 및 맵 생성
- 이미지 처리 및 픽셀 추출
🖼️갤러리
- 1인칭 플레이어 이동, E키로 모드 전환 및 레이캐스터 변경
- 3D 워드클라우드
- 링크 반석 상호작용
- 사진 파편 인터랙션
- 갤러리 공유 기능
- 갤러리 히스토리 변경 기능
- 갤러리 동기화 기능
🏛️메인 로비
- 3인칭 플레이어 이동
- 모뉴먼트에 가까이 갈 시 페이지 이동
- 페이지네이션 인터랙션
- 플레이어가 모뉴먼트가 없는 쪽으로 이동하면 동적으로 페이지를 불러와서 배치하는 알고리즘
⚙️기술 스택 & 아키텍쳐
FE
- TypeScript
- React
- React Three Fiber
- Zustand
- Sass
- Vite
BE
- Express
- MongoDB
- Redis
- FastAPI
- Nginx
CI/CD
- Github Actions
- Docker