WishPool-dev · sunkiteo-o · Feb 4, 2026 · Feb 4, 2026 · Feb 4, 2026 · Feb 4, 2026
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
 
 import '@/styles/globals.css';
+import Script from 'next/script';
+
 import KakaoInitializer from '@/components/common/Button/KakaoButton/KakaoInitializer';
 import ScrollToTop from '@/components/common/ScrollToTop';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
@@ -21,6 +23,21 @@
 }>) {
   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", "vbwq3wj5tb");
+          `}
+        </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
+            fill
             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/pick/select/page.tsx b/src/app/pick/select/page.tsx
@@ -80,7 +80,7 @@ const SelectPage = () => {
         <div aria-hidden className="w-[calc(50vw-9rem)] shrink-0 snap-none" />
       </section>
 
-      <section className="bg-background-02 relative pb-[12rem]">
+      <section className="relative pt-[4.2rem]">
         <div className="flex flex-col items-center py-[3rem]">
           <Image
             src="/images/hole.svg"
@@ -95,19 +95,19 @@ const SelectPage = () => {
             <br />
             아래로 드래그하면 리스트에서 제외돼요.
           </p>
-          <div className="flex w-full flex-col gap-[0.8rem] p-[2rem]">
-            <Button
-              backgroundColor="transparent"
-              textColor="gray"
-              textSize="md"
-              onClick={() => window.location.reload()}
-            >
-              <span className="underline">처음부터 다시 고르기</span>
-            </Button>
-            <Button onClick={handleComplete}>완료하기</Button>
-          </div>
         </div>
       </section>
+      <div className="fixed right-0 bottom-0 left-0 mx-auto flex max-w-[430px] flex-col gap-[0.8rem] p-[2rem]">
+        <Button
+          backgroundColor="transparent"
+          textColor="gray"
+          textSize="md"
+          onClick={() => window.location.reload()}
+        >
+          <span className="underline">처음부터 다시 고르기</span>
+        </Button>
+        <Button onClick={handleComplete}>완료하기</Button>
+      </div>
     </div>
   );
 };

diff --git a/src/app/wishpool/(builder)/intro/layout.tsx b/src/app/wishpool/(builder)/intro/layout.tsx
@@ -6,7 +6,9 @@ const IntroLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <BackHeader title="위시풀 만들기" bgColor="background02" />
-      <main className="bg-background-02 mt-header p-[2rem]">{children}</main>
+      <main className="bg-background-02 mt-header h-[100vh] p-[2rem]">
+        {children}
+      </main>
     </>
   );
 };

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,10 +53,10 @@ 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
+            src={displayImg}
             className="object-cover"
             alt="위시풀 대표 이미지"
           />

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';
@@ -26,24 +28,26 @@ const GiftCard = ({
     <div
       className={`bg-background-01 flex grow-1 flex-col items-center gap-[2.4rem] rounded-[16px] ${isSmall ? 'p-[2.2rem]' : 'p-[6.4rem]'}`}
     >
-      <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>
+      <Link href={itemUrl}>
+        <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>
+      </Link>
     </div>
   );
 };

diff --git a/src/components/pick/select/CarouselCard.tsx b/src/components/pick/select/CarouselCard.tsx
@@ -26,6 +26,7 @@ export default function CarouselCard({
   onRemove,
   giftId,
   itemName,
+  itemUrl,
   imageUrl: imageKey,
 }: CarouselCardProps) {
   const isActive = index === activeIndex;
@@ -60,6 +61,9 @@ export default function CarouselCard({
         dragMomentum={false}
         onDragStart={handleDragStart}
         onDrag={handleDrag}
+        onClick={() => {
+          window.open(itemUrl, '_blank');
+        }}
         onDragEnd={
           handleDragEnd as unknown as (
             e: MouseEvent | TouchEvent | PointerEvent,