🎆프로젝트 소개

데모 : 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