Fix: Obsidian 스타일의 콜아웃에서 링크가 제대로 동작하지 않는 문제 해결

Author: lazy-dinosaur

components/markdown-renderer.tsx

@@ -26,7 +26,6 @@ interface LinkMap {
 
 function formatDate(dateString: string | undefined): string {
   if (!dateString) return "날짜 정보 없음";
-
   try {
     return new Date(dateString).toLocaleDateString("ko-KR");
   } catch (error) {
@@ -69,35 +68,55 @@ export default function MarkdownRenderer({
 
   const processUncycloLinks = (text: string) => {
     // 이스케이프된 링크 패턴을 정상 링크로 변환
-    let processed = text.replace(
-      /\\\[(.*?)\\\]\((.*?)\)/g,
-      (_, linkText, href) => {
-        // 링크 텍스트는 그대로, href는 URI 인코딩
-        return `[${linkText}](${encodeURIComponent(href)})`;
-      },
-    );
-
-    // 위키링크 처리
+    let processed = text.replace(/\\(\[|\]|\(|\))/g, '$1');
+    
+    // 위키링크 처리 - 정규식 개선
     processed = processed.replace(
-      /\[\[([^|]+)(?:\|([^\]]+))?\]\]/g,
+      /\[\[([^|\]]+)(?:\|([^\]]+))?\]\]/g,
       (_, path, label) => {
         // 경로 정규화
         const cleanPath = path.replace(/\.md$/, "");
         // 표시할 이름이 없으면 경로의 마지막 부분을 사용
         const displayName = label || cleanPath.split("/").pop() || cleanPath;
-
         // URI 인코딩 적용
         const encodedPath = encodeURIComponent(cleanPath);
-
         // 인코딩된 경로로 마크다운 링크 생성
         return `[${displayName}](${encodedPath})`;
       },
     );
-
     return processed;
   };
 
+  // 콜아웃 블록 내부의 위키링크도 처리하기 위한 특별 처리
+  const processContentWithCallouts = (content: string) => {
+    // 콜아웃 패턴 - 공백 포함 ("> [!type]" 형식)
+    const calloutRegex = /(>\s\[!.*?\].*?(?:\n>.*?)*)(?:\n\n|$)/gs;
+
+    return content.replace(calloutRegex, (calloutBlock) => {
+      // 전체 콜아웃 블록 내에서 모든 위키링크를 한 번에 처리
+      return calloutBlock.replace(
+        /(- )?\[\[([^|\]]+)(?:\|([^\]]+))?\]\]/g,
+        (match, bulletPoint, path, label) => {
+          // 이스케이프 문자 제거 및 경로 정규화
+          const cleanPath = path.replace(/\\|\\.md$/, "");
+          // 표시할 이름이 없으면 경로의 마지막 부분을 사용
+          const displayName = label || cleanPath.split("/").pop() || cleanPath;
+          // URI 인코딩 적용
+          const encodedPath = encodeURIComponent(cleanPath);
+          // 불릿 포인트가 있으면 유지
+          const prefix = bulletPoint || "";
+          // 인코딩된 경로로 마크다운 링크 생성
+          return `${prefix}[${displayName}](${encodedPath})`;
+        }
+      );
+    });
+  };
+
+  // 처리 순서 변경: 위키링크 처리 전에 콜아웃 처리
   const processedContent = processUncycloLinks(content);
+  const fullProcessedContent = processContentWithCallouts(processedContent);
+  // 최종 처리된 콘텐츠
+  const finalProcessedContent = fullProcessedContent;
 
   const components = {
     h1: ({ children }: { children?: React.ReactNode }) => (
@@ -113,7 +132,6 @@ export default function MarkdownRenderer({
             </Badge>
           ))}
         </div>
-
         {/* 날짜 정보 */}
         <div className="flex flex-col sm:flex-row sm:justify-between text-xs sm:text-sm text-muted-foreground mb-6 sm:mb-8 pb-3 sm:pb-4 border-b">
           <div>작성일: {formatDate(published)}</div>
@@ -141,22 +159,18 @@ export default function MarkdownRenderer({
     p: ({ children }: { children?: React.ReactNode }) => {
       const hasBlockElement = React.Children.toArray(children).some((child) => {
         if (!React.isValidElement(child)) return false;
-
         const childType = (child as React.ReactElement).type;
         const isCustomImage = childType === components.img;
-
         const htmlElementType =
           typeof childType === "string"
             ? childType
             : (childType as React.ComponentType).displayName;
-
         return (
           isCustomImage ||
           (htmlElementType &&
             ["div", "img", "pre", "table"].includes(htmlElementType))
         );
       });
-
       return hasBlockElement ? (
         <div className="my-3 sm:my-4 md:my-5">{children}</div>
       ) : (
@@ -178,7 +192,6 @@ export default function MarkdownRenderer({
     }) {
       const match = /language-(\w+)/.exec(className || "");
       const code = String(children).replace(/\n$/, "");
-
       return !inline && match ? (
         <div className="relative my-4 sm:my-6 md:my-8 rounded-lg overflow-hidden">
           <div className="flex items-center justify-between bg-primary/10 text-primary px-3 sm:px-4 py-1 sm:py-2 text-xs sm:text-sm font-mono">
@@ -197,7 +210,6 @@ export default function MarkdownRenderer({
               {copiedCode === code ? "복사됨" : "복사"}
             </Button>
           </div>
-
           <div className="overflow-auto max-w-full break-all whitespace-pre-wrap">
             <SyntaxHighlighter
               style={isDark ? nightOwl : nord}
@@ -261,7 +273,6 @@ export default function MarkdownRenderer({
     ),
     a: ({ href, children }: { href?: string; children?: React.ReactNode }) => {
       if (!href) return <span>{children}</span>;
-
       // 외부 링크 처리 (http로 시작하는 경우)
       if (href.startsWith("http")) {
         return (
@@ -275,7 +286,6 @@ export default function MarkdownRenderer({
           </a>
         );
       }
-
       // 홈으로 가는 링크
       if (href === "/") {
         return (
@@ -288,16 +298,13 @@ export default function MarkdownRenderer({
           </Link>
         );
       }
-
       // 내부 링크 처리
       if (!isMapLoaded)
         return <span className="text-muted-foreground">{children}</span>;
-
       // 디코딩 및 정규화
       const decodedHref = decodeURIComponent(href);
       const normalizedHref = decodedHref.replace(/\.md$/, "");
       const targetFileName = normalizedHref.split("/").pop();
-
       // 링크맵에서 검색
       for (const [key, value] of Object.entries(linkMap)) {
         const srcFileName = key.replace(/\.md$/, "").split("/").pop();
@@ -313,7 +320,6 @@ export default function MarkdownRenderer({
           );
         }
       }
-
       // 발행되지 않은 문서 링크
       return (
         <span
@@ -380,7 +386,7 @@ export default function MarkdownRenderer({
   return (
     <div className="prose-custom">
       <ReactMarkdown components={components} remarkPlugins={[remarkCallout]}>
-        {processedContent}
+        {finalProcessedContent}
       </ReactMarkdown>
     </div>
   );

content/posts/project/blog/어떻게 블로그를 구현하였나.md

@@ -4,7 +4,7 @@ tags:
   - dev
   - project
 createdAt: 2025-03-08 17:12:17
-modifiedAt: 2025-03-10 18:38:04
+modifiedAt: 2025-03-10 19:46:41
 publish: project/blog
 series: 나의 맞춤 블로그 만들기
 ---
@@ -44,8 +44,4 @@ Python을 통해 파일 시스템을 만져본것은 처음이라 [[Aider|AI 툴
 > - [[Python Script로 Markdown 파일 읽어오기]]
 > - [[Python Script로 JSON 파일 작성하기]]
 
-#### 파일을 가져와보자
-
-Next.js 를 활용하여 블로그를 만들때 기본적으로 content 폴더에 파일들을 가져오게 된다.
-
-#### 문제
+Next.js 를 활용하여 블로그를 만들때 기본적으로 content 폴더에 파일들을 가져와 빌드하게 된다.

content/posts/resource/ai/Aider.md

@@ -0,0 +1,19 @@
+---
+tags:
+  - ai
+  - tool
+  - aider
+createdAt: 2025-03-10 08:21:08
+modifiedAt: 2025-03-10 18:49:05
+publish: resource/ai
+series: ""
+---
+
+# Aider
+
+공식 홈페이지:[Home | Aider](https://aider.chat/)
+
+> [!quote]
+> Aider lets you pair program with LLMs, to edit code in your local git repository. Start a new project or work with an existing code base.
+
+Aider 는 터미널을 통해 AI 와 [Pair Programming](https://namu.wiki/w/%ED%8E%98%EC%96%B4%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)을 할 수 있도록 해주는 툴이다.

content/posts/resource/python/Python Script로 JSON 파일 작성하기.md

@@ -0,0 +1,9 @@
+---
+tags: []
+createdAt: 2025-03-10 18:53:57
+modifiedAt: 2025-03-10 19:00:36
+publish: resource/python
+series: ""
+---
+
+# Python Script로 JSON 파일 작성하기

content/posts/resource/python/Python Script로 Markdown 파일 읽어오기.md

@@ -0,0 +1,9 @@
+---
+tags: []
+createdAt: 2025-03-10 18:53:44
+modifiedAt: 2025-03-10 19:00:30
+publish: resource/python
+series: ""
+---
+
+# Python Script로 Markdown 파일 읽어오기

content/posts/resource/python/Python Script로 파일 복사해오기.md

@@ -0,0 +1,9 @@
+---
+tags: []
+createdAt: 2025-03-10 18:53:20
+modifiedAt: 2025-03-10 19:00:22
+publish: resource/python
+series: ""
+---
+
+# Python Script로 파일 복사해오기

public/link-map.json

@@ -1,4 +1,8 @@
 {
   "0.inbox/개인 블로그를 제작하게 된 이유.md": "project/blog/개인 블로그를 제작하게 된 이유",
-  "0.inbox/어떻게 블로그를 구현하였나.md": "project/blog/어떻게 블로그를 구현하였나"
+  "0.inbox/어떻게 블로그를 구현하였나.md": "project/blog/어떻게 블로그를 구현하였나",
+  "0.inbox/Aider.md": "resource/ai/Aider",
+  "0.inbox/Python Script로 파일 복사해오기.md": "resource/python/Python Script로 파일 복사해오기",
+  "0.inbox/Python Script로 Markdown 파일 읽어오기.md": "resource/python/Python Script로 Markdown 파일 읽어오기",
+  "0.inbox/Python Script로 JSON 파일 작성하기.md": "resource/python/Python Script로 JSON 파일 작성하기"
 }

public/meta-data.json

@@ -17,6 +17,46 @@
                             "tags": ["blog", "dev", "project"],
                             "series": "나의 맞춤 블로그 만들기",
                             "createdAt": "2025-03-08 17:12:17",
-                            "modifiedAt": "2025-03-10 18:38:04"
+                            "modifiedAt": "2025-03-10 19:46:41"
+                        },
+  {
+                            "urlPath": "resource/ai/Aider",
+                            "title": "Aider",
+                            "summary": "",
+                            "image": "",
+                            "tags": ["ai", "tool", "aider"],
+                            "series": "",
+                            "createdAt": "2025-03-10 08:21:08",
+                            "modifiedAt": "2025-03-10 18:49:05"
+                        },
+  {
+                            "urlPath": "resource/python/Python Script로 파일 복사해오기",
+                            "title": "Python Script로 파일 복사해오기",
+                            "summary": "",
+                            "image": "",
+                            "tags": [],
+                            "series": "",
+                            "createdAt": "2025-03-10 18:53:20",
+                            "modifiedAt": "2025-03-10 19:00:22"
+                        },
+  {
+                            "urlPath": "resource/python/Python Script로 Markdown 파일 읽어오기",
+                            "title": "Python Script로 Markdown 파일 읽어오기",
+                            "summary": "",
+                            "image": "",
+                            "tags": [],
+                            "series": "",
+                            "createdAt": "2025-03-10 18:53:44",
+                            "modifiedAt": "2025-03-10 19:00:30"
+                        },
+  {
+                            "urlPath": "resource/python/Python Script로 JSON 파일 작성하기",
+                            "title": "Python Script로 JSON 파일 작성하기",
+                            "summary": "",
+                            "image": "",
+                            "tags": [],
+                            "series": "",
+                            "createdAt": "2025-03-10 18:53:57",
+                            "modifiedAt": "2025-03-10 19:00:36"
                         }
 ]

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2018",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,