hjo38863616

해당 index.tsx의 코드는 아래와 같습니다.
깃허브에는 아직 업로드 하지 않았는데, 보시고 만약 더 필요하시면 깃허브에 업로드할게요!
-----
<pre class="language-javascript"><code>import React, { FunctionComponent } from 'react';
import styled from '@emotion/styled';
import GlobalStyle from '../components/Common/GlobalStyle';
import Introduction from '../components/Main/Introduction';
import CategoryList from '../components/Main/CategoryList';
import Footer from '../components/Common/Footer';
import PostList, { PostType } from '../components/Main/PostList';
import { ProfileImageProps } from '../components/Main/ProfileImage';
import { graphql } from 'gatsby';

interface IndexPageProps {
 data: {
 allMarkdownRemark: {
 edges: PostType[];
 };
 file: {
 childImageSharp: {
 fluid: ProfileImageProps['profileImage'];
 };
 };
 };
}

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: { fluid },
 },
 },
}) {
 return (
 <Container>
 <GlobalStyle />
 <Introduction profileImage={fluid} />
 <CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} />
 <PostList posts={edges} />
 <Footer />
 </Container>
 );
};

export default IndexPage;

export const queryPostList = graphql`
 query queryPostList {
 allMarkdownRemark(
 sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }
 ) {
 edges {
 node {
 id
 frontmatter {
 title
 summary
 date(formatString: "YYYY.MM.DD.")
 categories
 thumbnail {
 childImageSharp {
 fluid(
 maxWidth: 768
 maxHeight: 200
 fit: INSIDE
 quality: 100
 ) {
 ...GatsbyImageSharpFluid_withWebp
 }
 }
 }
 }
 }
 }
 }
 file(name: { eq: "profile-image" }) {
 childImageSharp {
 fluid(maxWidth: 120, maxHeight: 120, fit: INSIDE, quality: 100) {
 ...GatsbyImageSharpFluid_withWebp
 }
 }
 }
 }
`;
</code></pre>

hjo38863616

Bài viết