[TIL/React] 2023/08/21

import React, { useState } from "react";
import styled from "styled-components";

const CardContainer = styled.div`
  display: flex;
  overflow-x: scroll;
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  cursor: grab;
`;

const Card = styled.div`
  flex: 0 0 200px;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
`;

const App = () => {
  const [isMousePressed, setIsMousePressed] = useState(false);
  const [containerScrollLeft, setContainerScrollLeft] = useState(0);
  const [startMouseX, setStartMouseX] = useState(0);

  const handleMousePress = (e) => {
    setIsMousePressed(true);
    setStartMouseX(e.pageX - e.currentTarget.offsetLeft);
    setContainerScrollLeft(e.currentTarget.scrollLeft);
  };

  const handleMouseMove = (e) => {
    if (!isMousePressed) return;
    e.preventDefault();
    const currentMouseX = e.pageX - e.currentTarget.offsetLeft;
    const mouseMovement = currentMouseX - startMouseX;
    console.log(mouseMovement);
    console.log("2", containerScrollLeft);
    e.currentTarget.scrollLeft = containerScrollLeft - mouseMovement;
  };

  const handleMouseRelease = () => {
    setIsMousePressed(false);
  };

  return (
    <CardContainer
      // 누르는 순간
      onMouseDown={handleMousePress}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseRelease}
      onMouseLeave={handleMouseRelease}
    >
      {/* 카드 컴포넌트들 */}

      <Card>Card 1</Card>
      <Card>Card 2</Card>
      <Card>Card 3</Card>
      <Card>Card 4</Card>
      <Card>Card 5</Card>
      <Card>Card 1</Card>
      <Card>Card 2</Card>
      <Card>Card 3</Card>
      <Card>Card 4</Card>
      <Card>Card 5</Card>
    </CardContainer>
  );
};

export default App;