Merge pull request #159 from codeit-2team/fix/158

Fix/158 리팩토링

Author: evaain706

next.config.ts

@@ -17,6 +17,10 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
 };
 
 export default nextConfig;

public/assets/img/default-bg.png

@@ -138,7 +138,7 @@ export default function ActivityDetailForm() {
           <LocationMap address={activityData.address} />
 
           <ReviewSection
-            activityId={id as string}
+            activityId={Number(id)}
             reviewCount={activityData.reviewCount}
             rating={activityData.rating}
           />

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

@@ -4,32 +4,41 @@ import Image from 'next/image';
 import React, { useState } from 'react';
 import { ImageGridProps } from '@/types/activityDetailType';
 import { AnimatePresence, motion } from 'framer-motion';
+import Modal from '@/components/Modal';
+import { DEFAULT_BG } from '@/constants/AvatarConstants';
 
 function ImageGrid({ mainImage, subImages }: ImageGridProps) {
-  const images = [mainImage, ...subImages];
-
+  const [image, setImage] = useState([mainImage, ...subImages]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [direction, setDirection] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const handleImageClick = (image: string) => {
+    setSelectedImage(image);
+    setIsOpen(true);
+  };
+
+  const handleImageError = (index: number) => {
+    setImage((prev) => prev.map((src, i) => (i === index ? DEFAULT_BG : src)));
+  };
 
   const prevSlide = () => {
     setDirection(-1);
-    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+    setCurrentIndex((prev) => (prev === 0 ? image.length - 1 : prev - 1));
   };
 
   const nextSlide = () => {
     setDirection(1);
-    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+    setCurrentIndex((prev) => (prev === image.length - 1 ? 0 : prev + 1));
   };
 
   const variants = {
     enter: (direction: number) => ({
       x: direction > 0 ? 300 : -300,
       opacity: 0,
     }),
-    center: {
-      x: 0,
-      opacity: 1,
-    },
+    center: { x: 0, opacity: 1 },
     exit: (direction: number) => ({
       x: direction > 0 ? -300 : 300,
       opacity: 0,
@@ -55,11 +64,13 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
             className='absolute inset-0'
           >
             <Image
-              src={images[currentIndex]}
-              alt={` ${currentIndex + 1}`}
+              src={image[currentIndex]}
+              alt={`${currentIndex + 1}`}
               fill
               className='rounded-lg object-cover'
               priority
+              unoptimized
+              onError={() => handleImageError(currentIndex)}
             />
           </motion.div>
         </AnimatePresence>
@@ -81,7 +92,7 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
         </button>
 
         <div className='absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1'>
-          {images.map((_, i) => (
+          {image.map((_, i) => (
             <div
               key={i}
               className={`h-10 w-10 rounded-full ${
@@ -94,28 +105,55 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
 
       {/* 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'>
+        <div
+          onClick={() => handleImageClick(mainImage)}
+          className='relative col-span-2 row-span-4 hover:animate-pulse'
+        >
           <Image
-            src={mainImage}
+            src={image[0]}
             alt='메인이미지'
             fill
             className='rounded-lg object-cover'
+            onError={() => handleImageError(0)}
           />
         </div>
-        {subImages.slice(0, 4).map((image, index) => (
+        {image.slice(1, 5).map((image, index) => (
           <div
-            key={index}
+            key={index + 1}
+            onClick={() => handleImageClick(image)}
             className='relative col-span-1 row-span-2 h-full hover:animate-pulse'
           >
             <Image
               src={image}
               alt={`서브이미지 ${index + 1}`}
               fill
               className='rounded-lg object-cover'
+              onError={() => handleImageError(index + 1)}
             />
           </div>
         ))}
       </div>
+      <Modal onOpenChange={setIsOpen} isOpen={isOpen}>
+        <Modal.Content className='rounded-md'>
+          <Modal.Header>
+            <Modal.Close />
+          </Modal.Header>
+          <Modal.Item className='flex items-center justify-center'>
+            <div className='relative aspect-square w-[1200px]'>
+              {selectedImage && (
+                <Image
+                  src={selectedImage}
+                  alt='확대 이미지'
+                  fill
+                  className='rounded-lg object-cover p-18'
+                />
+              )}
+            </div>
+          </Modal.Item>
+
+          <Modal.Footer></Modal.Footer>
+        </Modal.Content>
+      </Modal>
     </>
   );
 }

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

@@ -9,24 +9,9 @@ import { privateInstance } from '@/apis/privateInstance';
 import ReviewTitle from './ReviewTitle';
 import useUserStore from '@/stores/authStore';
 import cn from '@/lib/cn';
-
 import ReviewCardSkeleton from './Skeletons/ReviewCardSkeleton';
-
-interface ReviewSectionProps {
-  activityId: string;
-  reviewCount: number;
-  rating: number;
-}
-
-interface ReviewProps {
-  id: string;
-  user: {
-    nickname: string;
-    profileImageUrl: string;
-  };
-  createdAt: string;
-  content: string;
-}
+import { ReviewSectionProps } from '@/types/activityDetailType';
+import { ReviewProps } from '@/types/activityDetailType';
 
 function ReviewSection({
   activityId,

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

@@ -2,11 +2,8 @@
 
 import Star from '@assets/svg/star';
 import { useState, useEffect } from 'react';
+import { ReviewTitleProps } from '@/types/activityDetailType';
 
-interface ReviewTitleProps {
-  reviewCount: number;
-  rating: number;
-}
 export default function ReviewTitle({
   reviewCount = 0,
   rating = 0,

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

@@ -11,15 +11,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
 import { useDeleteActivity } from '../hooks/useDeleteActivity';
 import Popup from '@/components/Popup';
-
-interface TitleProps {
-  title: string;
-  category: string;
-  rating: number;
-  reviewCount: number;
-  address: string;
-  isOwner: boolean;
-}
+import { TitleProps } from '@/types/activityDetailType';
 
 function Title({
   title,
@@ -43,10 +35,9 @@ function Title({
 
   const handleDeleteConfirm = () => {
     if (!id) return;
-    mutate(id as string);
+    mutate(Number(id));
     setIsPopupOpen(false);
   };
-  
 
   return (
     <>

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

@@ -4,7 +4,7 @@ import { AxiosError } from 'axios';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
-const deleteActivity = async (id: string) => {
+const deleteActivity = async (id: number) => {
   const response = await privateInstance.delete(`/deleteActivity/${id}`);
   return response.data;
 };
@@ -23,6 +23,7 @@ export const useDeleteActivity = () => {
       });
       queryClient.invalidateQueries({ queryKey: ['popularExperiences'] });
       router.push(`/`);
+      toast.success('체험이 삭제되었습니다!');
     },
     onError: (error: AxiosError) => {
       const responseData = error.response?.data as

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

@@ -6,11 +6,7 @@ import { ScheduleSelectForm } from '../../components/ScheduleSelectForm';
 import { ImageSection } from '../../components/ImageSection';
 import { useEditActivityForm } from '../hooks/useEditActivityForm';
 import EditActivityFormSkeleton from '../../loading';
-
-interface SubImageType {
-  id?: number;
-  url: string | File;
-}
+import { SubImageType } from '@/types/addEditExperienceType';
 
 export default function EditActivityForm() {
   const {