최종 배포

src/app/(global)/(mypage)/myCreateExperiences/page.tsx

@@ -17,6 +17,7 @@ import { useTimeSlotStore } from '@/src/store/TimeSlotStore';
 import { useActivityStore } from '@/src/store/useActivityStore';
 import { openDaumPostcode } from '@/src/utils/daumPostcode';
 import { format } from 'date-fns';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
@@ -38,7 +39,7 @@ interface ExperiencesFormData {
 
 export default function MyCreateExperiencesPage() {
   const dropdownItems = [
-    { id: 1, title: '문화 ∙ 예술' },
+    { id: 1, title: '문화 · 예술' },
     { id: 2, title: '식음료' },
     { id: 3, title: '스포츠' },
     { id: 4, title: '투어' },
@@ -54,7 +55,6 @@ export default function MyCreateExperiencesPage() {
   } = useForm<ExperiencesFormData>({ mode: 'onBlur' });
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
-
   const router = useRouter();
 
   const handleAddressClick = async () => {
@@ -66,32 +66,40 @@ export default function MyCreateExperiencesPage() {
     }
   };
 
+  const handleBackClick = () => {
+    setIsConfirmOpen(true);
+  };
+
   const handleCloseModal = () => {
     router.back();
   };
 
   const handleConfirm = () => {
     setIsConfirmOpen(false);
+    router.back();
   };
 
   const handleCancel = () => {
     setIsConfirmOpen(false);
   };
 
+  const formatNumber = (value?: number) => {
+    if (value === undefined || value === null) return '';
+    return value.toLocaleString();
+  };
   const { timeSlots } = useTimeSlotStore();
   const selectedDate = useReservationStore(
     (state) => state.dateSelector.selectedDate
   );
   const { bannerImages, subImages } = useActivityStore();
 
   const onSubmit: SubmitHandler<ExperiencesFormData> = async (data) => {
-    console.log('소개 이미지 상태:', subImages);
     try {
       // 1️⃣ schedules 변환
       const schedules: Schedule[] = timeSlots
         .filter((slot) => slot.startTime && slot.endTime)
         .map((slot) => ({
-          date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : '',
+          date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : 'yy/mm/dd',
           startTime: slot.startTime!,
           endTime: slot.endTime!,
         }));
@@ -105,11 +113,14 @@ export default function MyCreateExperiencesPage() {
         ? await uploadActivityImages(subImages)
         : [];
 
-      console.log('업로드 후 소개 이미지 URL:', subImageUrls);
+      const categoryTitle =
+        dropdownItems.find((item) => item.id === Number(data.category))
+          ?.title ?? '';
 
       // 4️⃣ payload 생성
       const payload = {
         ...data,
+        category: categoryTitle,
         schedules,
         bannerImageUrl: bannerUrl,
         subImageUrls,
@@ -128,9 +139,19 @@ export default function MyCreateExperiencesPage() {
     <div>
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className='flex flex-col gap-[30px]'
+        className='flex flex-col gap-[30px] mt-[78px] mb-[53px] px-6 lg:w-[700px] lg:mx-auto'
       >
-        <h1 className='font-bold text-18 text-gray-950'>내 체험 등록</h1>
+        <div className='flex justify-between'>
+          <h1 className='font-bold text-18 text-gray-950'>내 체험 등록</h1>
+          <button onClick={handleBackClick}>
+            <Image
+              src='/images/icons/BackIcon.svg'
+              alt='BackIcon'
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
         <FormInput
           label='제목'
           variant='experience'
@@ -160,16 +181,24 @@ export default function MyCreateExperiencesPage() {
           errorMessage={errors.description?.message}
           {...register('description', { required: '필수 입력 항목입니다.' })}
         />
-        <FormInput
-          label='가격'
-          type='number'
-          variant='experience'
-          placeholder='체험 금액을 입력해 주세요'
-          errorMessage={errors.price?.message}
-          {...register('price', {
-            valueAsNumber: true,
-            required: '필수 입력 항목입니다.',
-          })}
+        <Controller
+          name='price'
+          control={control}
+          rules={{ required: '필수 입력 항목입니다.' }}
+          render={({ field }) => (
+            <FormInput
+              label='가격'
+              variant='experience'
+              placeholder='체험 금액을 입력해 주세요'
+              value={formatNumber(field.value)}
+              onChange={(e) => {
+                const raw = e.target.value.replace(/,/g, '');
+                const parsed = raw === '' ? undefined : Number(raw);
+                field.onChange(parsed);
+              }}
+              errorMessage={errors.price?.message}
+            />
+          )}
         />
         <FormInput
           label='주소'

src/app/(global)/(mypage)/myInfo/_components/myExperiences.tsx

@@ -3,16 +3,21 @@
 import MyExperienceCard from '@/src/components/pages/myExperiences/MyExperienceCard';
 import Button from '@/src/components/primitives/Button';
 import LoadingSpinner from '@/src/components/primitives/LoadingSpinner';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
 import BackIcon from '@/public/images/icons/BackIcon.svg';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { TabContext } from '../pageContext';
 import { queries } from '@/src/services/primitives/queries';
+import ConfirmModal from '@/src/components/primitives/modal/ConfirmModal';
+import Link from 'next/link';
 
 export default function MyExperiencesPage() {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [selectedExperience, setSelectedExperience] = useState<number>(0);
   const { setIsTabOpen } = useContext(TabContext);
   const { data, isPending } = useQuery(queries.myExperiencesOptions());
+  const mutation = useMutation(queries.myExperiencesMutationOptions());
 
   return (
     <section className='flex flex-col items-center gap-8'>
@@ -31,14 +36,21 @@ export default function MyExperiencesPage() {
             </p>
           </div>
         </div>
-        <Button size='lg'>체험 등록하기</Button>
+        <Link href={'/myCreateExperiences'}>
+          <Button size='lg'>체험 등록하기</Button>
+        </Link>
       </div>
       {!isPending ? (
         <>
           {data && data.totalCount !== 0 ? (
             <>
               {data.activities.map((activity) => (
-                <MyExperienceCard data={activity} key={activity.id} />
+                <MyExperienceCard
+                  data={activity}
+                  key={activity.id}
+                  callbackId={setSelectedExperience}
+                  setIsModalVisible={setIsModalVisible}
+                />
               ))}
             </>
           ) : (
@@ -59,6 +71,15 @@ export default function MyExperiencesPage() {
       ) : (
         <LoadingSpinner />
       )}
+      <ConfirmModal
+        onConfirm={() => {
+          mutation.mutate(selectedExperience);
+          setIsModalVisible(false);
+        }}
+        onCancel={() => setIsModalVisible(false)}
+        isOpen={isModalVisible}
+        message='정말 체험을 삭제하시겠습니까?'
+      />
     </section>
   );
 }

src/app/(global)/(mypage)/myInfo/page.tsx

@@ -55,7 +55,7 @@ export default function MypageLayout() {
     <TabContext.Provider value={{ tab, setTab, isTabOpen, setIsTabOpen }}>
       <section
         id='my-info-body'
-        className='w-full pt-[85px] pb-[64px] overflow-hidden md:pt-[120px] md:pb-[54px] h-full'
+        className='w-full pt-[85px] pb-[64px] overflow-hidden md:pt-[120px] md:pb-[54px]'
       >
         <div
           className={cn(