update post

Author: lazy-dinosaur

components/header.tsx

@@ -19,7 +19,7 @@ import { DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
 import Link from "next/link";
 import { Command } from "cmdk";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { cn, getImagePath } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { usePosts } from "@/contexts/posts-context";
 import { motion } from "framer-motion";
@@ -138,11 +138,12 @@ export default function Header() {
               transition={{ type: "spring", stiffness: 500, damping: 20 }}
             >
               <Image
-                src="/lazydino-logo3.png"
+                src={getImagePath("/lazydino-logo3.png")}
                 alt="lazydino.dev"
                 className="h-full w-full object-cover"
                 width={80}
                 height={80}
+                unoptimized
               />
             </motion.div>
             <span className="text-base sm:text-lg md:text-xl font-bold group-hover:text-primary transition-colors">

components/markdown-renderer.tsx

@@ -7,6 +7,7 @@ import { Badge } from "./ui/badge";
 import { Element } from "hast";
 import CodeBlock from "./code-block";
 import { motion } from "framer-motion";
+import { getImagePath } from "@/lib/utils";
 import remarkCallout from "@r4ai/remark-callout";
 
 export interface MarkdownRendererProps {
@@ -303,13 +304,14 @@ export default function MarkdownRenderer({
           >
             <div className="absolute inset-0 bg-gradient-to-tr from-primary/5 to-transparent z-0"></div>
             <Image
-              src={src || ""}
+              src={getImagePath(src || "")}
               alt={alt || ""}
               width={1200}
               height={630}
               className="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-[1.03] relative z-10"
               sizes="(max-width: 640px) 95vw, (max-width: 768px) 85vw, (max-width: 1024px) 75vw, 50vw"
               loading="lazy"
+              unoptimized
             />
           </div>
           {alt && (

lib/utils.ts

@@ -6,6 +6,29 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+/**
+ * GitHub Pages와 로컬 개발 환경에서 이미지 경로를 올바르게 처리하는 유틸리티 함수
+ */
+export function getImagePath(src: string): string {
+  // 이미 절대 URL인 경우 그대로 반환
+  if (src.startsWith('http://') || src.startsWith('https://')) {
+    return src;
+  }
+  
+  // 상대 경로인 경우 baseUrl 고려
+  // process.env.NODE_ENV === 'production'이 정적 빌드 시에는 작동하지 않을 수 있으므로,
+  // 실제 배포 환경인지 확인하는 방법 사용
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_PATH || '';
+  
+  // 이미 슬래시로 시작하는 경로라면
+  if (src.startsWith('/')) {
+    return `${baseUrl}${src}`;
+  }
+  
+  // 상대 경로인 경우
+  return `${baseUrl}/${src}`;
+}
+
 export interface FolderStructure {
   name: string;
   type: "folder" | "file";

next.config.ts

@@ -3,16 +3,18 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   output: "export",
   images: {
-    domains: [
-      "user-images.githubusercontent.com",
-      "https://lazy-dinosaur.github.io/",
+    unoptimized: true, // GitHub Pages에서 이미지 최적화를 비활성화
+    domains: ["user-images.githubusercontent.com", "lazy-dinosaur.github.io"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lazy-dinosaur.github.io",
+      },
     ],
-    formats: ["image/webp"],
-    // Remove unoptimized: true to enable image optimization
   },
-  trailingSlash: true, // ✅ 정적 서버 라우팅 호환성
-  /* config options here */
-  basePath: "",
+  trailingSlash: true, // 정적 서버 라우팅 호환성
+  assetPrefix: process.env.NODE_ENV === "production" ? "/my-blog" : "", // GitHub 저장소 이름으로 설정
+  basePath: process.env.NODE_ENV === "production" ? "/my-blog" : "", // GitHub 저장소 이름으로 설정
 };
 
 export default nextConfig;