React에서 시간 슬롯 선택 시 자동 스크롤 기능 추가하기

1. useRef를 활용한 버튼 참조

const buttonRef = useRef(null);

• useRef를 사용하여 '다음 단계' 버튼을 참조할 수 있도록 설정합니다.
• 이후 scrollIntoView를 통해 해당 버튼으로 스크롤을 이동할 예정입니다.

---

2. 시간 슬롯 선택 시 버튼으로 자동 스크롤 기능 추가

const handleTimeSelect = (time) => {
  if (selectedTime === time) {
    setSelectedTime([]);
    return;
  }
  setSelectedTime(time);
  
  setTimeout(() => {
    if (buttonRef.current) {
      buttonRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }, 200);
};

💡 핵심 변경 사항

1. 사용자가 시간을 선택하면 selectedTime 상태를 업데이트합니다.
2. 150ms 지연 후 scrollIntoView를 사용하여 버튼이 화면 중앙으로 오도록 스크롤합니다.
3. behavior: 'smooth' 옵션을 추가해 자연스럽게 이동하도록 처리합니다.

---

3. "다음 단계" 버튼에 ref 연결

{selectedTime.length > 0 && (
  <motion.button
    ref={buttonRef}
    className="next-step-button active"
    onClick={handleNextStep}
  >
    다음 단계
  </motion.button>
)}

📌 추가된 부분

• motion.button 태그에 ref={buttonRef} 속성을 추가해 스크롤 이동이 가능하도록 설정했습니다.
• 이제 사용자가 시간을 선택하면 버튼이 자동으로 보이는 위치로 이동합니다.

---

📌 최종 정리

✅ 적용한 주요 기능

• useRef를 사용해 버튼을 참조
• 시간 슬롯 클릭 시 scrollIntoView로 자동 스크롤 이동
• 클릭 후 부드러운 스크롤 효과 추가 (behavior: 'smooth')

이제 사용자가 시간 슬롯을 선택하면 '다음 단계' 버튼이 자동으로 화면에 표시되도록 개선되었습니다! 🚀

---

🎯 추가 개선 아이디어

• 예약된 시간은 선택 불가능하게 스타일링 추가
• 애니메이션 효과 강화 (framer-motion 활용 가능)
• 모바일 반응형 최적화 (window.innerHeight 고려)