[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/images-field/index.tsx

@@ -25,47 +25,50 @@ export const MeetupImagesField = ({ field, initialImages }: Props) => {
       onChange={field.handleChange}
     >
       {(images, onRemoveImageClick, onFileSelectClick) => (
-        <div className='mt-6 flex flex-row gap-2'>
-          <button
-            className={cn(
-              'flex-center bg-mono-white group aspect-square w-full max-w-20 cursor-pointer rounded-2xl border-1 border-gray-300', // 기본 스타일
-              'hover:bg-gray-50', // hover 스타일
-              'transition-all duration-300', // animation 스타일
-            )}
-            aria-label='이미지 선택 버튼'
-            type='button'
-            onClick={onFileSelectClick}
-          >
-            <Icon
-              id='plus'
+        <div className='space-y-1'>
+          <div className='mt-6 flex flex-row gap-2'>
+            <button
               className={cn(
-                'size-6 text-gray-600', // 기본 스타일
-                'group-hover:scale-120', // hover 스타일
+                'flex-center bg-mono-white group aspect-square w-full max-w-20 cursor-pointer rounded-2xl border-1 border-gray-300', // 기본 스타일
+                'hover:bg-gray-50', // hover 스타일
                 'transition-all duration-300', // animation 스타일
               )}
-            />
-          </button>
-          {Object.entries(images).map(([url, _file]) => (
-            <div key={url} className='relative aspect-square w-full max-w-20'>
-              <Image
-                className='border-mono-black/5 h-full w-full rounded-2xl border-1 object-cover'
-                alt='팀 이미지'
-                fill
-                src={url}
-              />
-              <button
+              aria-label='이미지 선택 버튼'
+              type='button'
+              onClick={onFileSelectClick}
+            >
+              <Icon
+                id='plus'
                 className={cn(
-                  'flex-center bg-mono-white/80 group absolute top-1.5 right-2 size-4 cursor-pointer rounded-full', // 기본 스타일
-                  'hover:bg-mono-white hover:scale-110', // hover 스타일
+                  'size-6 text-gray-600', // 기본 스타일
+                  'group-hover:scale-120', // hover 스타일
                   'transition-all duration-300', // animation 스타일
                 )}
-                aria-label='이미지 삭제 버튼'
-                onClick={() => onRemoveImageClick(url)}
-              >
-                <Icon id='small-x-1' className='size-1.5 text-gray-700' />
-              </button>
-            </div>
-          ))}
+              />
+            </button>
+            {Object.entries(images).map(([url, _file]) => (
+              <div key={url} className='relative aspect-square w-full max-w-20'>
+                <Image
+                  className='border-mono-black/5 h-full w-full rounded-2xl border-1 object-cover'
+                  alt='팀 이미지'
+                  fill
+                  src={url}
+                />
+                <button
+                  className={cn(
+                    'flex-center bg-mono-white/80 group absolute top-1.5 right-2 size-4 cursor-pointer rounded-full', // 기본 스타일
+                    'hover:bg-mono-white hover:scale-110', // hover 스타일
+                    'transition-all duration-300', // animation 스타일
+                  )}
+                  aria-label='이미지 삭제 버튼'
+                  onClick={() => onRemoveImageClick(url)}
+                >
+                  <Icon id='small-x-1' className='size-1.5 text-gray-700' />
+                </button>
+              </div>
+            ))}
+          </div>
+          <p className='text-text-sm-medium px-2 text-gray-500'>최대 3개까지 업로드할 수 있어요.</p>
         </div>
       )}
     </ImageInput>

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/fields/tags-field/index.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 
 import { AnyFieldApi } from '@tanstack/react-form';
+import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 import { Input, Label } from '@/components/ui';
@@ -16,10 +17,13 @@ export const MeetupTagsField = ({ field }: Props) => {
 
   const onEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.code !== 'Enter' && e.code !== 'NumpadEnter') return;
+    if (e.nativeEvent.isComposing) return;
 
     const hasDupe = field.state.value.includes(inputValue);
 
-    if (!hasDupe && inputValue.trim()) field.pushValue(inputValue);
+    if (!hasDupe && inputValue.trim()) {
+      field.pushValue(inputValue);
+    }
 
     setInputValue('');
   };
@@ -44,7 +48,13 @@ export const MeetupTagsField = ({ field }: Props) => {
         onChange={(e) => setInputValue(e.target.value)}
         onKeyDown={onEnter}
       />
-      <ul className='mt-0.5 flex flex-wrap gap-x-1 gap-y-1.5 px-2'>
+
+      <ul
+        className={clsx(
+          'mt-0.5 flex flex-wrap gap-x-1 gap-y-1.5 px-2',
+          field.state.value.length ? 'block' : 'hidden',
+        )}
+      >
         {field.state.value.map((tag: string, idx: number) => (
           <li
             key={tag}
@@ -56,6 +66,8 @@ export const MeetupTagsField = ({ field }: Props) => {
           </li>
         ))}
       </ul>
+
+      <p className='text-text-sm-medium px-2 text-gray-500'>최대 10개까지 업로드할 수 있어요.</p>
     </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>
+  );
+};