Merge pull request #76 from summerDev96/fix/my-activity-form

Fix TRI-85: 내 체험 등록/수정 페이지 QA 수정사항 반영

Author: summerDev96

src/app/my-activities/activity/[activityId]/page.tsx

@@ -8,7 +8,7 @@ interface ActivityEditPageProps {
 const ActivityEditPage = async ({ params }: ActivityEditPageProps) => {
   const { activityId } = await params;
   return (
-    <div className='flex justify-center items-center max-w-[327px] md:max-w-[627px] mx-auto p-16'>
+    <div className='w-full flex justify-center items-center max-w-[327px] tablet:max-w-[684px] pc:max-w-[700px] mx-auto py-7.5 tablet:py-16'>
       {/* 수정 페이지 + 공통 폼 */}
       <MyActivityForm mode='EDIT' activityId={activityId} />
     </div>

src/app/my-activities/activity/page.tsx

@@ -2,7 +2,7 @@ import MyActivityForm from '@/components/pages/myActivities/MyActivityForm';
 
 const ActivityRegisterPage = () => {
   return (
-    <div className='flex justify-center items-center max-w-[327px] md:max-w-[627px] mx-auto p-16'>
+    <div className='w-full flex justify-center items-center max-w-[327px] tablet:max-w-[684px] pc:max-w-[700px] mx-auto py-7.5 tablet:py-16'>
       {/* 등록 페이지 + 공통 폼 */}
       <MyActivityForm />
     </div>

src/app/mypage/layout.tsx

@@ -1,5 +1,5 @@
 'use client';
-import Spinner from '@/components/common/Spinner';
+import MypageLoadingOverlay from '@/components/pages/myPage/MypageLoadingOverlay';
 import SideMenu from '@/components/pages/myPage/SideMenu';
 import { useScreenSize } from '@/hooks/useScreenSize';
 import { useUserStore } from '@/store/userStore';
@@ -30,11 +30,12 @@ const MyPageCommonLayout = ({ children }: MyPageCommonLayoutProps) => {
 
         <div
           className={clsx(
-            'pt-2.5 flex-1 min-w-0 min-h-70 tablet:block',
+            'pt-2.5 flex-1 min-w-0 min-h-80 tablet:block relative',
             isMobileMenuPage && 'mobile:hidden',
           )}
         >
-          {isPending ? <Spinner /> : children}
+          {children}
+          {isPending && <MypageLoadingOverlay />}
         </div>
       </>
     );

src/app/mypage/reservation-list/page.tsx

@@ -13,6 +13,7 @@ const ReservationListPage = () => {
   const queryClient = useQueryClient();
   const pathname = usePathname();
   const [selectedStatus, setSelectedStatus] = useState<ReservationStatusWithAll>('all');
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
 
   const {
     reservationListData,
@@ -27,6 +28,12 @@ const ReservationListPage = () => {
     refetch();
   }, [pathname, selectedStatus, queryClient, refetch]);
 
+  useEffect(() => {
+    if (!isLoading) {
+      setIsInitialLoad(false);
+    }
+  }, [isLoading]);
+
   return (
     <div className='flex flex-col gap-7.5'>
       {/* 헤더 */}
@@ -37,10 +44,10 @@ const ReservationListPage = () => {
             예약내역을 변경 및 취소할 수 있습니다.
           </span>
           <div className='flex pt-3.5 gap-2 overflow-x-auto whitespace-nowrap scrollbar-hide'>
-            {reservationListData.length > 0 &&
+            {(!isInitialLoad || reservationListData.length > 0) &&
               (Object.entries(reservationStatusAll) as [ReservationStatusWithAll, string][])
                 .filter(([value]) => value !== 'declined')
-                .map(([value, label]) => (
+                .map(([value, label]: [ReservationStatusWithAll, string]) => (
                   <Badge
                     key={value}
                     variant='outline'

src/app/mypage/reservation-status/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { getMyActivitiesList } from '@/app/api/myActivities';
-import Spinner from '@/components/common/Spinner';
 import ActivitySelect from '@/components/pages/myPage/ActivitySelect';
 import ReservationStatusCalendar from '@/components/pages/myPage/ReservationStatusCalendar';
 import { Label } from '@/components/ui/label';
@@ -10,14 +9,14 @@ import { format } from 'date-fns';
 import { useOverlay } from '@/hooks/useOverlay';
 import { Event as RBCEvent } from 'react-big-calendar';
 import ReservedScheduleModal from '@/components/pages/myPage/ReservedScheduleModal';
-import Image from 'next/image';
 import { useScheduleStore } from '@/store/reservedScheduleStore';
 import { getReservationDashboard } from '@/app/api/myReservations';
 import clsx from 'clsx';
+import EmptyList from '@/components/pages/myPage/EmptyList';
+import MypageLoadingOverlay from '@/components/pages/myPage/MypageLoadingOverlay';
 
 const ReservationStatusPage = () => {
   const overlay = useOverlay();
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
 
   const { setStatus } = useScheduleStore();
 
@@ -108,18 +107,9 @@ const ReservationStatusPage = () => {
   };
 
   const ReservationSection = () => {
+    if (isActivityListLoading) return null;
     if (!activityListData?.activities || activityListData?.activities.length === 0) {
-      return (
-        <div className='flex flex-col mx-auto'>
-          <Image
-            src={'/images/icons/_empty.png'}
-            width={182}
-            height={182}
-            alt='예약 현황 디폴트 이미지'
-          />
-          <span className='text-18-medium text-grayscale-600'>아직 등록한 체험이 없어요</span>
-        </div>
-      );
+      return <EmptyList text='빈 리스트 이미지' />;
     }
 
     return (
@@ -141,24 +131,15 @@ const ReservationStatusPage = () => {
     );
   };
 
-  useEffect(() => {
-    if (!isActivityListLoading && !isReservationListLoading) {
-      setIsInitialLoading(false);
-    }
-  }, [isActivityListLoading, isReservationListLoading]);
-
   useEffect(() => {
     if (activityListData && activityListData?.activities?.length > 0) {
       setActivityId(String(activityListData?.activities[0].id));
     }
   }, [activityListData]);
 
-  if (isInitialLoading) {
-    return <Spinner />;
-  }
-
   return (
-    <div className='flex flex-col gap-5 pl-4'>
+    <div className='flex flex-col gap-5 pl-4 relative'>
+      {(isActivityListLoading || isReservationListLoading) && <MypageLoadingOverlay />}
       {/* 헤더 */}
       <div className='px-6 sm:px-0 flex flex-col gap-4'>
         <div className='flex flex-col md:flex-row w-full justify-between items-start md:items-center gap-4 md:gap-16'>

src/app/mypage/user/page.tsx

@@ -16,8 +16,8 @@ import { UserProfile, UserUpdateRequest } from '@/types/user.type';
 import { useOverlay } from '@/hooks/useOverlay';
 import ConfirmModal from '@/components/common/ConfirmModal';
 import { successToast } from '@/lib/utils/toastUtils';
-import Spinner from '@/components/common/Spinner';
 import clsx from 'clsx';
+import MypageLoadingOverlay from '@/components/pages/myPage/MypageLoadingOverlay';
 
 type UserFormValues = {
   nickname: string;
@@ -100,12 +100,9 @@ const UserPage = () => {
     }
   }, [userData, reset, setUser]);
 
-  if (isLoading) {
-    return <Spinner />;
-  }
-
   return (
-    <div className='flex flex-col gap-7.5'>
+    <div className='flex flex-col gap-7.5 relative'>
+      {isLoading && <MypageLoadingOverlay />}
       {/* 헤더 */}
       <div className={clsx('flex flex-col w-full items-start gap-8 pl-4')}>
         <div className='flex flex-col gap-2.5'>

src/app/mypage/wishlist/page.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import Spinner from '@/components/common/Spinner';
 import ActivityLike from '@/components/home/ActivityLike';
+import { wsrvLoader } from '@/components/common/wsrvLoader';
 
 export default function WishList() {
   const [isLoading, setIsLoading] = useState(true);
@@ -53,6 +54,7 @@ export default function WishList() {
                   <Link href={`/activities/${activity.id}`}>
                     <div className='w-full h-[200px] relative'>
                       <Image
+                        loader={wsrvLoader}
                         src={activity.bannerImageUrl}
                         alt={activity.title}
                         fill
@@ -80,6 +82,7 @@ export default function WishList() {
                   <Link href={`/activities/${activity.id}`}>
                     <div className='w-[126px] h-full relative flex-shrink-0'>
                       <Image
+                        loader={wsrvLoader}
                         src={activity.bannerImageUrl}
                         alt={activity.title}
                         fill

src/components/common/BasicCalendar.tsx

@@ -4,11 +4,19 @@ import * as React from 'react';
 import { DayPicker, getDefaultClassNames } from 'react-day-picker';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import 'react-day-picker/style.css';
+
+interface BasicCalendarProps {
+  isDateInput?: boolean;
+}
+
+type Props = BasicCalendarProps & React.ComponentProps<typeof DayPicker>;
+
 function BasicCalendar({
+  isDateInput = false,
   showOutsideDays = true,
   formatters,
   ...props
-}: React.ComponentProps<typeof DayPicker>) {
+}: Props) {
   const defaultClassNames = getDefaultClassNames();
   return (
     <DayPicker
@@ -20,8 +28,9 @@ function BasicCalendar({
       }}
       classNames={{
         root: `${defaultClassNames.root} w-full flex items-center justify-center`,
-        day: `w-10 h-10 lg:w-8 lg:h-8 xl:w-10 xl:h-10`,
+        day: `${isDateInput ? 'w-8 h-8' : 'w-10 h-10 lg:w-8 lg:h-8 xl:w-10 xl:h-10'}`,
         day_button: 'w-full h-full',
+        caption_label: 'flex items-center justify-center pl-3',
       }}
       modifiersClassNames={{
         selected: 'bg-primary-500 text-white font-bold rounded-full',

src/components/common/FormInput.tsx

@@ -7,6 +7,7 @@ interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;
   error?: string;
   className?: string;
+  labelClassName?: string;
 }
 
 // 사용법 다시 적기
@@ -44,10 +45,10 @@ interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  */
 
 const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
-  ({ type = 'text', id, label, error, className, ...props }, ref) => {
+  ({ type = 'text', id, label, error, className, labelClassName, ...props }, ref) => {
     return (
       <div className='flex flex-col w-full'>
-        <Label htmlFor={id} className='mb-[10px]'>
+        <Label htmlFor={id} className={clsx('mb-[10px]', labelClassName)}>
           {label}
         </Label>
         <Input

src/components/common/LoadErrorFallback.tsx

@@ -2,6 +2,7 @@
 
 import { useState, cloneElement, isValidElement, ReactElement } from 'react';
 import Image from 'next/image';
+import { wsrvLoader } from './wsrvLoader';
 
 interface LoadErrorFallbackProps {
   children: ReactElement<{ onError?: (e: Event) => void }>;
@@ -11,6 +12,8 @@ interface LoadErrorFallbackProps {
 function DefaultImageFallback() {
   return (
     <Image
+      loader={wsrvLoader}
+      loading='lazy'
       src='/images/placeholder.svg'
       alt='이미지를 불러올 수 없습니다'
       width={200}