Skip to content

[FEATURE] 사이버펑크 3D 행성 커서 시스템 구현 #44

Description

@scs0209

구현 내용

  • 사이버펑크 테마에 맞는 3D 행성 모양 커서
  • 상황별 커서 변환 시스템 (기본/호버/텍스트입력)
  • 부드러운 애니메이션과 네온 발광 효과
  • 성능 최적화된 상태 관리

기술 스펙

  • React + TypeScript
  • Framer Motion 애니메이션
  • CSS-in-JS 스타일링
  • 커스텀 이벤트 핸들링

주요 기능

기본 행성 커서

  • 은은한 외부 발광 오라
  • 이중 궤도 링 (서로 다른 속도 회전)
  • 행성 본체 (자전 + 호흡 발광 효과)
  • 표면 디테일 애니메이션

상황별 변환

  • 일반 상태: 기본 행성 커서
  • 버튼/링크 호버: 1.4배 확대 + 3개 파티클 효과
  • 텍스트 입력: I-beam 커서 (상하 캡 포함)

성능 최적화

  • 디바운싱으로 빠른 상태 변경 방지
  • 효율적인 요소 감지 로직
  • 부드러운 전환 애니메이션

구현된 파일

  • src/shared/ui/PlanetCursor.tsx
  • src/shared/ui/index.ts (export 추가)
  • app/layout.tsx (전역 적용)
  • app/globals.css (기본 커서 숨김)

완료 기준

  • ✅ 모든 브라우저에서 정상 동작
  • ✅ 성능 이슈 없이 부드러운 애니메이션
  • ✅ 사이버펑크 테마와 일관된 디자인
  • ✅ 직관적인 사용자 경험 제공

추가 개선 사항

  • 모바일 디바이스 호환성 테스트
  • 접근성 옵션 추가 고려
  • 추가 커서 타입 확장 가능성

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions