[Style] 모임생성 time-picker 모달 작업

src/app/post-meetup/page.tsx

@@ -3,11 +3,11 @@
 import { useForm } from '@tanstack/react-form';
 
 import {
-  MeetupAddressField,
   MeetupCapField,
   MeetupDateField,
   MeetupDetailField,
   MeetupImagesField,
+  MeetupLocationField,
   MeetupSubmitButton,
   MeetupTagsField,
   MeetupTitleField,
@@ -17,14 +17,11 @@ const PostMeetupPage = () => {
   const form = useForm({
     defaultValues: {
       title: '',
-      address: '',
-      dateAndTime: {
-        date: '',
-        time: '',
-      },
-      cap: 0,
+      location: '',
+      startTime: '',
+      maxParticipants: 0,
       images: {},
-      detail: '',
+      description: '',
       tags: [] as string[],
     },
     onSubmit: ({ value }) => {
@@ -42,11 +39,17 @@ const PostMeetupPage = () => {
       >
         <section className='px-4'>
           <form.Field children={(field) => <MeetupTitleField field={field} />} name='title' />
-          <form.Field children={(field) => <MeetupAddressField field={field} />} name='address' />
-          <form.Field children={(field) => <MeetupDateField field={field} />} name='dateAndTime' />
-          <form.Field children={(field) => <MeetupCapField field={field} />} name='cap' />
+          <form.Field children={(field) => <MeetupLocationField field={field} />} name='location' />
+          <form.Field children={(field) => <MeetupDateField field={field} />} name='startTime' />
+          <form.Field
+            children={(field) => <MeetupCapField field={field} />}
+            name='maxParticipants'
+          />
           <form.Field children={(field) => <MeetupImagesField field={field} />} name='images' />
-          <form.Field children={(field) => <MeetupDetailField field={field} />} name='detail' />
+          <form.Field
+            children={(field) => <MeetupDetailField field={field} />}
+            name='description'
+          />
           <form.Field children={(field) => <MeetupTagsField field={field} />} name='tags' />
         </section>
 

src/components/pages/post-meetup/fields/date-field/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { AnyFieldApi } from '@tanstack/react-form';
+import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 import { DatePickerModal } from '@/components/pages/post-meetup/modals/date-picker-modal';
@@ -13,29 +14,56 @@ interface Props {
 
 export const MeetupDateField = ({ field }: Props) => {
   const { open } = useModal();
+  const formattedDate = formatDate(new Date(field.state.value), 'YY.MM.DD - HH:mm');
 
-  const value = field.state.value.date + field.state.value.time;
+  const onInputClick = () => {
+    open(<DatePickerModal field={field} />);
+  };
 
   return (
     <div className='mt-6 flex w-full flex-col gap-1'>
-      <Label htmlFor='post-meetup-date' required>
+      <Label htmlFor='post-meetup-date' required onClick={onInputClick}>
         모임 날짜
       </Label>
       <button
         className='bg-mono-white focus:border-mint-500 relative cursor-pointer rounded-2xl border border-gray-300 p-4 pl-11 focus:outline-none'
         type='button'
-        onClick={() => open(<DatePickerModal field={field} />)}
+        onClick={onInputClick}
       >
         <Icon
           id='calendar-1'
           width={20}
           className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
           height={20}
         />
-        <p className='text-left text-gray-500'>
-          {value.trim() ? value : '날짜와 시간을 선택해주세요'}
+        <p
+          className={clsx(
+            'text-text-md-medium text-left text-gray-500',
+            formattedDate && 'text-gray-800',
+          )}
+        >
+          {formattedDate ? formattedDate : '날짜와 시간을 선택해주세요'}
         </p>
       </button>
     </div>
   );
 };
+
+const formatDate = (date: Date, formatString: string) => {
+  if (isNaN(date.getTime())) return false;
+
+  const year = date.getFullYear().toString().substring(2, 4);
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+
+  return formatString
+    .replace(/YY/g, year)
+    .replace(/MM/g, month)
+    .replace(/DD/g, day)
+    .replace(/HH/g, hours)
+    .replace(/mm/g, minutes)
+    .replace(/ss/g, seconds);
+};

src/components/pages/post-meetup/fields/detail-feild/index.tsx

@@ -11,11 +11,11 @@ interface Props {
 export const MeetupDetailField = ({ field }: Props) => {
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
-      <Label htmlFor='post-meetup-detail' required>
-        모임 날짜
+      <Label htmlFor='post-meetup-Detail' required>
+        모임 상세 정보
       </Label>
       <textarea
-        id='post-meetup-detail'
+        id='post-meetup-Detail'
         className='bg-mono-white focus:border-mint-500 text-text-md-medium h-40 w-full resize-none rounded-2xl border border-gray-300 px-5 py-4 text-gray-800 focus:outline-none'
         maxLength={300}
         placeholder='모임에 대해 설명해주세요'

src/components/pages/post-meetup/fields/address-field/index.tsx → src/components/pages/post-meetup/fields/location-field/index.tsx

@@ -9,14 +9,14 @@ interface Props {
   field: AnyFieldApi;
 }
 
-export const MeetupAddressField = ({ field }: Props) => {
+export const MeetupLocationField = ({ field }: Props) => {
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
-      <Label htmlFor='post-meetup-address' required>
+      <Label htmlFor='post-meetup-location' required>
         모임 장소
       </Label>
       <Input
-        id='post-meetup-address'
+        id='post-meetup-location'
         className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
         frontIcon={
           <Icon

src/components/pages/post-meetup/index.ts

@@ -1,8 +1,8 @@
-export { MeetupAddressField } from './fields/address-field';
 export { MeetupCapField } from './fields/cap-field';
 export { MeetupDateField } from './fields/date-field';
 export { MeetupDetailField } from './fields/detail-feild';
 export { MeetupImagesField } from './fields/images-field';
+export { MeetupLocationField } from './fields/location-field';
 export { MeetupTagsField } from './fields/tags-field';
 export { MeetupTitleField } from './fields/title-field';
 export { MeetupSubmitButton } from './post-button';

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

@@ -1,24 +1,31 @@
-import { useContextCalendars, useContextDays } from '@rehookify/datepicker';
+'use client';
+
+import { useContextDays } from '@rehookify/datepicker';
+
+import type { TimePickerState } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar';
 
 interface Props {
   currentTab: 'date' | 'time';
+  selectedTime: TimePickerState;
 }
 
-export const CalendarFooter = ({ currentTab }: Props) => {
-  const { calendars } = useContextCalendars();
+export const CalendarFooter = ({
+  selectedTime: { hours, minutes, meridiem },
+  currentTab,
+}: Props) => {
   const { selectedDates } = useContextDays();
 
-  const { year, month } = calendars[0];
-
   return (
     <div className='text-text-md-semibold flex-center mt-3 flex-wrap gap-2.5 text-gray-700'>
-      <span>{year}년</span>
+      <span>{selectedDates[0].getFullYear()}년</span>
       <span className={currentTab === 'date' ? 'text-mint-600' : ''}>
-        {month}월 {selectedDates[0].getDate()}일
+        {selectedDates[0].getMonth() + 1}월 {selectedDates[0].getDate()}일
+      </span>
+      <span className={currentTab === 'time' ? 'text-mint-600' : ''}>
+        {hours}:{minutes}
       </span>
-      <span className={currentTab === 'time' ? 'text-mint-600' : ''}>12:20</span>
-      <span>AM</span>
-      <span>PM</span>
+      <span className={meridiem === 'PM' ? 'text-gray-500' : ''}>AM</span>
+      <span className={meridiem === 'AM' ? 'text-gray-500' : ''}>PM</span>
     </div>
   );
 };

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

@@ -1,45 +1,39 @@
 'use client';
 
-import { useEffect } from 'react';
-
 import {
   useContextCalendars,
   useContextDatePickerOffsetPropGetters,
-  useContextDays,
   useContextDaysPropGetters,
 } from '@rehookify/datepicker';
 import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 
-interface Props {
-  handleDateChange: (selectedDate: string) => void;
-}
-
-export const DatePicker = ({ handleDateChange }: Props) => {
-  const { formattedDates } = useContextDays();
+export const DatePicker = () => {
   const { calendars, weekDays } = useContextCalendars();
   const { addOffset, subtractOffset } = useContextDatePickerOffsetPropGetters();
   const { dayButton } = useContextDaysPropGetters();
 
-  const { month, days } = calendars[0];
-
-  useEffect(() => {
-    handleDateChange(formattedDates[0].toString());
-  }, [formattedDates]);
+  const { year, month, days } = calendars[0];
 
   return (
-    <div>
-      <div className='flex justify-end gap-4'>
-        <button {...subtractOffset({ months: 1 })} aria-label='Previous month'>
-          <Icon id='chevron-left-1' className='text-gray-600' />
-        </button>
-        <button {...addOffset({ months: 1 })} aria-label='Next month'>
-          <Icon id='chevron-right-1' className='text-gray-600' />
-        </button>
+    <div className='border-b-1 pb-3'>
+      <div className='flex-between px-2'>
+        <p className='text-text-md-semibold text-gray-800'>
+          {year} {month}
+        </p>
+
+        <div className='flex justify-end gap-4'>
+          <button {...subtractOffset({ months: 1 })} aria-label='Previous month'>
+            <Icon id='chevron-left-1' className='text-gray-600' />
+          </button>
+          <button {...addOffset({ months: 1 })} aria-label='Next month'>
+            <Icon id='chevron-right-1' className='text-gray-600' />
+          </button>
+        </div>
       </div>
 
-      <div className='mt-2 border-b-1 border-gray-200 pb-3'>
+      <div className='mt-2 border-gray-200'>
         <ul className='grid grid-cols-7 text-gray-800'>
           {weekDays.map((day) => (
             <li key={`${month}-${day}`} className='flex-center size-10'>
@@ -58,7 +52,7 @@ export const DatePicker = ({ handleDateChange }: Props) => {
                   !d.inCurrentMonth && 'text-gray-600',
                 )}
               >
-                {d.day}
+                {d.day.replace('일', '')}
               </button>
             </li>
           ))}

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

@@ -1,18 +1,39 @@
-import { Activity, useState } from 'react';
+'use client';
+
+import { Activity, useEffect, useState } from 'react';
 
 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';
 
 interface Props {
   currentTab: 'date' | 'time';
-  handleDateChange: (selectedDate: string) => void;
+  dateFieldValue: string;
+  updateDateField: (selectedDate: string) => void;
 }
 
-export const Calendar = ({ currentTab, handleDateChange }: Props) => {
+export type TimePickerState = {
+  hours: string;
+  minutes: string;
+  meridiem: 'AM' | 'PM';
+};
+
+export const Calendar = ({ currentTab, dateFieldValue, updateDateField }: Props) => {
   const nowDate = new Date();
-  const [selectedDates, onDatesChange] = useState<Date[]>([nowDate]);
+  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' },
+  );
+
+  useEffect(() => {
+    const { newHours, newMinutes } = selectedTimeTo24Hour(selectedTime);
+
+    selectedDates[0].setHours(newHours, newMinutes, 0, 0);
+    updateDateField(selectedDates[0].toString());
+  }, [selectedDates, selectedTime]);
 
   return (
     <section className='mt-4 select-none'>
@@ -21,9 +42,13 @@ export const Calendar = ({ currentTab, handleDateChange }: Props) => {
           selectedDates,
           onDatesChange,
           locale: {
+            locale: 'ko',
             day: 'numeric',
             weekday: 'short',
             monthName: 'numeric',
+            hour12: true,
+            hour: '2-digit',
+            minute: '2-digit',
           },
           dates: {
             minDate: nowDate,
@@ -35,11 +60,41 @@ export const Calendar = ({ currentTab, handleDateChange }: Props) => {
         }}
       >
         <Activity mode={currentTab === 'date' ? 'visible' : 'hidden'}>
-          <DatePicker handleDateChange={handleDateChange} />
+          <DatePicker />
+        </Activity>
+
+        <Activity mode={currentTab === 'time' ? 'visible' : 'hidden'}>
+          <TimePicker
+            selectedTime={selectedTime}
+            onTimeChange={(type, val) => onTimeChange((prev) => ({ ...prev, [type]: val }))}
+          />
         </Activity>
 
-        <CalendarFooter currentTab={currentTab} />
+        <CalendarFooter currentTab={currentTab} selectedTime={selectedTime} />
       </DatePickerStateProvider>
     </section>
   );
 };
+
+const selectedTimeTo24Hour = ({ hours, minutes, meridiem }: TimePickerState) => {
+  let newHours = Number(hours);
+  const newMinutes = Number(minutes);
+
+  if (meridiem === 'PM' && hours !== '12') {
+    newHours += 12;
+  } else if (meridiem === 'AM' && hours === '12') {
+    newHours = 0;
+  }
+
+  return { newHours, newMinutes };
+};
+
+const prevDateTo12Hour = (prevDate: Date): TimePickerState => {
+  let hours = (prevDate.getHours() % 12).toString().padStart(2, '0');
+  const minutes = prevDate.getMinutes().toString().padStart(2, '0');
+  const meridiem = prevDate.getHours() >= 12 ? 'PM' : 'AM';
+
+  if (hours === '00') hours = '12';
+
+  return { hours, minutes, meridiem };
+};