[책책책, 책을 읽읍시다] 3. 컨텐츠 관리

한음·2023년 4월 22일
0

컨텐츠 관리 방법 고민에 대한 기록

개츠비는 CMS연동을 지원한다. 설정을 해두면 빌드 시 명시한 CMS의 컨텐츠를 가져와 gql로 조회 가능하며 아주 편리하다.
Contentful을 사용했다.

BookModel
	- title [string]
    - author [string]
    - rating [number]
    - coverImage [file]
    - children (static asset)
    	- name [string]
        - type [string]
        - file [file]

대강 요런식으로 모델을 잡았다.

gatsby-config.ts

...
plugins:[ {
      resolve: "gatsby-source-contentful",
      options: {
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        spaceId: process.env.CONTENTFUL_SPACE_TOKEN,
        contentTypeFilter: (contentType: any) => contentType.sys.id === "books",
      },
    },

...

특정 모델만을 요청하거나, Contentful 자체에서 특정 도메인에 특정 모델을 제공하는 설정을 찾지 못했다.

좀 이상한 방식같지만 일반적으로 contentTypeFilter 를 이용하는듯 하여 books 모델만을 가져오도록 했다.

bookList.tsx

...
const {
    allContentfulBooks: { nodes: books },
  } = useStaticQuery<Queries.getBooksQuery>(graphql`
    query getBooks {
      allContentfulBooks {
        nodes {
          id
          author
          title
          rating
          coverImage {
            file {
              url
            }
          }
        }
      }
    }
  `);

gql로 CMS에서 fetch해온 데이터를 이용할 수 있다.

Queries.getBooksQuery["allContentfulBooks"]["nodes"][number]

타입도 제공해줘 아주 편하다.

라우트 구조는 다음과 같이 잡았다.

- /index
- /mail
- /book
	/book/${bookName}
    디테일 페이지는 책 별로 물리 페이지를 작성

웹 비주얼 프로젝트다보니 공통 레이아웃을 잡고 데이터를 박아넣는 방식이 아닌 책 별로 페이지를 가져야했다. bookList에 대응하는 디테일 페이지 파일을 하나씩 만들어 독후감 페이지를 만든다. 하드코딩이 아닌 하드파일 방식이랄까

fetch한 책 리스트를 index에 뿌리고, 페이지 진입시 해당 책의 coverImage 파일을 three.js 책 오브젝트 겉에 씌워 bookCover를 보여준다. 3D 책을 클릭해 물리적으로 작성한 디테일 페이지로 이동하는 구조이다.

profile
https://github.com/0hhanum

0개의 댓글