Sanity 프로젝트 초기화 및 Astro 프로젝트 통합: npm create sanity@latest 명령어를 사용하여 Sanity 프로젝트를 생성하고, sanity.config.ts, sanity.cli.ts, schemaTypes 폴더를 Astro 프로젝트의 루트 디렉토리로 이동시켜 통합합니다. 🚀
React 버전 충돌 방지 및 수동 설치: @sanity/astro 패키지 설치 시 Astro 프로젝트의 기존 React 버전을 유지하기 위해 React 19 설치를 건너뛰고, package.json에서 react 및 react-dom 버전을 수동으로 Astro의 React 18 버전(예: 18.3.1)에 맞춰 조정해야 합니다. 🛠️
Sanity 클라이언트 설정: src 폴더에 env.d.ts 파일을 생성하여 Sanity 타입 정의를 추가하고, astro.config.mjs 파일에 projectId와 dataset을 포함한 Sanity 통합 설정을 추가합니다. ⚙️
Sanity Vision 및 Studio 베이스 경로 설정: @sanity/vision 패키지를 설치하여 스튜디오 내 Vision 탭을 활성화하고, astro.config.mjs에 studio: { basePath: '/admin' }와 같이 스튜디오 접근을 위한 URL 엔드포인트(예: /admin)를 정의합니다. 👁️
CORS(교차 출처 리소스 공유) 설정: Sanity Studio에 처음 접속할 때 localhost:3000과 같은 개발 서버 URL을 Sanity 프로젝트의 CORS 출처로 추가하여 콘텐츠 접근 권한을 부여해야 합니다. 🔗
성공적인 Sanity Studio 통합: 위 단계를 통해 Sanity Studio가 Astro 프로젝트에 성공적으로 통합되며, 로그인 후 스키마 정의 없이 구조 및 비전 탭만 있는 초기 상태로 접근 가능합니다. ✅