refactor: re-structure directory

Author: toothlessdev

content/posts/test1.mdx

@@ -1,5 +1,5 @@
 ---
-title: post2
+title: 매우 아주 긴 제목입니다 이 제목은 너무 길어서 잘릴 것입니다
 slug: /test-path
 date: 2024-11-11
 category: JavaScript

src/components/displays/PostCard.tsx …omponents/displays/PostCard/PostCard.tsxsrc/components/displays/PostCard.tsx renamed to src/components/displays/PostCard/PostCard.tsx src/components/displays/PostCard.tsx renamed to src/components/displays/PostCard/PostCard.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
+
 import { NotebookPen } from "lucide-react";
 import { Link } from "gatsby";
 import { categoryColor, CategoryKey } from "@/constants/categories";
 import { toPlainText } from "@/lib/toPlainText";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 
 export interface PostCardProps {
     slug: string;
@@ -40,11 +41,3 @@ export const PostCard = ({ slug, title, category, content, date }: PostCardProps
         </Link>
     );
 };
-
-export interface PostCardContainerProps {
-    children: React.ReactNode;
-}
-
-export const PostCardContainer = ({ children }: PostCardContainerProps) => {
-    return <ul className="grid grid-cols-1 gap-2 md:grid-cols-2">{children}</ul>;
-};

src/components/displays/PostCard/PostCardContainer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface PostCardContainerProps {
+    children: React.ReactNode;
+}
+
+export const PostCardContainer = ({ children }: PostCardContainerProps) => {
+    return <ul className="grid grid-cols-1 gap-2 md:grid-cols-2">{children}</ul>;
+};

src/components/displays/PostCard/index.tsx

@@ -0,0 +1,2 @@
+export { PostCard } from "./PostCard";
+export { PostCardContainer } from "./PostCardContainer";

src/components/displays/PostList/PostListContainer.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { categoryColor, CategoryKey } from "@/constants/categories";
+import { Link } from "gatsby";
+import { toPlainText } from "@/lib/toPlainText";
+
+export interface PostCardProps {
+    slug: string;
+
+    title: string;
+    category: CategoryKey;
+    content: string;
+    date: string;
+}
+
+export const PostListItem = ({ slug, title, category, content, date }: PostCardProps) => {
+    return (
+        <Link to={`/posts${slug}`}>
+            <div className="border-b-[1px] border-[#3d444d] py-4">
+                <h1 className="pb-2 text-xl font-bold text-white hover:underline">{title}</h1>
+                <p className="line-clamp-2 text-sm text-[#9198a1]">{toPlainText(content)}</p>
+                <div className="flex items-center py-2">
+                    <div
+                        className={`mr-1 aspect-square h-[12px] w-[12px] rounded-full`}
+                        style={{
+                            backgroundColor: categoryColor[category],
+                        }}
+                    ></div>
+                    <p className="text-sm text-[#9198a1]">{category}</p>
+                </div>
+            </div>
+        </Link>
+    );
+};

src/components/displays/PostList/PostListItem.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
+
+import { CategoryMenuItem } from ".";
+import { CategoryKey } from "@/constants/categories";
+
+export interface CategoryMenuQuery {
+    allMdx: {
+        group: {
+            edges: {
+                node: {
+                    frontmatter: {
+                        title: string;
+                        category: CategoryKey;
+                        slug: string;
+                    };
+                };
+            }[];
+        }[];
+    };
+}
+
+export const categoryMenuQuery = graphql`
+    query {
+        allMdx {
+            group(field: { frontmatter: { category: SELECT } }) {
+                edges {
+                    node {
+                        frontmatter {
+                            title
+                            category
+                            slug
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export const CategoryMenu = () => {
+    const data = useStaticQuery<CategoryMenuQuery>(categoryMenuQuery);
+
+    const categories = data.allMdx.group.map((category) => {
+        return {
+            category: category.edges[0].node.frontmatter.category,
+            content: category.edges.map((post) => {
+                return {
+                    title: post.node.frontmatter.title,
+                    slug: post.node.frontmatter.slug,
+                };
+            }),
+        };
+    });
+
+    return (
+        <aside className="w-[30%] p-2 text-white">
+            <h2 className="font-bold">Categories</h2>
+            <nav className="py-2">
+                {categories.map((category) => {
+                    return <CategoryMenuItem category={category.category} contents={category.content} />;
+                })}
+            </nav>
+        </aside>
+    );
+};

src/components/displays/PostList/index.tsx

@@ -0,0 +1,41 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { categoryColor, CategoryKey } from "@/constants/categories";
+import { Link } from "gatsby";
+import React from "react";
+
+export interface CategoryMenuItemProps {
+    category: CategoryKey;
+    contents: {
+        title: string;
+        slug: string;
+    }[];
+}
+
+export const CategoryMenuItem = ({ category, contents }: CategoryMenuItemProps) => {
+    return (
+        <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1" className="border-none">
+                <AccordionTrigger className="h-[22px] rounded-[4px] border-none px-2 hover:bg-[#161a21]">
+                    <div className="flex items-center justify-start hover:no-underline">
+                        <div
+                            className="mr-1 h-[12px] w-[12px] rounded-full"
+                            style={{ backgroundColor: categoryColor[category] }}
+                        />
+                        <p className="hover:no-underline">{category}</p>
+                    </div>
+                </AccordionTrigger>
+                <AccordionContent className="pb-2">
+                    {contents.map((content) => {
+                        return (
+                            <Link to={`/posts${content.slug}`}>
+                                <p className="overflow-hidden text-ellipsis text-nowrap py-2 pl-8 hover:underline">
+                                    {content.title}
+                                </p>
+                            </Link>
+                        );
+                    })}
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+    );
+};