react-vertical-timeline-component(한국어)

웹 사이트, 웹 애플리케이션에서 이벤트, 개발 이력, 프로젝트 이력, 회사의 마일스톤 등을 시간 순서대로 나열할 때 사용하는 컴포넌트입니다.

Features

  1. 재사용, 확장, 유지 관리가 쉽습니다.

  2. 사용자의 입력이나 외부 데이터에 따라 동적으로 내용을 업데이트 할 수 있습니다.


Installation

"react-vertical-timeline-component를 설치하려면 npm이나 yarn을 사용할 수 있습니다. 이 패키지는 React 프로젝트에서 사용하려는 컴포넌트에 세로 타임라인을 쉽게 추가할 수 있게 해줍니다."

주의 사항

"React가 프로젝트에 이미 설치되어 있는 상태에서 사용되어야 합니다. 따라서 아직 React 프로젝트를 시작하지 않았다면, 먼저 create-react-app을 사용하여 프로젝트를 생성해야 합니다."

  • Name
    업데이트 확인
    Type
    주의 사항
    Description

    항상 패키지의 업데이트를 확인하고, 업데이트가 있으면 필요에 따라 패키지를 업데이트하거나, 변경 사항을 프로젝트에 적용해야 합니다.

Installation

npm i react-vertical-timeline-component

사용법Usage

Usage

먼저 패키지를 불러온 다음, VerticalTimeline 및 VerticalTimelineElement 컴포넌트의 인스턴스를 생성이 필요합니다.

  • Name
    VerticalTimeline 컴포넌트
    Type
    사용법
    Description

    VerticalTimeline 컴포넌트를 사용하여 타임라인을 생성하세요. 이 컴포넌트는 타임라인의 뼈대 역할을 합니다.

  • Name
    VerticalTimelineElement 컴포넌트
    Type
    사용법
    Description

    VerticalTimelineElement 컴포넌트를 사용하여 각 타임라인 요소를 생성하세요. 이 컴포넌트는 날짜, 제목, 하위 텍스트 등을 포함하는 타임라인의 개별 항목입니다.

주의 사항

  • Name
    CSS
    Type
    주의 사항
    Description

    이 컴포넌트는 CSS-in-JS 방식을 사용하므로, 커스텀 스타일을 적용하려면 패키지의 기본 스타일을 재정의해야 합니다.

  • Name
    React 버전
    Type
    주의 사항
    Description

    이 패키지는 React 프로젝트에서 사용되므로, React의 버전이 이 패키지와 호환되는지 확인해야 합니다.

Usage

import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

VerticalTimeline

<VerticalTimeline>
    <VerticalTimelineElement
        className="vertical-timeline-element--work"
        date="2011 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    >
        <h3 className="vertical-timeline-element-title">Creative Director</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
        Creative Direction, User Experience, Visual Design, Project Management,
        Team Leading
        </p>
    </VerticalTimelineElement>
</VerticalTimeline>

Customization

react-vertical-timeline-component는 반응형 세로 타임라인 구성 요소를 만드는 데 유용한 리액트 컴포넌트입니다. 다음은 이 컴포넌트를 사용자화하는 방법에 대한 설명입니다.

설명

VerticalTimeline Props

  • Name
    animate
    Type
    사용자화
    Description
    • 요소에 대한 애니메이션을 활성화 또는 비활성화합니다.
    • 기본값은 true입니다.
  • Name
    className
    Type
    사용자화
    Description
    • 루트 div 요소에 추가 클래스 이름을 추가합니다.
  • Name
    layout
    Type
    사용자화
    Description
    • '1-column-left' 또는 '1-column-right' 또는 '2-columns' 중에서 선택합니다.
    • 기본값은 '2-columns'입니다.
  • Name
    lineColor
    Type
    사용자화
    Description
    • 타임라인의 색상을 선택합니다.
    • 기본값은 'white'입니다.

VerticalTimelineElement Props

  • Name
    className
    Type
    사용자화
    Description
    • 루트 div 요소에 추가 클래스 이름을 추가합니다.
  • Name
    contentArrowStyle
    Type
    사용자화
    Description
    • 콘텐츠 화살표 div 요소에 대한 추가 스타일을 추가합니다.
  • Name
    contentStyle
    Type
    사용자화
    Description
    • 콘텐츠 div 요소에 추가 스타일을 추가합니다.
  • Name
    date
    Type
    사용자화
    Description
    • 요소의 날짜입니다.
  • Name
    dateClassName
    Type
    사용자화
    Description
    • 요소의 날짜에 추가 클래스 이름을 추가합니다.
  • Name
    icon
    Type
    사용자화
    Description
    • 요소의 아이콘입니다.
  • Name
    iconClassName
    Type
    사용자화
    Description
    • 요소의 아이콘에 추가 클래스 이름을 추가합니다.
  • Name
    iconOnClick
    Type
    Function
    Description
    • 요소의 아이콘의 onClick 핸들러입니다.
  • Name
    iconStyle
    Type
    사용자화
    Description
    • 요소의 아이콘 스타일입니다.
  • Name
    position
    Type
    사용자화
    Description
    • 요소의 위치 (왼쪽 또는 오른쪽).
  • Name
    style
    Type
    사용자화
    Description
    • 루트 div 요소에 추가 스타일을 추가합니다.
  • Name
    textClassName
    Type
    사용자화
    Description
    • 텍스트 컨테이너에 추가 클래스 이름을 추가합니다.

Customization

    <VerticalTimeline>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
            date="2011 - present"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Creative Director</h3>
            <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
            <p>
            Creative Direction, User Experience, Visual Design, Project Management, Team Leading
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            date="2010 - 2011"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Art Director</h3>
            <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
            <p>
            Creative Direction, User Experience, Visual Design, SEO, Online Marketing
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            date="2008 - 2010"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Web Designer</h3>
            <h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
            <p>
            User Experience, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            date="2006 - 2008"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Web Designer</h3>
            <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
            <p>
            User Experience, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--education"
            date="April 2013"
            iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
            icon={<SchoolIcon />}
        >
            <h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
            <h4 className="vertical-timeline-element-subtitle">Online Course</h4>
            <p>
            Strategy, Social Media
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--education"
            date="November 2012"
            iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
            icon={<SchoolIcon />}
        >
            <h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
            <h4 className="vertical-timeline-element-subtitle">Certification</h4>
            <p>
            Creative Direction, User Experience, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--education"
            date="2002 - 2006"
            iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
            icon={<SchoolIcon />}
        >
            <h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
            <h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
            <p>
            Creative Direction, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
            icon={<StarIcon />}
        />
</VerticalTimeline>

Example

react-vertical-timeline-component를 사용하여 시간 순서에 따른 이벤트의 시각적 타임라인을 생성합니다. VerticalTimeline 및 VerticalTimelineElement는 이 라이브러리의 주요 구성 요소입니다.

추가 설명

  • Name
    VerticalTimeline
    Type
    예시
    Description

    타임라인의 컨테이너 역할을 합니다. 여기서는 layout prop을 사용하여 타임라인의 레이아웃을 '1-column-left'로 설정하였습니다. 또한 lineColor prop을 사용하여 타임라인의 색상을 설정하였습니다.

  • Name
    VerticalTimelineElement
    Type
    예시
    Description

    타임라인 이벤트를 나타내는 엘리먼트입니다. 여기에는 아래와 같은 주요 props들이 사용되었습니다.

    • className: CSS 클래스를 추가합니다. 여기서는 'vertical-timeline-element--work'를 사용하였습니다.
    • contentStyle 및 contentArrowStyle: 이벤트의 컨텐츠 박스와 화살표의 스타일을 설정합니다. 여기서는 배경색과 글자 색상을 변경하였습니다.
    • date: 이벤트의 날짜를 나타냅니다.
    • iconStyle 및 icon: 아이콘의 스타일과 표시할 아이콘을 설정합니다. 여기서는 react-icons/fa 라이브러리에서 가져온 아이콘을 사용하였습니다.

구성 요소는 각각의 VerticalTimelineElement로 구성된 이벤트들을 시각적으로 보여줍니다. 각 요소는 날짜, 제목, 부제목, 그리고 설명을 포함하며, 아이콘과 컨텐츠의 스타일을 사용자 정의할 수 있습니다. 이를 통해 사용자는 한 눈에 이벤트가 발생한 시간과 세부 사항을 파악할 수 있습니다.

이와 같이 react-vertical-timeline-component는 웹사이트에서 시간 순서에 따른 이벤트나 정보를 시각적으로 표현하고 싶을 때 매우 유용하게 사용할 수 있습니다.

/components/Timeline.jsx

import React from 'react'

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'
import 'react-vertical-timeline-component/style.min.css'
import { FaAws, FaYoutube, FaDiscord } from 'react-icons/fa6'

function Timeline() {
    return (
        <div>
            <VerticalTimeline layout="1-column-left" lineColor="#FFFFFF">
                <VerticalTimelineElement className="vertical-timeline-element--work"
                    contentStyle={{ background: '#FF0000', color: '#FFFFFF' }}
                    contentArrowStyle={{ borderRight: '7px solid  #FF0000' }}
                    date="2020년 10월"
                    iconStyle={{ background: '#FF0000', color: '#FFFFFF' }}
                    icon={<FaYoutube />} >
                    <h3 className="vertical-timeline-element-title"> Youtube 챌린저 리플레이 서비스 시작 </h3>
                    <h4 className="vertical-timeline-element-subtitle"> cptkuk91, xodud3008 </h4>
                    <p>챌린저 리플레이 동영상 서비스를 시작</p>
                </VerticalTimelineElement>
            // 이하 생략...
            </VerticalTimeline>
        </div>
    )
}
export default Timeline