Feat/132/create edit gathering api : popOverCalendar, 약속만들기 시간선택 동작 개선

src/components/common/input/calendar-filter/index.tsx

@@ -12,7 +12,12 @@ export interface CalendarFilterProps {
   onChange: (date: Date) => void;
 }
 
-export default function CalendarFilter({ value, toDoDates, onChange }: CalendarFilterProps) {
+export default function CalendarFilter({
+  value,
+  toDoDates,
+  onChange,
+  ...rest
+}: CalendarFilterProps) {
   const [selected, setSelected] = useState<Date>(value);
 
   const handleSelect = (date: Date) => {
@@ -69,6 +74,7 @@ export default function CalendarFilter({ value, toDoDates, onChange }: CalendarF
             </Indicator>
           );
         }}
+        {...rest}
       />
     </DatesProvider>
   );

src/components/common/input/date-time-picker/date-time-picker.stories.tsx

@@ -29,7 +29,7 @@ export default meta;
 const Template: StoryFn<DateTimePickerProps> = function DateTimePickerStory() {
   const [date, setDate] = useState(new Date());
 
-  return <DateTimePicker fullDate={date} onChange={setDate} />;
+  return <DateTimePicker fullDate={date} onChange={(newValue) => setDate(new Date(newValue))} />;
 };
 
 export const DateTimePicker01 = Template.bind({});

src/components/common/input/date-time-picker/index.tsx

@@ -9,7 +9,7 @@ import IconArrow from '@/public/assets/icons/ic-arrow';
 
 export interface DateTimePickerProps {
   fullDate: Date;
-  onChange: (date: Date) => void;
+  onChange: (date: string) => void;
 }
 
 export default function DateTimePicker({ fullDate, onChange }: DateTimePickerProps) {
@@ -26,9 +26,17 @@ export default function DateTimePicker({ fullDate, onChange }: DateTimePickerPro
   };
 
   const handleTime = () => {
-    const newDate = dayjs(selected).hour(Number(hour)).minute(Number(minute)).toDate();
+    const newDate = new Date(selected);
+
+    newDate.setHours(Number(hour));
+    newDate.setMinutes(Number(minute));
+
+    const kstDate = new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000).toISOString();
+
     setSelected(newDate);
-    onChange(newDate);
+
+    // KST 기준 ISO 문자열 전달
+    onChange(kstDate);
   };
 
   return (

src/components/common/input/pop-over-calendar/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button, Popover } from '@mantine/core';
 import { useDisclosure, useMediaQuery } from '@mantine/hooks';
 import CalendarFilter from '@/src/components/common/input/calendar-filter';
@@ -11,46 +11,62 @@ export interface PopOverProps {
 }
 
 export default function PopOverCalendar({ value, onChange }: PopOverProps) {
-  const [opened, { close, open }] = useDisclosure(false);
-  const [inputTheme, setInputTheme] = useState('white');
+  const [opened, { open, close }] = useDisclosure();
+  const [inputTheme, setInputTheme] = useState(opened ? 'dark' : 'light');
   const [date, setDate] = useState<Date>(value);
   const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const popOver = useRef<HTMLDivElement>(null);
 
-  const handleClear = () => {
+  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     setDate(new Date());
     onChange(new Date());
     close();
   };
-  const handleSubmit = () => {
+  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     onChange(date);
     close();
   };
-
+  const handleOutsideClick = (e: MouseEvent) => {
+    if (popOver.current && !popOver.current.contains(e.target as Node)) {
+      close();
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('click', handleOutsideClick);
+    return () => document.removeEventListener('click', handleOutsideClick);
+  }, []);
   return (
     <Popover
+      withinPortal
+      opened={opened}
+      onClose={close}
+      closeOnClickOutside
+      closeOnEscape
+      clickOutsideEvents={['click', 'touchstart']}
       width={110}
       position={isMobile ? 'bottom' : 'bottom-start'}
       shadow="md"
-      opened={opened}
     >
       <Popover.Target>
         <Button
           type="button"
-          onFocus={() => {
-            setInputTheme('dark');
-            if (!opened) open();
-          }}
-          onBlur={() => {
-            setInputTheme('white');
-            if (opened) close();
-          }}
+          onClick={open}
           className="flex h-11 items-center justify-between rounded-xl border-0 bg-white px-3 py-2.5 text-base font-medium text-gray-800 hover:bg-white hover:text-gray-800 focus:bg-black focus:text-white"
         >
-          <span>날짜 선택</span>
+          <span>{date ? `${date.getMonth() + 1}월 ${date.getDate()}일` : '날짜 선택'}</span>
           <IconArrow direction="down" color={`${inputTheme === 'dark' ? '#ffffff' : '#D1D5DB'}`} />
         </Button>
       </Popover.Target>
-      <Popover.Dropdown w={336} h={386} px={43} py={24} className="rounded-xl shadow-xl">
+      <Popover.Dropdown
+        w={336}
+        h={386}
+        px={43}
+        py={24}
+        ref={popOver}
+        className="rounded-xl shadow-xl"
+      >
         <div className="flex flex-col gap-4">
           <CalendarFilter value={date} toDoDates={null} onChange={setDate} />
           <div className="flex justify-between gap-3">