feat: Post 페이지 추가

wish0ne · Jan 6, 2024 · ef6f0dd · ef6f0dd
1 parent 799784b
commit ef6f0dd
Show file tree

Hide file tree

Showing 6 changed files with 299 additions and 42 deletions.
diff --git a/posts/post1/index.mdx b/posts/post1/index.mdx
@@ -7,7 +7,7 @@ thumbnail_image_alt: "how-to-javascript-compile thumbnail"
 thumbnail_image_credit_text: "Growtika"
 thumbnail_image_credit_link: "https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EA%B7%B8%EB%9E%98%ED%94%BD-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-qaedPly-Uro?utm_content=creditShareLink&utm_medium=referral&utm_source=unsplash"
 subtitle: "JavaScript는 인터프리터 언어인가요?"
-tags: "#JavaScript #Compile"
+tags: ["JavaScript", "Compile"]
 ---
 
 먼저, 자바스크립트란 무엇일까?

diff --git a/posts/post2/index.mdx b/posts/post2/index.mdx
@@ -5,7 +5,7 @@ slug: "how-became-a-developer"
 thumbnail_image: "./image2-9.png"
 thumbnail_image_alt: "how-became-a-developer thumbnail"
 subtitle: "어떻게 개발시작하셨어요?"
-tags: "#회고"
+tags: ["회고"]
 ---
 
 새로운 사람들을 만날때마다 자주 듣는 질문이 있다. 왜 컴퓨터공학과에 가게 되었는지, 어떻게 개발을 시작했는지, 왜 프론트엔드 개발자가 되었는지 등등...

diff --git a/src/components/Tags.tsx b/src/components/Tags.tsx
@@ -0,0 +1,98 @@
+import * as React from "react";
+import { css } from "@emotion/react";
+import { graphql, useStaticQuery } from "gatsby";
+
+type DataProps = {
+  allMdx: {
+    group: { fieldValue: string; totalCount: number }[];
+  };
+};
+
+type Props = {
+  selectedTag: string;
+  setSelectedTag: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const Tags = ({ selectedTag, setSelectedTag }: Props) => {
+  const data: DataProps = useStaticQuery(graphql`
+    query {
+      allMdx {
+        group(field: { frontmatter: { tags: SELECT } }) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `);
+  return (
+    <div
+      css={css`
+        display: flex;
+        column-gap: 2rem;
+        row-gap: 0.4rem;
+        flex-wrap: wrap;
+        margin-bottom: 2rem;
+      `}
+    >
+      <button
+        onClick={() => setSelectedTag("전체")}
+        css={css`
+          font-size: 1.4rem;
+          color: ${selectedTag === "전체" ? "#7c93c3" : "gray"};
+          background-color: ${selectedTag === "전체" ? "#eef5ff" : "#eeeeee"};
+          padding: 1rem;
+          border-radius: 10px;
+        `}
+      >
+        {`전체`}
+      </button>
+      {data.allMdx.group.map(({ fieldValue, totalCount }) => (
+        <button
+          key={fieldValue}
+          css={css`
+            font-size: 1.4rem;
+            color: ${selectedTag === fieldValue ? "#7c93c3" : "gray"};
+            background-color: ${selectedTag === fieldValue
+              ? "#eef5ff"
+              : "#eeeeee"};
+            padding: 1rem;
+            border-radius: 10px;
+          `}
+          onClick={() => setSelectedTag(fieldValue)}
+        >
+          {`#${fieldValue} (${totalCount})`}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+// export const query = graphql`
+//   query {
+//     allMdx(sort: { frontmatter: { date: DESC } }) {
+//       nodes {
+//         frontmatter {
+//           date(formatString: "YYYY.MM.DD")
+//           title
+//           subtitle
+//           tags
+//           slug
+//           thumbnail_image_alt
+//           thumbnail_image {
+//             childImageSharp {
+//               gatsbyImageData(width: 300)
+//             }
+//           }
+//         }
+//         id
+//         excerpt
+//       }
+//       group(field: { frontmatter: { tags: SELECT } }) {
+//         fieldValue
+//         totalCount
+//       }
+//     }
+//   }
+// `;
+
+export default Tags;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -81,6 +81,14 @@ const HomePage = ({ data }: PageProps<DataProps>) => {
                           flex: 1;
                           box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
                             rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+                          object-fit: cover;
+                          @media (max-width: 550px) {
+                            aspect-ratio: 12 / 7;
+                          }
+                          @media (min-width: 551px) and (max-width: 1200px) {
+                            aspect-ratio: 2 / 1;
+                          }
+                          aspect-ratio: 2 / 0.8;
                         `}
                       />
                     )}
@@ -106,22 +114,20 @@ const HomePage = ({ data }: PageProps<DataProps>) => {
                           margin-top: 1rem;
                         `}
                       >
-                        {node.frontmatter.tags
-                          ?.split(" ")
-                          .map((tag: string) => (
-                            <span
-                              key={tag}
-                              css={css`
-                                font-size: 1.4rem;
-                                color: #7c93c3;
-                                background-color: #eef5ff;
-                                padding: 0.4rem;
-                                border-radius: 10px;
-                              `}
-                            >
-                              {tag}
-                            </span>
-                          ))}
+                        {node.frontmatter.tags.map((tag: string) => (
+                          <span
+                            key={tag}
+                            css={css`
+                              font-size: 1.4rem;
+                              color: #7c93c3;
+                              background-color: #eef5ff;
+                              padding: 0.4rem;
+                              border-radius: 10px;
+                            `}
+                          >
+                            {`#${tag}`}
+                          </span>
+                        ))}
                       </div>
 
                       <h2

diff --git a/src/pages/posts/index.tsx b/src/pages/posts/index.tsx
@@ -1,44 +1,197 @@
 import * as React from "react";
 import { css } from "@emotion/react";
-import type { HeadFC, PageProps } from "gatsby";
+import {
+  graphql,
+  Link,
+  type HeadFC,
+  type PageProps,
+  useStaticQuery,
+} from "gatsby";
 import Layout from "../../components/Layout";
-import { StaticImage } from "gatsby-plugin-image";
+import { StaticImage, GatsbyImage, getImage } from "gatsby-plugin-image";
+import Tags from "../../components/Tags";
+
+type DataProps = {
+  allMdx: {
+    nodes: any[];
+  };
+};
+
+const PostPage = ({ data }: PageProps<DataProps>) => {
+  const [selectedTag, setSelectedTag] = React.useState<string>("전체");
+  const [posts, setPosts] = React.useState<DataProps["allMdx"]["nodes"]>(
+    data.allMdx.nodes
+  );
+
+  React.useEffect(() => {
+    if (selectedTag === "전체") {
+      setPosts(data.allMdx.nodes);
+    } else {
+      console.log(selectedTag, posts);
+      const newPosts: DataProps["allMdx"]["nodes"] = [];
+      data.allMdx.nodes.forEach((post) => {
+        console.log(post.frontmatter.tags);
+        if (post.frontmatter.tags.includes(selectedTag)) {
+          newPosts.push(post);
+        }
+      });
+      setPosts(newPosts);
+    }
+  }, [selectedTag]);
 
-const PostPage: React.FC<PageProps> = () => {
   return (
     <Layout>
       <div
         css={css`
           display: flex;
           flex: 1;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
         `}
       >
-        <h1
+        <div
           css={css`
-            font-size: 3rem;
-            color: lightgray;
+            width: 70%;
+            @media (max-width: 768px) {
+              width: 100%;
+            }
+            margin: 0 auto;
           `}
         >
-          𖦹 ´ ᯅ ` 𖦹
-        </h1>
-        <h1
-          css={css`
-            font-size: 1.8rem;
-            color: gray;
-            font-weight: 600;
-          `}
-        >
-          준비중입니다.
-        </h1>
+          <Tags selectedTag={selectedTag} setSelectedTag={setSelectedTag} />
+          <div
+            css={css`
+              /* From https://css.glass */
+              background: rgba(255, 255, 255, 0.2);
+              border-radius: 20px;
+              box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+              backdrop-filter: blur(5px);
+              -webkit-backdrop-filter: blur(5px);
+              border: 1px solid rgba(255, 255, 255, 0.3);
+              padding: 2rem;
+            `}
+          >
+            <div
+              css={css`
+                display: flex;
+                flex-direction: column;
+                gap: 4rem;
+              `}
+            >
+              {posts.map((node) => {
+                const image = getImage(node.frontmatter.thumbnail_image);
+                return (
+                  <Link
+                    to={`/posts/${node.frontmatter.slug}`}
+                    key={node.id}
+                    css={css`
+                      display: flex;
+                      @media (max-width: 550px) {
+                        flex-direction: column;
+                      }
+                      gap: 2rem;
+                    `}
+                  >
+                    {image && (
+                      <GatsbyImage
+                        image={image}
+                        alt={node.frontmatter.thumbnail_image_alt}
+                        css={css`
+                          border-radius: 10px;
+                          flex: 1;
+                          box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
+                            rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+                          aspect-ratio: 2 / 1;
+                        `}
+                      />
+                    )}
+                    <div
+                      css={css`
+                        flex: 1;
+                      `}
+                    >
+                      <p
+                        css={css`
+                          color: gray;
+                          font-size: 1.2rem;
+                          margin: 0;
+                        `}
+                      >
+                        {node.frontmatter.date}
+                      </p>
+
+                      <div
+                        css={css`
+                          display: flex;
+                          gap: 1rem;
+                          margin-top: 1rem;
+                        `}
+                      >
+                        {node.frontmatter.tags.map((tag: string) => (
+                          <span
+                            key={tag}
+                            css={css`
+                              font-size: 1.4rem;
+                              color: #7c93c3;
+                              background-color: #eef5ff;
+                              padding: 0.4rem;
+                              border-radius: 10px;
+                            `}
+                          >
+                            {`#${tag}`}
+                          </span>
+                        ))}
+                      </div>
+
+                      <h2
+                        css={css`
+                          color: black;
+                        `}
+                      >
+                        {node.frontmatter.title}
+                      </h2>
+                      <p
+                        css={css`
+                          font-size: "1.8rem";
+                          color: black;
+                        `}
+                      >
+                        {node.frontmatter.subtitle}
+                      </p>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </div>
       </div>
     </Layout>
   );
 };
 
+export const query = graphql`
+  query {
+    allMdx(sort: { frontmatter: { date: DESC } }) {
+      nodes {
+        frontmatter {
+          date(formatString: "YYYY.MM.DD")
+          title
+          subtitle
+          tags
+          slug
+          thumbnail_image_alt
+          thumbnail_image {
+            childImageSharp {
+              gatsbyImageData(width: 300)
+            }
+          }
+        }
+        id
+        excerpt
+      }
+    }
+  }
+`;
+
 export default PostPage;
 
 export const Head = () => (