[LAB-12] react slick css 질문

[senasoon]

질문 작성자

박세은

문제 상황

현재 타잉 프로젝트를 하고 있고 캐로셀을 구현하기 위해 react-slick을 사용하고 있습니다. 캐로셀을 구현하며 해결되지 않는 css 관련 문제가 있어 질문을 드리려고 합니다.

1. 캐로셀 가장 마지막 부분에서는 .slick-list에 적용된 패딩만큼 slide가 떨어져야 하는데 어떻게 해야할까요?

현재는 .slick-list에 양옆 패딩이 적용되어있고 처음에는 slide가 패딩만큼 떨어져있지만 마지막에는 padding이 있음에도 space가 적용이 되지 않고 있는 상황입니다.

아래 이미지는 현재 구현중인 캐로셀이며 마지막에 space가 없어 화살표에 가려진 모습입니다.

.slick-track에 padding-right을 .slick-list에서 준 좌우 padding만큼 줘서 문제 해결을 시도했지만 전체 크기에서 벗어났는지 행이 두줄이 되었습니다.

2. 특정 상황에서의 캐로셀 height 설정

기존 캐로셀 사이의 간격은 위와 같습니다.

특정 캐로셀의 경우 숫자가 들어가는데 이때 캐로셀의 height가 커지는 상황이 있습니다. 숫자가 들어갈 경우 div가 커지며 position으로 div의 위치가 변경되었음에도 불구하고 캐로셀의 height는 콘텐츠의 크기보다 더 커져있는 상태로 유지됩니다.

아래 사진과 같이 div의 위치가 위로 올라왔음에도 캐로셀의 크기가 커서 간격이 커보입니다. 이때 빨간 선과 같이 content 크기만큼 height가 적용되도록 하는 방법이 무엇인지 궁금합니다.

프로젝트 저장소 URL

• https://github.com/senasoon/together
• 브랜치 feature/#74

환경 정보

• macOS
• Node.js 정보 : v18.12.1

[yamoo9]

문제 해결 1. 패딩 설정

Carousel.jsx 파일 StSlider 스타일 컴포넌트 내부에 .slick-list에 설정된 패딩 스타일을 컨테이너에 설정해야 합니다.

Carousel.jsx

const StSlider = styled(Slider)`
  padding: ${rem(20)} ${rem(8)} 0;
  @media (min-width: 768px) {
    padding: ${rem(20)} ${rem(40)} 0;
  }
  @media (min-width: 1920px) {
    padding: ${rem(20)} ${rem(70)} 0;
  }

  .slick-slide { /* ... */ }
`

설정 이후 아래 화면처럼 마지막 슬라이드에서도 패딩이 설정되어 있습니다.

문제 해결 2. 높이 조정

StInfo 컴포넌트 margin-top을 아래와 같이 설정하고, top 설정은 삭제합니다.

const StInfo = styled.div`
  margin-top: ${rem(8)};
  ${(props) =>
    props.number &&
    css`
      position: relative;
    `};
`;

StNumber 스타일 컴포넌트에 line-height: 0을 설정합니다.

const StNumber = styled.span`
  // ...
  line-height: 0;
`;

설정 이후 요구된 대로 높이를 가진 것을 확인할 수 있습니다. 😊

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요.

src.zip

[senasoon]

감사합니다!