GDG 프로젝트 트랙 프론트엔드 4주차 미션 회고록

이번주는 시험 공부로 인하여 미션 진행을 거의 진행하지 못했다..!
그런 의미에서 2-3주차 미션으로 진행했던 클론 코딩을 회고해보려고 함 .. ✏️

 

• 화살표 > 버튼과 함께 슬라이드 기능 추가
  
  

1. 화살표 > 버튼 UI 추가 코드

<button
  className="absolute top-1/2 right-2 -translate-y-1/2 bg-white text-gray-700 shadow-md rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-100"
>
  <span className="text-2xl">›</span>
</button>

 

✅ 카드 리스트(div)와 화살표 버튼 >을 같은 relative 안에 넣어주기

 

2. 클릭 시 슬라이드 기능 추가(scrollBy, ref 이용)

• useRef로 카드 리스트 DOM 제어
  : 파일 상단 아래 코드 추가

import { useRef } from 'react'

• RecommendSection 함수 안에 아래 코드 넣기

const scrollRef = useRef(null);

const handleScrollRight = () => {
  scrollRef.current.scrollBy({
    left: 300,
    behavior: 'smooth',
  });
};

 

3. 스크롤 대상 div에 ref={scrollRef} 추가

<div
  ref={scrollRef}
  className="flex space-x-4 overflow-x-auto scrollbar-hide pr-14"
>
  {/* 카드들 */}
</div>

(이걸 안 해줘서 첫 시도에 슬라이드가 넘어가지 않는 오류가 발생했다 😅)

 

아래는 결과물 👇👇

슬라이드까지 구현 완!

이번 주차는 기말고사로 인해 4주차 미션을 진행하지 못했지만 꼭 종강 후에 시도해보아야겠다는 다짐을 💪💪 !!