💄 리스트 페이지 UI

[radiant0922]

어떤것을 작업하시나요?

메인 리스트 페이지 UI을 작업합니다.

작업 상세 내용

• [x] 꼬순내/인기댕 탭 리스트UI
• [ ] 챌린지 리스트UI
• [x] react-slick
• [ ] 룩북 리스트UI
• [ ] mansory&infinite
• [ ] 리스트/필터기능

[radiant0922]

https://naver.github.io/egjs-infinitegrid/ko/Guides

https://kimyk60.tistory.com/m/36

https://github.com/akiran/react-slick/issues/2290

https://github.com/naver/egjs-infinitegrid

[Banal972]

하나님 react-slick dot 같은 경우 따로 지정하는법이 없어서 gobla.css로 작업을 하셨다고 하셔서 react-slick docs API에 나와있는데로 제가 짜봤는데 참고해서 사용하시면 될것 같아요

<Slider
  ref={(slider) => {
    sliderRef.current = slider;
  }}
  {...setting}
  dots={true}
  arrows={false}
  appendDots={(dots: any[]) => {
    console.log(dots);
    return (
      <>
        <ul className="flex items-center justify-center gap-2">
          {dots.map((item, index) => {
            return (
              <li key={index} className={`group ${item.props.className}`}>
                {item.props.children}
              </li>
            );
          })}
        </ul>
      </>
    );
  }}
  dotsClass=""
  customPaging={() => (
    <button className="size-3 rounded-full bg-slate-500 group-[.slick-active]:bg-black"></button>
  )}
>

보시고 이해 안되는게 있으시면 디스코드나 구글 미트 주세용