From f99b21c26033b217b6bac7e40f4ab53ce1a6fee1 Mon Sep 17 00:00:00 2001
From: HopeFullee <john_lee0607@naver.com>
Date: Wed, 10 Dec 2025 17:31:32 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A8=EC=9E=84=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20time-picker=20=EB=AA=A8=EB=8B=AC=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/post-meetup/page.tsx                  | 27 ++++----
 .../post-meetup/fields/date-field/index.tsx   | 38 +++++++++--
 .../post-meetup/fields/detail-feild/index.tsx |  6 +-
 .../index.tsx                                 |  6 +-
 src/components/pages/post-meetup/index.ts     |  2 +-
 .../calendar/calendar-footer/index.tsx        | 27 +++++---
 .../calendar/date-picker/index.tsx            | 42 +++++-------
 .../date-picker-modal/calendar/index.tsx      | 67 +++++++++++++++++--
 .../calendar/time-picker/index.tsx            | 46 ++++++++++++-
 .../modals/date-picker-modal/index.tsx        | 11 ++-
 src/styles/base.css                           |  4 ++
 src/styles/globals.css                        |  4 --
 src/styles/layout.css                         | 12 ++++
 13 files changed, 216 insertions(+), 76 deletions(-)
 rename src/components/pages/post-meetup/fields/{address-field => location-field}/index.tsx (86%)

diff --git a/src/app/post-meetup/page.tsx b/src/app/post-meetup/page.tsx
index bd6502f6..dfb49c95 100644
--- a/src/app/post-meetup/page.tsx
+++ b/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>
 
diff --git a/src/components/pages/post-meetup/fields/date-field/index.tsx b/src/components/pages/post-meetup/fields/date-field/index.tsx
index 217e3b97..18f5e226 100644
--- a/src/components/pages/post-meetup/fields/date-field/index.tsx
+++ b/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,18 +14,21 @@ 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'
@@ -32,10 +36,34 @@ export const MeetupDateField = ({ field }: Props) => {
           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);
+};
diff --git a/src/components/pages/post-meetup/fields/detail-feild/index.tsx b/src/components/pages/post-meetup/fields/detail-feild/index.tsx
index a7885726..4e66cc4f 100644
--- a/src/components/pages/post-meetup/fields/detail-feild/index.tsx
+++ b/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='모임에 대해 설명해주세요'
diff --git a/src/components/pages/post-meetup/fields/address-field/index.tsx b/src/components/pages/post-meetup/fields/location-field/index.tsx
similarity index 86%
rename from src/components/pages/post-meetup/fields/address-field/index.tsx
rename to src/components/pages/post-meetup/fields/location-field/index.tsx
index b04056d4..733237fb 100644
--- a/src/components/pages/post-meetup/fields/address-field/index.tsx
+++ b/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
diff --git a/src/components/pages/post-meetup/index.ts b/src/components/pages/post-meetup/index.ts
index cc5f2603..89656801 100644
--- a/src/components/pages/post-meetup/index.ts
+++ b/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';
diff --git a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer/index.tsx b/src/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer/index.tsx
index eb3a698c..0bddbe80 100644
--- a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/date-picker/index.tsx b/src/components/pages/post-meetup/modals/date-picker-modal/calendar/date-picker/index.tsx
index fb827e13..71293e4a 100644
--- a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/date-picker/index.tsx
+++ b/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>
           ))}
diff --git a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/index.tsx b/src/components/pages/post-meetup/modals/date-picker-modal/calendar/index.tsx
index e9301dc0..18455ff4 100644
--- a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/index.tsx
+++ b/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 };
+};
diff --git a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker/index.tsx b/src/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker/index.tsx
index 08b2c0ee..50fa5f6f 100644
--- a/src/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker/index.tsx
+++ b/src/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker/index.tsx
@@ -1,3 +1,45 @@
-export const TimePicker = () => {
-  return <div></div>;
+'use client';
+
+import clsx from 'clsx';
+
+import type { TimePickerState } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar';
+
+interface Props {
+  selectedTime: TimePickerState;
+  onTimeChange: (type: string, val: string) => void;
+}
+
+export const TimePicker = ({ selectedTime, onTimeChange }: Props) => {
+  return (
+    <div className='flex h-75.25 justify-center border-b-1 pb-3'>
+      {Object.entries(TIME_SELECTORS).map(([type, arr]) => (
+        <ul
+          key={type}
+          className='scrollbar-thin scroll-stable w-full max-w-23.5 space-y-3 overflow-hidden text-center hover:overflow-y-scroll'
+        >
+          {arr.map((val) => (
+            <li key={val}>
+              <button
+                className={clsx(
+                  'text-text-sm-regular h-10 w-full max-w-20 rounded-lg text-gray-800',
+                  selectedTime[type as keyof typeof TIME_SELECTORS] === val &&
+                    'bg-mint-500 !text-text-sm-medium text-white',
+                )}
+                type='button'
+                onClick={() => onTimeChange(type, val)}
+              >
+                {val}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ))}
+    </div>
+  );
 };
+
+const TIME_SELECTORS = Object.freeze({
+  hours: Array.from({ length: 12 }, (_, idx) => (idx + 1).toString().padStart(2, '0')),
+  minutes: Array.from({ length: 12 }, (_, idx) => (idx * 5).toString().padStart(2, '0')),
+  meridiem: ['AM', 'PM'],
+});
diff --git a/src/components/pages/post-meetup/modals/date-picker-modal/index.tsx b/src/components/pages/post-meetup/modals/date-picker-modal/index.tsx
index decdfda6..33890dfb 100644
--- a/src/components/pages/post-meetup/modals/date-picker-modal/index.tsx
+++ b/src/components/pages/post-meetup/modals/date-picker-modal/index.tsx
@@ -17,9 +17,9 @@ export const DatePickerModal = ({ field }: Props) => {
   const [tabMenu, setTabMenu] = useState<'date' | 'time'>('date');
 
   return (
-    <ModalContent>
-      <ModalTitle>모달임</ModalTitle>
-      <section className=''>
+    <ModalContent className='w-82.5'>
+      <ModalTitle>날짜 및 시간</ModalTitle>
+      <section className='mt-2'>
         <nav className='flex'>
           {DATE_MODAL_TAB_MENU.map(({ name, iconId }) => (
             <button
@@ -41,9 +41,8 @@ export const DatePickerModal = ({ field }: Props) => {
 
         <Calendar
           currentTab={tabMenu}
-          handleDateChange={(selectedDate: string) =>
-            field.handleChange({ ...field.state.value, selectedDate })
-          }
+          dateFieldValue={field.state.value}
+          updateDateField={(selectedDate: string) => field.handleChange(selectedDate)}
         />
 
         <div className='flex-center mt-6 gap-2'>
diff --git a/src/styles/base.css b/src/styles/base.css
index 1a4af316..deab9e0e 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,3 +1,7 @@
 /* * {
   box-sizing: border-box;
 } */
+
+button {
+  cursor: pointer;
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b1cf57c3..ae8d85a8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -27,7 +27,3 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
-
-button {
-  cursor: pointer;
-}
diff --git a/src/styles/layout.css b/src/styles/layout.css
index b0560128..4f4c6663 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -29,3 +29,15 @@
 @utility shadow-card {
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
 }
+
+@utility scroll-stable {
+  scrollbar-gutter: stable;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-1;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply rounded-lg bg-gray-400;
+}