fix:제거된 프론트 코드 복구 (#567)

frontend/package.json

@@ -52,6 +52,7 @@
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.61.0",
     "@typescript-eslint/parser": "5.61.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "cypress": "^12.17.3",

frontend/src/assets/icons/index.ts

@@ -30,4 +30,5 @@ export { ReactComponent as HomeBorderIcon } from './home-border.svg';
 export { ReactComponent as TimeIcon } from './time.svg';
 export { ReactComponent as PasswordIcon } from './password.svg';
 export { ReactComponent as PublishIcon } from './publish.svg';
+export { ReactComponent as EmptyWritingTableIcon } from './empty-writing-table.svg';
 export { ReactComponent as CategoryIcon } from './category.svg';

frontend/src/components/HomeTable/HomeTable.tsx

@@ -5,6 +5,7 @@ import { dateFormatter } from 'utils/date';
 import { blogIcon } from 'components/WritingTable/WritingTable';
 import Pagination from 'components/@common/Pagination/Pagination';
 import { useHomeTable } from './useHomeTable';
+import { EmptyWritingTableIcon } from 'assets/icons';
 
 type Props = {
   initialPageIndex?: number;
@@ -15,7 +16,16 @@ const HomeTable = ({ initialPageIndex = 0 }: Props) => {
     useHomeTable(initialPageIndex);
   const { goWritingPage } = usePageNavigate();
 
-  if (!content || !totalPages) return <S.AddWritingText>글을 추가해 주세요😊</S.AddWritingText>;
+  if (!content || !totalPages)
+    return (
+      <S.EmptyMessage>
+        <EmptyWritingTableIcon width={80} height={80} />
+        <S.AddWritingTextContainer>
+          <S.AddWritingText>글이 없습니다.</S.AddWritingText>
+          <S.AddWritingText>글 가져오기를 통해 글을 추가해 보세요!</S.AddWritingText>
+        </S.AddWritingTextContainer>
+      </S.EmptyMessage>
+    );
 
   return (
     <S.Container>
@@ -80,16 +90,34 @@ export default HomeTable;
 const S = {
   Container: styled.div`
     display: flex;
+    position: relative;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 50px;
   `,
 
-  AddWritingText: styled.p`
-    font-size: 1.5rem;
+  EmptyMessage: styled.p`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.6rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
   `,
 
+  AddWritingTextContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+  `,
+
+  AddWritingText: styled.p``,
+
   HomeTable: styled.table`
     width: 100%;
     text-align: left;

frontend/src/components/HomeTable/useHomeTable.ts

@@ -7,8 +7,10 @@ import { GetHomeWritingsResponse } from 'types/apis/writings';
 export const useHomeTable = (initialPageIndex: number) => {
   const [activePage, setActivePage] = useState(initialPageIndex);
   const [fetchOption, setFetchOption] = useState(`?page=${activePage}`);
-  const { data } = useQuery<GetHomeWritingsResponse>(['homeWritings', fetchOption], () =>
-    getHomeWritings(fetchOption),
+  const { data } = useQuery<GetHomeWritingsResponse>(
+    ['homeWritings', fetchOption],
+    () => getHomeWritings(fetchOption),
+    { suspense: true },
   );
   const rowRef = useRef<HTMLTableRowElement>(null);
 

frontend/src/hooks/@common/useCodeHighlight.ts

@@ -1,27 +1,20 @@
 import { useEffect } from 'react';
 import Prism from 'prismjs';
 import 'prismjs/themes/prism.css';
+import 'prismjs/plugins/autoloader/prism-autoloader.js';
 
-const prismLanguageFromCodeTagRegex = /<code class="language-(\w+)">/g;
+// webpack copyWebpackPlugin 이용해 prismjs/components/경로에 언어모듈 저장
+Prism.plugins.autoloader.languages_path = '/prismjs/components/';
 
 const useCodeHighlight = (htmlDOMString?: string) => {
   useEffect(() => {
     if (!htmlDOMString) return;
-    const importPrism = async () => {
-      const languages = Array.from(htmlDOMString.matchAll(prismLanguageFromCodeTagRegex)).map(
-        (match) => match[1],
-      );
-
-      await Promise.all(
-        languages.map((language) => import(`prismjs/components/prism-${language}`)),
-      );
-    };
 
     const highlightCode = () => {
       Prism.highlightAll();
     };
 
-    importPrism().then(highlightCode);
+    highlightCode();
   }, [htmlDOMString]);
 };
 

frontend/src/mocks/data/writingPage.ts

@@ -1,7 +1,146 @@
 import { GetWritingPropertiesResponse } from 'types/apis/writings';
 
 const writingContentMock = `
-<h1>동글이란?</h1><h2>블로그 글 관리의 새로운 해결책</h2><p><code>노션</code> 같은 <strong><em>텍스트 에디터</strong></em> 에서 작성한 글을 블로그에 올린 적이 있으신가요?</p><p>직접 글을 블로그로 올리다보면 그 과정이 귀찮아지고 어떤 글을 옮겼는지 헷갈릴 때가 많습니다.</p><p>이 문제를 해결하기 위해 우리는 <a href=\"https://donggle.blog/\"><strong>동글</strong></a> 서비스를 만들었습니다.</p><h3>주요 기능</h3><ol><li><strong>노션 글 업로드</strong>: 노션에 작성한 글을 간편하게 동글에 업로드할 수 있습니다. (마크다운 파일 업로드도 지원)</li><li><strong>카테고리 분류</strong>: 동글은 업로드한 글을 카테고리로 분류하여 모아볼 수 있는 기능을 제공합니다.</li><li><strong>다양한 블로그 플랫폼 지원</strong>: 작성한 글을 <code>Tistory</code>나 <code>Medium</code>와 같은 블로그 플랫폼에 발행할 수 있습니다.</li><li><strong>발행 정보 투명화</strong>: 글의 작성 일자와 발행된 블로그 정보를 통해 글을 효율적으로 관리할 수 있습니다.</li></ol><p>다양한 곳에서 글을 작성 후 쉽게 블로그로 포스팅하고 싶은 분들은 <strong>동글</strong>의 도움을 받아보세요.</p><p>더 많은 시간과 에너지를 여러분의 글 작성과 이야기에 투자할 수 있을 것입니다.</p><blockquote><a href=\"https://www.donggle.blog/\"><strong>동글</strong></a>과 함께라면 블로그 글 관리는 더 이상 고민거리가 아닙니다.</blockquote><p>이제 글 작성에 더 집중하며, 블로그 관리에 소비되는 시간과 에너지를 절약하세요!</p>`;
+<h1>동글이란?</h1><h2>블로그 글 관리의 새로운 해결책</h2><p><code>노션</code> 같은 <strong><em>텍스트 에디터</strong></em> 에서 작성한 글을 블로그에 올린 적이 있으신가요?</p><p>직접 글을 블로그로 올리다보면 그 과정이 귀찮아지고 어떤 글을 옮겼는지 헷갈릴 때가 많습니다.</p><p>이 문제를 해결하기 위해 우리는 <a href=\"https://donggle.blog/\"><strong>동글</strong></a> 서비스를 만들었습니다.</p><h3>주요 기능</h3><ol><li><strong>노션 글 업로드</strong>: 노션에 작성한 글을 간편하게 동글에 업로드할 수 있습니다. (마크다운 파일 업로드도 지원)</li><li><strong>카테고리 분류</strong>: 동글은 업로드한 글을 카테고리로 분류하여 모아볼 수 있는 기능을 제공합니다.</li><li><strong>다양한 블로그 플랫폼 지원</strong>: 작성한 글을 <code>Tistory</code>나 <code>Medium</code>와 같은 블로그 플랫폼에 발행할 수 있습니다.</li><li><strong>발행 정보 투명화</strong>: 글의 작성 일자와 발행된 블로그 정보를 통해 글을 효율적으로 관리할 수 있습니다.</li></ol><p>다양한 곳에서 글을 작성 후 쉽게 블로그로 포스팅하고 싶은 분들은 <strong>동글</strong>의 도움을 받아보세요.</p><p>더 많은 시간과 에너지를 여러분의 글 작성과 이야기에 투자할 수 있을 것입니다.</p><blockquote><a href=\"https://www.donggle.blog/\"><strong>동글</strong></a>과 함께라면 블로그 글 관리는 더 이상 고민거리가 아닙니다.</blockquote><p>이제 글 작성에 더 집중하며, 블로그 관리에 소비되는 시간과 에너지를 절약하세요!</p><pre><code class="language-javascript">
+function helloWorld() {
+  console.log("Hello, World!");
+}
+<pre><code class="language-html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+    &lt;title&gt;Hello World&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;h1&gt;Hello, World!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+</code></pre>
+<pre><code class="language-python">
+def hello_world():
+    print("Hello, World!")
+</code></pre>
+<pre><code class="language-java">
+public class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+</code></pre>
+<pre><code class="language-csharp">
+public class HelloWorld {
+    public static void Main(string[] args) {
+        Console.WriteLine("Hello, World!");
+    }
+}
+</code></pre>
+<pre><code class="language-ruby">
+def hello_world
+  puts "Hello, World!"
+end
+</code></pre>
+<pre><code class="language-php">
+&lt;?php
+function helloWorld() {
+  echo "Hello, World!";
+}
+?&gt;
+</code></pre>
+<pre><code class="language-go">
+package main
+
+import "fmt"
+
+func main() {
+    fmt.Println("Hello, World!")
+}
+</code></pre>
+<pre><code class="language-typescript">
+function helloWorld(): void {
+  console.log("Hello, World!");
+}
+</code></pre>
+<pre><code class="language-swift">
+func helloWorld() {
+    print("Hello, World!")
+}
+</code></pre>
+<pre><code class="language-cpp">
+#include &lt;iostream&gt;
+
+int main() {
+    std::cout << "Hello, World!" << std::endl;
+    return 0;
+}
+</code></pre>
+<pre><code class="language-rust">
+fn main() {
+    println!("Hello, World!");
+}
+</code></pre>
+<pre><code class="language-kotlin">
+fun main() {
+    println("Hello, World!")
+}
+</code></pre>
+<pre><code class="language-perl">
+print "Hello, World!\n";
+</code></pre>
+<pre><code class="language-sql">
+SELECT 'Hello, World!' AS greeting;
+</code></pre>
+<pre><code class="language-haskell">
+main :: IO ()
+main = putStrLn "Hello, World!"
+</code></pre>
+<pre><code class="language-lua">
+print("Hello, World!")
+</code></pre>
+<pre><code class="language-bash">
+echo "Hello, World!"
+</code></pre>
+<pre><code class="language-matlab">
+disp('Hello, World!');
+</code></pre>
+<pre><code class="language-scala">
+object HelloWorld {
+  def main(args: Array[String]): Unit = {
+    println("Hello, World!")
+  }
+}
+</code></pre>
+<pre><code class="language-groovy">
+println 'Hello, World!'
+</code></pre>
+<pre><code class="language-r">
+print("Hello, World!")
+</code></pre>
+<pre><code class="language-fortran">
+PROGRAM HelloWorld
+   PRINT *, 'Hello, World!'
+END PROGRAM HelloWorld
+</code></pre>
+<pre><code class="language-pascal">
+program HelloWorld;
+begin
+  writeln('Hello, World!');
+end.
+</code></pre>
+<pre><code class="language-elixir">
+IO.puts "Hello, World!"
+</code></pre>
+<pre><code class="language-prolog">
+hello_world :- write('Hello, World!'), nl.
+</code></pre>
+<pre><code class="language-lisp">
+(print "Hello, World!")
+</code></pre>
+
+`;
 
 export const writing = {
   id: 1,

frontend/src/pages/HomePage/HomePage.tsx

@@ -1,18 +1,39 @@
+import Spinner from 'components/@common/Spinner/Spinner';
 import HomeTable from 'components/HomeTable/HomeTable';
+import { Suspense } from 'react';
 import styled from 'styled-components';
 
 const HomePage = () => {
   return (
     <S.Article>
-      <S.CategoryNameTitle>전체 글</S.CategoryNameTitle>
-      <HomeTable />
+      <Suspense
+        fallback={
+          <S.LoadingContainer>
+            <Spinner size={60} thickness={4} />
+            <h1>전체 글을 불러오는 중입니다 ...</h1>
+          </S.LoadingContainer>
+        }
+      >
+        <S.CategoryNameTitle>전체 글</S.CategoryNameTitle>
+        <HomeTable />
+      </Suspense>
     </S.Article>
   );
 };
 
 export default HomePage;
 
 const S = {
+  LoadingContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    max-width: 100%;
+    height: 100%;
+  `,
+
   Article: styled.article`
     position: relative;
     width: 100%;

frontend/src/pages/TrashCanPage/TrashCanPage.tsx

@@ -23,7 +23,7 @@ const TrashCanPage = () => {
         <TrashCanTable writings={deletedWritings} />
       ) : (
         <S.EmptyMessage>
-          <TrashCanEmptyIcon width={36} height={36} />
+          <TrashCanEmptyIcon width={80} height={80} />
           휴지통이 비어있어요.
         </S.EmptyMessage>
       )}
@@ -56,7 +56,7 @@ const S = {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1.5rem;
+    gap: 2rem;
   `,
 
   LoadingContainer: styled.div`