내일 배움 캠프 23_08_30 TIL

오늘은 프로젝트에서 스와이퍼를 구현해보았다

 

import React, { useState } from 'react';

import styled from 'styled-components';

import { Tag } from 'src/types/types';

import { TagImageProps } from 'src/types/types';

import { ReactComponent as TagIcon } from 'src/components/ImageTag/svg/TagIcon.svg';

import SwiperCore, { Navigation, Scrollbar } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper.min.css';

import 'swiper/components/navigation/navigation.min.css';

import 'swiper/components/scrollbar/scrollbar.min.css';

SwiperCore.use([Navigation, Scrollbar]);

const TagImage: React.FC<TagImageProps> = ({ imageUrl, recipeBody, tagsForImage }) => {

  const [selectedTag, setSelectedTag] = useState<Tag | null>(null);

  const [isMouseOverImage, setIsMouseOverImage] = useState(false);

  const [hoveredProductIndex, setHoveredProductIndex] = useState<number | null>(null);

  const handleTagClick = (tag: Tag) => {

    setSelectedTag(selectedTag === tag ? null : tag);

  };

  const handleProductMouseEnter = (index: number) => {

    setHoveredProductIndex(index);

  };

  const handleProductMouseLeave = () => {

    setHoveredProductIndex(null);

  };

  return (

    <S.ImageContainer>

      <div onMouseEnter={() => setIsMouseOverImage(true)} onMouseLeave={() => setIsMouseOverImage(false)}>

        <S.Image src={imageUrl} alt={imageUrl} />

        {tagsForImage.map((tag, tagIndex) => (

          <S.TagContainer

            key={tagIndex}

            style={{

              left: tag.x * 2.194,

              top: tag.y * 0.94

            }}

            onClick={() => handleTagClick(tag)}

          >

            {isMouseOverImage && (

              <S.TagIconContainer>

                <TagIcon />

              </S.TagIconContainer>

            )}

            {selectedTag === tag && (

              <S.TagDataContainer>

                <S.TagImage src={tag.img} alt="상품 이미지" />

                <S.DataContainer>

                  <S.ProdBrandContainer>{tag.prodBrand}</S.ProdBrandContainer>

                  <S.ProdContainer>{tag.prodData}</S.ProdContainer>

                </S.DataContainer>

              </S.TagDataContainer>

            )}

          </S.TagContainer>

        ))}

      </div>

      <S.ProductImageContainer>

        <Swiper slidesPerView={4} navigation>

          {tagsForImage.map((tag, tagIndex) => (

            <SwiperSlide key={tagIndex}>

              <S.ProductWrapper

                onMouseEnter={() => handleProductMouseEnter(tagIndex)}

                onMouseLeave={handleProductMouseLeave}

              >

                <S.ProductImage src={tag.img} alt="상품 이미지" />

                {hoveredProductIndex === tagIndex && <S.ProdDataOverlay>{tag.prodData}</S.ProdDataOverlay>}

              </S.ProductWrapper>

            </SwiperSlide>

          ))}

        </Swiper>

      </S.ProductImageContainer>

      {recipeBody && (

        <S.recipeBody

          dangerouslySetInnerHTML={{

            __html: recipeBody.replace(/\n/g, '<br>')

          }}

        />

      )}

    </S.ImageContainer>

  );

};

export default TagImage;

전체 코드는 이러한데 조금 더 부가설명을 해보자면

 

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper.min.css';

import 'swiper/components/navigation/navigation.min.css';

import 'swiper/components/scrollbar/scrollbar.min.css';

SwiperCore.use([Navigation, Scrollbar]);

위 코드들을 우선 불러와야하는데 설치할 땐 yarn add swiper라고 하면 모듈을 못찾는다는 오류가 발생하니

최신버전인데 왜 오류가 나는건지는 정확히 모르겠지만 CRA로 프로젝트 생성시에 그렇다는 것 같다.

그래서 yarn add swiper@6.84로 구버전을 설치해주면 오류가 없이 잘 설치가된다

 

스와이퍼를 사용하겠다고 선언해주고

 

 <S.ProductImageContainer>

        <Swiper slidesPerView={4} navigation>

          {tagsForImage.map((tag, tagIndex) => (

            <SwiperSlide key={tagIndex}>

              <S.ProductWrapper

                onMouseEnter={() => handleProductMouseEnter(tagIndex)}

                onMouseLeave={handleProductMouseLeave}

              >

                <S.ProductImage src={tag.img} alt="상품 이미지" />

                {hoveredProductIndex === tagIndex && <S.ProdDataOverlay>{tag.prodData}</S.ProdDataOverlay>}

              </S.ProductWrapper>

            </SwiperSlide>

          ))}

        </Swiper>

      </S.ProductImageContainer>

여기서 Swiper로 감싸서 사용해주면된다. 여러가지 커스텀 기능이 더 있지만 지금하는 프로젝트에서는 필요가없기에

저정도만 사용해주었다.