feat: scrollable container custom hook

[joohaem]

• 브랜치명, 브랜치 알맞게 설정
• Reviewer, Assignees, Label, Milestone, Issue(PR 작성 후에) 붙이기
• PR이 승인된 경우 해당 브랜치는 삭제하기

📌 내용

• x-drag를 데스크탑에서도 그래그 할 수 있게끔 기능을 추가합니다
• 고마워 지피티!

📌 내가 알게 된 부분

• x-drag 컨테이너가 데스크탑에서도 드래그 할 수 있도록 기능을 추가합니다
• 고마워 지피티!

// 지피티가 짜준 코드
import { useState, useRef } from 'react';

function ScrollableContainer() {
  const containerRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(null);

  function handleMouseDown(event) {
    setIsDragging(true);
    setStartX(event.pageX);
  }

  function handleMouseMove(event) {
    if (!isDragging) return;
    const container = containerRef.current;
    container.scrollLeft = container.scrollLeft + startX - event.pageX;
    setStartX(event.pageX);
  }

  function handleMouseUp() {
    setIsDragging(false);
  }

  return (
    <div
      ref={containerRef}
      className="scrollable-container"
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      {/* 스크롤 가능한 컨텐츠 요소 */}
    </div>
  );
}

[NYeonK]

지피티 도랐네 진짜로...
그걸 스크롤에 이용할 생각한 당신은 천재✨🌟🍻