TIL 8/13

1. 슬라이더 설정 관련

• 슬라이더 모드: react-slick에서 사용할 수 있는 다양한 슬라이더 모드에 대해 알아보았다.

  • 기본 모드: 모든 슬라이드를 나란히 표시하는 기본 설정.

  • Fade 모드: 슬라이드가 부드럽게 전환되는 효과를 제공.

  • Variable Width 모드: 슬라이드의 너비가 내용에 따라 가변적으로 설정 가능.

  • Rows 모드: 여러 행으로 슬라이드를 나누어 표시할 수 있음.

• 왼쪽 여백 설정:

  • centerPadding 대신 CSS를 사용하여 슬라이드의 왼쪽에만 여백을 주는 방법을 배웠다.

  <div className="overflow-auto desktop:hidden w-full ml-10"> {/* 왼쪽 마진 추가 */}
    <Slider {...settings}>
      {limitedMagazines.map((magazine, index) => (
        <TertiCarousel
          key={index}
          src={magazine.imgs_url}
          alt={magazine.title}
          title={magazine.title}
          leftText={magazine.written_by}
          rightText={magazine.reporting_date}
          id={magazine.id}
        />
      ))}
    </Slider>
  </div>

• 왼쪽 카드 숨기기:

  • 슬라이더의 첫 번째 슬라이드를 CSS로 숨기거나, slidesToShow와 initialSlide 속성을 조정하여 왼쪽 카드를 보이지 않게 하는 방법을 이해했다.

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 2, // 보여줄 슬라이드 수 조정
    slidesToScroll: 1,
    initialSlide: 1, // 첫 번째 슬라이드를 건너뛰기
  };

  • CSS로 첫 번째 슬라이드 숨기기:

  .slick-slide.slick-active:first-child {
    display: none; /* 첫 번째 슬라이드를 숨김 */
  }

2. BgLinear 컴포넌트 관련

• 모바일 버전 만들기: BgLinear 컴포넌트를 수정하여 모바일 전용 배경 이미지와 애니메이션을 추가하는 방법을 배웠다.

  • 모바일과 데스크톱 버전을 조건부 렌더링하여 각각의 스타일과 이미지를 다르게 설정하였다.

  import React from "react";
  import { motion, useScroll, useTransform } from "framer-motion";
  
  const BgLinear = () => {
    const { scrollY } = useScroll();
  
    const bgY = useTransform(scrollY, [0, 1000], [-67, -200]);
    const bgtopY = useTransform(scrollY, [0, 1000], [-67, -150]);
    const imgY = useTransform(scrollY, [0, 1000], [-67, -100]);
    const mascotScale = useTransform(scrollY, [0, 1000], [1, 0.2]);
    const mascotX = useTransform(scrollY, [0, 1000], [0, -100]);
    const spaceshipScale = useTransform(scrollY, [0, 1000], [1, 0.2]);
    const spaceshipX = useTransform(scrollY, [0, 1000], [0, 400]);
  
    return (
      <>
        {/* Desktop Version */}
        <div className="relative hidden desktop:flex justify-center items-center overflow-hidden h-screen">
          <motion.img
            src="/mainbg.svg"
            alt="mainbg"
            className="w-full h-[850px] bg-brand-primary-500"
            style={{ y: bgY }}
          />
          <motion.img
            src="/mascot.svg"
            alt="mascot"
            className="absolute right-16 bottom-48 z-10"
            style={{ scale: mascotScale, x: mascotX, y: imgY }}
          />
          <motion.img
            src="/spaceship.svg"
            alt="spaceship"
            className="absolute left-32 bottom-48 z-10"
            style={{ scale: spaceshipScale, x: spaceshipX, y: imgY }}
          />
          <motion.img
            src="/bgtop.svg"
            alt="bgtop"
            className="absolute bottom-0 w-full"
            style={{ y: bgtopY }}
          />
        </div>
  
        {/* Mobile Version */}
        <div className="relative flex desktop:hidden justify-center items-center overflow-hidden h-screen">
          <motion.img
            src="/mainbg-mobile.svg" // 모바일 전용 배경 이미지
            alt="mainbg-mobile"
            className="w-full h-[450px] bg-brand-primary-500"
            style={{ y: bgY }}
          />
          <motion.img
            src="/mascot-mobile.svg" // 모바일 전용 마스코트 이미지
            alt="mascot-mobile"
            className="absolute right-8 bottom-24 z-10" // 위치 조정
            style={{ scale: mascotScale, x: mascotX, y: imgY }}
          />
          <motion.img
            src="/spaceship-mobile.svg" // 모바일 전용 우주선 이미지
            alt="spaceship-mobile"
            className="absolute left-8 bottom-24 z-10" // 위치 조정
            style={{ scale: spaceshipScale, x: spaceshipX, y: imgY }}
          />
          <motion.img
            src="/bgtop-mobile.svg" // 모바일 전용 상단 배경 이미지
            alt="bgtop-mobile"
            className="absolute bottom-0 w-full"
            style={{ y: bgtopY }}
          />
        </div>
      </>
    );
  };
  
  export default BgLinear;