이번에는 메인 페이지 레이아웃 UI 잡업을 하고 리스트를 불러오는 API를 사용해서 메인 페이지를 완성시켜보려고 합니다.

<br/>
<br/>

## <span style="color: #7360BD">🎨 레이아웃 구현하기</span>
메인 페이지의 갤러리 아이템 리스트 레이아웃은 masonry UI를 구현하려고 했어요.
**masonry**는 벽돌을 쌓아 올리는 공사를 나타내는 단어이고 masonry ui는 벽돌을 쌓은듯한 느낌을 주는 UI 기법으로 핀터레스트가 대표적으로 masonry ui를 사용한 웹서비스입니다.
<br/>
### 🤔 flex 레이아웃과의 차이
![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/96ee85cc-7527-4ba6-8b26-a334f2215500/public)

masonry ui와 flex를 이용한 레이아웃의 가장 큰 차이는 같은줄에 있는 컨텐츠들의 높이의 차이인 것 같습니다. flex 레이아웃은 같은 줄의 컨텐츠의 높이가 전부 동일합니다. 만약 컨텐츠의 크기를 줄인다면 부족한 공간은 여백으로 채워지기 때문에 masonry layout은 구현할 수 없어요.
<br/>
### 🧐 masonry 레이아웃 구현하기
masonry 레이아웃 구현은 처음 해봤는데 단순 CSS로만 구현하는 것보다는 난이도가 높았어요. 
![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/c0711f25-ba4b-47fb-ad90-d6cca2128000/public)

이미지와 같이 우선순위가 세로에서 가로로 가는 레이아웃은 css의 column 스타일링을 이용하면 간단하게 만들 수 있습니다. 해당 레이아웃을 구현하려면 [여기](https://opentutorials.org/course/2473/13712)에서 확인하실 수 있습니다.
<br/>
그런데 제가 구현하려고 하는 UI는 가로가 우선되는 형식의 레이아웃이기 때문에 위와 같은 방법으로는 구현할 수 없었습니다. 😂

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/6e799623-70e7-46bf-dd60-3f7a0d643200/public)

**첫 번째 시도**
사진과 같이 높이가 다르고 가로가 우선되는 레이아웃을 구현하기 위해서 처음 시도한 것은 css로 gird로 레이아웃을 만들고 각각의 컨텐츠의 세로 위치를 자바스크립트를 이용하기였어요.
레이아웃을 구현할 수는 있었지만 해당 방식을 사용했을 때에는 화면의 크기가 바뀌거나 스크롤을 해서 새로운 데이터를 불러올 때마다 컨텐츠의 위치를 잡아주는 함수를 실행해야 했기 때문에 만족스럽지 못했습니다.
<br/>
**두 번째 시도**
다음 시도로는 갤러리 세로 방향의 flex ui를 여러개 만들기였어요. 이 방식으로 작업했을 때는 css만으로 레이아웃을 구현할 수 있었지만 데이터를 여러개로 나누어서 관리해야 했어요. 두 줄의 masonry 레아이웃을 구현하기 위해서 왼쪽 flex의 데이터, 오른쪽 flex의 데이터, 그리고 모바일 화면에서는 레이아웃이 한 줄로 변하기 때문에 모바일에서 보여줄 원본 데이터, 총 3개로 나누어 주었습니다.

```ts
useEffect(() => {
  if (data && data.result) {
    let left: PostsList[] = [];
    let right: PostsList[] = [];
    data.posts.forEach((post, idx) => {
      if (idx % 2 === 0) left.push(post);
      else right.push(post);
    });
    setLeftPost([...leftPosts, ...left]);
    setRightPosts([...rightPosts, ...right]);
    setPosts([...posts, ...data.posts]);
    maxPage.current = Math.ceil(data.postCount / 8);
    setScrollLoading(false);
  }
}, [data]);
```
인피니티 스크롤로 데이터를 불러올 때마다 홀수 인덱스의 데이터는 leftPosts 배열에, 짝수 인덱스의 데이터는 rightPosts의 배열에, 원본 데이터는 posts 배열에 담아서 관리했습니다.
<br/>
해당 방법으로 레이아웃을 작성한 결과 데이터를 불러올 때만 처리할 일은 조금 늘었지만 화면이 변할 때마다 레이아웃을 맞춰줄 함수를 사용하지 않아 더 효율적이었어요.
<br>
## <span style="color: #7360BD">🔨 인피니티 스크롤 구현하기</span>
인피니티 스크롤을 이용하기 위해서는 화면의 최하단에 스크롤을 했을 때 이벤트가 발생할 수 있도록 기능을 구현해야합니다.
<br/>
>화면의 마지막 부분을 인식할 함수
```ts
const lastPostElementRef = useCallback(
  (element: HTMLDivElement) => {
    if (scrollLoading) return;
    observer.current = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        if (maxPage.current > 0 && page.current < maxPage.current) {
          setScrollLoading(true);
          if (page.current < maxPage.current) page.current += 1;
        }
      }
    });
    if (observer.current) observer.current.disconnect();
    if (element) {
      observer.current.observe(element);
    }
  },
  [scrollLoading, maxPage, page]
);
```
해당 함수를 화면 최하단의 엘리먼트에 추가하여 사용자가 화면 최하단에 도달한 것을 인식하게 하려고합니다. 브라우저의 IntersectionObserver api를 사용하면 isIntersecting값으로 해당 엘리먼트가 사용자의 화면에 보이는지 알 수 있습니다.
위 함수에서는 사용자가 화면 마지막 부분에 도달하고 불러올 페이지가 남아있다면 api를 page를 더하고 api를 호출해 다음페이지의 컨텐츠를 불러올 수 있도록 작업했습니다. 
<br/>
>화면 마지막에 도달함을 감지할 엘리먼트
```html
<div
  style={{ height: 100, display: "flex", alignItems: "flex-start" }}
  ref={lastPostElementRef}
>
  {scrollLoading && (
    <div style={{ width: "100%", marginBottom: "50px" }}>
      <Lottie
        loop
        animationData={ring}
        play
        style={{ width: 150, height: 150, margin: "0 auto" }}
      />
    </div>
  )}
</div>
```
div 엘리먼트의 ref에 위에서 작성한 함수를 추가해서 사용자가 화면의 마지막 부분에 도달한 것을 인식할 수 있고 API를 요청하여 로딩 상태일 때에는 로딩바가 돌아가도록 구현하였습니다.
<br/>

>메인페이지 구현 결과 화면
> 
![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/3fa96501-20bc-4283-f302-4f985c3f6000/public)

이번에는 메인 페이지 레이아웃 UI 잡업을 하고 리스트를 불러오는 API를 사용해서 메인 페이지를 완성시켜보려고 합니다.

<br/>
<br/>

## <span style="color: #7360BD">🎨 레이아웃 구현하기</span>
메인 페이지의 갤러리 아이템 

[갤러리 만들기 #4] 메인 페이지를 만들어보자