✉️온라인을 통해 만나는 아날로그한 편지📬

Welcome To TO.LETTER

가상의 방에서 소중한 사람에게 편지를 부쳐보세요!

✨ 주요 기능

• 3D 가상 편지함 - Three.js를 통해 만들어진 나만의 방에서 편지를 주고 받을 수 있어요
• 시간차 배달 - 설정한 우편함 위치에 따라 편지 도착 시간이 달라져요
• 편지 공유 - 나의 편지 주소를 카카오톡으로 공유할 수 있어요
• 실시간 알림 - 로그인 시 새로 도착한 편지 알림을 받을 수 있어요

📌 version 1 summery

1. 가이드 페이지 - 인덱스 페이지 접근 시 리다이렉트

• To.Letter를 이용하기 위한   안내사항 및 사용법 • 모델 다운로드 완료 시   start 버튼 활성화

2. 로그인 / 회원가입 - 의자

• 로그인 전 기본 화면 • 시점 이동 불가	• (로컬)이메일 인증 미실시 계정    -> 이메일 인증 화면 이동 • 비밀번호 변경 기능 지원	• 로컬/카카오 회원가입 지원 • 로컬 유저->이메일 인증 • 주소 입력 기능

3. 기본 배경

• 방(침대, 책상, 의자, 서랍, 캘린더, 벽걸이 랙, 창문, 커튼 등) • 야외 풍경(계절 별, 시간대 별, 날씨 별)

4. 마이 페이지 모달 - 침대

• 내 정보 확인 및 수정/로그아웃	• 이메일 인증 후 비밀번호 변경	• 비민번호 확인 후 회원 탈퇴

5. 편지/송수신 - 책상 위 연필꽂이

• 수신자 존재 확인 • 편지 작성 • 보낸 편지함 저장 여부 선택 • 설정 우편함 위치 기준 도착 시간 설정	• 편지 주소 공유 기능 • 카카오톡 공유- 닉네임 공유 기능 포함 • 페이스북, X, 링크 복사 붙여넣기 - 미리보기 이미지 첨부

6. 나의 편지함(보낸/받은 편지) - 책상 위 책장

• 보낸/받은 편지함(무한스크롤 적용) • 개별 편지 열람

7. 편지 삭제 - 책상 오른쪽 쓰레기통

개별 삭제	목록 선택 삭제

8. 편지 도착 알림 - (발생 시)책상 위 편지봉투 더미 등장

• 새로운 편지 알람

🎁 서비스 소개

1. 개발 환경

• 프론트엔드:

  • TypeScript

  • React → Next.js (React 기반 프레임워크)
    

    💡 Note
    React에서 Next.js로 마이그레이션을 통해 서버 사이드 렌더링(SSR)을 적용하여 SEO(검색 엔진 최적화) 성능을 크게 개선했습니다. 이를 통해 검색 엔진에서의 웹사이트 노출도를 향상시켰습니다.

• 버전 및 이슈관리:

  • Github
  • Github Issues
  • Github Project

• 서비스 배포 환경:

  • Vercel (Next.js 공식 배포 플랫폼)
  • Github Actions

• 협업 툴:

  • Github Wiki

2. 사용 기술

• 3D 그래픽스

  • React Three Fiber (R3F), Three.js: 선언적인 방식으로 3D 씬 구성 및 관리 및 실시간 3D 인터랙션 구현

• 상태 관리 & 네트워크

  • Recoil: 전역 상태 관리
  • Axios: 인터셉터를 통한 요청/응답 핸들링
  • Event Source Polyfill: 실시간 서버 이벤트 수신 지원

• 스타일링

  • Styled Components: CSS-in-JS 라이브러리로 컴포넌트 기반 스타일링
  • Tailwind CSS: Next.js 서버 컴포넌트 UI 스타일링

💡 Note
Three.js와 React Three Fiber를 활용하여 3D 가상 공간을 구현하고, 실시간 이벤트 처리를 위한 SSE(Server-Sent Events)를 도입했습니다.
또한 서버 컴포넌트와 클라이언트 컴포넌트에 각각 최적화된 스타일링 솔루션을 적용했습니다.

3. 팀원 구성

Front-end		Back-end
김재윤	정윤미	이유정
issues	issues	To. Letter backend