[TIL/React] 2023/08/23

import React, { useState } from "react";
import styled from "styled-components";
import { events } from "../data/EventList";

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

const Card = styled.div`
  height: 100%;
  margin: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.1);
    cursor: pointer;
  }
`;

const EventCardWrapper = styled.div``;

const EventCardImg = styled.img`
  width: 400px;
  height: 400px;
`;

const EventPage = () => {
  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);
    console.log(e.currentTarget.scrollLeft);
  };

  const handleMouseMove = (e) => {
    if (!isMousePressed) return;
    const currentMouseX = e.pageX - e.currentTarget.offsetLeft;
    e.currentTarget.scrollLeft =
      containerScrollLeft - (currentMouseX - startMouseX);
  };

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

  return (
    <CardContainer
      style={{ height: "1000px" }}
      onMouseDown={handleMousePress}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseRelease}
      onMouseLeave={handleMouseRelease}
    >
      {events?.map((event) => (
        <Card key={event.id}>
          <EventCardWrapper>
            <EventCardImg src={event.image} alt={event.title} />
            <h3
              style={{
                color: "rgb(255, 255, 255)",
                fontWeight: "bolder",
                textAlign: "center",
              }}
            >
              {event.title}
            </h3>
            <p
              style={{
                color: "rgb(155, 155, 155)",
                fontWeight: "bolder",
                textAlign: "center",
              }}
            >
              {event.subtitle}
            </p>
          </EventCardWrapper>
        </Card>
      ))}
    </CardContainer>
  );
};

export default EventPage;

import { eventImg } from "../images";

export const events = [
  {
    id: "1",
    image: eventImg.eventImg1,
    title: "2023 여름 선물세트",
    subtitle:
      "얼리버드 기간, 최대 7% 할인된 가격으로 초신선한 감사의 마음을 전하세요!",
  },
  {
    id: "2",
    image: eventImg.eventImg2,
    title: "푸짐한 바베큐 파티 이벤트",
    subtitle: "최대 15,000원 할인받고 푸짐한 바베큐 파티를 준비하세요!",
  },
  {
    id: "3",
    image: eventImg.eventImg3,
    title: "친구 초대 이벤트",
    subtitle: "즐거운 일상의 변화 '초신선'을 소중한 사람에게 알려주세요!",
  },
  {
    id: "4",
    image: eventImg.eventImg4,
    title: "앱 설치 이벤트",
    subtitle: "정육각 앱 설치하고 초신선한 일상을 누려보세요!",
  },
  {
    id: "5",
    image: eventImg.eventImg5,
    title: "상품 리뷰 혜택",
    subtitle: "만족하신 마음을 담아 상품 리뷰를 작성해주세요.",
  },
  {
    id: "6",
    image: eventImg.eventImg6,
    title: "신선플랜 배송 혜택",
    subtitle: "한 번 배송비로 4회 무료배송",
  },
  {
    id: "7",
    image: eventImg.eventImg1,
    title: "2023 여름 선물세트",
    subtitle:
      "얼리버드 기간, 최대 7% 할인된 가격으로 초신선한 감사의 마음을 전하세요!",
  },
  {
    id: "8",
    image: eventImg.eventImg2,
    title: "푸짐한 바베큐 파티 이벤트",
    subtitle: "최대 15,000원 할인받고 푸짐한 바베큐 파티를 준비하세요!",
  },
  {
    id: "9",
    image: eventImg.eventImg3,
    title: "친구 초대 이벤트",
    subtitle: "즐거운 일상의 변화 '초신선'을 소중한 사람에게 알려주세요!",
  },
  {
    id: "10",
    image: eventImg.eventImg4,
    title: "앱 설치 이벤트",
    subtitle: "정육각 앱 설치하고 초신선한 일상을 누려보세요!",
  },
  {
    id: "11",
    image: eventImg.eventImg5,
    title: "상품 리뷰 혜택",
    subtitle: "만족하신 마음을 담아 상품 리뷰를 작성해주세요.",
  },
  {
    id: "12",
    image: eventImg.eventImg6,
    title: "신선플랜 배송 혜택",
    subtitle: "한 번 배송비로 4회 무료배송",
  },
];

import logo from "./logo.jpeg";
import backgroundImg from "./background.png";
import termsImg from "./terms.jpeg";
import porkImg from "./porkbelly-fresh-list.png";
import chickenImg from "./chickef-cut-list.png";
import porkcutletImg from "./porkcutlet-sirloin-list.png";
import eggImg from "./egg-fresh-list.png";
import milkImg from "./milk-fresh-list.png";
import hanuroundImg from "./baby-hanuround-bmix-list.png";
import carthegardenImg from "./carthegarden.jpeg";
import eventImg1 from "./eventImg1.png";
import eventImg2 from "./eventImg2.png";
import eventImg3 from "./eventImg3.png";
import eventImg4 from "./eventImg4.png";
import eventImg5 from "./eventImg5.png";
import eventImg6 from "./eventImg6.png";

const eventImg = {
  eventImg1,
  eventImg2,
  eventImg3,
  eventImg4,
  eventImg5,
  eventImg6,
};

export {
  logo,
  backgroundImg,
  termsImg,
  porkImg,
  chickenImg,
  porkcutletImg,
  eggImg,
  milkImg,
  hanuroundImg,
  carthegardenImg,
  eventImg,
};