Merge pull request #137 from codeit-2team/fix/128

Fix/128 QA(1차, 2차) 피드백 및 이슈 해결

Author: LeeCh0129

src/app/(with-header)/activities/[id]/hooks/useDeleteActivity.ts

@@ -2,6 +2,7 @@ import { privateInstance } from '@/apis/privateInstance';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 
 const deleteActivity = async (id: string) => {
   const response = await privateInstance.delete(`/deleteActivity/${id}`);
@@ -15,9 +16,12 @@ export const useDeleteActivity = () => {
   return useMutation({
     mutationFn: deleteActivity,
     onSuccess: (_data) => {
-      queryClient.invalidateQueries({ queryKey: ['activity'] });  // 내 체험 관리
-      queryClient.invalidateQueries({ queryKey: ['experiences'], exact: false }); // 모든 체험 리스트
-      queryClient.invalidateQueries({ queryKey: ['popularExperiences'] });   // 인기 체험
+      queryClient.invalidateQueries({ queryKey: ['activity'] });
+      queryClient.invalidateQueries({
+        queryKey: ['experiences'],
+        exact: false,
+      });
+      queryClient.invalidateQueries({ queryKey: ['popularExperiences'] });
       router.push(`/`);
     },
     onError: (error: AxiosError) => {
@@ -27,8 +31,7 @@ export const useDeleteActivity = () => {
 
       console.error('전체 에러:', error);
 
-      alert(
-        //토스트로 대체
+      toast.error(
         responseData?.error ||
           responseData?.message ||
           error.message ||

src/app/(with-header)/mypage/activities/components/ActivityCard.tsx

@@ -21,6 +21,10 @@ export default function ActivityCard({
 
   const { id, title, price, bannerImageUrl, rating, reviewCount } = activity;
 
+  const handleCardClick = () => {
+    router.push(`/activities/${id}`);
+  };
+
   const handleEdit = () => {
     router.push(`/myactivity/${id}`);
   };
@@ -31,7 +35,10 @@ export default function ActivityCard({
   };
 
   return (
-    <div className='flex h-128 w-full max-w-792 flex-row rounded-3xl border border-gray-300 bg-white sm:h-156 lg:h-204'>
+    <div
+      className='flex h-128 w-full max-w-792 cursor-pointer flex-row rounded-3xl border border-gray-300 bg-white transition-shadow hover:shadow-md sm:h-156 lg:h-204'
+      onClick={handleCardClick}
+    >
       {/* 이미지 영역 */}
       <div className='relative h-full w-128 flex-shrink-0 overflow-hidden rounded-l-3xl sm:w-156 lg:w-204'>
         <Image src={bannerImageUrl} alt={title} fill className='object-cover' />
@@ -68,7 +75,10 @@ export default function ActivityCard({
           {/* 더보기 옵션 */}
           <div className='relative'>
             <button
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsMenuOpen(!isMenuOpen);
+              }}
               className='flex h-40 w-40 items-center justify-center rounded-full hover:bg-gray-100'
             >
               <MoreOptionsIcon size={40} />
@@ -78,18 +88,27 @@ export default function ActivityCard({
               <>
                 <div
                   className='fixed inset-0 z-40'
-                  onClick={() => setIsMenuOpen(false)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsMenuOpen(false);
+                  }}
                 />
                 {/* 드롭다운 메뉴 */}
                 <div className='absolute top-full right-0 z-50 w-120 rounded-md border border-gray-300 bg-white shadow-lg sm:w-160'>
                   <button
-                    onClick={handleEdit}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleEdit();
+                    }}
                     className='flex h-50 w-full items-center justify-center border-b border-gray-300 px-4 py-3 text-center text-base font-medium text-gray-900 hover:bg-gray-50 sm:h-62 sm:px-46 sm:py-18 sm:text-lg'
                   >
                     수정하기
                   </button>
                   <button
-                    onClick={handleDelete}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete();
+                    }}
                     className='flex h-50 w-full items-center justify-center px-4 py-3 text-center text-base font-medium text-gray-900 hover:bg-gray-50 sm:h-62 sm:px-46 sm:py-18 sm:text-lg'
                   >
                     삭제하기

src/app/(with-header)/mypage/activities/page.tsx

@@ -89,8 +89,35 @@ export default function MyActivitiesPage() {
           {[1, 2, 3].map((i) => (
             <div
               key={i}
-              className='rounded-24 h-204 w-792 animate-pulse bg-gray-200'
-            />
+              className='flex h-128 w-full max-w-792 flex-row rounded-3xl border border-gray-300 bg-white sm:h-156 lg:h-204'
+            >
+              {/* 이미지 영역 스켈레톤 */}
+              <div className='h-full w-128 flex-shrink-0 animate-pulse rounded-l-3xl bg-gray-200 sm:w-156 lg:w-204'></div>
+
+              {/* 콘텐츠 영역 스켈레톤 */}
+              <div className='flex w-0 flex-grow flex-col justify-start px-12 py-10 sm:px-16 sm:py-12 lg:px-24 lg:py-14'>
+                {/* 별점 및 리뷰 스켈레톤 */}
+                <div className='flex items-center gap-6'>
+                  <div className='flex items-center gap-2'>
+                    <div className='h-4 w-4 animate-pulse rounded bg-gray-200 sm:h-5 sm:w-5'></div>
+                    <div className='h-4 w-8 animate-pulse rounded bg-gray-200 sm:h-5 sm:w-10'></div>
+                    <div className='h-4 w-12 animate-pulse rounded bg-gray-200 sm:h-5 sm:w-16'></div>
+                  </div>
+                </div>
+
+                {/* 제목 스켈레톤 */}
+                <div className='mt-2 h-4 w-40 animate-pulse rounded bg-gray-200 sm:mt-4 sm:h-5 sm:w-48 lg:mt-6 lg:h-6 lg:w-56'></div>
+
+                {/* 가격 + 더보기 버튼 영역 스켈레톤 */}
+                <div className='mt-auto flex items-center justify-between'>
+                  {/* 가격 스켈레톤 */}
+                  <div className='h-6 w-32 animate-pulse rounded bg-gray-200 sm:h-6 sm:w-36 lg:h-7 lg:w-40'></div>
+
+                  {/* 더보기 버튼 스켈레톤 */}
+                  <div className='h-40 w-40 animate-pulse rounded-full bg-gray-200'></div>
+                </div>
+              </div>
+            </div>
           ))}
         </div>
       </div>
@@ -157,7 +184,34 @@ export default function MyActivitiesPage() {
 
             {/* 무한 스크롤 로딩 */}
             {isFetchingNextPage && (
-              <div className='rounded-24 h-204 w-792 animate-pulse bg-gray-200' />
+              <div className='flex h-128 w-full max-w-792 flex-row rounded-3xl border border-gray-300 bg-white sm:h-156 lg:h-204'>
+                {/* 이미지 영역 스켈레톤 */}
+                <div className='h-full w-128 flex-shrink-0 animate-pulse rounded-l-3xl bg-gray-200 sm:w-156 lg:w-204'></div>
+
+                {/* 콘텐츠 영역 스켈레톤 */}
+                <div className='flex w-0 flex-grow flex-col justify-start px-12 py-10 sm:px-16 sm:py-12 lg:px-24 lg:py-14'>
+                  {/* 별점 및 리뷰 스켈레톤 */}
+                  <div className='flex items-center gap-6'>
+                    <div className='flex items-center gap-2'>
+                      <div className='h-4 w-4 animate-pulse rounded bg-gray-200 sm:h-5 sm:w-5'></div>
+                      <div className='h-4 w-8 animate-pulse rounded bg-gray-200 sm:h-5 sm:w-10'></div>
+                      <div className='h-4 w-12 animate-pulse rounded bg-gray-200 sm:h-5 sm:w-16'></div>
+                    </div>
+                  </div>
+
+                  {/* 제목 스켈레톤 */}
+                  <div className='mt-2 h-4 w-40 animate-pulse rounded bg-gray-200 sm:mt-4 sm:h-5 sm:w-48 lg:mt-6 lg:h-6 lg:w-56'></div>
+
+                  {/* 가격 + 더보기 버튼 영역 스켈레톤 */}
+                  <div className='mt-auto flex items-center justify-between'>
+                    {/* 가격 스켈레톤 */}
+                    <div className='h-6 w-32 animate-pulse rounded bg-gray-200 sm:h-6 sm:w-36 lg:h-7 lg:w-40'></div>
+
+                    {/* 더보기 버튼 스켈레톤 */}
+                    <div className='h-40 w-40 animate-pulse rounded-full bg-gray-200'></div>
+                  </div>
+                </div>
+              </div>
             )}
           </div>
         )}

src/app/(with-header)/mypage/dashboard/components/ReservationInfoModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   useReservedSchedules,
   useActivityReservations,
@@ -9,14 +9,15 @@ import {
 import { DashboardFilterOption } from '@/types/dashboardTypes';
 import { DASHBOARD_TAB_OPTIONS } from '@/constants/dashboardConstants';
 import {
-  createTimeSlotOptions,
+  createFilteredTimeSlotOptions,
   getScheduleIdFromTimeSlot,
   getSelectedTimeSlotValue,
 } from '@/utils/timeSlotUtils';
 import Dropdown from '@/components/Dropdown';
 import ReservationActionButtons from './ReservationActionButtons';
 import dayjs from 'dayjs';
 import CloseIcon from '@assets/svg/close';
+import { toast } from 'sonner';
 
 interface Props {
   isOpen: boolean;
@@ -51,12 +52,26 @@ export default function ReservationInfoModal({
   // 예약 상태 업데이트
   const updateReservationMutation = useUpdateActivityReservationStatus();
 
-  const timeSlotOptions = createTimeSlotOptions(schedules);
+  const timeSlotOptions = createFilteredTimeSlotOptions(schedules, activeTab);
   const selectedTimeSlotValue = getSelectedTimeSlotValue(
     schedules,
     selectedScheduleId,
   );
 
+  // 탭 변경 시 현재 선택된 시간대가 유효한지 확인하고 초기화
+  useEffect(() => {
+    if (selectedScheduleId && schedules) {
+      const currentSchedule = schedules.find(
+        (schedule) => schedule.scheduleId === selectedScheduleId,
+      );
+
+      // 현재 선택된 시간대가 새 탭에서 유효하지 않으면 초기화
+      if (!currentSchedule || currentSchedule.count[activeTab] === 0) {
+        setSelectedScheduleId(null);
+      }
+    }
+  }, [activeTab, schedules, selectedScheduleId]);
+
   // 예약 승인/거절 처리
   const handleReservationAction = async (
     reservationId: number,
@@ -69,7 +84,7 @@ export default function ReservationInfoModal({
         data: { status },
       });
     } catch {
-      alert('예약 처리에 실패했습니다.');
+      toast.error('예약 처리에 실패했습니다.');
     }
   };
 

src/app/(with-header)/mypage/dashboard/page.tsx

@@ -9,6 +9,7 @@ import { useActivityOptions } from '@/hooks/useActivityOptions';
 import EmptyDashboard from './components/EmptyDashboard';
 import ReservationDashboardCalendar from './components/ReservationDashboardCalendar';
 import ReservationInfoModal from './components/ReservationInfoModal';
+import CalendarSkeleton from './components/CalendarSkeleton';
 
 export default function MyDashboardPage() {
   const [selectedActivityId, setSelectedActivityId] = useState<number | null>(
@@ -19,7 +20,11 @@ export default function MyDashboardPage() {
 
   // 내 체험 리스트 조회
   const { data: activitiesData, isLoading, error } = useMyActivities();
-  const { activityOptions, uniqueTitles } = useActivityOptions(activitiesData);
+  const { activityOptions, uniqueTitles, handleActivityChange } =
+    useActivityOptions(activitiesData, (activityId) => {
+      setSelectedActivityId(activityId);
+      setSelectedDate('');
+    });
 
   // 페이지 로드 시 첫 번째 체험 자동 선택
   useEffect(() => {
@@ -33,18 +38,6 @@ export default function MyDashboardPage() {
     }
   }, [activitiesData, selectedActivityId]);
 
-  // 체험 선택 -> 제목으로 ID 찾기
-  const handleActivityChange = (selectedTitle: string) => {
-    const selectedOption = activityOptions.find(
-      (option) => option.label === selectedTitle,
-    );
-
-    if (selectedOption) {
-      setSelectedActivityId(parseInt(selectedOption.value));
-      setSelectedDate('');
-    }
-  };
-
   // 현재 선택된 체험의 제목 찾기
   const selectedActivityTitle =
     activityOptions.find(
@@ -76,7 +69,7 @@ export default function MyDashboardPage() {
         <div className='mb-48 h-56 w-full max-w-792 animate-pulse rounded-md bg-gray-200' />
 
         {/* 달력 스켈레톤 */}
-        <div className='rounded-24 h-600 w-full animate-pulse bg-gray-200' />
+        <CalendarSkeleton calendarWeeksLength={6} />
       </div>
     );
   }
@@ -129,7 +122,8 @@ export default function MyDashboardPage() {
             value={selectedActivityTitle}
             onChange={handleActivityChange}
             placeholder='체험을 선택하세요'
-            className='h-56'
+            className='h-56 min-w-0'
+            truncateText={true}
           />
         </div>
 

src/app/(with-header)/mypage/layout.tsx

@@ -2,18 +2,16 @@
 
 import { ProfileNavigation } from './components';
 import useResponsiveRouting from '@/hooks/useResponsiveRouting';
-import { useMyProfile } from '@/hooks/useMyPageQueries';
 
 export default function MyPageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const { mounted } = useResponsiveRouting();
-  const { isLoading, error } = useMyProfile();
 
-  // mounted + API 로딩 상태 모두 체크
-  if (!mounted || isLoading) {
+  // mounted 상태만 체크
+  if (!mounted) {
     return (
       <div className='min-h-screen bg-gray-100'>
         <div className='mx-auto max-w-1200 px-20 py-24 lg:py-72'>
@@ -36,28 +34,15 @@ export default function MyPageLayout({
                 </div>
               </div>
             </div>
-            {/* 메인 스켈레톤 */}
-            <div className='flex-grow animate-pulse rounded bg-gray-200'></div>
+            {/* 메인 영역 */}
+            <div className='min-w-0 flex-grow'></div>
           </div>
         </div>
       </div>
     );
   }
 
-  if (error) {
-    return (
-      <div className='flex min-h-screen items-center justify-center bg-gray-100'>
-        <div className='text-center'>
-          <h2 className='mb-2 text-xl font-bold text-red-500'>
-            로그인이 필요합니다
-          </h2>
-          <p className='text-gray-600'>다시 로그인해주세요.</p>
-        </div>
-      </div>
-    );
-  }
-
-  // API 로딩 완료 + mounted 상태일 때만 실행
+  // mounted 상태일 때만 실행
   return (
     <div className='min-h-screen bg-gray-100'>
       <div className='mx-auto max-w-1200 px-20 py-24 lg:py-72'>
@@ -66,7 +51,7 @@ export default function MyPageLayout({
           <ProfileNavigation />
 
           {/* 우측 메인 콘텐츠 섹션 */}
-          <div className='flex-grow'>{children}</div>
+          <div className='min-w-0 flex-grow'>{children}</div>
         </div>
       </div>
     </div>