Feat/70 체험 등록/수정페이지 로직 및 레이아웃 1차 구현

package.json

@@ -18,6 +18,7 @@
     "next": "15.3.5",
     "react": "^19.0.0",
     "react-datepicker": "^8.4.0",
+    "react-daum-postcode": "^3.2.0",
     "react-dom": "^19.0.0",
     "react-kakao-maps-sdk": "^1.2.0",
     "tailwind-merge": "^3.3.1",

src/app/(with-header)/myactivity/components/AddressInput.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import Modal from '@/components/Modal';
+import DaumPostcode from 'react-daum-postcode';
+import { useState } from 'react';
+import Input from '@/components/Input';
+import Button from '@/components/Button';
+
+interface AddressInputProps {
+  onAddressChange: (address: string) => void;
+  address: string;
+}
+
+export default function AddressInput({
+  onAddressChange,
+  address,
+}: AddressInputProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleComplete = (data: any) => {
+    let fullAddress = data.address;
+    let extraAddress = '';
+
+    if (data.addressType === 'R') {
+      if (data.bname !== '') {
+        extraAddress += data.bname;
+      }
+      if (data.buildingName !== '') {
+        extraAddress +=
+          extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
+      }
+      fullAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
+    }
+
+    onAddressChange(fullAddress);
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <Input
+        label='주소'
+        id='address'
+        value={address}
+        onClick={() => setIsOpen(true)}
+        readOnly
+      />
+      <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>주소 검색</Modal.Title>
+            <Modal.Close />
+          </Modal.Header>
+          <Modal.Item>
+            <DaumPostcode onComplete={handleComplete} />
+          </Modal.Item>
+          <Modal.Footer>
+            <Button
+              variant='primary'
+              className='py-8'
+              onClick={() => setIsOpen(false)}
+            >
+              닫기
+            </Button>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    </div>
+  );
+}

src/app/(with-header)/myactivity/components/CategoryInput.tsx

@@ -0,0 +1,37 @@
+interface CategoryProps {
+  category?: string;
+
+  onCategoryChange: (value: string) => void;
+}
+
+export default function CategoryInput({
+  category,
+  onCategoryChange,
+}: CategoryProps) {
+  return (
+    <div>
+      <label
+        htmlFor='category'
+        className='font-regular flex flex-col text-lg text-black'
+      >
+        카테고리
+      </label>
+      <div>
+        <select
+          id='category'
+          className='w-full rounded-md border border-gray-800 bg-white px-20 py-17 placeholder-gray-600'
+          value={category}
+          onChange={(e) => onCategoryChange(e.target.value)}
+        >
+          <option value=''>카테고리를 선택해주세요</option>
+          <option value='문화예술'>문화/예술</option>
+          <option value='푸드'>푸드</option>
+          <option value='스포츠'>스포츠</option>
+          <option value='투어'>투어</option>
+          <option value='관광'>관광</option>
+          <option value='웰빙'>웰빙</option>
+        </select>
+      </div>
+    </div>
+  );
+}

src/app/(with-header)/myactivity/components/FormSection.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+interface FormSectionProps {
+  title: string;
+  children: React.ReactNode;
+  description?: string;
+}
+
+export function FormSection({
+  title,
+  children,
+  description,
+}: FormSectionProps) {
+  return (
+    <div className='space-y-6'>
+      <div>
+        <h2 className='border-b border-gray-200 pb-2 text-xl font-semibold text-gray-900'>
+          {title}
+        </h2>
+        {description && (
+          <p className='mt-2 text-sm text-gray-600'>{description}</p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}

src/app/(with-header)/myactivity/components/ImagePreview.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import IconClose from '@assets/svg/close';
+
+interface ImagePreviewProps {
+  image: File | string;
+  onRemove: () => void;
+  alt: string;
+  className?: string;
+}
+
+export function ImagePreview({
+  image,
+  onRemove,
+  alt,
+  className = '',
+}: ImagePreviewProps) {
+  const src = typeof image === 'string' ? image : URL.createObjectURL(image);
+
+  return (
+    <div className={`group relative ${className}`}>
+      <div className='aspect-square w-full overflow-hidden rounded-lg'>
+        <img
+          src={src || '/placeholder.svg'}
+          className='h-full w-full object-cover'
+          alt={alt}
+        />
+      </div>
+      <button
+        type='button'
+        onClick={onRemove}
+        className='absolute top-2 right-2 rounded-full bg-gray-600 p-1 text-white transition-colors hover:bg-gray-700'
+        aria-label='이미지 삭제'
+      >
+        <IconClose />
+      </button>
+    </div>
+  );
+}

src/app/(with-header)/myactivity/components/ImageSection.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { MainImageSelect } from './MainImageSelect';
+import { SubImageSelect } from './SubImageSelect';
+
+interface ImagesSectionProps {
+  mainImage: string | File | null;
+  subImage: (string | File)[];
+  onMainImageSelect: (file: File) => void;
+  onMainImageRemove: () => void;
+  onSubImageAdd: (files: File[]) => void;
+  onSubImageRemove: (index: number) => void;
+}
+
+export function ImageSection({
+  mainImage,
+  subImage,
+  onMainImageSelect,
+  onMainImageRemove,
+  onSubImageAdd,
+  onSubImageRemove,
+}: ImagesSectionProps) {
+  return (
+    <div className='space-y-8'>
+      <MainImageSelect
+        mainImage={mainImage}
+        onImageSelect={onMainImageSelect}
+        onImageRemove={onMainImageRemove}
+      />
+
+      <SubImageSelect
+        subImage={subImage}
+        onImagesAdd={onSubImageAdd}
+        onImageRemove={onSubImageRemove}
+      />
+    </div>
+  );
+}

src/app/(with-header)/myactivity/components/ImageUpload.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import type React from 'react';
+
+interface ImageUploadProps {
+  onImageSelect: (file: File) => void;
+  multiple?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function ImageUpload({
+  onImageSelect,
+  multiple = false,
+  className = '',
+  children,
+}: ImageUploadProps) {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      onImageSelect(file);
+    }
+  };
+
+  return (
+    <label className={`group cursor-pointer ${className}`}>
+      <div className='flex aspect-square w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 transition-colors hover:border-green-400 hover:bg-green-50'>
+        {children || (
+          <>
+            <h2 className='text-xl text-gray-600 group-hover:text-green-600'>
+              +
+            </h2>
+            <span className='text-center text-xs font-medium text-gray-600 group-hover:text-green-600'>
+              이미지
+              <br />
+              등록
+            </span>
+          </>
+        )}
+      </div>
+      <input
+        type='file'
+        accept='image/*'
+        multiple={multiple}
+        className='hidden'
+        onChange={handleFileChange}
+      />
+    </label>
+  );
+}

src/app/(with-header)/myactivity/components/InfoSection.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import Input from '@/components/Input';
+import AddressInput from './AddressInput';
+import CategoryInput from './CategoryInput';
+
+interface InfoSectionProps {
+  title?: string;
+  category?: string;
+  price?: number;
+  description?: string;
+  address?: string;
+  onTitleChange: (value: string) => void;
+  onCategoryChange: (value: string) => void;
+  onPriceChange: (value: string) => void;
+  onDescriptionChange: (value: string) => void;
+  onAddressChange: (value: string) => void;
+}
+
+export function InfoSection({
+  title = '',
+  category = '',
+  price = 0,
+  description = '',
+  address = '',
+  onTitleChange,
+  onCategoryChange,
+  onPriceChange,
+  onDescriptionChange,
+  onAddressChange,
+}: InfoSectionProps) {
+  return (
+    <section className='space-y-6'>
+      <div className='grid grid-cols-1 gap-6 sm:grid-cols-2'>
+        <div className='sm:col-span-2'>
+          <Input
+            label='제목'
+            id='title'
+            type='text'
+            placeholder='체험의 제목을 입력해주세요'
+            className='w-full'
+            value={title}
+            onChange={(e) => onTitleChange(e.target.value)}
+          />
+        </div>
+
+        <CategoryInput
+          category={category}
+          onCategoryChange={onCategoryChange}
+        />
+
+        <div>
+          <div className='relative'>
+            <Input
+              label='가격'
+              type='number'
+              placeholder='0'
+              className='w-full appearance-none'
+              value={price}
+              onChange={(e) => onPriceChange(e.target.value)}
+            />
+            <span className='absolute top-1/2 right-4 -translate-y-1/2 transform text-gray-500'>
+              원
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <Input
+          label='설명'
+          type='textarea'
+          placeholder='체험에 대한 자세한 설명을 입력해주세요'
+          className='w-full'
+          value={description}
+          onChange={(e) => onDescriptionChange(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <AddressInput onAddressChange={onAddressChange} address={address} />
+      </div>
+    </section>
+  );
+}