3D 아파트 인테리어 편집 스튜디오

아파트 3D 공간에 진입해 시점을 전환하며 자유롭게 이동하고, 벽지·바닥재 교체와 가구 배치·이동·회전을 실시간으로 적용합니다.

• React Three Fiber PerspectiveCamera 2대(1인칭/상단)를 상태값으로 전환하고 Raycaster로 벽·바닥 충돌 경계를 계산해 카메라 이동 범위를 제한
• 좌측 카탈로그에서 벽지/바닥재 썸네일 선택 시 대상 메시의 재질 텍스처를 즉시 교체
• 이동·회전 기즈모를 3D 씬에 직접 렌더링하고 경계 상자 충돌 검사로 가구 겹침을 방지

우측 인스펙터 패널이 선택된 오브젝트의 위치·회전·재질 값을 3D 씬과 실시간 양방향 바인딩하는 속성 편집 구조를 구현합니다.

2개 아파트 타입 중 하나를 선택해 나만의 3D 공간을 생성합니다. 타입 선택 시 서버에 공간 레코드를 생성하고 기본 배치 프리셋을 로드해 곧바로 3D 뷰어로 진입할 수 있도록 연결합니다.

• React Query mutation으로 타입 선택 즉시 공간 레코드를 생성하고 캐시를 무효화해 마이 공간 목록에 반영
• Prisma 스키마로 아파트 타입별 기본 배치 프리셋을 정규화해 신규 생성 시 초기값으로 주입
• 생성 완료 시 활성 공간 ID를 라우트 파라미터로 전달해 3D 뷰어가 해당 공간을 즉시 로드

타입 선택부터 3D 공간 생성까지 단일 트랜잭션으로 처리해 중간 이탈 시 불완전한 공간 레코드가 남지 않도록 구현합니다.

편집한 인테리어 결과를 저장하고, 저장된 공간 목록과 마지막 편집 시각을 확인해 이어서 편집합니다.

• 가구·재질 상태를 오브젝트 배열로 직렬화해 PostgreSQL JSONB 컬럼에 저장
• 저장 시 2초 디바운스를 적용해 편집 중 과도한 API 호출을 방지
• 복원 시 저장된 스냅샷을 순회하며 R3F 씬에 오브젝트를 재생성하는 하이드레이션 로직 구현

자동 저장과 수동 저장 버튼을 함께 제공해 시연 도중에도 안전하게 편집 상태를 보존하는 저장 구조를 구현합니다.

이메일 기반 회원가입·로그인과 닉네임·프로필 이미지 등록·수정을 제공합니다. JWT 기반 인증 미들웨어로 세션을 관리하고, 프로필 이미지는 오브젝트 스토리지에 업로드 후 URL을 프로필 레코드에 저장합니다.

• JWT 액세스/리프레시 토큰 발급 및 검증 미들웨어를 Express에 구현해 인증 상태를 유지
• 프로필 이미지 업로드는 Multer로 수신 후 오브젝트 스토리지에 저장하고 presigned URL로 반환
• React Hook Form과 스키마 검증 라이브러리로 회원가입 폼 유효성 검증(이메일 형식, 비밀번호 규칙)을 구현

닉네임 변경 시 다른 사용자 공간 방명록·목록에 반영된 표시명도 함께 갱신되는 참조 무결성을 구현합니다.