[Style] 모임생성 주소 입력 Daum API 적용

package.json

@@ -52,6 +52,7 @@
     "motion": "^12.23.24",
     "next": "16.0.7",
     "react": "19.2.1",
+    "react-daum-postcode": "^3.2.0",
     "react-dom": "19.2.1",
     "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.1",

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

@@ -17,7 +17,7 @@ export const MeetupDateField = ({ field }: Props) => {
   const formattedDate = formatDate(new Date(field.state.value), 'YY.MM.DD - HH:mm');
 
   const onInputClick = () => {
-    open(<DatePickerModal field={field} />);
+    open(<DatePickerModal dateField={field} />);
   };
 
   return (

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

@@ -1,38 +1,49 @@
 'use client';
 
 import { AnyFieldApi } from '@tanstack/react-form';
+import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
-import { Input, Label } from '@/components/ui';
+import { LocationSearchModal } from '@/components/pages/post-meetup/modals/location-search-modal';
+import { Label } from '@/components/ui';
+import { useModal } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
 }
 
 export const MeetupLocationField = ({ field }: Props) => {
+  const { open } = useModal();
+
+  const onInputClick = () => {
+    open(<LocationSearchModal LocationField={field} />);
+  };
+
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
-      <Label htmlFor='post-meetup-location' required>
+      <Label htmlFor='post-meetup-location' required onClick={onInputClick}>
         모임 장소
       </Label>
-      <Input
-        id='post-meetup-location'
-        className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
-        frontIcon={
-          <Icon
-            id='map-pin-1'
-            width={20}
-            className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
-            height={20}
-          />
-        }
-        placeholder='모임 주소를 입력해주세요'
-        required
-        type='text'
-        value={field.state.value}
-        onChange={(e) => field.handleChange(e.target.value)}
-        onClick={() => console.log('address clicked!')}
-      />
+      <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={onInputClick}
+      >
+        <Icon
+          id='map-pin-1'
+          width={20}
+          className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
+          height={20}
+        />
+        <p
+          className={clsx(
+            'text-text-md-medium text-left text-gray-500',
+            field.state.value && 'text-gray-800',
+          )}
+        >
+          {field.state.value ? field.state.value : '모임 장소를 입력해주세요'}
+        </p>
+      </button>
     </div>
   );
 };

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

@@ -10,10 +10,10 @@ import { Calendar } from '@/components/pages/post-meetup/modals/date-picker-moda
 import { ModalContent, ModalTitle } from '@/components/ui';
 
 interface Props {
-  field: AnyFieldApi;
+  dateField: AnyFieldApi;
 }
 
-export const DatePickerModal = ({ field }: Props) => {
+export const DatePickerModal = ({ dateField }: Props) => {
   const [tabMenu, setTabMenu] = useState<'date' | 'time'>('date');
 
   return (
@@ -41,8 +41,8 @@ export const DatePickerModal = ({ field }: Props) => {
 
         <Calendar
           currentTab={tabMenu}
-          dateFieldValue={field.state.value}
-          updateDateField={(selectedDate: string) => field.handleChange(selectedDate)}
+          dateFieldValue={dateField.state.value}
+          updateDateField={(selectedDate: string) => dateField.handleChange(selectedDate)}
         />
 
         <div className='flex-center mt-5 gap-2'>

src/components/pages/post-meetup/modals/location-search-modal/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import DaumPostcodeEmbed, { Address } from 'react-daum-postcode';
+
+import { AnyFieldApi } from '@tanstack/react-form';
+
+import { ModalContent, ModalTitle, useModal } from '@/components/ui';
+
+interface Props {
+  LocationField: AnyFieldApi;
+}
+
+export const LocationSearchModal = ({ LocationField }: Props) => {
+  const { close } = useModal();
+
+  const handleComplete = (data: Address) => {
+    const fullAddress = `${data.sido} ${data.sigungu} ${data.bname}`;
+    LocationField.handleChange(fullAddress);
+    close();
+  };
+
+  return (
+    <ModalContent className='max-w-[330px]'>
+      <ModalTitle>모임 장소</ModalTitle>
+      <section className='mt-2'>
+        <DaumPostcodeEmbed
+          minWidth={200}
+          style={{ height: '470px' }}
+          autoClose={false}
+          onComplete={handleComplete}
+        />
+      </section>
+    </ModalContent>
+  );
+};