[Style] 달력모달 TAB 이동간 발생하는 layout-shift 억제를 위한 동적 Height 트렌지션 애니메이션 적용

src/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer/index.tsx

@@ -16,16 +16,15 @@ export const CalendarFooter = ({
   const { selectedDates } = useContextDays();
 
   return (
-    <div className='text-text-md-semibold flex-center mt-3 flex-wrap gap-2.5 text-gray-700'>
+    <div className='text-text-md-semibold flex-center mt-5 flex-wrap gap-2.5 text-gray-700'>
       <span>{selectedDates[0].getFullYear()}년</span>
       <span className={currentTab === 'date' ? 'text-mint-600' : ''}>
         {selectedDates[0].getMonth() + 1}월 {selectedDates[0].getDate()}일
       </span>
       <span className={currentTab === 'time' ? 'text-mint-600' : ''}>
         {hours}:{minutes}
       </span>
-      <span className={meridiem === 'PM' ? 'text-gray-500' : ''}>AM</span>
-      <span className={meridiem === 'AM' ? 'text-gray-500' : ''}>PM</span>
+      <span className='w-6.25'>{meridiem}</span>
     </div>
   );
 };

src/components/pages/post-meetup/modals/date-picker-modal/calendar/index.tsx

@@ -7,6 +7,7 @@ import { DatePickerStateProvider } from '@rehookify/datepicker';
 import { CalendarFooter } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer';
 import { DatePicker } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar/date-picker';
 import { TimePicker } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker';
+import { AnimateDynamicHeight } from '@/components/shared';
 
 interface Props {
   currentTab: 'date' | 'time';
@@ -25,7 +26,7 @@ export const Calendar = ({ currentTab, dateFieldValue, updateDateField }: Props)
   const prevDate = dateFieldValue ? new Date(dateFieldValue) : null;
   const [selectedDates, onDatesChange] = useState<Date[]>([prevDate ?? nowDate]);
   const [selectedTime, onTimeChange] = useState<TimePickerState>(() =>
-    prevDate ? prevDateTo12Hour(prevDate) : { hours: '01', minutes: '00', meridiem: 'AM' },
+    prevDate ? prevDateTo12Hour(prevDate) : { hours: '12', minutes: '00', meridiem: 'AM' },
   );
 
   useEffect(() => {
@@ -59,17 +60,17 @@ export const Calendar = ({ currentTab, dateFieldValue, updateDateField }: Props)
           },
         }}
       >
-        <Activity mode={currentTab === 'date' ? 'visible' : 'hidden'}>
-          <DatePicker />
-        </Activity>
-
-        <Activity mode={currentTab === 'time' ? 'visible' : 'hidden'}>
-          <TimePicker
-            selectedTime={selectedTime}
-            onTimeChange={(type, val) => onTimeChange((prev) => ({ ...prev, [type]: val }))}
-          />
-        </Activity>
-
+        <AnimateDynamicHeight>
+          <Activity mode={currentTab === 'date' ? 'visible' : 'hidden'}>
+            <DatePicker />
+          </Activity>
+          <Activity mode={currentTab === 'time' ? 'visible' : 'hidden'}>
+            <TimePicker
+              selectedTime={selectedTime}
+              onTimeChange={(type, val) => onTimeChange((prev) => ({ ...prev, [type]: val }))}
+            />
+          </Activity>
+        </AnimateDynamicHeight>
         <CalendarFooter currentTab={currentTab} selectedTime={selectedTime} />
       </DatePickerStateProvider>
     </section>

src/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker/index.tsx

@@ -39,7 +39,9 @@ export const TimePicker = ({ selectedTime, onTimeChange }: Props) => {
 };
 
 const TIME_SELECTORS = Object.freeze({
-  hours: Array.from({ length: 12 }, (_, idx) => (idx + 1).toString().padStart(2, '0')),
+  hours: ['12'].concat(
+    Array.from({ length: 11 }, (_, idx) => (idx + 1).toString().padStart(2, '0')),
+  ),
   minutes: Array.from({ length: 12 }, (_, idx) => (idx * 5).toString().padStart(2, '0')),
   meridiem: ['AM', 'PM'],
 });

src/components/pages/post-meetup/modals/date-picker-modal/index.tsx

@@ -25,7 +25,7 @@ export const DatePickerModal = ({ field }: Props) => {
             <button
               key={name}
               className={clsx(
-                'flex-center h-12 grow-1 border-b-2 border-gray-200',
+                'flex-center h-12 grow-1 border-b-2 border-gray-200 transition-colors duration-300',
                 tabMenu === name && 'border-mint-500',
               )}
               type='button'
@@ -45,7 +45,7 @@ export const DatePickerModal = ({ field }: Props) => {
           updateDateField={(selectedDate: string) => field.handleChange(selectedDate)}
         />
 
-        <div className='flex-center mt-6 gap-2'>
+        <div className='flex-center mt-5 gap-2'>
           <button
             className='text-text-md-semibold grow-1 rounded-2xl border-1 border-gray-400 bg-white py-3.25 text-gray-600'
             type='button'

src/components/shared/animate-dynamic-height/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import * as m from 'motion/react-m';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const AnimateDynamicHeight = ({ children }: Props) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [height, setHeight] = useState<number | 'auto'>('auto');
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        const observedHeight = entries[0].contentRect.height;
+        setHeight(observedHeight);
+      });
+
+      resizeObserver.observe(containerRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, []);
+
+  return (
+    <m.div style={{ height }} animate={{ height }} transition={{ duration: 0.15 }}>
+      <div ref={containerRef}>{children}</div>
+    </m.div>
+  );
+};

src/components/shared/index.ts

@@ -1,3 +1,4 @@
+export { AnimateDynamicHeight } from './animate-dynamic-height';
 export { AuthSwitch } from './auth-switch-link';
 export { FormInput } from './form-input';
 export { SearchBar } from './search-bar';