chore: vue.js src 디렉토리 분리

toothlessdev · toothlessdev · commit 74ebfee24a7c · 2025-09-23T08:05:07.000+09:00
diff --git a/.vitepress/config.mts b/.vitepress/config.mts
@@ -59,6 +59,9 @@ export default defineConfig({
     },
 
     vite: {
+        resolve: {
+            alias: [{ find: "@", replacement: "/src" }],
+        },
         plugins: [createAutoGeneratePostsPlugin()],
     },
 
diff --git a/.vitepress/theme/components/BlogList.vue b/.vitepress/theme/components/BlogList.vue
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -2,7 +2,7 @@
 import { h } from "vue";
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
-import BlogList from "./components/BlogList.vue";
+import PostCardList from "@/components/PostCardList/PostCardList.vue";
 import "./style.css";
 
 export default {
@@ -13,6 +13,6 @@ export default {
         });
     },
     enhanceApp({ app, router, siteData }) {
-        app.component("BlogList", BlogList);
+        app.component("PostCardList", PostCardList);
     },
 } satisfies Theme;
diff --git a/contents/posts/Aws/index.md b/contents/posts/Aws/index.md
@@ -0,0 +1,5 @@
+# AWS
+
+AWS 관련 포스트들입니다.
+
+<PostCardList category="Aws" />
diff --git a/contents/posts/JavaScript/index.md b/contents/posts/JavaScript/index.md
@@ -2,4 +2,4 @@
 
 JavaScript 관련 포스트들입니다.
 
-<BlogList category="JavaScript" />
+<PostCardList category="JavaScript" />
diff --git a/contents/posts/React/index.md b/contents/posts/React/index.md
@@ -2,4 +2,4 @@
 
 React 관련 포스트들입니다.
 
-<BlogList category="React" />
+<PostCardList category="React" />
diff --git a/contents/posts/Web/index.md b/contents/posts/Web/index.md
@@ -2,4 +2,4 @@
 
 웹 개발 관련 포스트들입니다.
 
-<BlogList category="Web" />
+<PostCardList category="Web" />
diff --git a/contents/posts/index.md b/contents/posts/index.md
@@ -4,4 +4,4 @@
 
 ### 최신 포스트
 
-<BlogList :posts="posts" />
+<PostCardList :posts="posts" />
diff --git a/src/components/PostCard/PostCard.css b/src/components/PostCard/PostCard.css
@@ -1,14 +1,3 @@
-.blog-list {
-    margin: 2rem 0;
-}
-
-.blog-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 1.5rem;
-    margin-top: 2rem;
-}
-
 .blog-card {
     background: var(--vp-c-bg-soft);
     border: 1px solid var(--vp-c-border);
@@ -25,7 +14,7 @@
     transform: translateY(-2px);
 }
 
-.blog-cards .blog-card .blog-card-footer {
+.blog-card .blog-card-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -34,31 +23,31 @@
     border-top: 1px solid var(--vp-c-divider);
 }
 
-.blog-cards .blog-card .blog-card-meta {
+.blog-card .blog-card-meta {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
 
-.blog-cards .blog-card .blog-card-category-indicator {
+.blog-card .blog-card-category-indicator {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     display: inline-block;
 }
 
-.blog-cards .blog-card .blog-card-category-name {
+.blog-card .blog-card-category-name {
     color: var(--vp-c-text-2);
     font-size: 0.8rem;
     font-weight: 500;
 }
 
-.blog-cards .blog-card .blog-card-date {
+.blog-card .blog-card-date {
     color: var(--vp-c-text-2);
     font-size: 0.8rem;
 }
 
-.blog-cards .blog-card .blog-card-title.blog-card-title {
+.blog-card .blog-card-title.blog-card-title {
     margin-top: 0;
     margin-bottom: 0.5rem;
     font-size: 1.1rem;
@@ -72,7 +61,7 @@
     color: var(--vp-c-brand-1);
 }
 
-.blog-cards .blog-card .blog-card-description {
+.blog-card .blog-card-description {
     color: var(--vp-c-text-2);
     line-height: 1.5;
     margin-bottom: 0;
@@ -85,14 +74,3 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-
-@media (max-width: 768px) {
-    .blog-cards {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .blog-card {
-        padding: 1rem;
-    }
-}
diff --git a/src/components/PostCard/PostCard.vue b/src/components/PostCard/PostCard.vue
@@ -0,0 +1,66 @@
+<template>
+    <article class="blog-card" @click="navigateToPost(post.url)">
+        <div class="blog-card-content">
+            <h3 class="blog-card-title">
+                {{ post.frontmatter.title }}
+            </h3>
+
+            <p class="blog-card-description">
+                {{ post.frontmatter.description }}
+            </p>
+
+            <div class="blog-card-footer">
+                <div class="blog-card-meta">
+                    <span
+                        class="blog-card-category-indicator"
+                        :style="{
+                            backgroundColor: getCategoryColor(post.frontmatter.category),
+                        }"
+                    ></span>
+                    <span class="blog-card-category-name">{{ post.frontmatter.category }}</span>
+                </div>
+                <time class="blog-card-date">
+                    {{ formatDate(post.frontmatter.createdAt) }}
+                </time>
+            </div>
+        </div>
+    </article>
+</template>
+
+<script setup lang="ts">
+import { getCategoryColor } from "@/constants/colors";
+import "./PostCard.css";
+
+interface Post {
+    url: string;
+    frontmatter: {
+        title: string;
+        createdAt: string;
+        category: string;
+        description: string;
+    };
+}
+
+interface Props {
+    post: Post;
+}
+
+defineProps<Props>();
+
+// 날짜 포맷팅 함수 (yyyy-mm-dd 형식)
+function formatDate(dateString: string) {
+    const date = new Date(dateString);
+    return date
+        .toLocaleDateString("ko-KR", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+        })
+        .replace(/\. /g, "-")
+        .replace(/\.$/, "");
+}
+
+function navigateToPost(url: string) {
+    window.location.href = url;
+}
+</script>
diff --git a/src/components/PostCardList/PostCardList.css b/src/components/PostCardList/PostCardList.css
@@ -0,0 +1,17 @@
+.blog-list {
+    margin: 2rem 0;
+}
+
+.blog-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+    .blog-cards {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+}
diff --git a/src/components/PostCardList/PostCardList.vue b/src/components/PostCardList/PostCardList.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="blog-list">
+        <div class="blog-cards">
+            <PostCard v-for="post in sortedPosts" :key="post.url" :post="post" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { posts } from "../../../.vitepress/data/posts";
+import { computed } from "vue";
+import PostCard from "../PostCard/PostCard.vue";
+import "./PostCardList.css";
+
+interface Props {
+    category?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    category: undefined,
+});
+
+const sortedPosts = computed(() => {
+    if (props.category) {
+        return posts.filter(
+            (post) => post.frontmatter.category.toLowerCase() === props.category!.toLowerCase(),
+        );
+    }
+    return posts;
+});
+</script>
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -15,8 +15,14 @@
         "noUnusedLocals": false,
         "noUnusedParameters": false,
         "noFallthroughCasesInSwitch": true,
-        "types": ["node"]
+        "types": ["node"],
+
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"],
+            "@vitepress": [".vitepress"]
+        }
     },
-    "include": [".vitepress/**/*", "pages/**/*", ".vitepress/theme/vue-shims.d.ts"],
+    "include": [".vitepress/**/*", "contents/**/*", ".vitepress/theme/vue-shims.d.ts", "./src"],
     "exclude": ["node_modules", "dist"]
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +# AWS
++
 +AWS 관련 포스트들입니다.
++
 +<PostCardList category="Aws" />
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,4 @@`
`2`	`2`
`3`	`3`	`JavaScript 관련 포스트들입니다.`
`4`	`4`
`5`		`-<BlogList category="JavaScript" />`
	`5`	`+<PostCardList category="JavaScript" />`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,4 @@`
`2`	`2`
`3`	`3`	`React 관련 포스트들입니다.`
`4`	`4`
`5`		`-<BlogList category="React" />`
	`5`	`+<PostCardList category="React" />`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,4 @@`
`2`	`2`
`3`	`3`	`웹 개발 관련 포스트들입니다.`
`4`	`4`
`5`		`-<BlogList category="Web" />`
	`5`	`+<PostCardList category="Web" />`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@`
`4`	`4`
`5`	`5`	`### 최신 포스트`
`6`	`6`
`7`		`-<BlogList :posts="posts" />`
	`7`	`+<PostCardList :posts="posts" />`