docs: 2024년 회고

content/development/about-icona/content.mdx

@@ -22,8 +22,8 @@ featured: true
 
 사실 나는 아이콘이랑 되게 인연이 길고 깊다. 정말 깊은지는 아이콘의 얘기를 들어봐야 하지만
 
-- <InternalLink to="/posts/quickly-apply-icons-that-exist-in-figma-to-your-dev-team">피그마에 존재하는 아이콘을 개발단에 빠르게 적용하기 (피그마 플러그인, 아이콘 라이브러리)</InternalLink>
-- <InternalLink to="/posts/how-to-use-icons-well-in-react">리액트에서 아이콘을 잘 사용하는 방법(이라 쓰고 잘 쓰기 위한 몸부림을 써보았다.) (React Icon)</InternalLink>
+- [피그마에 존재하는 아이콘을 개발단에 빠르게 적용하기 (피그마 플러그인, 아이콘 라이브러리)](/posts/quickly-apply-icons-that-exist-in-figma-to-your-dev-team)
+- [리액트에서 아이콘을 잘 사용하는 방법(이라 쓰고 잘 쓰기 위한 몸부림을 써보았다.) (React Icon)](/posts/how-to-use-icons-well-in-react)
 
 뭔가 시스템화를 하려는 노력은 일찍이 있었다.
 2023년 7월에 쓴 Icona 포스팅 글을 쓸땐 이미 `Icona`를 이용해서 잘 배포하고 있었고 큰 문제가 없었고,

src/components/PostContentTitle.tsx

@@ -59,6 +59,7 @@ const PostContentTitle = ({ post, readingTime }: PostContentTitleProps) => {
 
       <Box
         display="flex"
+        flexDirection="column"
         width="100%"
         maxHeight="700px"
         justifyContent="center"
@@ -73,6 +74,9 @@ const PostContentTitle = ({ post, readingTime }: PostContentTitleProps) => {
           alt={post?.frontmatter?.title!}
         />
       </Box>
+      <Text fontSize="12px" textAlign="center" width="100%">
+        이미지 출처: {post?.frontmatter?.thumbnailSource!}
+      </Text>
     </Flex>
   );
 };

src/components/mdx/InternalLink.tsx

@@ -6,6 +6,8 @@ interface InternalLinkProps {
   children: React.ReactNode;
 }
 
+const URL = "https://junghyeonsu.com";
+
 export const InternalLink: React.FC<InternalLinkProps> = ({ to, children }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const [ogImage, setOgImage] = React.useState<string | null | undefined>(null);
@@ -14,7 +16,7 @@ export const InternalLink: React.FC<InternalLinkProps> = ({ to, children }) => {
 
   React.useEffect(() => {
     (async () => {
-      const fullUrl = `${document.location.origin}${to}`;
+      const fullUrl = `${URL}${to}`;
       const response = await fetch(fullUrl);
       const html = await response.text();
       const parser = new DOMParser();

src/components/mdx/MDXProvider.tsx

@@ -1,8 +1,7 @@
 import type { BoxProps, ComponentDefaultProps, HeadingProps, TextProps } from "@chakra-ui/react";
 import { Box, Heading, Text } from "@chakra-ui/react";
 import { MDXProvider } from "@mdx-js/react";
-import type { PropsWithChildren } from "react";
-import React from "react";
+import type { AnchorHTMLAttributes, PropsWithChildren } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
@@ -57,20 +56,33 @@ const customComponents = {
     />
   ),
 
-  a: (props: BoxProps) => {
+  a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
     const ariaHidden = props["aria-hidden"];
+    const isInternalLink = props.href?.startsWith("/");
+    const href = props.href;
+
+    if (!href) return <a {...props} />;
+
+    if (isInternalLink) {
+      return <InternalLink to={href}>{props.children}</InternalLink>;
+    }
 
     return (
       <Box
-        as="a"
-        fontWeight={600}
-        target={!ariaHidden && "_blank"}
+        as="span"
         _hover={{
           textDecoration: "underline",
         }}
-        color="blue.400"
-        {...props}
-      />
+      >
+        <a
+          style={{
+            fontWeight: 600,
+            color: "var(--chakra-colors-blue-400)",
+          }}
+          target={!ariaHidden ? "_blank" : undefined}
+          {...props}
+        />
+      </Box>
     );
   },
 
@@ -165,7 +177,6 @@ const customComponents = {
   },
 
   Callout,
-  InternalLink,
   YouTubePlayer,
 };
 

src/gatsby-types.d.ts

@@ -1345,6 +1345,7 @@ type MdxFrontmatter = {
   readonly slug: Maybe<Scalars['String']>;
   readonly tags: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
   readonly thumbnail: Maybe<File>;
+  readonly thumbnailSource: Maybe<Scalars['String']>;
   readonly title: Maybe<Scalars['String']>;
   readonly updatedAt: Maybe<Scalars['String']>;
 };
@@ -1357,6 +1358,7 @@ type MdxFrontmatterFieldSelector = {
   readonly slug: InputMaybe<FieldSelectorEnum>;
   readonly tags: InputMaybe<FieldSelectorEnum>;
   readonly thumbnail: InputMaybe<FileFieldSelector>;
+  readonly thumbnailSource: InputMaybe<FieldSelectorEnum>;
   readonly title: InputMaybe<FieldSelectorEnum>;
   readonly updatedAt: InputMaybe<FieldSelectorEnum>;
 };
@@ -1369,6 +1371,7 @@ type MdxFrontmatterFilterInput = {
   readonly slug: InputMaybe<StringQueryOperatorInput>;
   readonly tags: InputMaybe<StringQueryOperatorInput>;
   readonly thumbnail: InputMaybe<FileFilterInput>;
+  readonly thumbnailSource: InputMaybe<StringQueryOperatorInput>;
   readonly title: InputMaybe<StringQueryOperatorInput>;
   readonly updatedAt: InputMaybe<StringQueryOperatorInput>;
 };
@@ -1381,6 +1384,7 @@ type MdxFrontmatterSortInput = {
   readonly slug: InputMaybe<SortOrderEnum>;
   readonly tags: InputMaybe<SortOrderEnum>;
   readonly thumbnail: InputMaybe<FileSortInput>;
+  readonly thumbnailSource: InputMaybe<SortOrderEnum>;
   readonly title: InputMaybe<SortOrderEnum>;
   readonly updatedAt: InputMaybe<SortOrderEnum>;
 };
@@ -2640,7 +2644,7 @@ type PostPageQueryVariables = Exact<{
 }>;
 
 
-type PostPageQuery = { readonly post: { readonly tableOfContents: Record<string, unknown> | null, readonly frontmatter: { readonly slug: string | null, readonly title: string | null, readonly locale: string | null, readonly description: string | null, readonly tags: ReadonlyArray<string | null> | null, readonly createdAt: string | null, readonly updatedAt: string | null, readonly thumbnail: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } | null, readonly otherLocalePost: { readonly nodes: ReadonlyArray<{ readonly frontmatter: { readonly locale: string | null } | null }> }, readonly relatedPosts: { readonly nodes: ReadonlyArray<{ readonly frontmatter: { readonly slug: string | null, readonly title: string | null, readonly description: string | null, readonly tags: ReadonlyArray<string | null> | null, readonly createdAt: string | null, readonly updatedAt: string | null, readonly thumbnail: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null }> } };
+type PostPageQuery = { readonly post: { readonly tableOfContents: Record<string, unknown> | null, readonly frontmatter: { readonly slug: string | null, readonly title: string | null, readonly locale: string | null, readonly description: string | null, readonly tags: ReadonlyArray<string | null> | null, readonly createdAt: string | null, readonly updatedAt: string | null, readonly thumbnailSource: string | null, readonly thumbnail: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } | null, readonly otherLocalePost: { readonly nodes: ReadonlyArray<{ readonly frontmatter: { readonly locale: string | null } | null }> }, readonly relatedPosts: { readonly nodes: ReadonlyArray<{ readonly frontmatter: { readonly slug: string | null, readonly title: string | null, readonly description: string | null, readonly tags: ReadonlyArray<string | null> | null, readonly createdAt: string | null, readonly updatedAt: string | null, readonly thumbnail: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null }> } };
 
 type ProfileQueryQueryVariables = Exact<{ [key: string]: never; }>;
 

src/templates/PostPage.tsx

@@ -27,6 +27,7 @@ export const query = graphql`
         tags
         createdAt
         updatedAt
+        thumbnailSource
         thumbnail {
           childImageSharp {
             gatsbyImageData