From 10ba561bec18cdf3e6f833819e3fa87bccd3023d Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Wed, 21 Jan 2026 01:39:10 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix=20:=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=EB=B0=94=EB=80=90=EA=B3=B3=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=EB=90=98=EA=B2=8C=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/sidebar/components/AlbumParticipants.tsx | 10 ++++++++++
 .../sidebar/components/ScreenAlbumSidebar.tsx       | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/feature/album/detail/sidebar/components/AlbumParticipants.tsx b/src/feature/album/detail/sidebar/components/AlbumParticipants.tsx
index c5d83ab1..eab90322 100644
--- a/src/feature/album/detail/sidebar/components/AlbumParticipants.tsx
+++ b/src/feature/album/detail/sidebar/components/AlbumParticipants.tsx
@@ -1,5 +1,7 @@
 import { useGetAlbumInform } from '@/feature/upload/hooks/useGetAlbumInform';
 import BottomSheetModal from '@/global/components/modal/BottomSheetModal';
+import { GA_EVENTS } from '@/global/constants/gaEvents';
+import { trackGaEvent } from '@/global/utils/trackGaEvent';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import BottomSheetContentShare from './BottomSheetContentShare';
@@ -24,6 +26,13 @@ export default function AlbumParticipants({ albumId }: AlbumParticipantsProps) {
 
   const isMaker = data.myRole === 'MAKER';
 
+  const handleClickInvite = () => {
+    trackGaEvent(GA_EVENTS.click_invite, {
+      album_id: albumId,
+      access_type: data?.myRole === 'MAKER' ? 'creator' : 'member',
+    });
+  };
+
   return (
     <section className='bg-background-white rounded-[12px] px-5 pt-5 pb-7'>
       <div className='mb-3.5 flex items-center justify-between gap-3'>
@@ -53,6 +62,7 @@ export default function AlbumParticipants({ albumId }: AlbumParticipantsProps) {
               <button
                 type='button'
                 className='flex w-full items-center gap-3 py-2'
+                onClick={handleClickInvite}
               >
                 <div className='flex h-9 w-9 items-center justify-center rounded-full bg-[#F1F2F3]'>
                   <Plus width={20} height={20} color='#000' />
diff --git a/src/feature/album/detail/sidebar/components/ScreenAlbumSidebar.tsx b/src/feature/album/detail/sidebar/components/ScreenAlbumSidebar.tsx
index 676d0e40..9b59eab8 100644
--- a/src/feature/album/detail/sidebar/components/ScreenAlbumSidebar.tsx
+++ b/src/feature/album/detail/sidebar/components/ScreenAlbumSidebar.tsx
@@ -4,14 +4,16 @@ import { useGetAlbumInform } from '@/feature/upload/hooks/useGetAlbumInform';
 import { HEADER_HEIGHT } from '@/global/components/header/CustomHeader';
 import ConfirmModal from '@/global/components/modal/ConfirmModal';
 import Toast from '@/global/components/toast/Toast';
+import { GA_EVENTS } from '@/global/constants/gaEvents';
 import { convertUnicodeToEmoji } from '@/global/utils/convertEmoji';
 import {
   formatExpirationTime,
   getIsExpired,
 } from '@/global/utils/time/formatExpirationTime';
+import { trackGaEvent } from '@/global/utils/trackGaEvent';
 import { X } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useAlbumExitMutation } from '../hooks/useAlbumExitMutation';
 import AlbumParticipants from './AlbumParticipants';
 
@@ -35,6 +37,15 @@ export default function ScreenAlbumSidebar({
   const { mutateAsync } = useAlbumExitMutation();
   const [isClosing, setIsClosing] = useState(false);
 
+  useEffect(() => {
+    if (isOpen) {
+      trackGaEvent(GA_EVENTS.view_albumsidebar, {
+        album_id: albumId,
+        access_type: informData?.myRole === 'MAKER' ? 'creator' : 'member',
+      });
+    }
+  }, [isOpen]);
+
   if (!isOpen && !isClosing) return null;
   if (isPending) return null;
   if (isError) return null;

From ead0db964d9029bbfe6695c2bbd5ac5204561b55 Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Wed, 21 Jan 2026 01:46:09 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix=20:=20=EC=8A=A4=ED=94=BC=EB=84=88=20?=
 =?UTF-8?q?=EB=8F=8C=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/global/components/Spinner.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/global/components/Spinner.tsx b/src/global/components/Spinner.tsx
index 1c6cd964..e6fc889d 100644
--- a/src/global/components/Spinner.tsx
+++ b/src/global/components/Spinner.tsx
@@ -1,8 +1,21 @@
-export default function Spinner() {
+interface SpinnerProps {
+  color?: string; // ex) '#3B82F6', 'rgb(59,130,246)', 'var(--primary)'
+  size?: number; // px 단위
+}
+
+export default function Spinner({
+  color = '#ffffff', // 기본값 (tailwind primary-400 정도)
+  size = 32,
+}: SpinnerProps) {
   return (
     <div className='flex h-full w-full items-center justify-center py-10'>
       <svg
-        className='text-primary-400 h-8 w-8 animate-spin'
+        className='animate-spin'
+        style={{
+          color,
+          width: size,
+          height: size,
+        }}
         xmlns='http://www.w3.org/2000/svg'
         fill='none'
         viewBox='0 0 24 24'
@@ -11,7 +24,7 @@ export default function Spinner() {
           className='opacity-75'
           fill='currentColor'
           d='M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z'
-        ></path>
+        />
       </svg>
     </div>
   );

From e15184764242b9c7775d081d0a53e2aa871ee9d0 Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Wed, 21 Jan 2026 01:53:26 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix=20:=20=EC=82=AC=EC=9D=B4=EC=A6=88?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/global/components/Spinner.tsx b/src/global/components/Spinner.tsx
index e6fc889d..ded2d9ff 100644
--- a/src/global/components/Spinner.tsx
+++ b/src/global/components/Spinner.tsx
@@ -5,7 +5,7 @@ interface SpinnerProps {
 
 export default function Spinner({
   color = '#ffffff', // 기본값 (tailwind primary-400 정도)
-  size = 32,
+  size = 64,
 }: SpinnerProps) {
   return (
     <div className='flex h-full w-full items-center justify-center py-10'>

From 03a03b4b562ef52782c4d44a306e605e71000557 Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Wed, 21 Jan 2026 02:19:28 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix=20:=20=EB=82=A0=EC=A7=9C=EA=B0=80=20?=
 =?UTF-8?q?=EC=98=A4=EB=8A=98=EC=9D=B4=ED=9B=84=20=EB=82=A0=EC=A7=9C=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=AA=BB=ED=95=98=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/scrollable-date-picker.tsx  | 99 +++++++++++++++----
 .../album/4cut/components/ScreenAlbum4Cut.tsx |  2 +
 2 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/src/components/ui/scrollable-date-picker.tsx b/src/components/ui/scrollable-date-picker.tsx
index 870d9ee6..d0522677 100644
--- a/src/components/ui/scrollable-date-picker.tsx
+++ b/src/components/ui/scrollable-date-picker.tsx
@@ -128,52 +128,111 @@ export function ScrollableDatePicker({
 }: ScrollableDatePickerProps) {
   const currentDate = value || new Date();
 
-  const selectedYear = currentDate.getFullYear();
-  const selectedMonth = currentDate.getMonth() + 1;
-  const selectedDay = currentDate.getDate();
-
   // Generate years
   const currentYear = new Date().getFullYear();
   const minYear = minDate?.getFullYear() || 2020;
   const maxYear = maxDate?.getFullYear() || currentYear + 50;
 
+  const clamp = (value: number, min: number, max: number) =>
+    Math.min(Math.max(value, min), max);
+
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month, 0).getDate();
+  };
+
+  const getMinMonthForYear = (year: number) => {
+    if (minDate && year === minYear) {
+      return minDate.getMonth() + 1;
+    }
+    return 1;
+  };
+
+  const getMaxMonthForYear = (year: number) => {
+    if (maxDate && year === maxYear) {
+      return maxDate.getMonth() + 1;
+    }
+    return 12;
+  };
+
+  const getMinDayForMonth = (year: number, month: number) => {
+    if (minDate && year === minYear && month === minDate.getMonth() + 1) {
+      return minDate.getDate();
+    }
+    return 1;
+  };
+
+  const getMaxDayForMonth = (year: number, month: number) => {
+    const daysInMonth = getDaysInMonth(year, month);
+    if (maxDate && year === maxYear && month === maxDate.getMonth() + 1) {
+      return Math.min(daysInMonth, maxDate.getDate());
+    }
+    return daysInMonth;
+  };
+
+  const selectedYear = clamp(currentDate.getFullYear(), minYear, maxYear);
+  const minMonthForYear = getMinMonthForYear(selectedYear);
+  const maxMonthForYear = getMaxMonthForYear(selectedYear);
+  const selectedMonth = clamp(
+    currentDate.getMonth() + 1,
+    minMonthForYear,
+    maxMonthForYear,
+  );
+  const minDayForMonth = getMinDayForMonth(selectedYear, selectedMonth);
+  const maxDayForMonth = getMaxDayForMonth(selectedYear, selectedMonth);
+  const selectedDay = clamp(
+    currentDate.getDate(),
+    minDayForMonth,
+    maxDayForMonth,
+  );
+
   const years = React.useMemo(
     () => Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i),
     [minYear, maxYear],
   );
 
   const months = React.useMemo(
-    () => Array.from({ length: 12 }, (_, i) => i + 1),
-    [],
+    () =>
+      Array.from(
+        { length: maxMonthForYear - minMonthForYear + 1 },
+        (_, i) => minMonthForYear + i,
+      ),
+    [minMonthForYear, maxMonthForYear],
   );
 
-  const getDaysInMonth = (year: number, month: number) => {
-    return new Date(year, month, 0).getDate();
-  };
-
   const days = React.useMemo(
     () =>
       Array.from(
-        { length: getDaysInMonth(selectedYear, selectedMonth) },
-        (_, i) => i + 1,
+        { length: maxDayForMonth - minDayForMonth + 1 },
+        (_, i) => minDayForMonth + i,
       ),
-    [selectedYear, selectedMonth],
+    [minDayForMonth, maxDayForMonth],
   );
 
   const handleYearChange = (year: number) => {
-    const daysInNewMonth = getDaysInMonth(year, selectedMonth);
-    const newDay = Math.min(selectedDay, daysInNewMonth);
-    onChange(new Date(year, selectedMonth - 1, newDay));
+    const minMonth = getMinMonthForYear(year);
+    const maxMonth = getMaxMonthForYear(year);
+    const newMonth = clamp(selectedMonth, minMonth, maxMonth);
+    const minDay = getMinDayForMonth(year, newMonth);
+    const maxDay = getMaxDayForMonth(year, newMonth);
+    const newDay = clamp(selectedDay, minDay, maxDay);
+    onChange(new Date(year, newMonth - 1, newDay));
   };
 
   const handleMonthChange = (month: number) => {
-    const daysInNewMonth = getDaysInMonth(selectedYear, month);
-    const newDay = Math.min(selectedDay, daysInNewMonth);
-    onChange(new Date(selectedYear, month - 1, newDay));
+    const minMonth = getMinMonthForYear(selectedYear);
+    const maxMonth = getMaxMonthForYear(selectedYear);
+    const newMonth = clamp(month, minMonth, maxMonth);
+    const minDay = getMinDayForMonth(selectedYear, newMonth);
+    const maxDay = getMaxDayForMonth(selectedYear, newMonth);
+    const newDay = clamp(selectedDay, minDay, maxDay);
+    onChange(new Date(selectedYear, newMonth - 1, newDay));
   };
 
   const handleDayChange = (day: number) => {
-    onChange(new Date(selectedYear, selectedMonth - 1, day));
+    const minDay = getMinDayForMonth(selectedYear, selectedMonth);
+    const maxDay = getMaxDayForMonth(selectedYear, selectedMonth);
+    const newDay = clamp(day, minDay, maxDay);
+    onChange(new Date(selectedYear, selectedMonth - 1, newDay));
   };
 
   return (
diff --git a/src/feature/album/4cut/components/ScreenAlbum4Cut.tsx b/src/feature/album/4cut/components/ScreenAlbum4Cut.tsx
index b30329c2..0d32493a 100644
--- a/src/feature/album/4cut/components/ScreenAlbum4Cut.tsx
+++ b/src/feature/album/4cut/components/ScreenAlbum4Cut.tsx
@@ -117,6 +117,7 @@ export default function ScreenAlbum4Cut({ albumId }: ScreenAlbum4CutProps) {
     }
 
     try {
+      setIsDownloading(true);
       await showCaptureNode();
 
       const fileName = data?.title
@@ -136,6 +137,7 @@ export default function ScreenAlbum4Cut({ albumId }: ScreenAlbum4CutProps) {
       Toast.alert('이미지를 생성하지 못했습니다. 다시 시도해주세요.');
     } finally {
       setIsCaptureVisible(false);
+      setIsDownloading(false);
     }
   };
 

From a9ac00539c193bb0cc43d83db0e9fbac1668cba8 Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Wed, 21 Jan 2026 02:20:23 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix=20:=20cta=EB=AC=B8=EA=B5=AC=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/global/components/DateXInput.tsx b/src/global/components/DateXInput.tsx
index 79eeda97..aa614e04 100644
--- a/src/global/components/DateXInput.tsx
+++ b/src/global/components/DateXInput.tsx
@@ -105,7 +105,7 @@ export default function DateXInput({
                 />
               </div>
               <LongButton
-                text='시작하기'
+                text='확인'
                 noFixed={true}
                 className='mb-5'
                 onClick={handleConfirm}