[1차 프로젝트 회고] - 3. 캐러셀 적용

YUYONI·2024년 1월 19일
0

코드잇 스프린트 3기

목록 보기
22/31
post-custom-banner
  1. git에 layout-paper 라는 list 페이지 레이아웃과 스타일을 잡은 브랜치를 dev로 pr 날림
  2. 과정에서 피드백 수용 및 수정 => 명확한 컴포넌트 이름으로 수정 ex) Line -> DividedLine 이런 식
  3. 캐러셀 효과 적용 - 이동할 px을 나타낼 초기값 0인 상태를 만들어서 버튼 누르면 상태 값 업데이트하도록 추가, Container에는 overflow : hidden 주고 내용물에는 props로 상태값 넘겨주고 transform: ${(props) => translateX(${props.상태값}px)}; transition: transform 0.5s ease;
  4. 상태값 0일때는 왼쪽버튼 안보이게, 상태값 마지막인덱스보다 커지면 오른쪽 버튼 안보이게 하기
    : state를 이용해서 구현 ( 순수하게 구현해봤지만 라이브러리 쓰는 법도 알아야할듯 )
profile
기본기와 원리, 개념 철처하게 다지기!

0개의 댓글