[#101] refactor: 일부 리렌더링 리팩토링/예약 버튼 UI수정

Author: evaain706

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

@@ -14,11 +14,11 @@ import ReviewSection from './ReviewSection';
 import { AxiosError } from 'axios';
 import { notFound } from 'next/navigation';
 
-import ActivityDetailSkeleton from './ActivityDetailSkeleton';
+import ActivityDetailSkeleton from './Skeletons/ActivityDetailSkeleton';
 
 export default function ActivityDetailForm() {
-  const [year, setYear] = useState(2025);
-  const [month, setMonth] = useState(7);
+  const [year, setYear] = useState(new Date().getFullYear());
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
 
   const { id } = useParams();
 

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

@@ -1,19 +1,18 @@
 'use client';
 
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { ImageGridProps } from '@/types/activityDetailType';
 
-export default function ImageGrid({ mainImage, subImages }: ImageGridProps) {
+function ImageGrid({ mainImage, subImages }: ImageGridProps) {
   const images = [mainImage, ...subImages];
-  const [currentIndex, setCurrentIndex] = useState(0); //캐러셀 구현용 state
 
-  //  첫번째 이미지면 마지막 이미지로 아니면 -1
+  const [currentIndex, setCurrentIndex] = useState(0);
+
   const prevSlide = () => {
     setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
   };
 
-  // 현재 마지막 이미지면 첫 이미지로 아니면 +1
   const nextSlide = () => {
     setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
   };
@@ -24,24 +23,24 @@ export default function ImageGrid({ mainImage, subImages }: ImageGridProps) {
       <div className='relative block aspect-square h-[300px] w-full overflow-hidden rounded-lg md:hidden'>
         <Image
           src={images[currentIndex]}
-          alt={`${currentIndex + 1}`}
+          alt={`슬라이드 이미지 ${currentIndex + 1}`}
           fill
           className='object-cover hover:animate-pulse'
         />
-
         <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
@@ -81,3 +80,5 @@ export default function ImageGrid({ mainImage, subImages }: ImageGridProps) {
     </>
   );
 }
+
+export default React.memo(ImageGrid);

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

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { useState, useCallback } from 'react';
 import ReviewCard from './ReviewCard';
 import Pagination from '@/components/Pagination';
@@ -24,7 +25,7 @@ interface ReviewProps {
   content: string;
 }
 
-export default function ReviewSection({
+function ReviewSection({
   activityId,
   reviewCount,
   rating,
@@ -103,3 +104,5 @@ export default function ReviewSection({
     </div>
   );
 }
+
+export default React.memo(ReviewSection);

…d]/components/ActivityDetailSkeleton.tsx …nts/Skeletons/ActivityDetailSkeleton.tsxsrc/app/(with-header)/activities/[id]/components/ActivityDetailSkeleton.tsx renamed to src/app/(with-header)/activities/[id]/components/Skeletons/ActivityDetailSkeleton.tsx src/app/(with-header)/activities/[id]/components/ActivityDetailSkeleton.tsx renamed to src/app/(with-header)/activities/[id]/components/Skeletons/ActivityDetailSkeleton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import SkeletonBookingInterface from './Skeletons/BookingInterfaceSkeleton';
+import SkeletonBookingInterface from './BookingInterfaceSkeleton';
 import useUserStore from '@/stores/authStore';
 
 export default function ActivityDetailSkeleton({ userId }: { userId: number }) {

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

@@ -21,7 +21,7 @@ interface TitleProps {
   isOwner: boolean;
 }
 
-export default function Title({
+function Title({
   title,
   category,
   rating,
@@ -90,3 +90,5 @@ export default function Title({
     </>
   );
 }
+
+export default React.memo(Title);

src/app/globals.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import "tw-animate-css";
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 

src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { shallow } from 'zustand/shallow';
 import dayjs from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import isoWeek from 'dayjs/plugin/isoWeek';
@@ -11,6 +12,7 @@ import CalendarHeader from './CalendarHeader';
 import CalendarBody from './CalendarBody';
 import useBookingStore from '@/stores/Booking/useBookingStore';
 import { SchedulesProps } from '@/types/activityDetailType';
+import { BookingState } from '@/types/bookingStoreTypes';
 
 dayjs.extend(weekday);
 dayjs.extend(isoWeek);
@@ -24,9 +26,11 @@ export default function DatePicker({
   schedules: SchedulesProps;
   onMonthChange?: (year: number, month: number) => void;
 }) {
-  const { selectedDate, setSelectedDate, setAvailableDates, availableDates } =
-    useBookingStore();
-
+  const selectedDate = useBookingStore((state) => state.selectedDate);
+  const setSelectedDate = useBookingStore((state) => state.setSelectedDate);
+  const setAvailableDates = useBookingStore((state) => state.setAvailableDates);
+  const availableDates = useBookingStore((state) => state.availableDates);
+  
   const today = dayjs();
 
   const [viewDate, setViewDate] = useState(() =>

src/components/FloatingBox/BookingInterface.tsx

@@ -152,9 +152,11 @@ export default function BookingInterface({
               )}
             </div>
             <BookingModal schedules={schedules} price={price} />
-            <BookingButton disabled={!isBookable} onClick={handleBooking}>
-              {buttonText}
-            </BookingButton>
+            <div className='flex justify-center'>
+              <BookingButton disabled={!isBookable} onClick={handleBooking}>
+                {buttonText}
+              </BookingButton>
+            </div>
           </div>
         </div>
       </div>

src/components/LocationMap.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk';
 import Location from '@assets/svg/location';
+import React from 'react';
 
 interface LocationMapProps {
   address: string;
@@ -108,4 +109,4 @@ const LocationMap = ({ address }: LocationMapProps) => {
   );
 };
 
-export default LocationMap;
+export default React.memo(LocationMap);