[Dev Log] 2021-11-30(화) / 이윤환

---
name: Dev Log
about: 개발 일지
title: ''
labels: ''
assignees: ''

---

### 오늘은 어떻게 프로젝트에 기여했나요?

- NavBar 임시 완료
- OotdList masonry 로 구현만 완료

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- 오늘 오전엔 팀원들과 api수정을 했습니다.
이미 끝냈다고 생각한 업무가 사실은 하나도 끝난게 아니었단걸 아는 순간
생각보다 지치는 느낌이 강했습니다. 그래도 팀원분들과 함께 잘 해결해놨다고 생각합니다.

- Ootd List를 pinterest나 naver 이미지 처럼 넓이는 고정 된 채로 높이를 다르게 하여 벽돌처럼 쌓는 masonry 형식의 디자인이 이쁠거라 판단이 되어 구현했습니다.
grid 속성이 있긴 하지만 크롬이 row속성을 1000으로 제한했다는 것을 발견해서 그 이상의 이미지 요청의 경우와 성능저하를 고려하여 사용하지 않기로 했습니다.
역시 어려워서 pinterest나 naver를 많이 참조를 해봤고 검색해서 찾은 내용을 이용했습니다.

```
const ootdListGrid = () => {
let images = document.querySelectorAll(".ootdImage"); // 각각의 이미지 하나
let colWidth = images[0].offsetWidth // 각각의 이미지의 넓이
let imgStack = [0, 0, 0, 0]; // 컬럼의 갯수 및 앞으로 저장 될 Y좌표
for(let i = 0; i < images.length; i++) {
let minIndex = imgStack.indexOf(Math.min.apply(0, imgStack)); // imgStack 배열 요소중 가장 작은 값의 인덱스
let x = colWidth * minIndex; // 해당 인덱스 * 넓이 만큼 이동하는 좌표
let y = imgStack[minIndex];
imgStack[minIndex] += (images[i].children[0].scrollHeight +20); // 이미지의 Height 만큼 minIndex에 더해줌.
images[i].style.transform = `translateX(${x}px) translateY(${y}px)`;
if(i === images.length - 1) { // 마지막 차례가 오면 가장 높은 imgStack의 값으로 이미지 container 의 높이를 정해줌.
document.querySelector(".ootdList").style.height = `${Math.max.apply(0, imgStack)}px`;
}
}
}
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] masonry 반응형 구현
- [ ] OotdListPage 서버와 연결
- [ ] requirements 수정 (개인)