[Release] 2024-12-22

[Release] 2024-12-22

.github/ISSUE_TEMPLATE/article-issue-생성-템플릿.md

@@ -0,0 +1,16 @@
+---
+name: Article Issue 생성 템플릿
+about: 블로그 글 발행과 관련된 이슈를 생성할 때 사용해주세요.
+title: "[Article]"
+labels: Article
+assignees: Hong-JunHyeok
+
+---
+
+### 이슈 설명
+> 어떤 주제와 관련된 글인지 간단히 작성해주세요.
+
+### 일감 사이즈
+>티셔츠 방법론에 의한 사이즈를 측정해주세요 잘게 쪼갤수록 좋습니다.
+
+`Size`

.github/ISSUE_TEMPLATE/feature-issue-생성-템플릿.md

@@ -0,0 +1,16 @@
+---
+name: Feature Issue 생성 템플릿
+about: 기능 개발과 관련된 이슈를 생성할 때 사용해주세요.
+title: "[Feature] "
+labels: Feature
+assignees: Hong-JunHyeok
+
+---
+
+## 기능 설명
+> 이 기능으로부터 어떤 변경이 이루어질지 작성해주세요.
+
+## 일감 사이즈 
+> 티셔츠 방법론에 의한 사이즈를 측정해주세요 잘게 쪼갤수록 좋습니다.
+
+`Size`

.github/ISSUE_TEMPLATE/fix-issue-생성-템플릿.md

@@ -0,0 +1,16 @@
+---
+name: Fix Issue 생성 템플릿
+about: 오류와 관련된 이슈를 생성할 때 사용해주세요.
+title: "[Fix]"
+labels: Fix
+assignees: Hong-JunHyeok
+
+---
+
+### 이슈 설명
+>왜 해당 이슈가 발생했는지 작성해주세요.
+
+### 일감 사이즈
+>티셔츠 방법론에 의한 사이즈를 측정해주세요 잘게 쪼갤수록 좋습니다.
+
+`Size`

.github/ISSUE_TEMPLATE/techdept-issue-생성-템플릿.md

@@ -0,0 +1,16 @@
+---
+name: Techdept Issue 생성 템플릿
+about: 비기능 개발 (성능 개선, 프로젝트 세팅 등)과 관련된 이슈를 생성할 때 사용해주세요.
+title: "[Techdept]"
+labels: Techdept
+assignees: Hong-JunHyeok
+
+---
+
+### 이슈 설명
+> 이 기능이 왜 필요한지, 어떤 영향을 주는지 간단히 작성해주세요.
+
+### 일감 사이즈
+> 티셔츠 방법론에 의한 사이즈를 측정해주세요 잘게 쪼갤수록 좋습니다.
+
+`Size`

.github/labeler.yml

@@ -0,0 +1,14 @@
+Feature:
+  - head-branch: ["^feature", "feature"]
+
+Fix:
+  - head-branch: ["^fix", "fix"]
+
+Techdept:
+  - head-branch: ["^techdept", "techdept"]
+
+Article:
+  - head-branch: ["^article", "article"]
+
+Release:
+  - head-branch: ["^develop", "develop"]

.github/pull_request_template.md

@@ -0,0 +1,12 @@
+## 개요
+
+> 변경 사항 및 관련 이슈에 대해 간단하게 작성해주세요.
+
+resolve #
+
+## PR Checklist
+
+PR이 다음 요구 사항을 충족하는지 확인하세요.
+
+- [ ] 하위 호환성을 확인해주세요.
+- [ ] 기능에 대한 테스트가 완료되었는지 확인해주세요.

.github/workflows/label.yml

@@ -0,0 +1,12 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v5

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.customData": [".vscode/tailwind.json"]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

next.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/home",
+        permanent: true,
+      },
+    ];
+  },
+};

package.json

@@ -10,11 +10,15 @@
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.0",
+    "marked": "^15.0.4",
+    "marked-highlight": "^2.2.1",
     "next": "15.0.2",
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
     "remark": "^15.0.1",
-    "remark-html": "^16.0.1"
+    "remark-html": "^16.0.1",
+    "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",

scripts/generate-post.js

@@ -6,7 +6,7 @@ function generatePost(title, excerpt, coverImage) {
 title: "${title}"
 excerpt: "${excerpt}"
 coverImage: "${coverImage}"
-date: ${new Date().toISOString()}
+date: "${new Date().toISOString()}"
 author:
   name: "홍준혁"
   picture: "/assets/blog/authors/liam.jpeg"

src/app/_components/hero-post/HeroPost.tsx → src/app/home/_components/hero-post/HeroPost.tsx

@@ -1,26 +1,20 @@
-import { type Author } from "@/types/author";
 import Link from "next/link";
-import DateFormatter from "../../../components/date-formatter";
-import CoverImage from "../cover-image";
-import Avatar from "../../../components/avatar";
-
-type Props = {
-  title: string;
-  coverImage: string;
-  date: string;
-  excerpt: string;
-  author: Author;
-  slug: string;
-};
+import CoverImage from "../../../../components/post/cover-image";
+import { Post } from "@/types/post";
+import PostReadTime from "../../../../components/post/post-read-time";
+import Septerator from "@/components/septerator";
+import DateFormatter from "@/components/date-formatter";
+import Avatar from "@/components/avatar";
 
 export function HeroPost({
   title,
   coverImage,
   date,
   excerpt,
   author,
+  content,
   slug,
-}: Props) {
+}: Post) {
   return (
     <section>
       <div className="mb-8 md:mb-16">
@@ -33,8 +27,10 @@ export function HeroPost({
               {title}
             </Link>
           </h3>
-          <div className="mb-4 md:mb-0 text-lg text-content">
+          <div className="mb-4 md:mb-0 text-lg text-content flex items-center">
             <DateFormatter dateString={date} />
+            <Septerator />
+            <PostReadTime content={content} />
           </div>
         </div>
         <div>

src/app/_components/more-posts/MorePosts.tsx → src/app/home/_components/more-posts/MorePosts.tsx

@@ -1,5 +1,5 @@
 import { Post } from "@/types/post";
-import { PostPreview } from "../post-preview/PostPreview";
+import PostPreview from "../post-preview";
 
 type Props = {
   posts: Post[];
@@ -13,15 +13,7 @@ export function MorePosts({ posts }: Props) {
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
-          <PostPreview
-            key={post.slug}
-            title={post.title}
-            coverImage={post.coverImage}
-            date={post.date}
-            author={post.author}
-            slug={post.slug}
-            excerpt={post.excerpt}
-          />
+          <PostPreview key={post.slug} {...post} />
         ))}
       </div>
     </section>

src/app/_components/post-preview/PostPreview.tsx → src/app/home/_components/post-preview/PostPreview.tsx

@@ -1,26 +1,20 @@
-import { type Author } from "@/types/author";
 import Link from "next/link";
-import Avatar from "../../../components/avatar/Avatar";
-import CoverImage from "../cover-image/CoverImage";
-import DateFormatter from "../../../components/date-formatter/DateFormatter";
-
-type Props = {
-  title: string;
-  coverImage: string;
-  date: string;
-  excerpt: string;
-  author: Author;
-  slug: string;
-};
+import CoverImage from "../../../../components/post/cover-image/CoverImage";
+import Septerator from "@/components/septerator";
+import PostReadTime from "../../../../components/post/post-read-time";
+import { Post } from "@/types/post";
+import DateFormatter from "@/components/date-formatter";
+import Avatar from "@/components/avatar";
 
 export function PostPreview({
   title,
   coverImage,
   date,
   excerpt,
+  content,
   author,
   slug,
-}: Props) {
+}: Post) {
   return (
     <div>
       <div className="mb-5">
@@ -31,8 +25,10 @@ export function PostPreview({
           {title}
         </Link>
       </h3>
-      <div className="text-lg mb-4">
+      <div className="flex items-center text-lg mb-4">
         <DateFormatter dateString={date} />
+        <Septerator />
+        <PostReadTime content={content} />
       </div>
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />

src/app/page.tsx → src/app/home/page.tsx

@@ -1,26 +1,19 @@
+import Container from "@/components/container";
 import { getAllPosts } from "@/lib/api";
-import Container from "../components/container";
-import HeroPost from "./_components/hero-post";
 import Intro from "./_components/intro";
+import HeroPost from "./_components/hero-post";
 import MorePosts from "./_components/more-posts";
 
 export default function Index() {
   const allPosts = getAllPosts();
 
-  const [heroPost, morePosts] = [allPosts[0], allPosts.slice(1)];
+  const [heroPost, ...morePosts] = allPosts;
 
   return (
     <main>
       <Container>
         <Intro />
-        <HeroPost
-          title={heroPost.title}
-          coverImage={heroPost.coverImage}
-          date={heroPost.date}
-          author={heroPost.author}
-          slug={heroPost.slug}
-          excerpt={heroPost.excerpt}
-        />
+        <HeroPost {...heroPost} />
         {morePosts.length > 0 && <MorePosts posts={morePosts} />}
       </Container>
     </main>

src/app/layout.tsx

@@ -2,8 +2,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import cn from "classnames";
 
-import Footer from "../components/footer";
-
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -61,7 +59,6 @@ export default function RootLayout({
         className={cn(inter.className, "dark:bg-slate-900 dark:text-slate-400")}
       >
         <div className="min-h-screen">{children}</div>
-        <Footer />
       </body>
     </html>
   );