From 1ae15261dc905f1abb289cfafd6b8e3e1994d735 Mon Sep 17 00:00:00 2001
From: dokyung-kim <dkkim0122@gmail.com>
Date: Tue, 1 Apr 2025 22:56:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EC=A0=81=EC=9D=84=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20clarity=20=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx          |  2 ++
 src/app/metrics/Clarity.tsx | 20 ++++++++++++++++++++
 src/app/metrics/index.tsx   |  9 +++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 src/app/metrics/Clarity.tsx
 create mode 100644 src/app/metrics/index.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bb84cad..3d58c51 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import Metrics from "@/app/metrics";
 import Navigation from "@/components/Navigation";
 import Footer from "@/components/Layout/Footer";
 import { Provider } from "jotai";
@@ -30,6 +31,7 @@ export default function RootLayout({
             <NotificationRegisterPopup />
           </Provider>
         </MockProviders>
+        <Metrics />
       </body>
     </html>
   );
diff --git a/src/app/metrics/Clarity.tsx b/src/app/metrics/Clarity.tsx
new file mode 100644
index 0000000..569639d
--- /dev/null
+++ b/src/app/metrics/Clarity.tsx
@@ -0,0 +1,20 @@
+"use client";
+import Script from "next/script";
+
+export default function Clarity() {
+  return (
+    <Script
+      id="microsoft-clarity"
+      strategy="afterInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "${process.env.NEXT_PUBLIC_MICROSOFT_CLARITY}");
+        `,
+      }}
+    />
+  );
+}
diff --git a/src/app/metrics/index.tsx b/src/app/metrics/index.tsx
new file mode 100644
index 0000000..e2b8e57
--- /dev/null
+++ b/src/app/metrics/index.tsx
@@ -0,0 +1,9 @@
+import Clarity from "@/app/metrics/Clarity";
+
+export default function Metrics() {
+  return (
+    <>
+      <Clarity />
+    </>
+  );
+}