Fix basePath images

Author: Minseo Kim

src/layouts/RootLayout/Header/Logo.tsx

@@ -4,10 +4,13 @@ import { CONFIG } from "site.config"
 import styled from "@emotion/styled"
 
 const Logo = () => {
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+  const logoSrc = `${basePath}/images/shared/Microsoft-Logo-PNG-Photos.png`
+
   return (
     <StyledWrapper href="/" aria-label={CONFIG.blog.title}>
       <Image
-        src="/images/shared/Microsoft-Logo-PNG-Photos.png"
+        src={logoSrc}
         alt="Microsoft"
         width={28}
         height={28}

src/routes/Detail/PostDetail/PostHeader.tsx

@@ -11,6 +11,14 @@ type Props = {
 }
 
 const PostHeader: React.FC<Props> = ({ data }) => {
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+  const withBasePath = (url?: string) => {
+    if (!url) return url
+    if (url.startsWith("http") || url.startsWith("data:")) return url
+    if (url.startsWith("/")) return `${basePath}${url}`
+    return url
+  }
+
   return (
     <StyledWrapper>
       <h1 className="title">{data.title}</h1>
@@ -22,7 +30,11 @@ const PostHeader: React.FC<Props> = ({ data }) => {
                 <div className="author">
                   <Image
                     css={{ borderRadius: "50%" }}
-                    src={data.author[0].profile_photo || CONFIG.profile.image}
+                    src={
+                      withBasePath(
+                        data.author[0].profile_photo || CONFIG.profile.image
+                      ) || ""
+                    }
                     alt="profile_photo"
                     width={24}
                     height={24}
@@ -51,7 +63,7 @@ const PostHeader: React.FC<Props> = ({ data }) => {
           {data.thumbnail && (
             <div className="thumbnail">
               <Image
-                src={data.thumbnail}
+                src={withBasePath(data.thumbnail) || ""}
                 css={{ objectFit: "cover" }}
                 fill
                 alt={data.title}

src/routes/Feed/MobileProfileCard.tsx

@@ -8,13 +8,18 @@ type Props = {
 }
 
 const MobileProfileCard: React.FC<Props> = () => {
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+  const profileSrc = CONFIG.profile.image.startsWith("/")
+    ? `${basePath}${CONFIG.profile.image}`
+    : CONFIG.profile.image
+
   return (
     <StyledWrapper>
       <div className="top">💻 Profile</div>
       <div className="mid">
         <div className="wrapper">
           <Image
-            src={CONFIG.profile.image}
+            src={profileSrc}
             width={90}
             height={90}
             css={{ position: "relative" }}

src/routes/Feed/ProfileCard.tsx

@@ -7,14 +7,19 @@ import { Emoji } from "src/components/Emoji"
 type Props = {}
 
 const ProfileCard: React.FC<Props> = () => {
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+  const profileSrc = CONFIG.profile.image.startsWith("/")
+    ? `${basePath}${CONFIG.profile.image}`
+    : CONFIG.profile.image
+
   return (
     <StyledWrapper>
       <div className="title">
         <Emoji>💻</Emoji> Profile
       </div>
       <div className="content">
         <div className="top">
-          <Image src={CONFIG.profile.image} fill alt="" />
+          <Image src={profileSrc} fill alt="" />
         </div>
         <div className="mid">
           <div className=" name">{CONFIG.profile.name}</div>