[ENHANCEMENT] 3D 포트폴리오 카메라 애니메이션 UX 개선

[scs0209]

[ENHANCEMENT] 3D 포트폴리오 카메라 애니메이션 UX 개선

구현/수정 내용

• 3D 포트폴리오 페이지에서 모델(그룹) 클릭 시, 카메라가 해당 그룹으로 3초간 자연스럽게 이징(easeInOutCubic) 애니메이션으로 이동하도록 개선
• 클릭 시 퍼짐(링) 효과 → 1초 후 해당 그룹만 남고, 그때부터 카메라가 천천히 이동
• 돌아가기(Back) 버튼 클릭 시, 카메라가 3초간 자연스럽게 원래 위치로 복귀 후 상태 초기화
• 기존 상태/핸들러/렌더링 분기 등은 변경하지 않고, 카메라 이동에만 애니메이션 적용
• linter 경고는 react-three-fiber의 특성상 안전하게 무시 처리

구현 방식

• 카메라 이동 목표(targetPos, targetLook) 상태를 추가하여, 이동 트리거 시 애니메이션 실행
• CameraController에서 useFrame을 통해 3초간 position/LookAt을 이징 보간
• 돌아가기 시에도 동일하게 원래 위치로 애니메이션 복귀 후 상태 초기화

완료 기준

• 모델 클릭 시: 퍼짐 효과 → 1초 후 해당 그룹만 남고 카메라가 3초간 자연스럽게 이동
• 돌아가기 시: 카메라가 3초간 원래 위치로 복귀 후 전체 모델/상태 초기화
• 기존 UX/렌더링 분기/핸들러 구조는 그대로 유지

관련 파일

• app/(public)/portfolio/page.tsx

재현 방법

1. 3D 포트폴리오 페이지 접속
2. 모델(그룹) 클릭 → 퍼짐 효과 후 카메라가 해당 그룹으로 부드럽게 이동
3. 돌아가기 버튼 클릭 → 카메라가 원래 위치로 부드럽게 복귀