[Sanity] input 창 커스터마이징 해보기

studio를 구성할 때, 사용자로부터 입력값을 받을 수 있는 input창을 많이 만들 것입니다 

이번에는 그러한 input 창을 커스터마이징에 대해 알아봅시다 !!!

 

input창은 개발자들이 블로그에서 가장 많이 사용하는 게 code 이기 때문에 code의 input 창을 github의 테마를 사용하여 커스터마이징 하겠습니다. 

 

 

blockContent.js 파일에 type을 code로 가지는 요소를 하나 만들어 줍니다. 

{
 type: 'code'
}

 

이제 code.js 파일을 만들어주고, 넣고자 하는 요소들을 만들어줍니다.

 

여기서 커스터마이징을 위한 파일을 만들 것인데, 기본적으로 sanity에서는 react를 지원하기 때문에 react를 사용할 수 있습니다. 

 

component 폴더를 생성 -> jsx 파일 생성 ->  그 안에 커스터마이징을 위한 변수를 생성합니다. 

 

이 때 react-ace 를 사용하기 위해 yarn add react-ace로 라이브러리를 설치해줍니다. 

yarn add react-ace

만약, yarn이 설치 되어 있지 않다면 yarn을 먼저 설치해주면 됩니다 !! 

npm i yarn -g

 설치가 끝났다면, jsx 파일에 변수를 만들어 주시면 됩니다. 

 

 

변수에 대한 자세한 설명은 sanity 공식 홈페이지를 참고하시면 됩니다. 

https://www.sanity.io/docs/custom-input-widgets

Custom input components

 

위 과정이 다 끝났다면 schema.js 파일 type에 code를 추가해주시고, 실행하시면 다음과 같이 code 입력창을 github의 테마로 사용할 수 있습니다 :))