From 6b40eeddfc0f4c439ab13a5b49648574237f1f41 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 14:05:47 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[#239]=20Refactor:=20?=
 =?UTF-8?q?=EC=98=88=EC=95=BD=20=EB=82=B4=EC=97=AD=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=EC=9D=84=20=EC=95=8C=EB=A6=BC=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=98=81=EC=97=AD=20=EC=A0=84=EC=B2=B4=EB=A1=9C=20?=
 =?UTF-8?q?=ED=99=95=EB=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/NotificationCard.tsx       | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/NotificationCard.tsx b/packages/design-system/src/components/NotificationCard.tsx
index 94a401c7..d1e1d15d 100644
--- a/packages/design-system/src/components/NotificationCard.tsx
+++ b/packages/design-system/src/components/NotificationCard.tsx
@@ -60,6 +60,10 @@ const parseNotificationContent = (content: string): ParsedNotification | null =>
 export default function NotificationCard({ content, onDelete, onClickDetail }: NotificationCardProps) {
   const parsedNotification = parseNotificationContent(content);
 
+  const handleClickStop = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   // parsedNotification 실패시 기본 content를 메시지로 보여줍니다.
   if (!parsedNotification) {
     return (
@@ -78,7 +82,13 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
   const { title, date, confirm } = parsedNotification;
 
   return (
-    <div className='text-md flex flex-col gap-8 p-16'>
+    <div
+      className='text-md flex cursor-pointer flex-col gap-8 p-16'
+      onClick={(e) => {
+        handleClickStop(e);
+        onClickDetail();
+      }}
+    >
       <div className='flex items-center justify-between'>
         <div className='flex gap-8'>
           {confirm ? <UserBadge status='confirmed' /> : <UserBadge status='declined' />}
@@ -86,21 +96,26 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
             {confirm ? '예약이 승인되었어요!' : '예약이 거절되었어요.'}
           </h1>
         </div>
-        <Button className='h-fit w-fit p-0' variant='none' onClick={onDelete}>
+        <Button
+          className='h-fit w-fit p-0'
+          variant='none'
+          onClick={(e) => {
+            handleClickStop(e);
+            onDelete();
+          }}
+        >
           <DeleteIcon className='size-10' color='var(--color-gray-300)' />
         </Button>
       </div>
-      <div className='cursor-pointer' onClick={onClickDetail}>
-        <div className='flex items-center gap-4 text-gray-600'>
-          <DocumentIcon className='size-14' />
-          <p>{title}</p>
-        </div>
-        <div className='flex items-center gap-4 text-gray-600'>
-          <ClockIcon className='size-14' />
-          <p>
-            {date.year}년 {date.month}월 {date.day}일 {date.startTime}~{date.endTime}
-          </p>
-        </div>
+      <div className='flex items-center gap-4 text-gray-600'>
+        <DocumentIcon className='size-14' />
+        <p>{title}</p>
+      </div>
+      <div className='flex items-center gap-4 text-gray-600'>
+        <ClockIcon className='size-14' />
+        <p>
+          {date.year}년 {date.month}월 {date.day}일 {date.startTime}~{date.endTime}
+        </p>
       </div>
     </div>
   );

From 2895765d48b33158109b1007a311b94a1298b9e6 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 14:32:33 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20[#239]=20Feat:=20NotificationCa?=
 =?UTF-8?q?rd=EC=9D=98=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skeleton/NotificationCardSkeleton.tsx     | 26 +++++++++++++++++++
 .../src/components/skeleton/index.tsx         |  1 +
 .../src/pages/NotificationCardDoc.tsx         |  2 ++
 3 files changed, 29 insertions(+)
 create mode 100644 packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx

diff --git a/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx b/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx
new file mode 100644
index 00000000..3c247ab8
--- /dev/null
+++ b/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx
@@ -0,0 +1,26 @@
+export default function NotificationCardSkeleton() {
+  return (
+    <div className='text-md flex animate-pulse cursor-pointer flex-col gap-8 p-16'>
+      {/* 상단: 상태 뱃지 + 문구 + 삭제 버튼 */}
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-8'>
+          <div className='h-26 w-60 rounded-full bg-gray-100' />
+          <div className='my-2 h-22 w-100 rounded bg-gray-100' />
+        </div>
+        <div className='size-22 animate-pulse rounded-full bg-gray-100' />
+      </div>
+
+      {/* 제목 (아이콘 + 텍스트) */}
+      <div className='my-2 flex items-center gap-4'>
+        <div className='size-16 rounded-full bg-gray-100' />
+        <div className='h-20 w-full max-w-[200px] rounded bg-gray-100' />
+      </div>
+
+      {/* 날짜 및 시간 (아이콘 + 텍스트) */}
+      <div className='my-2 flex items-center gap-4'>
+        <div className='size-16 rounded-full bg-gray-100' />
+        <div className='h-20 w-full max-w-[170px] rounded bg-gray-100' />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/design-system/src/components/skeleton/index.tsx b/packages/design-system/src/components/skeleton/index.tsx
index cb65c034..015d3644 100644
--- a/packages/design-system/src/components/skeleton/index.tsx
+++ b/packages/design-system/src/components/skeleton/index.tsx
@@ -1 +1,2 @@
 export { default as ExperienceCardSkeleton } from './ExperienceCardSkeleton';
+export { default as NotificationCardSkeleton } from './NotificationCardSkeleton';
diff --git a/packages/design-system/src/pages/NotificationCardDoc.tsx b/packages/design-system/src/pages/NotificationCardDoc.tsx
index 3cb15e7e..c4acf1b7 100644
--- a/packages/design-system/src/pages/NotificationCardDoc.tsx
+++ b/packages/design-system/src/pages/NotificationCardDoc.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
+import { NotificationCardSkeleton } from '@/components';
 import Playground from '@/layouts/Playground';
 
 import NotificationCard from '../components/NotificationCard';
@@ -55,6 +56,7 @@ Header의 알림창 팝오버에서 보여지며, 알림은 개별 삭제 가능
           onClickDetail={() => navigate('/mypage/reservations-list')}
           onDelete={() => alert('삭제 API 요청')}
         />
+        <NotificationCardSkeleton />
         <NotificationCard
           content='메시지 파싱에 실패하면 이렇게 보여집니다.'
           onClickDetail={() => navigate('/mypage/reservations-list')}

From ba301f512b9537f5e9541447719be205ff52f99c Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 14:33:01 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20[#239]=20Feat:=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=20=ED=8C=9D=EC=98=A4=EB=B2=84=20=EB=82=B4=EC=97=90=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../notification/NotificationPopover.tsx      | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/what-today/src/components/notification/NotificationPopover.tsx b/apps/what-today/src/components/notification/NotificationPopover.tsx
index db5602a4..48102030 100644
--- a/apps/what-today/src/components/notification/NotificationPopover.tsx
+++ b/apps/what-today/src/components/notification/NotificationPopover.tsx
@@ -1,5 +1,13 @@
 import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { BellIcon, Button, DotIcon, NotificationCard, Popover, useToast } from '@what-today/design-system';
+import {
+  BellIcon,
+  Button,
+  DotIcon,
+  NotificationCard,
+  NotificationCardSkeleton,
+  Popover,
+  useToast,
+} from '@what-today/design-system';
 import type { AxiosError } from 'axios';
 import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -31,7 +39,7 @@ export default function NotificationPopover({ isMobile }: NotificationPopoverPro
    */
   const fetchNotifications = async ({ cursorId }: { cursorId: number | null }): Promise<NotificationsResponse> => {
     const params = {
-      size: 10,
+      size: 3,
       cursorId: cursorId || null,
     };
 
@@ -129,10 +137,17 @@ export default function NotificationPopover({ isMobile }: NotificationPopoverPro
         </Button>
       </Popover.Trigger>
       <Popover.Content className='mt-8 rounded-2xl border border-gray-100 bg-white p-10 shadow-sm'>
-        <h1 className='my-8 ml-auto px-16 font-bold text-gray-950'>알림 {data?.pages[0].totalCount}개</h1>
+        <h1 className='my-8 ml-auto px-16 font-bold text-gray-950'>알림 {data?.pages[0].totalCount ?? 0}개</h1>
 
-        <div ref={scrollContainerRef} className='relative max-h-400 w-300 overflow-y-scroll'>
-          {isLoading && <p className='text-md my-70 text-center text-gray-400'>Loading...</p>}
+        <section ref={scrollContainerRef} className='relative max-h-400 w-300 overflow-y-scroll'>
+          {isLoading && (
+            <>
+              <NotificationCardSkeleton />
+              <NotificationCardSkeleton />
+              <NotificationCardSkeleton />
+              <NotificationCardSkeleton />
+            </>
+          )}
           <div className='divide-y divide-gray-50'>
             {data?.pages.map((page) =>
               page.notifications.map((notification) => (
@@ -152,7 +167,8 @@ export default function NotificationPopover({ isMobile }: NotificationPopoverPro
             <p className='text-md my-70 text-center text-gray-400'>알림이 없습니다.</p>
           )}
           <div ref={observerRef} className='h-6 w-full' /> {/* 무한 스크롤 감지용 */}
-        </div>
+          {isFetchingNextPage && <NotificationCardSkeleton />}
+        </section>
       </Popover.Content>
     </Popover.Root>
   );

From a33ddd7f8c1b9bdc053db2928be62655332c0b07 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 14:35:38 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20[#239]=20Fix:=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20size=20=EC=9B=90=EC=83=81=EB=B3=B5?=
 =?UTF-8?q?=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/notification/NotificationPopover.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/what-today/src/components/notification/NotificationPopover.tsx b/apps/what-today/src/components/notification/NotificationPopover.tsx
index 48102030..b7d84fc9 100644
--- a/apps/what-today/src/components/notification/NotificationPopover.tsx
+++ b/apps/what-today/src/components/notification/NotificationPopover.tsx
@@ -39,7 +39,7 @@ export default function NotificationPopover({ isMobile }: NotificationPopoverPro
    */
   const fetchNotifications = async ({ cursorId }: { cursorId: number | null }): Promise<NotificationsResponse> => {
     const params = {
-      size: 3,
+      size: 10,
       cursorId: cursorId || null,
     };
 

From c1d21ab66eee08d5ee2f79a65638ee98969b5b80 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 14:43:12 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[#239]=20Refactor:=20U?=
 =?UTF-8?q?I=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design-system/src/components/NotificationCard.tsx     | 8 ++++----
 .../src/components/skeleton/NotificationCardSkeleton.tsx  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/NotificationCard.tsx b/packages/design-system/src/components/NotificationCard.tsx
index d1e1d15d..2eb13524 100644
--- a/packages/design-system/src/components/NotificationCard.tsx
+++ b/packages/design-system/src/components/NotificationCard.tsx
@@ -83,7 +83,7 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
 
   return (
     <div
-      className='text-md flex cursor-pointer flex-col gap-8 p-16'
+      className='text-md flex cursor-pointer flex-col gap-4 p-16 md:gap-8'
       onClick={(e) => {
         handleClickStop(e);
         onClickDetail();
@@ -92,7 +92,7 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
       <div className='flex items-center justify-between'>
         <div className='flex gap-8'>
           {confirm ? <UserBadge status='confirmed' /> : <UserBadge status='declined' />}
-          <h1 className='text-md font-semibold text-gray-900 md:text-lg'>
+          <h1 className='body-text font-semibold text-gray-950'>
             {confirm ? '예약이 승인되었어요!' : '예약이 거절되었어요.'}
           </h1>
         </div>
@@ -107,11 +107,11 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
           <DeleteIcon className='size-10' color='var(--color-gray-300)' />
         </Button>
       </div>
-      <div className='flex items-center gap-4 text-gray-600'>
+      <div className='caption-text flex items-center gap-4 text-gray-400'>
         <DocumentIcon className='size-14' />
         <p>{title}</p>
       </div>
-      <div className='flex items-center gap-4 text-gray-600'>
+      <div className='caption-text flex items-center gap-4 text-gray-400'>
         <ClockIcon className='size-14' />
         <p>
           {date.year}년 {date.month}월 {date.day}일 {date.startTime}~{date.endTime}
diff --git a/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx b/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx
index 3c247ab8..999754c2 100644
--- a/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx
+++ b/packages/design-system/src/components/skeleton/NotificationCardSkeleton.tsx
@@ -1,6 +1,6 @@
 export default function NotificationCardSkeleton() {
   return (
-    <div className='text-md flex animate-pulse cursor-pointer flex-col gap-8 p-16'>
+    <div className='text-md flex animate-pulse cursor-pointer flex-col gap-4 p-16 md:gap-8'>
       {/* 상단: 상태 뱃지 + 문구 + 삭제 버튼 */}
       <div className='flex items-center justify-between'>
         <div className='flex items-center gap-8'>

From c221c6852099243278e68dc8e9e8cc01ec39e286 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 18:30:29 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B=20[#239]=20Fix:=20text-gray-95?=
 =?UTF-8?q?0=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/src/components/NotificationCard.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/NotificationCard.tsx b/packages/design-system/src/components/NotificationCard.tsx
index 2eb13524..272997de 100644
--- a/packages/design-system/src/components/NotificationCard.tsx
+++ b/packages/design-system/src/components/NotificationCard.tsx
@@ -69,7 +69,7 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
     return (
       <div className='text-md flex flex-col gap-4 p-16'>
         <div className='flex items-center justify-between'>
-          <h1 className='text-md font-semibold text-gray-900 md:text-lg'>알림</h1>
+          <h1 className='text-md font-semibold md:text-lg'>알림</h1>
           <Button className='h-fit w-fit p-0' variant='none' onClick={onDelete}>
             <DeleteIcon className='size-10' color='var(--color-gray-300)' />
           </Button>
@@ -92,9 +92,7 @@ export default function NotificationCard({ content, onDelete, onClickDetail }: N
       <div className='flex items-center justify-between'>
         <div className='flex gap-8'>
           {confirm ? <UserBadge status='confirmed' /> : <UserBadge status='declined' />}
-          <h1 className='body-text font-semibold text-gray-950'>
-            {confirm ? '예약이 승인되었어요!' : '예약이 거절되었어요.'}
-          </h1>
+          <h1 className='body-text font-semibold'>{confirm ? '예약이 승인되었어요!' : '예약이 거절되었어요.'}</h1>
         </div>
         <Button
           className='h-fit w-fit p-0'