React에서 Timeline 구현하기(styled-components)

 커머스의 배송 상태, 음식 배달앱에서 배달 상태에 따라 타임라인 형식으로 구현된 화면을 많이 볼 수 있다. 

교육 서비스인 우리 앱에서는 현재 구현할 일이 없어 혼자 한번 구현해 봤다. 실제 상태가 존재하지 않다 보니, hover를 통해 상태가 이동되도록 구현하였다.

여기 코드에서 조금 눈여겨볼 방법은 'component selector'를 사용했다는 것이다. 안타깝게도 react-native에서는 지원하진 않지만, 일반적인 웹과 웹뷰에서는 사용할 수 있다.  

const Date = styled...;
const Title = styled...;
const Contents = styled...;

const TimelineItem = styled.div`
  position: relative;
  padding: 28px 20px;

  &:hover {
    background: rgba(105, 105, 105, 0.2);
    ${Date} {
      background: seagreen;
      color: white;
      font-weight: bold;
    }
    ${Title} {
      color: lime;
      font-weight: bold;
    }
    ${Contents} {
      color: gray;
    }
  }

이를 통해 이름을 명확하게 지정하고 css클래스를 할당해주기 때문에 매우 강력한 합성 패턴을 만들 수 있다.

 

전체 코드를 깃허브를 모두 공개되며, 그리고 실제 구현은 스토리북(storybook)을 통해 확인할 수 있다.

---

스토리북

css-collection.vercel.app/?path=/story/jacob-css-timeline--basic-css

Storybook

 

소스코드

github.com/JungKyuHyun/css-collection/blob/main/src/components/Timeline/Timeline.tsx

JungKyuHyun/css-collection