프로젝트 컴포넌트 with 캐러셀 UI

프로젝트 컴포넌트 구현

프로젝트 부분은 틀을 하나 만들어서 컨텐츠만 넣으면 재사용 할 수 있게 만들고 싶었다.

데이터 부분은 다음과 같은 형식으로 작성했다.

ProjectBox라는 컴포넌트를 만들어서 위 형식의 데이터를 넣으면 각각의 프로젝트가 렌더링 되도록 코드를 작성했다.

ProjectBox 컴포넌트는 크게 세 부분으로 나뉘는데, 상단의 이미지 캐러셀 박스, 하단 왼쪽의 프로젝트 info, 하단 오른쪽의 프로젝트 description 이다.

이전 프로젝트에서 캐러셀을 한 번 만들어본 적이 있어서 그걸 기반으로 코드를 작성했다. 캐러셀 페이지는 상태로 관리하는데, 좌우 버튼을 누르면 상태를 변경한다.

** 무한 캐러셀 효과를 위해 페이지가 1번이거나 마지막인 경우 transition을 잠시 지웠다가 다시 적용시키는 과정이 필요하다. transition으로 그대로 두면 1번 페이지에서 마지막 페이지로 이동할 때 자연스럽지 못하게 transition이 발생한다.

캐러셀 가운데는 이미지들을 map 함수로 넣어준다.

현재 페이지 상태에 따라 이미지를 x축으로 이동시켜줘야 하는데, 다음과 같이 css의 translateX를 사용하여 현재 페이지 상태를 받아서 연산한 후 이동시켜준다.

transition 같은 경우 위에서 언급했듯이 1페이지에서 마지막페이지로 넘어갈 때 자연스러운 처리를 위해 따로 상태를 만들어서 관리해준다.

핵심 로직은 완성되었고, 데이터를 적당하게 props로 넘겨주면서 컴포넌트를 작성하면 완성!

조금 더 다듬으면 모듈화 해서 다른 프로젝트 구현할 때도 사용할 수 있을 거 같은데 다음에(...) 도전해봐야 할 거 같다.

Info랑 Description은 데이터를 나열하기만 하면 되서 구현은 간단했다.

PC 화면에서는 좌우 반반으로 만들었는데, 반응형 디자인으로 1024px 이하가 되면 위아래로 정렬이 되도록 작성했다.

좀 더 상세하게 프로젝트를 설명해야하나? 싶은 생각이 든다.