Add change page

package.json

@@ -11,6 +11,8 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.12",
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
     "lucide-react": "^0.453.0",

src/app/changelog/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+
+const changelogData = [
+    {
+        date: "2024-10-22",
+        changes: [{ description: "업데이트 내역 페이지 추가" }],
+    },
+];
+
+export default function ChangelogPage() {
+    return (
+        <div className="container mx-auto p-7">
+            <h1 className="text-2xl font-bold mb-4">Changelog</h1>
+            {changelogData.map((log, index) => (
+                <div key={index} className="mb-6">
+                    <h2 className="text-xl font-semibold">{log.date}</h2>
+                    <ul className="list-disc list-inside mt-2">
+                        {log.changes.map((change, idx) => (
+                            <li key={idx} className="ml-4">
+                                {change.description}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+        </div>
+    );
+}

src/app/layout.tsx

@@ -1,5 +1,8 @@
 import "@/styles/globals.css";
 
+import { Analytics } from "@vercel/analytics/next";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+
 import Footer from "@/components/footer";
 import Topbar from "@/components/topbar";
 
@@ -14,6 +17,8 @@ export default function RootLayout({
                 <Topbar />
                 <main className="min-h-screen">{children}</main>
                 <Footer />
+                <Analytics />
+                <SpeedInsights />
             </body>
         </html>
     );

src/app/npc-shop/page.tsx

@@ -60,7 +60,7 @@ export default function NPCShopPage() {
     }, [toastMessage]);
 
     return (
-        <div className="container mx-auto p-4">
+        <div className="container mx-auto p-7">
             <h1 className="text-2xl mb-4">NPC 상점 조회</h1>
 
             <div className="mb-8 flex flex-wrap gap-4">

src/components/footer/index.tsx

@@ -3,10 +3,15 @@ import React from "react";
 
 function Footer() {
     return (
-        <footer className="footer footer-center p-4 bg-base-200 text-base-content">
-            <Link href="/contact">
-                <p className="text-sm">문의하기</p>
-            </Link>
+        <footer className="footer footer-center p-2 py-4 bg-base-200 text-base-content">
+            <div className="flex flex-row">
+                <Link href="/contact">
+                    <p className="text-sm">문의하기</p>
+                </Link>
+                <Link href="/changelog">
+                    <p className="text-sm">업데이트 내역</p>
+                </Link>
+            </div>
             <div>
                 <p>Copyright © 2024 Erinn.me. All rights reserved.</p>
             </div>

src/components/icons/document-icon.tsx

@@ -0,0 +1,47 @@
+function DocumentIcon({ className = "" }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            className={`${className}`}
+            fill={"none"}
+        >
+            <path
+                d="M14.9805 7.01556C14.9805 7.01556 15.4805 7.51556 15.9805 8.51556C15.9805 8.51556 17.5687 6.01556 18.9805 5.51556"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M9.99491 2.02134C7.49644 1.91556 5.56618 2.20338 5.56618 2.20338C4.34733 2.29053 2.01152 2.97385 2.01154 6.96454C2.01156 10.9213 1.9857 15.7993 2.01154 17.7439C2.01154 18.932 2.74716 21.7033 5.29332 21.8518C8.38816 22.0324 13.9628 22.0708 16.5205 21.8518C17.2052 21.8132 19.4847 21.2757 19.7732 18.7956C20.0721 16.2263 20.0126 14.4407 20.0126 14.0157"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M21.9999 7.01556C21.9999 9.77698 19.7592 12.0156 16.9951 12.0156C14.231 12.0156 11.9903 9.77698 11.9903 7.01556C11.9903 4.25414 14.231 2.01556 16.9951 2.01556C19.7592 2.01556 21.9999 4.25414 21.9999 7.01556Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M6.98053 13.0156H10.9805"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M6.98053 17.0156H14.9805"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}
+
+export default DocumentIcon;

src/components/topbar/index.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 
 import AuctionIcon from "../icons/auction-icon";
+import DocumentIcon from "../icons/document-icon";
 import HornIcon from "../icons/horn-icon";
 import ShopIcon from "../icons/shop-icon";
 
@@ -86,6 +87,14 @@ function Topbar() {
                                 </a>
                             </div>
                         </li>
+                        <li className="flex space-x-2">
+                            <div className="flex items-center">
+                                <DocumentIcon className="h-5 w-5" />
+                                <a href="/changelog" className="ml-2">
+                                    업데이트 내역
+                                </a>
+                            </div>
+                        </li>
                     </ul>
                 </div>
             )}