feat: create Loading component and apply it to routes

src/app/categories/[tag]/page.jsx

@@ -3,6 +3,8 @@ import Link from 'next/link';
 import { Fragment, Suspense } from 'react';
 import { FaBook, FaTag, FaRegCalendarPlus, FaRegCalendarXmark } from 'react-icons/fa6';
 
+import Loading from '@/components/common/Loading';
+
 import { PATH_DOCS, EXT_MD_REGEXP } from '@/constants';
 import { compareMarkdownDocument } from '@/utils/compare';
 import { readMarkdownTagTree } from '@/utils/fs';
@@ -24,7 +26,7 @@ export default async function Page({ params, searchParams }) {
   const tagTree = await readMarkdownTagTree(PATH_DOCS);
 
   return (
-    <Suspense key={sort + order} fallback={<span>loading...</span>}>
+    <Suspense key={sort + order} fallback={<Loading />}>
       {tagTree[params.tag]
         .sort(compareMarkdownDocument(sort, order))
         .map(({ basename, data: { title, description, created, updated, tags } }) => (

src/app/posts/[markdown]/loading.jsx

@@ -0,0 +1,5 @@
+import LoadingGif from '@/components/common/Loading';
+
+export default function Loading() {
+  return <LoadingGif />;
+}

src/components/common/Loading/Loading.jsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+
+import styles from './Loading.module.scss';
+
+export default function Loading({ content }) {
+  return (
+    <div className={styles.loading}>
+      <div>
+        <Image
+          src={'/images/loading.gif'}
+          width={48}
+          height={48}
+          alt="GitHub gif loading image"
+        />
+        <div>{content} 불러오는 중...</div>
+      </div>
+    </div>
+  );
+}

src/components/common/Loading/Loading.module.scss

@@ -0,0 +1,3 @@
+.loading {
+  @include props-flex-center;
+}

src/components/common/Loading/index.js

@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;