refactor: 리뷰 수정사항 반영

frontend/src/components/carousel/Carousel.styled.ts

@@ -18,15 +18,15 @@ export const SlideWrapper = styled.div`
 
 interface SlideTrackProps {
   currentIndex: number;
-  isAnimating: boolean;
+  isSliding: boolean;
 }
 
 export const SlideTrack = styled.ul<SlideTrackProps>`
   display: flex;
   flex-direction: row;
   position: relative;
   transform-style: preserve-3d;
-  transition: ${({ isAnimating }) => (isAnimating ? 'transform 400ms ease-in-out' : 'none')};
+  transition: ${({ isSliding }) => (isSliding ? 'transform 400ms ease-in-out' : 'none')};
   transform: ${({ currentIndex }) => `translateX(-${currentIndex * 100}%)`};
   padding: 0;
   margin: 0;

frontend/src/components/carousel/Carousel.tsx

@@ -3,19 +3,13 @@ import type { PropsWithChildren } from 'react';
 import * as S from './Carousel.styled';
 
 export default function Carousel({ children }: PropsWithChildren) {
-  const {
-    carouselItems,
-    trackRef,
-    currentIndex,
-    isAnimating,
-    handleNextSlide,
-    handlePreviousSlide,
-  } = useCarousel({ children });
+  const { carouselItems, trackRef, currentIndex, isSliding, handleNextSlide, handlePreviousSlide } =
+    useCarousel({ children });
 
   return (
     <S.Container>
       <S.SlideWrapper>
-        <S.SlideTrack ref={trackRef} currentIndex={currentIndex} isAnimating={isAnimating}>
+        <S.SlideTrack ref={trackRef} currentIndex={currentIndex} isSliding={isSliding}>
           {carouselItems.map((item, index) => (
             <S.Slide key={`original-${index}`}>{item}</S.Slide>
           ))}

frontend/src/hooks/useCarousel.ts

@@ -4,8 +4,8 @@ import React, { useState, useRef, useEffect } from 'react';
 const useCarousel = ({ children }: PropsWithChildren) => {
   const carouselItems = React.Children.toArray(children);
   const carouselItemLength = carouselItems.length;
-  const [currentIndex, setCurrentIndex] = useState(1);
-  const [isAnimating, setIsAnimating] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isSliding, setIsSliding] = useState(false);
   const trackRef = useRef<HTMLUListElement>(null);
 
   const handleTransitionEnd = () => {
@@ -14,7 +14,7 @@ const useCarousel = ({ children }: PropsWithChildren) => {
     } else if (currentIndex === 0) {
       setCurrentIndex(carouselItemLength);
     }
-    setIsAnimating(false);
+    setIsSliding(false);
   };
 
   useEffect(() => {
@@ -28,15 +28,15 @@ const useCarousel = ({ children }: PropsWithChildren) => {
   }, [currentIndex, carouselItemLength]);
 
   const handleNextSlide = () => {
-    if (!isAnimating) {
-      setIsAnimating(true);
+    if (!isSliding) {
+      setIsSliding(true);
       setCurrentIndex((prevIndex) => prevIndex + 1);
     }
   };
 
   const handlePreviousSlide = () => {
-    if (!isAnimating) {
-      setIsAnimating(true);
+    if (!isSliding) {
+      setIsSliding(true);
       setCurrentIndex((prevIndex) => prevIndex - 1);
     }
   };
@@ -45,7 +45,7 @@ const useCarousel = ({ children }: PropsWithChildren) => {
     carouselItems,
     trackRef,
     currentIndex,
-    isAnimating,
+    isSliding,
     handleNextSlide,
     handlePreviousSlide,
   };