feat: 사용자 데이터 추적을 위한 clarity 스크립트 추가

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>
   );

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}");
+        `,
+      }}
+    />
+  );
+}

src/app/metrics/index.tsx

@@ -0,0 +1,9 @@
+import Clarity from "@/app/metrics/Clarity";
+
+export default function Metrics() {
+  return (
+    <>
+      <Clarity />
+    </>
+  );
+}