WishPool-dev · kwonsaebom · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import Script from 'next/script';
 
 import '@/styles/globals.css';
 import KakaoInitializer from '@/components/common/Button/KakaoButton/KakaoInitializer';
@@ -21,6 +22,55 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
+      <head>
+        <Script
+          id="ms-clarity"
+          type="text/javascript"
+          strategy="afterInteractive"
+        >
+          {`
+      (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_CLARITY_PROJECT_ID}");
+    `}
+        </Script>
+        <Script
+          id="maze-snippet"
+          type="text/javascript"
+          strategy="afterInteractive"
+        >
+          {`
+      (function (m, a, z, e) {
+        var s, t, u, v;
+        try {
+          t = m.sessionStorage.getItem('maze-us');
+        } catch (err) {}
+
+        if (!t) {
+          t = new Date().getTime();
+          try {
+            m.sessionStorage.setItem('maze-us', t);
+          } catch (err) {}
+        }
+
+        u = document.currentScript || (function () {
+          var w = document.getElementsByTagName('script');
+          return w[w.length - 1];
+        })();
+        v = u && u.nonce;
+
+        s = a.createElement('script');
+        s.src = z + '?apiKey=' + e;
+        s.async = true;
+        if (v) s.setAttribute('nonce', v);
+        a.getElementsByTagName('head')[0].appendChild(s);
+        m.mazeUniversalSnippetApiKey = e;
+      })(window, document, 'https://snippet.maze.co/maze-universal-loader.js', '${process.env.NEXT_PUBLIC_MAZE_API_KEY}');
+    `}
+        </Script>
+      </head>
       <body className={`${suite.className} bg-gray-100`}>
         <div className="mx-auto min-h-screen w-full max-w-[430px] bg-white shadow-md">
           <ScrollToTop />

diff --git a/src/app/pick/invite/page.tsx b/src/app/pick/invite/page.tsx
@@ -50,21 +50,20 @@ const InviteHandler = () => {
         />
 
         <div className="space-y-[0.4rem] px-[2.4rem] py-[3.2rem]">
-          <h1 className="head1 text-blue-primary">
-            {pickData?.celebrant}님을 위해 친구들이 함께 만든 <br />
-            위시리스트가 도착했어요!
+          <h1 className="head1 text-blue-primary break-words break-keep">
+            {pickData?.celebrant}님을 위해 친구들이 함께 만든 위시리스트가
+            도착했어요!
           </h1>
           <p className="text-text body1">
             위시풀을 통해 원하는 선물을 알려 주세요.
           </p>
         </div>
 
-        <div className="relative aspect-[353/199] w-full">
+        <div className="relative h-[18.7rem] w-full">
           <Image
             src={displayImageSrc}
             alt="이벤트 카드 이미지"
             fill
-            sizes="100vw"
             className="object-cover"
           />
         </div>

diff --git a/src/app/pick/list/layout.tsx b/src/app/pick/list/layout.tsx
@@ -18,7 +18,7 @@ const ListLayout = ({ children }: { children: React.ReactNode }) => {
           router.push(PATH.PICK_SELECT);
         }}
       />
-      <main className="bg-background-03 mt-header h-[100vh] px-[2rem] pb-[2rem]">
+      <main className="bg-background-03 mt-header min-h-[100vh] px-[2rem] pb-[2rem]">
         {children}
       </main>
     </>

diff --git a/src/app/pick/select/layout.tsx b/src/app/pick/select/layout.tsx
@@ -19,7 +19,7 @@ const SelectLayout = ({ children }: { children: React.ReactNode }) => {
           router.push(PATH.PICK_LIST);
         }}
       />
-      <main className="bg-blue-6 h-[100vh]">{children}</main>
+      <main className="bg-background-02 h-[100vh]">{children}</main>
       <SwipeGuide />
     </>
   );

diff --git a/src/app/wishpool/(viewer)/[id]/final/page.tsx b/src/app/wishpool/(viewer)/[id]/final/page.tsx
@@ -28,7 +28,7 @@ const FinalPage = () => {
           <span className="text-blue-primary">{giftData?.celebrant}</span>님이
           최종 선택한 선물
         </p>
-        <p className="body1 text-text">
+        <p className="body1 text-text break-words break-keep">
           {giftData?.celebrant}님이 고른 선물은 바로 이거에요. <br />
           생일을 축하해 주세요!
         </p>

diff --git a/src/app/wishpool/join/[id]/info/page.tsx b/src/app/wishpool/join/[id]/info/page.tsx
@@ -34,7 +34,7 @@ const InfoPage = () => {
   return (
     <>
       <div className="text-text">
-        <h1 className="head1">
+        <h1 className="head1 break-words break-keep">
           {wishpoolData?.owner}님이 보낸 <br />
           위시풀 초대장이 도착했어요! <br />
           <span className="text-blue-primary">{wishpoolData?.celebrant}</span>
@@ -53,7 +53,7 @@ const InfoPage = () => {
           birthDay={getSlashDateFmt(wishpoolData?.birthDay) ?? ''}
         />
 
-        <div className="relative h-[18.7rem] w-[35.3rem] overflow-hidden">
+        <div className="relative h-[18.7rem] w-full">
           <Image
             src={displayImg}
             fill

diff --git a/src/components/pick/list/GiftCard.tsx b/src/components/pick/list/GiftCard.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { useGetWishpoolImage } from '@/api/domain/detail/hooks';
 import GiftCardImage from '@/assets/images/gift-card.png';
@@ -14,6 +15,7 @@ const GiftCard = ({
   size = 'small',
   giftId,
   itemName,
+  itemUrl,
   imageUrl,
 }: GiftCardProps) => {
   const isSmall = size === 'small';
@@ -23,28 +25,30 @@ const GiftCard = ({
     imageUrl && imageData && imageData.key ? imageData.key : GiftCardImage;
 
   return (
-    <div
-      className={`bg-background-01 flex grow-1 flex-col items-center gap-[2.4rem] rounded-[16px] ${isSmall ? 'p-[2.2rem]' : 'p-[6.4rem]'}`}
-    >
+    <Link href={itemUrl}>
       <div
-        className={`relative overflow-hidden rounded-[12px] ${
-          isSmall ? 'h-[12.6rem] w-[12.6rem]' : 'h-[17.1rem] w-[17.1rem]'
-        }`}
+        className={`bg-background-01 flex grow-1 flex-col items-center gap-[2.4rem] rounded-[16px] ${isSmall ? 'p-[2.2rem]' : 'p-[6.4rem]'}`}
       >
-        <Image
-          src={finalSrc}
-          alt={`선물 카드 이미지 - ${giftId}`}
-          fill
-          className="object-cover"
-        />
+        <div
+          className={`relative overflow-hidden rounded-[12px] ${
+            isSmall ? 'h-[12.6rem] w-[12.6rem]' : 'h-[17.1rem] w-[17.1rem]'
+          }`}
+        >
+          <Image
+            src={finalSrc}
+            alt={`선물 카드 이미지 - ${giftId}`}
+            fill
+            className="object-cover"
+          />
+        </div>
+
+        <span
+          className={`subtitle2 text-text line-clamp-2 h-[4.8rem] text-center ${isSmall ? 'w-[12.6rem]' : ''}`}
+        >
+          {itemName}
+        </span>
       </div>
-
-      <span
-        className={`subtitle2 text-text line-clamp-2 h-[4.8rem] text-center ${isSmall ? 'w-[12.6rem]' : ''}`}
-      >
-        {itemName}
-      </span>
-    </div>
+    </Link>
   );
 };