계속 작업은 하고 있었는데 일이 할 일이 너무 많아서 블로그 작성을 못하고 있었다...
그러다 보니 챌린지 마지막 날인 오늘이 4번째 포스팅이자 마지막 포스팅이 되어버렸다 ㅋㅋ
그 동안 많은 작업을 했다. 저번 포스팅까지 Carousel과 Card 컴포넌트 작업을 했었는데 이제는 모든 작업이 끝났다.
Card 컴포넌트는 많은 곳에서 사용이 된다. 그래서 나름 재사용성이 좋게 만들기 위해 노력했다.
(아닐수도...ㅎ)
사용되는 곳은 다음과 같다.
- Top Carousel
- 오늘의 특가
- MD 추천 클래스
- 진행중인 인기 이벤트
- 오픈 예정 클래스
- Bottom Carousel
Card 컴포넌트가 여러군데에서 사용되다 보니 어려움이 많았다.
예를 들어서 오늘의 특가와 MD 추천 클래스에는 하단 캡션에 좋아요와 할인 %, 금액, 할부 개월수 등이 들어가는 반면 진행중인 인기 이벤트에는 그런 캡션 자체가 존재하지 않는다. 또 오픈 예정 클래스에는 버튼이 들어간다.
이 부분은 각 클래스에서 사용되는 데이터의 차이를 이용했다.
일단 Card 컴포넌트에서는 모든 경우의 수를 고려해 전부 코드를 작성했다.
그 후에 특정 데이터가 없으면 그 부분을 보여주지 않는 방식으로 코드를 작성했고 원하는 결과가 나왔다.
Card컴포넌트의 index.tsx안에는 Cation, ExtraBottoms 같은 작은 컴포넌트를 만들어서 그런 로직들을 계산했다.
하나의 큰 컨테이너 안에 모든 로직이 다 들어있으니까 가독성도 안좋아서 그냥 다 빼버렸다.
D day 계산은 직접 계산하기 보다는 구글링해서 가져왔다.
구글링한 D-day 계산 블로그
다음으로 수정한 부분은 Carousel인데 사실 여기서 진짜 애를 많이 먹었다.
Top Carousel은 이미지에 뱃지도 달려있고 해서 Card 컴포넌트를 이용했는데 Bottom Carousel은 그냥 이미지 태그로 작성했다.
가장 어려웠던 부분은 Progress Bar 부분이다.
react-slick 라이브러리를 사용했고 settings에 autoplaySpeed를 6000으로 세팅해서 6초마다 한 번씩 캐러셀이 바뀌도록 만들었다.
그리고 Progress Bar의 value를 setInterval을 이용해서 60ms 마다 1씩 차오르도록 처음에 코드를 짰었다.
그.런.데 타이밍이 안맞는다... 왜 그러지를 한참 고민했는데 잘 모르겠다. 아마 clearInterval을 하는 과정에서 시간을 조금씩 더 잡아먹어서 그런 것 같긴 하다.
(아시는분은 알려주세요...ㅠㅠ)
이 부분은 해결하지 못했다. 그냥 60ms였던 setInterval구간을 600ms로 바꿔서 조금 덜 어색하게 만드는게 최선이었다.
그리고 문제가 하나 더 있었는데 바로 arrow였다.
Carousel의 arrow를 progressBar의 바로 옆에 위치시켜야 하는데 기존의 slick-arrow의 html 구조상 그렇게 하기가 쉽지 않았다.
처음 시도했던 것은 position: absolute 를 통해서 위치를 잡아주는 것이었는데 이건 뭔가 어색했다.
그래서 구글링 하다가 useRef를 이용해서 react-slick의 내부 함수에 접근하는 방법을 찾아냈다..!
Slider에 useRef를 걸어서 ref.current.slickPrev()로 slider를 이전으로 보내는 함수를 만들 수 있었고 ref.current.slickNext()로 slider를 다음으로 보내는 함수를 만들 수 있었다.
이렇게 carousel의 arrow까지 해결하고
반응형 구현을 하면서 챌린지를 마무리했다.
시간이 없어서 오늘은 이만 마무리하고 다음 포스팅에서는 에필로그 같은 느낌으로 회고를 적고자 한다.
그럼 20000
챌린지 결과물 확인
