diff --git a/packages/common/components/src/ui/date-picker/index.tsx b/packages/common/components/src/ui/date-picker/index.tsx
index ee5d37872..67265df0e 100644
--- a/packages/common/components/src/ui/date-picker/index.tsx
+++ b/packages/common/components/src/ui/date-picker/index.tsx
@@ -2,7 +2,7 @@ import "./date-picker.css";
 
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import type { DayPickerSingleProps } from "react-day-picker";
+import type { DayPicker } from "react-day-picker";
 
 import { cn } from "../../lib/utils";
 import { Button } from "../button";
@@ -12,12 +12,15 @@ import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 type DatePickerProps = {
   placeholder?: string;
   disabled?: boolean;
-} & DayPickerSingleProps;
+  selected?: Date;
+  zIndex?: number; // z-index prop 추가
+} & React.ComponentProps<typeof DayPicker>;
 
 export function DatePicker({
   className,
   placeholder = "날짜 선택",
   disabled,
+  zIndex, // zIndex prop 받기
   ...props
 }: DatePickerProps) {
   return (
@@ -36,8 +39,13 @@ export function DatePicker({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
-        <Calendar initialFocus classNames={{ cell: "rounded-md" }} {...props} />
+      <PopoverContent
+        className={cn(
+          "w-auto p-0",
+          zIndex ? `z-[${zIndex}]` : "" // zIndex가 있으면 적용, 없으면 기본값
+        )}
+      >
+        <Calendar classNames={{ cell: "rounded-md" }} {...props} />
       </PopoverContent>
     </Popover>
   );