chore: about page - move badge/button to component and style

Author: Minseo Kim

posts/about.md

@@ -0,0 +1,36 @@
+---
+title: "About"
+date: "2026-02-13"
+tags:
+  - "about"
+category:
+  - "about"
+summary: "About this site and author"
+status: "Public"
+type: "Page"
+slug: "about"
+---
+
+
+Daily
+
+# hello!
+
+> 💡 This blog is built from Markdown posts and synced assets. If you are
+> interested, check out the original project:
+> https://github.com/morethanmin/morethan-log
+
+Hello, I am Minseo Kim. This is a tech blog where I share what I learn as an
+MS Solution Engineer Intern, focusing on Microsoft 365 and Copilot Studio.
+If there is anything wrong or if you have any questions, please feel free to
+contact me by email.
+
+
+[View Resume](https://daram62.github.io/MS_Tech_Blog)
+
+## Contact
+
+- Email: ludia0602@gmail.com
+- GitHub: https://github.com/daram62
+- LinkedIn: https://www.linkedin.com/in/minseo-ludia
+

site.config.js

@@ -12,14 +12,14 @@ const CONFIG = {
   },
   projects: [
     {
-      name: `MS Tech Blog`,
+      name: `Tech Blog`,
       href: "https://github.com/daram62/MS_Tech_Blog",
     },
   ],
   // blog setting (required)
   blog: {
-    title: "MS Tech Blog",
-    description: "welcome to MS Tech Blog!",
+    title: "Tech Blog",
+    description: "welcome to Minseo's Tech Blog!",
     scheme: "dark", // 'light' | 'dark' | 'system'
   },
 

src/libs/utils/markdown.ts

@@ -0,0 +1,50 @@
+export type HeadingItem = {
+  id: string
+  text: string
+  level: number
+}
+
+export const slugifyHeading = (value: string) => {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[\s]+/g, "-")
+    .replace(/[^a-z0-9\-]/g, "")
+}
+
+const stripMarkdown = (value: string) => {
+  return value
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, "")
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, "$1")
+    .replace(/[`*_~]/g, "")
+    .replace(/<[^>]+>/g, "")
+    .trim()
+}
+
+export const parseHeadings = (content: string, levels: number[]) => {
+  const allowed = new Set(levels)
+  const lines = content.split(/\r?\n/)
+  const counts = new Map<string, number>()
+  const headings: HeadingItem[] = []
+
+  for (const line of lines) {
+    const match = /^(#{1,6})\s+(.+)$/.exec(line)
+    if (!match) continue
+
+    const level = match[1].length
+    if (!allowed.has(level)) continue
+
+    const rawText = match[2].replace(/\s+#+\s*$/, "")
+    const text = stripMarkdown(rawText)
+    const base = slugifyHeading(text)
+    if (!base) continue
+
+    const count = counts.get(base) ?? 0
+    counts.set(base, count + 1)
+
+    const id = count === 0 ? base : `${base}-${count}`
+    headings.push({ id, text, level })
+  }
+
+  return headings
+}

src/routes/Detail/PageDetail/index.tsx

@@ -1,23 +1,88 @@
 import React from "react"
 import styled from "@emotion/styled"
 import MarkdownRenderer from "../components/MarkdownRenderer"
+import { useMemo } from "react"
 import usePostQuery from "src/hooks/usePostQuery"
 type Props = {}
 
 const PageDetail: React.FC<Props> = () => {
   const data = usePostQuery()
 
   if (!data) return null
+  // About 페이지라면 뱃지/버튼을 직접 렌더링
+  const isAbout = data.slug === "about"
+  const contentWithoutBadgeAndButton = useMemo(() => {
+    if (!isAbout) return data.content
+    // Daily 뱃지와 View Resume 버튼이 있던 줄 제거
+    return data.content
+      .replace(/^Daily\s*$/m, "")
+      .replace(/^\[View Resume\]\(.*\)$/m, "")
+      .trim()
+  }, [data.content, isAbout])
+
   return (
     <StyledWrapper>
-      <MarkdownRenderer content={data.content} />
+      <div className="contentCard">
+        {isAbout && <Badge>Daily</Badge>}
+        <MarkdownRenderer content={contentWithoutBadgeAndButton} />
+        {isAbout && (
+          <ResumeButton
+            href="https://daram62.github.io/MS_Tech_Blog"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View Resume
+          </ResumeButton>
+        )}
+      </div>
     </StyledWrapper>
   )
 }
 
+
+
 export default PageDetail
 
 const StyledWrapper = styled.div`
+  padding: 3rem 1.5rem;
   margin: 0 auto;
-  max-width: 56rem;
+  max-width: 60rem;
+
+  .contentCard {
+    padding: 3rem 1.5rem;
+    border-radius: 1.5rem;
+    background-color: ${({ theme }) =>
+      theme.scheme === "light" ? "white" : theme.colors.gray4};
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    margin: 0 auto;
+    max-width: 56rem;
+    width: 100%;
+  }
+`
+
+const Badge = styled.span`
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: #e6f0ff;
+  color: #1d4ed8;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+`
+
+const ResumeButton = styled.a`
+  display: inline-block;
+  margin-top: 0.75rem;
+  padding: 0.6rem 1rem;
+  border-radius: 0.75rem;
+  background: #111827;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 600;
+  transition: background 0.2s;
+  &:hover {
+    background: #374151;
+  }
 `