# 작업일지 4 / 모달창 작업, 캐러셀(?) 구현, relative absolute, 유니온타입 활용

1. 모달창 만들기 : css relative, absolute 속성 활용

이미지를 클릭하면 큰 사이즈의 이미지가 띄워지는 모달창을 만들었다.

 

현재 컴포넌트 구조는 위 이미지처럼 Page컴포넌트와 여러개의 하위 컴포넌트로 구성되어있다.

 

처음에는 DetailPage 에 모달 컴포넌트를 두고 상태 끌어올리기나 전역상태로 모달을 관리해줘야한다고 생각했는데, 꼭 그러지 않아도 되었다. 처음에 이렇게 생각했던 이유는, 모달 컴포넌트가 전체 창을 덮어야 하는데 부모 컴포넌트의 사이즈때문에 레이아웃이 제대로 제대로 나오지 않을까봐. 

 

결론적으로는 모달 이벤트가 발생하는 ImageList 컴포넌트에서 모달을 관리하면 된다. 가장 상위 컴포넌트인 Page 컴포넌트에 relative 속성이 있으면, 하위 absolute 는 자신의 상위 relative 요소의 범위 안에서만 위치할 수 있게된다. 

 

만드는 방법 : 먼저 외부에서 호출되는 컴포넌트인 ImageList 컴포넌트를 만들었다.

모달 열고 닫는 상태와, url이라는 이미지 배열에서 이미지를 찾고, 이 인덱스 값이 변하면서 이미지가 바뀌기 때문에 이것도 상태값으로 관리해줬다. moveCarousel 이라는 함수는 후술할 예정.

모달 상태에 따라 모달 컴포넌트를 조건부 렌더링 해주어야하므로 && 연산자를 이용해 참일때만 우항이 렌더링 되도록 하자.

 

모달 배경과 이미지를 띄워주는 ImageModal컴포넌트. 상위 컴포넌트인 ImageList 에서 모달 닫기 함수, 이미지 이동 함수,이미지 url 배열 인덱스 그리고 url 을 받고있다. 각 아이콘은 svg 를 활용해 크기와 색상을 간편하게 조절해줌. 

참, 여기서 약간의 팁(?) tailwindCSS 에서 rgba 값을 적용하려면 bg-white/[.80] 이렇게 색상 뒤에 색상, 대괄호 표기법을 사용하면 된다. 배경 안에 이미지가 들어가는데, 이 배경에 opacity를 주면 자식 요소까지 투명해져버리므로 rgba를 활용해야함. 

2. 클릭해서 넘어가는 캐러셀(?) 이미지 슬라이드(?) 구현

이미지 url과 인덱스 상태까지 모달창에 props로 전달한 이유는, 클릭해서 이동하는 슬라이드? 를 구현하기 위해서임. 자동으로 넘어가지는 않으니까 어떤 용어가 맞는지는 잘 모르겠는데 암튼 클릭해서 넘어가는 것은 맞다. 

 

로직이 조금 길어질 것 같아 별도의 훅으로 만들어 분리했다. 아까 후술하겠다고 말했던 useClickCarousel 훅과 이 훅이 리턴하는 함수 moveCarousel. 

먼저 유니온 타입으로 -1 혹은 1이 인자로 들어오도록 타입을 선언해주었다.

캐러셀이라 -1이면 좌측으로 이동, 1이면 우측으로 이동임. 그리고 인자로는 Idx 상태값과 이를 변경하는 setState 함수, 그리고 전체 배열의 길이를 넘겨줌.

 

훅은 훅 그 자체에 로직을 작성해서 함수로 사용할 수도 있지만, 다른 라이브러리를 생각해보면 주로 동작을 할 수 있도록 하는 함수를 제공하는 경우가 많다. 그래서 moveCarousel이라는 함수를 만들어서 리턴해쥼. 이 함수에 -1 혹은 +1을 전달 해주면 클로저의 원리로 선언 시점에 props로 받아왔던 idx 를 조건에 맞게 업데이트 해준다. idx가 state이기 때문에 이 state가 변하면서 img src의 url 이 변경되면서 렌더링된다. 

 

뭔가 img 태그 src 를 지금 썸네일 1번, 확대이미지 1번 이렇게 두 번이나 쓰고있어서 좀 싫다. 다른 괜찮은 방법 없을까 고민.