홈페이지 컴포넌트 + 카드 레이아웃 제작

packages/blog/components/Card/Card.styled.tsx

@@ -1,39 +1,45 @@
-import { theme } from 'react-craft-x/src/theme'
 import styled from 'styled-components'
 
 const Styled = {
-  rootContainer: styled.section`
+  rootContainer: styled.article`
+    width: 100%;
+    padding-bottom: 16px;
+
+    overflow: hidden;
+
     background-color: ${({ theme }) => theme.color.white};
     border-radius: 3px;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
-    padding-bottom: 16px;
-    overflow: hidden;
   `,
   img: styled.img`
-    object-fit: cover;
     width: 100%;
+
+    object-fit: cover;
   `,
   title: styled.h1`
     margin-top: 15px;
+    margin-bottom: 6px;
     margin-left: 16px;
+
     font-weight: 700;
     font-size: 20px;
     line-height: 24px;
-    margin-bottom: 6px;
   `,
   description: styled.p`
-    margin-left: 16px;
     margin-right: 16px;
+    margin-bottom: 40px;
+    margin-left: 16px;
+
     color: ${({ theme }) => theme.color.grey400};
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
-    margin-bottom: 40px;
-    word-break: break-all;
     white-space: pre-wrap;
+    word-break: break-all;
   `,
   date: styled.p`
     margin-left: 16px;
+
     color: ${({ theme }) => theme.color.grey400};
     font-weight: 400;
     font-size: 10px;

packages/blog/package.json

@@ -12,6 +12,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.2.1",
     "body-scroll-lock": "^4.0.0-beta.0",
     "framer-motion": "^6.3.1",
     "next": "12.1.5",

packages/blog/pages/index.tsx

@@ -1,6 +1,7 @@
 import type { GetStaticPropsContext, InferGetStaticPropsType, NextPage } from 'next'
 import Link from 'next/link'
 import { getAllPosts } from '../libs/post-api'
+import Home from '../src/pages/Home/Home'
 
 export const getStaticProps = (ctx: GetStaticPropsContext) => {
   const posts = getAllPosts()
@@ -16,25 +17,10 @@ export const getStaticProps = (ctx: GetStaticPropsContext) => {
     },
   }
 }
+export type GetStaticProps = React.ComponentProps<typeof HomePage>
 
-const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ posts }) => {
-  return (
-    <div>
-      <h1>craft-blog-starter</h1>
-      {posts.map((post) => (
-        <Link key={post.id} href={`/posts/${post.id}`}>
-          <a
-            style={{
-              margin: '0.5rem',
-              fontSize: '1.5rem',
-            }}
-          >
-            <p>{post.title}</p>
-          </a>
-        </Link>
-      ))}
-    </div>
-  )
+const HomePage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (props) => {
+  return <Home {...props} />
 }
 
-export default Home
+export default HomePage

packages/blog/src/pages/Home/CardGrid/CardGrid.styled.tsx

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components'
+import Card from '../../../../components/Card'
+
+const calcWidth = (n: number) => {
+  return `calc((100% - (15px * ${n - 1})) / ${n})`
+}
+
+const Styled = {
+  cardContainer: styled.div`
+    width: ${calcWidth(3)};
+    padding-bottom: 5px;
+
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.md}) {
+      width: ${calcWidth(2)};
+    }
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}) {
+      width: 100%;
+    }
+    @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}) {
+      width: ${calcWidth(4)};
+    }
+    @media screen and (min-width: ${({ theme }) => theme.breakpoint.xl}) {
+      width: ${calcWidth(5)};
+    }
+  `,
+  card: styled(Card)``,
+}
+
+export default Styled

packages/blog/src/pages/Home/CardGrid/CardGrid.tsx

@@ -0,0 +1,59 @@
+import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid'
+import Styled from './CardGrid.styled'
+
+export default function CardGrid({}) {
+  const dummyJson = [
+    {
+      img: 'https://cdn.pixabay.com/photo/2021/12/02/18/38/seagulls-6841129_1280.jpg',
+      alt: 'derweg',
+      title: 'TItlettielt',
+      description: '안녕하세요 안녕안녕',
+      date: '00.00.00',
+    },
+    {
+      img: 'https://cdn.pixabay.com/photo/2021/12/02/18/38/seagulls-6841129_1280.jpg',
+      alt: 'derweg',
+      title: 'TItlettielt',
+      description: '안녕하세요 안녕안녕',
+      date: '00.00.00',
+    },
+    {
+      title: 'TITTLTLE',
+      description: 'hihihihihi',
+      date: '00.00.00',
+    },
+    {
+      title: 'TITTLTLE',
+      description: 'hihihihihi',
+      date: '00.00.00',
+    },
+    {
+      img: 'https://cdn.pixabay.com/photo/2021/12/02/18/38/seagulls-6841129_1280.jpg',
+      alt: 'derweg',
+      title: 'TItlettielt',
+      description: '안녕하세요 안녕안녕',
+      date: '00.00.00',
+    },
+    {
+      title: 'TITTLTLE',
+      description: 'hihihihihi',
+      date: '00.00.00',
+    },
+    {
+      title: 'TITTLTLE',
+      description: 'hihihihihi',
+      date: '00.00.00',
+    },
+  ]
+
+  const Cards = dummyJson.map((i, idx) => (
+    <Styled.cardContainer key={idx}>
+      <Styled.card img={i.img} alt={i.alt} title={i.title} description={i.description} date={i.date} />
+    </Styled.cardContainer>
+  ))
+  return (
+    <MasonryInfiniteGrid gap={10} percentage={true} column={0} useTransform={true} useResizeObserver={true}>
+      {Cards}
+    </MasonryInfiniteGrid>
+  )
+}

packages/blog/src/pages/Home/Home.styled.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+const Styled = {
+  container: styled.main`
+    box-sizing: content-box;
+
+    margin: 87px 16px 0 16px;
+    @media screen and (min-width: ${({ theme }) => theme.breakpoint.xl}) {
+      max-width: calc(${({ theme }) => theme.breakpoint.xl} - 32px);
+      margin: 87px auto 0 auto;
+    }
+  `,
+}
+export default Styled

packages/blog/src/pages/Home/Home.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { GetStaticProps } from '../../../pages/index'
+import CardGrid from './CardGrid/CardGrid'
+import Styled from './Home.styled'
+
+export default function Home({ posts }: GetStaticProps) {
+  //todo: 태그 리스트 추가 예정
+  //todo: 로컬에서 값 읽어오기 수정
+  return (
+    <Styled.container>
+      <CardGrid />
+    </Styled.container>
+  )
+}

yarn.lock

@@ -1871,6 +1871,70 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@egjs/children-differ@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@egjs/children-differ@npm:1.0.1"
+  dependencies:
+    "@egjs/list-differ": ^1.0.0
+  checksum: 087f286822a93cc5ac2ba0beb9f332f3828a8870fea0e9d0a177078c96fc265ce74979be827a78dab674a833e3a22d4fe60636112a1aae93252e0a38f58ff754
+  languageName: node
+  linkType: hard
+
+"@egjs/component@npm:^3.0.0, @egjs/component@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "@egjs/component@npm:3.0.2"
+  checksum: 4fd8854192e52f47b5cec5bad4952448b0df3b36f65bc1adae0f933164877d33fc705e9533af27a02b6faa0a4fddcaf101cce7c8f156de6202ad174b1df61e81
+  languageName: node
+  linkType: hard
+
+"@egjs/grid@npm:~1.9.1":
+  version: 1.9.1
+  resolution: "@egjs/grid@npm:1.9.1"
+  dependencies:
+    "@egjs/children-differ": ^1.0.1
+    "@egjs/component": ^3.0.0
+    "@egjs/imready": ^1.3.0
+  checksum: 6633e2bd2404597024809f38c0d355f7e369b9a3547fef9be3b0267946b0ebee22b8887673462df3a1816c47a3b7606c41b47c5cd4edce643d47208b0b03805a
+  languageName: node
+  linkType: hard
+
+"@egjs/imready@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@egjs/imready@npm:1.3.0"
+  dependencies:
+    "@egjs/component": ^3.0.1
+  checksum: 207736c7586619f736413ac4da0ea3fdb4b8a83cf315d6911f4258b61769738e8ece37c7f661bc6a0f4464618b581af9b94001833ba743d06d9d120e8c3cdaf0
+  languageName: node
+  linkType: hard
+
+"@egjs/infinitegrid@npm:~4.2.1":
+  version: 4.2.1
+  resolution: "@egjs/infinitegrid@npm:4.2.1"
+  dependencies:
+    "@egjs/children-differ": ^1.0.1
+    "@egjs/component": ^3.0.0
+    "@egjs/grid": ~1.9.1
+    "@egjs/list-differ": ^1.0.0
+  checksum: 897cec36dafa2c309615064d2af471173f748f98e73b82ad7d9d525de775ece53c2077a742c584e0811511ba3df11998f4ab5daecccf77f635171b66f3d41fb3
+  languageName: node
+  linkType: hard
+
+"@egjs/list-differ@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@egjs/list-differ@npm:1.0.0"
+  checksum: d1827d134ddab12a024358367cb8a3b70d2ba0f286e5beb6ce2a6bbd021594f26b02c38b2d8b3d1dfd76bd7d1fcda54de3b40decaa9b4fc939230f6e7d531d0c
+  languageName: node
+  linkType: hard
+
+"@egjs/react-infinitegrid@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@egjs/react-infinitegrid@npm:4.2.1"
+  dependencies:
+    "@egjs/infinitegrid": ~4.2.1
+  checksum: 718fc08cd93933dec8c311dba3663b46d6026ad038ab13201079f491797d970f93ea0e4e2db3d8d579db109052a5f9660be7301f8a3569b5636357bdf4eae353
+  languageName: node
+  linkType: hard
+
 "@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
@@ -14514,6 +14578,7 @@ __metadata:
   resolution: "nextjs-craft-blog-kit@workspace:packages/blog"
   dependencies:
     "@craftdocs/craft-extension-api": "*"
+    "@egjs/react-infinitegrid": ^4.2.1
     "@storybook/addon-a11y": "*"
     "@storybook/addon-actions": "*"
     "@storybook/addon-essentials": "*"