작성
·
509
0
import React, { FunctionComponent } from 'react'
import styled from '@emotion/styled'
import GlobalStyle from 'components/Common/GlobalStyle'
import Footer from 'components/Common/Footer'
import CategoryList from 'components/Main/CategoryList'
import Introduction from 'components/Main/Introduction'
import PostList, { PostType } from 'components/Main/PostList'
import { graphql } from 'gatsby'
import { IGatsbyImageData } from 'gatsby-plugin-image'
import { PostListItemType } from 'types/PostItem.types'
type IndexPageProps = {
data: {
allMarkdownRemark: {
edges: PostListItemType[]
}
file: {
childImageSharp: {
gatsbyImageData: IGatsbyImageData
}
}
}
}
const CATEGORY_LIST = {
All: 5,
Web: 3,
Mobile: 2,
}
const Container = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`
const IndexPage: FunctionComponent<IndexPageProps> = function ({
data: {
allMarkdownRemark: { edges },
file: {
childImageSharp: { gatsbyImageData },
},
},
}) {
return (
<Container>
<GlobalStyle />
<Introduction profileImage={gatsbyImageData} />
<CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} />
<PostList posts={edges} />
<Footer />
</Container>
)
}
export default IndexPage
export const getPostList = graphql`
query getPostList {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }
) {
edges {
node {
id
frontmatter {
title
summary
date(formatString: "YYYY.MM.DD.")
categories
thumbnail {
childImageSharp {
gatsbyImageData(width: 768, height: 400)
}
}
}
}
}
}
file(name: { eq: "profile-image" }) {
childImageSharp {
gatsbyImageData(width: 120, height: 120)
}
}
}
`
답변 2
0
안녕하세요, Heejin Jeong님
일단 레포지토리 클론 받아서 실행시켰을 때 해당 에러는 뜨지 않는 걸 보니 해결이 된 것 같네요.
대신 다른 문제점이 있었는데 썸네일 이미지 처리가 제대로 되지 않고 있었습니다.
확인을 해보니 우선 gatsby-config.js 파일에서 이미지 처리를 담당하는 라이브러리인
gatsby-plugin-sharp 라이브러리가 두 번 선언이 되어있었습니다.
따라서 하단의 중복 선언 코드를 삭제해주셔야 합니다.
그리고 yarn clean 명령어를 통해 Gatsby Cache 파일을 전부 삭제해주신 후, test.md 썸네일 이미지 이름을 올바르게 설정해주시고 프로젝트를 실행시켜주세요.
프로젝트 컴파일이 잘 되면, http://localhost:8000/__graphiql 에 접속해
allMarkdownRemark -> edges -> node -> frontmatter -> thumbnail 프로퍼티 내에 childImageSharp를 포함한 여러 프로퍼티가 존재하는지 확인 바랍니다 :)
0
안녕하세요, Heejin Jeong님!
정확한 원인 파악을 위해 프로젝트를 업로드한 깃허브 링크를 댓글로 달아주시면 감사하겠습니다.
링크 달아주시면 원인 파악 후 답변 달아드리겠습니다 :)
https://github.com/pie-heejin/pie-heejin.github.io/tree/develop
입니다ㅠㅠ 확인 부탁드리겠습니다 감사합니다