2. 랜딩페이지

서비스에 접속하게 되면 가장 처음으로 보이는 랜딩 페이지이다. 가운데에 보이는 페이지 카드들이 버튼을 누를 때마다 애니메이션을 통해 자리가 바뀌게 되고 오른쪽의 설명이 교체되는 것이 핵심 기능이다. 카드들이 원형으로 회전하는 것과 같은 UI를 구현하기 위해서 모든 카드들을 겹쳐놓고 현재 위치에 따라서 transform을 적용하는 방법을 이용했다. 자세한 코드는 아래와 같다.

 

  <CardContainer>
    <Button left onClick={() => handleButtonClick("left")}>
      <img src={LeftButton} alt="left" />
    </Button>
    {cards.map((card, index) => (
      <WelcomeCard
        key={card.url}
        title={card.title}
        content={card.content}
        url={card.url}
        width={card.width}
        background={card.background}
        titleTop={card.titleTop}
        contentTop={card.contentTop}
        imgTop={card.imgTop}
        color={card.color}
        onClick={() => navigate(card.link)}
        isActive={index === activeCard}
        style={{
          position: "absolute",
          zIndex: index === activeCard ? 2 : 1,
          transition: "all 0.5s ease",
          transform: getTransformStyle(index, activeCard),
          opacity: getOpacityStyle(index, activeCard),
        }}
      />
    ))}
    <Button right onClick={() => handleButtonClick("right")}>
      <img src={RightButton} alt="right" />
    </Button>
  </CardContainer>

cards에 각 카드의 내용물을 저장해놓고 map을 사용하여 한 번에 겹쳐서 출력하였다. 이 때 inline styled에서 zIndex와 transform, opacity를 통해 가장 가운데로 현재 활성된 카드를 올리고 강조해준다.

 

  const getTransformStyle = (index, activeCardIndex) => {
    if (index === activeCardIndex) {
      return "translateX(0)";
    }
    if (index === (activeCardIndex + 1) % cards.length) {
      return "translateX(40%)";
    }
    if (index === (activeCardIndex - 1 + cards.length) % cards.length) {
      return "translateX(-40%)";
    }
    if (index === (activeCardIndex + 2) % cards.length) {
      return "translateX(80%)";
    }
    return "translateX(-80%)";
  };

  const getOpacityStyle = (index, activeCardIndex) => {
    if (index === activeCardIndex) {
      return "1";
    }
    return "0.4";
  };

카드 너비의 40%만큼 이동시킴으로써 겹쳐진 상태를 구현할 수 있었다. card는 총 세 장이 있었기 때문에 끝에서 이동할 경우 80%를 이동하여 반대편으로 전환시킨다.

function WelcomeCard({
  title,
  content,
  url,
  background,
  width,
  style,
  titleTop,
  contentTop,
  imgTop,
  color,
  onClick,
  isActive,
}) {
  return (
    <Card
      background={background}
      style={style}
      isActive={isActive}
      onClick={isActive ? onClick : undefined}
    >
      <BoldMedium
        style={{
          position: "absolute",
          top: titleTop,
          textAlign: "center",
          color,
        }}
      >
        {title}
      </BoldMedium>
      <MediumSmall
        style={{
          position: "absolute",
          top: contentTop,
          whiteSpace: "pre-wrap",
          textAlign: "center",
          color,
        }}
      >
        {content}
      </MediumSmall>
      <CardImage
        src={url}
        alt="card"
        width={width}
        style={{
          top: imgTop,
        }}
      />
    </Card>
  );
}

WelcomCard를 컴포넌트로써 따로 분리해 코드의 가시성을 높일 수 있었다.