[Component] 슬라이드 텍스트

 

 

//렌더링
<SlideTextContainer>
  <MotionSlideText direction={false} text={slideText}></MotionSlideText>
  <MotionSlideText direction={true} text={slideText}></MotionSlideText>
  <MotionSlideText direction={false} text={slideText}></MotionSlideText>
</SlideTextContainer>;


// 스타일 밑 컴포넌트
const PromotionContainer = styled.div`
  background-color: #4d207a;
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

const SlideTextContainer = styled(PromotionContainer)`
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
`;
const SlideText = styled.div`
  white-space: nowrap;
`;

const MotionSlideText = ({ direction, text }) => {
  const start = direction ? -2000 : 0;
  const end = direction ? 0 : -2000;
  return (
    <div>
      <motion.div initial={{ x: start }} animate={{ x: end }} transition={{ duration: 180 }}>
        <SlideText>{text}</SlideText>
      </motion.div>
    </div>
  );
};