Merge pull request #136 from codeit-2team/fix/130

Fix/130 QA사항 수정/리팩토링

Author: evaain706

src/app/(with-header)/activities/[id]/components/ActivityDetailForm.tsx

@@ -96,7 +96,7 @@ export default function ActivityDetailForm() {
   );
 
   return (
-    <div className='mx-auto max-w-1200 p-4 sm:px-20 lg:p-8'>
+    <div className='mx-auto mt-30 max-w-1200 p-4 px-20 sm:px-20 lg:p-8'>
       <Title
         title={activityData.title}
         category={activityData.category}

src/app/(with-header)/activities/[id]/components/ImageGrid.tsx

@@ -3,44 +3,83 @@
 import Image from 'next/image';
 import React, { useState } from 'react';
 import { ImageGridProps } from '@/types/activityDetailType';
+import { AnimatePresence, motion } from 'framer-motion';
 
 function ImageGrid({ mainImage, subImages }: ImageGridProps) {
   const images = [mainImage, ...subImages];
 
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [direction, setDirection] = useState(0);
 
   const prevSlide = () => {
+    setDirection(-1);
     setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
   };
 
   const nextSlide = () => {
+    setDirection(1);
     setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
   };
 
+  const variants = {
+    enter: (direction: number) => ({
+      x: direction > 0 ? 300 : -300,
+      opacity: 0,
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+    },
+    exit: (direction: number) => ({
+      x: direction > 0 ? -300 : 300,
+      opacity: 0,
+    }),
+  };
+
   return (
     <>
       {/* 모바일 */}
       <div className='relative block aspect-square h-[300px] w-full overflow-hidden rounded-lg md:hidden'>
-        <Image
-          src={images[currentIndex]}
-          alt={`슬라이드 이미지 ${currentIndex + 1}`}
-          fill
-          className='object-cover hover:animate-pulse'
-        />
+        <AnimatePresence custom={direction} initial={false}>
+          <motion.div
+            key={currentIndex}
+            custom={direction}
+            variants={variants}
+            initial='enter'
+            animate='center'
+            exit='exit'
+            transition={{
+              x: { type: 'spring', stiffness: 300, damping: 30 },
+              opacity: { duration: 0.2 },
+            }}
+            className='absolute inset-0'
+          >
+            <Image
+              src={images[currentIndex]}
+              alt={` ${currentIndex + 1}`}
+              fill
+              className='rounded-lg object-cover'
+              priority
+            />
+          </motion.div>
+        </AnimatePresence>
+
         <button
           onClick={prevSlide}
           aria-label='이전 이미지'
           className='absolute top-1/2 left-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white'
         >
           ‹
         </button>
+
         <button
           onClick={nextSlide}
           aria-label='다음 이미지'
           className='absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white'
         >
           ›
         </button>
+
         <div className='absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1'>
           {images.map((_, i) => (
             <div
@@ -52,7 +91,8 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
           ))}
         </div>
       </div>
-      {/* PC 태블릿 */}
+
+      {/* PC/태블릿 */}
       <div className='hidden h-[500px] grid-cols-4 grid-rows-4 gap-6 md:grid'>
         <div className='relative col-span-2 row-span-4 hover:animate-pulse'>
           <Image
@@ -62,7 +102,6 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
             className='rounded-lg object-cover'
           />
         </div>
-
         {subImages.slice(0, 4).map((image, index) => (
           <div
             key={index}

src/app/(with-header)/activities/[id]/components/ReviewSection.tsx

@@ -87,9 +87,11 @@ function ReviewSection({
         <div className='relative min-h-350'>
           <ReviewTitle reviewCount={reviewCount} rating={rating} />
 
-          <div className='pointer-events-none absolute inset-0 z-10 flex items-center justify-center'>
-            <div className='flex items-center justify-center font-bold'>
-              <p>작성된 리뷰가 없습니다</p>
+          <div className='pointer-events-none absolute inset-0 z-10 flex h-full items-center justify-center select-none'>
+            <div className='flex max-w-md items-center justify-center rounded-md bg-white px-20 py-20 shadow-2xl ring-1 ring-gray-200 select-none'>
+              <p className='text-md text-center font-bold text-gray-800'>
+                작성된 후기가 없습니다
+              </p>
             </div>
           </div>
         </div>
@@ -98,20 +100,20 @@ function ReviewSection({
   }
 
   if (isError) {
-    throw new Error('에러발생');
+    throw new Error('리뷰섹션에서 에러가 발생했습니다.');
   }
 
   return (
     <div className='mt-10 flex flex-col space-y-8'>
       <ReviewTitle reviewCount={reviewCount} rating={rating} />
 
-      <div className='relative min-h-350'>
+      <div className='pointer-events-none relative min-h-350 select-none'>
         <div className={user ? '' : 'blur-sm'}>{ReviewComponent()}</div>
 
         {!user && (
-          <div className='pointer-events-none absolute inset-0 z-10 flex items-center justify-center'>
-            <div className='rounded-md bg-white/70 px-4 py-2 shadow-md'>
-              <p className='text-sm font-semibold text-gray-700'>
+          <div className='pointer-events-none absolute inset-0 z-10 flex h-full items-center justify-center select-none'>
+            <div className='flex max-w-md items-center justify-center rounded-md bg-white px-20 py-20 shadow-2xl ring-1 ring-gray-200 select-none'>
+              <p className='text-md text-center font-bold text-gray-800'>
                 로그인 후 리뷰 전체 내용을 확인할 수 있어요
               </p>
             </div>

src/app/(with-header)/activities/[id]/components/ReviewTitle.tsx

@@ -15,6 +15,11 @@ export default function ReviewTitle({
 
   useEffect(() => {
     const handleSummary = () => {
+      if (reviewCount === 0) {
+        setSummary('작성된 후기가 없습니다');
+        return;
+      }
+
       if (rating >= 4.5) {
         setSummary('매우 만족');
       } else if (rating >= 3) {

src/app/(with-header)/activities/[id]/components/Skeleton.tsx

@@ -46,6 +46,7 @@ function Title({
     mutate(id as string);
     setIsPopupOpen(false);
   };
+  
 
   return (
     <>
@@ -55,14 +56,14 @@ function Title({
           <h1 className='mb-2 text-2xl font-bold text-black md:text-3xl'>
             {title}
           </h1>
-          <div className='flex items-center gap-10 text-sm text-gray-600'>
+          <div className='flex flex-nowrap items-center gap-30 text-sm text-gray-600'>
             <div className='flex items-center gap-1'>
               <Star />
-              <span className='font-medium'>
+              <p className='font-medium'>
                 {rating.toFixed(1)} ({reviewCount}명)
-              </span>
+              </p>
             </div>
-            <span>{address}</span>
+            <p>{address}</p>
           </div>
         </div>
 

src/app/(with-header)/activities/[id]/components/Title.tsx

@@ -8,6 +8,7 @@ import { uploadImage } from '../../utils/uploadImage';
 import { ActivityDetailEdit, Schedule } from '@/types/activityDetailType';
 import { AxiosError } from 'axios';
 import { toast } from 'sonner';
+import { notFound } from 'next/navigation';
 
 interface SubImageType {
   id?: number;
@@ -32,14 +33,26 @@ export const useEditActivityForm = () => {
   const [originalSchedules, setOriginalSchedules] = useState<Schedule[]>([]);
   const [dates, setDates] = useState<Schedule[]>([]);
 
-  const { data, isLoading, isError } = useQuery<ActivityDetailEdit, Error>({
+  const { data, isLoading, status, isError, error } = useQuery<
+    ActivityDetailEdit,
+    Error
+  >({
     queryKey: ['edit-activity', id],
     queryFn: async () => {
       const res = await privateInstance.get(`/activities/${id}`);
       return res.data;
     },
     enabled: !!id,
   });
+  if (status === 'error') {
+    const axiosError = error as AxiosError;
+    const httpStatus = axiosError.response?.status;
+
+    if (httpStatus === 404) {
+      console.log('404 에러임');
+      notFound();
+    }
+  }
 
   useEffect(() => {
     if (data) {

src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts

@@ -1,32 +1,37 @@
 import React from 'react';
+import { cn } from '@/lib/utils';
 
 interface BookingButtonProps {
   onClick: () => void;
   children: React.ReactNode;
   disabled?: boolean;
   onBooking?: boolean;
+  className?: string;
 }
 
 export default function BookingButton({
   onClick,
   children,
   disabled = false,
   onBooking = false,
+  className = '',
 }: BookingButtonProps) {
   return (
     <button
       onClick={onClick}
       disabled={disabled || onBooking}
-      className={`relative mt-4 mb-6 w-full max-w-sm rounded-lg py-10 font-medium transition-colors ${
+      className={cn(
+        'relative mt-4 mb-6 w-full max-w-sm rounded-lg py-10 font-medium transition-colors',
         disabled || onBooking
           ? 'cursor-not-allowed bg-gray-300 text-gray-500'
-          : 'bg-green-800 text-white hover:bg-green-900'
-      }`}
+          : 'bg-green-800 text-white hover:bg-green-900',
+        className,
+      )}
     >
       {onBooking ? (
         <div className='flex items-center justify-center gap-2'>
           <span className='h-10 w-10 animate-spin rounded-full border-2 border-white border-t-transparent' />
-          <p>예약 중...</p>
+          <p>...</p>
         </div>
       ) : (
         children

src/components/FloatingBox/BookingButton.tsx

@@ -114,10 +114,10 @@ export default function BookingInterface({
             <h3 className='mb-4 text-lg font-semibold text-gray-900'>날짜</h3>
             <button
               onClick={() => setIsOpen(true)}
-              className='w-full rounded-lg border border-gray-300 p-3 py-8 text-left text-black hover:bg-gray-50'
+              className='flex w-full items-center justify-center rounded-lg border border-gray-300 p-3 py-8 text-left text-black hover:bg-gray-50'
             >
               {selectedDate && selectedTime ? (
-                <h2>
+                <h2 className='animate-pulse'>
                   {selectedDate instanceof Date
                     ? selectedDate.toLocaleDateString()
                     : selectedDate}
@@ -145,18 +145,13 @@ export default function BookingInterface({
       </div>
 
       {/* 모바일 */}
-      <div className='fixed right-0 bottom-0 left-0 z-50 block border border-gray-200 bg-white p-6 md:hidden'>
+      <div className='fixed right-0 bottom-0 left-0 z-50 block h-150 border border-gray-200 bg-white px-20 md:hidden'>
         <div className='mb-6 flex items-start justify-between'>
           <div className='flex-1'>
-            <div className='mb-1 text-xl font-bold text-gray-900'>
-              ₩{price}
-              <span className='text-sm font-normal text-gray-600'>
-                / 총 {participants}인
-              </span>
-            </div>
+            <PriceDisplay price={price} />
             <div
               onClick={() => setIsOpen(true)}
-              className='mb-4 text-sm text-gray-600'
+              className='mb-4 animate-pulse cursor-pointer text-sm text-gray-600'
             >
               {selectedDate && selectedTime ? (
                 <h2>

src/components/FloatingBox/BookingInterface.tsx

@@ -2,7 +2,8 @@ export default function PriceDisplay({ price }: { price: number }) {
   return (
     <div className='mt-15 mb-6'>
       <div className='mb-1 text-2xl font-bold text-black'>
-        ₩{price} <span className='text-xl font-bold text-gray-800'>/ 인</span>
+        ₩{price.toLocaleString('ko-KR')}{' '}
+        <span className='text-xl font-bold text-gray-800'>/ 인</span>
       </div>
     </div>
   );