diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
deleted file mode 100644
index 25042200..00000000
--- a/src/components/ui/calendar.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-'use client';
-
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from 'lucide-react';
-import * as React from 'react';
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
-
-import { Button, buttonVariants } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = 'label',
-  buttonVariant = 'ghost',
-  formatters,
-  fromDate,
-  toDate,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
-  fromDate?: Date;
-  toDate?: Date;
-}) {
-  const defaultClassNames = getDefaultClassNames();
-
-  return (
-    <DayPicker
-      fromDate={fromDate}
-      toDate={toDate}
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString('default', { month: 'short' }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn('w-fit', defaultClassNames.root),
-        months: cn(
-          'flex gap-4 flex-col md:flex-row relative',
-          defaultClassNames.months,
-        ),
-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-        nav: cn(
-          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
-          defaultClassNames.nav,
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_previous,
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_next,
-        ),
-        month_caption: cn(
-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
-          defaultClassNames.dropdowns,
-        ),
-        dropdown_root: cn(
-          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
-          defaultClassNames.dropdown_root,
-        ),
-        dropdown: cn(
-          'absolute bg-popover inset-0 opacity-0',
-          defaultClassNames.dropdown,
-        ),
-        caption_label: cn(
-          'select-none font-medium',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
-          defaultClassNames.caption_label,
-        ),
-        table: 'w-full border-collapse',
-        weekdays: cn('flex', defaultClassNames.weekdays),
-        weekday: cn(
-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
-          defaultClassNames.weekday,
-        ),
-        week: cn('flex w-full mt-2', defaultClassNames.week),
-        week_number_header: cn(
-          'select-none w-(--cell-size)',
-          defaultClassNames.week_number_header,
-        ),
-        week_number: cn(
-          'text-[0.8rem] select-none text-muted-foreground',
-          defaultClassNames.week_number,
-        ),
-        day: cn(
-          'relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
-          props.showWeekNumber
-            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
-            : '[&:first-child[data-selected=true]_button]:rounded-l-md',
-          defaultClassNames.day,
-        ),
-        range_start: cn(
-          'rounded-l-md bg-accent',
-          defaultClassNames.range_start,
-        ),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-        today: cn(
-          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
-          defaultClassNames.today,
-        ),
-        outside: cn(
-          'text-muted-foreground aria-selected:text-muted-foreground',
-          defaultClassNames.outside,
-        ),
-        disabled: cn(
-          'text-muted-foreground opacity-50',
-          defaultClassNames.disabled,
-        ),
-        hidden: cn('invisible', defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot='calendar'
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          );
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === 'left') {
-            return (
-              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
-            );
-          }
-
-          if (orientation === 'right') {
-            return (
-              <ChevronRightIcon
-                className={cn('size-4', className)}
-                {...props}
-              />
-            );
-          }
-
-          return (
-            <ChevronDownIcon className={cn('size-4', className)} {...props} />
-          );
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className='flex size-(--cell-size) items-center justify-center text-center'>
-                {children}
-              </div>
-            </td>
-          );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  );
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
-
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-
-  return (
-    <Button
-      ref={ref}
-      variant='ghost'
-      size='icon'
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
-        defaultClassNames.day,
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Calendar, CalendarDayButton };
diff --git a/src/components/ui/scrollable-date-picker.tsx b/src/components/ui/scrollable-date-picker.tsx
new file mode 100644
index 00000000..870d9ee6
--- /dev/null
+++ b/src/components/ui/scrollable-date-picker.tsx
@@ -0,0 +1,219 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+const ITEM_HEIGHT = 32;
+const CONTAINER_HEIGHT = 236;
+
+interface PickerColumnProps {
+  items: number[];
+  value: number;
+  label: string;
+  onChange: (value: number) => void;
+}
+
+function PickerColumn({ items, value, label, onChange }: PickerColumnProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const isScrollingRef = React.useRef(false);
+  const scrollTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const valueRef = React.useRef(value);
+
+  // Keep valueRef in sync with the latest value prop
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+
+  // Calculate padding to center items in selection indicator
+  const paddingTop = (CONTAINER_HEIGHT - ITEM_HEIGHT) / 2; // 102px
+
+  // Scroll to value on mount and when value changes externally
+  React.useEffect(() => {
+    if (containerRef.current && !isScrollingRef.current) {
+      const index = items.indexOf(value);
+      if (index !== -1) {
+        containerRef.current.scrollTop = index * ITEM_HEIGHT;
+      }
+    }
+  }, [value, items]);
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+
+    // Clear existing timeout
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    isScrollingRef.current = true;
+
+    // Debounce: wait for scroll to stop
+    scrollTimeoutRef.current = setTimeout(() => {
+      if (!containerRef.current) return;
+
+      const scrollTop = containerRef.current.scrollTop;
+      const index = Math.round(scrollTop / ITEM_HEIGHT);
+      const clampedIndex = Math.max(0, Math.min(index, items.length - 1));
+
+      // Snap to exact position
+      containerRef.current.scrollTop = clampedIndex * ITEM_HEIGHT;
+
+      const newValue = items[clampedIndex];
+      if (newValue !== undefined && newValue !== valueRef.current) {
+        onChange(newValue);
+      }
+
+      isScrollingRef.current = false;
+    }, 100);
+  };
+
+  const handleItemClick = (index: number) => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: index * ITEM_HEIGHT,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  return (
+    <div className='relative h-[236px] overflow-hidden'>
+      <div
+        ref={containerRef}
+        className='scrollbar-hide h-full snap-y snap-mandatory overflow-y-auto scroll-smooth'
+        onScroll={handleScroll}
+      >
+        {/* Top padding spacer */}
+        <div style={{ height: paddingTop }} />
+
+        {items.map((item, index) => (
+          <div
+            key={item}
+            className='flex h-8 cursor-pointer snap-center items-center justify-center'
+            onClick={() => handleItemClick(index)}
+          >
+            <div
+              className={cn(
+                'typo-heading-sm-medium whitespace-nowrap transition-colors duration-200',
+                value === item ? 'text-text-basic' : 'text-text-disabled',
+              )}
+            >
+              {item}
+              {label}
+            </div>
+          </div>
+        ))}
+
+        {/* Bottom padding spacer */}
+        <div style={{ height: paddingTop }} />
+      </div>
+    </div>
+  );
+}
+
+interface ScrollableDatePickerProps {
+  value?: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+export function ScrollableDatePicker({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+}: 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 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),
+    [],
+  );
+
+  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,
+      ),
+    [selectedYear, selectedMonth],
+  );
+
+  const handleYearChange = (year: number) => {
+    const daysInNewMonth = getDaysInMonth(year, selectedMonth);
+    const newDay = Math.min(selectedDay, daysInNewMonth);
+    onChange(new Date(year, selectedMonth - 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 handleDayChange = (day: number) => {
+    onChange(new Date(selectedYear, selectedMonth - 1, day));
+  };
+
+  return (
+    <div className='relative mx-auto flex h-[236px] w-full max-w-sm items-center justify-center overflow-hidden'>
+      {/* Selection Indicator */}
+      <div className='bg-element-gray-light pointer-events-none absolute inset-x-4 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[6px]' />
+
+      {/* Columns Container */}
+      <div className='z-10 flex h-[236px] w-full justify-center px-6'>
+        <div className='relative h-full min-w-0 flex-1'>
+          <PickerColumn
+            items={years}
+            value={selectedYear}
+            label='년'
+            onChange={handleYearChange}
+          />
+        </div>
+        <div className='relative h-full min-w-0 flex-1'>
+          <PickerColumn
+            items={months}
+            value={selectedMonth}
+            label='월'
+            onChange={handleMonthChange}
+          />
+        </div>
+        <div className='relative h-full min-w-0 flex-1'>
+          <PickerColumn
+            items={days}
+            value={selectedDay}
+            label='일'
+            onChange={handleDayChange}
+          />
+        </div>
+      </div>
+
+      {/* Top fade gradient */}
+      <div className='pointer-events-none absolute inset-x-0 top-0 z-20 h-24 bg-gradient-to-b from-white to-transparent' />
+
+      {/* Bottom fade gradient */}
+      <div className='pointer-events-none absolute inset-x-0 bottom-0 z-20 h-24 bg-gradient-to-t from-white to-transparent' />
+    </div>
+  );
+}
diff --git a/src/feature/album/detail/components/AlbumInfos.tsx b/src/feature/album/detail/components/AlbumInfos.tsx
index 5e7c6242..b7864c59 100644
--- a/src/feature/album/detail/components/AlbumInfos.tsx
+++ b/src/feature/album/detail/components/AlbumInfos.tsx
@@ -2,12 +2,12 @@
 
 import { AlbumInvitationResponseSchema } from '@/global/api/ep';
 import { useAlbumTypeStore } from '@/store/useAlbumTypeStore';
-import { forwardRef } from 'react';
 import { useShallow } from 'zustand/shallow';
 import AlbumBestCut from './AlbumBestCut';
 import { AlbumInfoSummary } from './AlbumInfoSummary';
 
 interface AlbumInfosProps {
+  ref?: React.Ref<HTMLElement>;
   albumId: string;
   albumInfo?: AlbumInvitationResponseSchema;
   isLoading: boolean;
@@ -15,29 +15,25 @@ interface AlbumInfosProps {
   photoCount?: number;
 }
 
-const AlbumInfos = forwardRef<HTMLElement, AlbumInfosProps>(
-  ({ albumId, photoCount, ...rest }, ref) => {
-    const { albumType, setAlbumType } = useAlbumTypeStore(
-      useShallow((state) => ({
-        albumType: state.albumType,
-        setAlbumType: state.setAlbumType,
-      })),
-    );
+function AlbumInfos({ ref, albumId, photoCount, ...rest }: AlbumInfosProps) {
+  const { albumType, setAlbumType } = useAlbumTypeStore(
+    useShallow((state) => ({
+      albumType: state.albumType,
+      setAlbumType: state.setAlbumType,
+    })),
+  );
 
-    if (albumType === 'deep') return null;
+  if (albumType === 'deep') return null;
 
-    return (
-      <section
-        ref={ref}
-        className='border-divider-gray-light flex flex-col gap-6 border-b-[6px] px-5 py-4'
-      >
-        <AlbumInfoSummary {...rest} />
-        <AlbumBestCut albumId={albumId} photoCount={photoCount} />
-      </section>
-    );
-  },
-);
-
-AlbumInfos.displayName = 'AlbumInfos';
+  return (
+    <section
+      ref={ref}
+      className='border-divider-gray-light flex flex-col gap-6 border-b-[6px] px-5 py-4'
+    >
+      <AlbumInfoSummary {...rest} />
+      <AlbumBestCut albumId={albumId} photoCount={photoCount} />
+    </section>
+  );
+}
 
 export default AlbumInfos;
diff --git a/src/global/components/DateXInput.tsx b/src/global/components/DateXInput.tsx
index 8cd0982c..bb9fa4c0 100644
--- a/src/global/components/DateXInput.tsx
+++ b/src/global/components/DateXInput.tsx
@@ -1,14 +1,18 @@
 'use client';
-import { Calendar } from '@/components/ui/calendar';
+
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import { ScrollableDatePicker } from '@/components/ui/scrollable-date-picker';
 import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
+import LongButton from './LongButton';
 
 interface DateXInputProps {
   label?: string;
@@ -41,9 +45,26 @@ export default function DateXInput({
       ? new Date(value)
       : undefined;
 
+  // 내부 임시 상태 - Drawer 열릴 때 초기화됨
+  const [tempDate, setTempDate] = React.useState<Date>(
+    parsedDate || new Date(),
+  );
+
+  // Drawer 열릴 때 현재 값으로 tempDate 초기화
+  React.useEffect(() => {
+    if (open) {
+      setTempDate(parsedDate || new Date());
+    }
+  }, [open]);
+
   const minDate = min ? new Date(min) : undefined;
   const maxDate = max ? new Date(max) : undefined;
 
+  const handleConfirm = () => {
+    onChange(format(tempDate, 'yyyy-MM-dd'));
+    setOpen(false);
+  };
+
   return (
     <div className={className}>
       <div className='flex flex-col gap-2'>
@@ -52,8 +73,8 @@ export default function DateXInput({
             {label}
           </div>
         )}
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
             <button
               type='button'
               disabled={disabled}
@@ -70,34 +91,29 @@ export default function DateXInput({
               </span>
               <CalendarIcon className='text-text-subtler ml-2 h-5 w-5' />
             </button>
-          </PopoverTrigger>
-          <PopoverContent
-            align='start'
-            className='border-none bg-transparent p-0 shadow-none'
-          >
-            <Calendar
-              mode='single'
-              selected={parsedDate}
-              onSelect={(date: Date | undefined) => {
-                if (date) {
-                  onChange(format(date, 'yyyy-MM-dd'));
-                  setOpen(false);
-                }
-              }}
-              fromDate={minDate}
-              toDate={maxDate}
-            />
-          </PopoverContent>
-        </Popover>
-        {(error || helperText) && (
-          <div
-            className={`typo-caption-sm-medium px-2 ${
-              error ? 'text-text-error' : 'text-text-subtier'
-            }`}
-          >
-            {error || helperText}
-          </div>
-        )}
+          </DrawerTrigger>
+          <DrawerContent showHandle={false} className='bg-background-white'>
+            <div className='mx-auto w-full max-w-sm px-6'>
+              <DrawerHeader className='typo-heading-md-bold px-0 pb-1.5'>
+                <DrawerTitle className='text-start'>날짜 선택</DrawerTitle>
+              </DrawerHeader>
+              <div className='' data-vaul-no-drag>
+                <ScrollableDatePicker
+                  value={tempDate}
+                  onChange={setTempDate}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                />
+              </div>
+              <LongButton
+                text='시작하기'
+                noFixed={true}
+                className='mb-5'
+                onClick={handleConfirm}
+              />
+            </div>
+          </DrawerContent>
+        </Drawer>
       </div>
     </div>
   );
diff --git a/src/global/components/LongButton.tsx b/src/global/components/LongButton.tsx
index ebe8cc41..3ba12534 100644
--- a/src/global/components/LongButton.tsx
+++ b/src/global/components/LongButton.tsx
@@ -7,6 +7,7 @@ interface LongButtonProps {
   noFixed?: boolean; // true면 fixed 해제하고 가로 100% 채움
   height?: number; // 버튼 세로(px)
   safeArea?: boolean; // false면 safe-area-inset-bottom 미적용
+  className?: string; // 추가 className
 }
 
 export default function LongButton({
@@ -18,6 +19,7 @@ export default function LongButton({
   noFixed = false,
   height,
   safeArea = true,
+  className = '',
 }: LongButtonProps) {
   // noFixed가 true면 스타일 속성 없음, false면 left/right/bottom 값 적용
   const buttonStyle = {
@@ -45,7 +47,7 @@ export default function LongButton({
         disabled
           ? 'bg-button-disabled-fill text-text-disabled cursor-not-allowed'
           : 'bg-button-primary-fill text-text-primary active:bg-button-primary-fill-pressed active:text-text-primary'
-      } `}
+      } ${className}`}
     >
       {text}
     </button>