[FE] fix: 홈 페이지 캐러셀 초기 슬라이드 위치 조정 및 ConfirmModal에 props로 title을 받아서 디자인 수정

[soosoo22]

• resolves [FE] 홈 페이지 캐러셀 초기 슬라이드 위치를 조정하고 ConfirmModal에 props로 title을 받아서 디자인을 수정한다. #529

---

🚀 어떤 기능을 구현했나요 ?

• 홈 페이지 캐러셀의 초기 슬라이드 위치를 조정하여 첫 번째 슬라이드(= 리뷰 받는 사람)가 정확히 표시되도록 수정했습니다.
• ContentModal 컴포넌트에 title prop을 추가하여 모달 헤더에 제목을 표시하도록 변경했습니다. 그리고 확인 버튼과 인풋 사이의 간격을 조정하여 디자인을 개선했습니다.

🔥 어떻게 해결했나요 ?

0번째 복제본 슬라이드가 초기 슬라이드로 보이는 문제를 해결하기 위해 useEffect를 사용해서 초기 슬라이드 위치를 조정했습니다.

  useEffect(() => {
    scrollToSlide(REAL_START_INDEX, false);
  }, []);

transition 효과 제어를 위한 withTransition 매개변수를 추가했습니다. 이 매개변수는 슬라이드 전환 시 애니메이션 효과를 적용할지 여부를 결정합니다

  const scrollToSlide = (index: number, withTransition = true) => {
    if (slideRef.current) {
      setIsTransitioning(true);

      const slideWidth = slideRef.current.clientWidth;
      slideRef.current.style.transition = withTransition ? `transform ${TRANSITION_DURATION}ms ease-in-out` : 'none';
      slideRef.current.style.transform = `translateX(-${slideWidth * index * 0.1}rem)`;
    }
    setCurrentSlideIndex(index);
  };

ContentModal에 props로 title을 받아서 헤더에 타이틀과 x 표시 클로즈 버튼을 같은 라인에서 보여주는 식으로 변경했습니다. 그리고 인풋과 확인 버튼을 감싸는 컨테이너에 width를 늘려서 간격을 조정했습니다.

변경 전	변경 후

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

• 화이팅!

[BadaHertz52]

캐러셀 버그 잡느라고 고생했어 쑤쑤

[chysis]

고생 많았어요~!