Merge pull request #158 from Team-INSERT/refactor/history

refactor : history 페이지

Author: Ubinquitous

app/history/[title]/History.tsx

@@ -22,13 +22,13 @@ const History = ({ title }: { title: string }) => {
             className={styles.historyBox}
             key={String(history.thisVersionCreatedAt)}
           >
-            <div className={styles.hgroup}>
+            <hgroup className={styles.hgroup}>
               <h1 className={styles.historyId}>#{history.index}</h1>
-              <span className={styles.createdAt}>
+              <time className={styles.createdAt}>
                 편집일 ·&nbsp;
                 {formatDate(history.thisVersionCreatedAt)}
-              </span>
-            </div>
+              </time>
+            </hgroup>
             <span className={styles.author}>작성자 ·&nbsp;{history.nickName}</span>
           </Link>
         ))}

app/history/[title]/detail/[id]/HistoryDetail.tsx

@@ -3,6 +3,7 @@
 import { FC } from "react";
 import Link from "next/link";
 import Container from "@/components/Container";
+import { VersionDifferent } from "@/enum";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { historyQuery } from "@/services/history/history.query";
 import * as styles from "./style.css";
@@ -21,33 +22,33 @@ const HistoryDetail: FC<{ id: number; title: string }> = ({ id, title }) => {
       docsType={history.docsType}
       lastModifiedAt={history.versionDocs.thisVersionCreatedAt}
     >
-      <div className={styles.container}>
+      <main className={styles.container}>
         <Link href={`/user/${history.versionDocs.userId}`} className={styles.author}>
           작성자 · {history.versionDocs.nickName}
         </Link>
-        <div className={styles.historyBox}>
+        <ul className={styles.historyBox}>
           {history.diff.map((dif: HistoryType, historyId: number) => {
             const operationIcon = (() => {
               switch (dif.operation) {
-                case "INSERT":
+                case VersionDifferent.INSERT:
                   return "+";
-                case "DELETE":
+                case VersionDifferent.DELETE:
                   return "-";
-                case "EQUAL":
-                  return "";
+                case VersionDifferent.EQUAL:
+                  return;
                 default:
                   return dif.operation;
               }
             })();
             return (
-              <div key={historyId} className={styles.historyContent}>
-                <div className={styles.historyOperation[dif.operation]}>{operationIcon}</div>
-                <div className={styles.history[dif.operation]}>{dif.text}</div>
-              </div>
+              <li key={historyId} className={styles.historyContent}>
+                <i className={styles.historyOperation[dif.operation]}>{operationIcon}</i>
+                <p className={styles.history[dif.operation]}>{dif.text}</p>
+              </li>
             );
           })}
-        </div>
-      </div>
+        </ul>
+      </main>
     </Container>
   );
 };

app/history/[title]/detail/[id]/page.tsx

@@ -13,9 +13,10 @@ interface PageProps {
 }
 
 export const generateMetadata = async ({ params: { title, id } }: PageProps): Promise<Metadata> => {
+  const decodedTitle = decodeURI(title);
   return generateOpenGraph({
-    title: `역사#${decodeURI(title)}_${id}`,
-    description: `${decodeURI(title)} 문서의 ${id}번째 역사입니다.`,
+    title: `역사#${decodedTitle}_${id}`,
+    description: `${decodedTitle} 문서의 ${id}번째 역사입니다.`,
   });
 };
 

app/history/[title]/page.tsx

@@ -12,9 +12,10 @@ interface PageProps {
 }
 
 export const generateMetadata = async ({ params: { title } }: PageProps): Promise<Metadata> => {
+  const decodedTitle = decodeURI(title);
   return generateOpenGraph({
-    title: `역사#${decodeURI(title)}`,
-    description: `${decodeURI(title)} 문서의 역사입니다.`,
+    title: `역사#${decodedTitle}`,
+    description: `${decodedTitle} 문서의 역사입니다.`,
   });
 };
 

enum/index.ts

@@ -1 +1,2 @@
 export { default as EditorType } from "./editorType.enum";
+export { default as VersionDifferent } from "./versionDifferent.enum";

enum/versionDifferent.enum.ts

@@ -0,0 +1,7 @@
+enum VersionDifferent {
+  INSERT = "INSERT",
+  DELETE = "DELETE",
+  EQUAL = "EQUAL",
+}
+
+export default VersionDifferent;