[Dev Log] 2021-12-01(수) / 이윤환

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

---

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

- OotdList masonry 반응형 구현
- OotdList의 이미지 클릭시 이미지 모달창 구현
- 기타등등

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

- css에서 애를 먹었다.
위 이미지를 보면 아래에 작은 공간이 있는걸 볼 수 있다.
저 부분을 없애기 위해 20 ~ 30 분 가량 애를 썼는데 방법은 너무 간단해서 허무했다.
초반에 img 태그에 margin: 0 ; padding: 0을 적용 한채로 했는데에도 사라지지 않았었는데
설마 inline-block 태그의 한계인가 싶어서 display block을 적용하니 사라졌다.
아마 내가 제대로 공부하지 않은 것 같다.

- 이미지를 클릭하면 해당 이미지의 원본 이미지가 모달처럼 뜨는 기능을 구현해야 됐다.
근데 내가 이미지에 hover를 하면 아래와 같은 디자인을 적용해야 됐다.
하지만 hover를 하고 저렇게 background 가 적용된 div가 나타나게 만들면 event.target에서 이미지가 아닌 hover를 적용한 div가 나타나게 되어 이미지의 src값을 못받아온다.

onClick이 아닌 모든 이미지에 addEventListener를 적용하여 해결했다.

```
useEffect(() => { // 현재 이미지를 링크로 불러오는데 아무래도 속도가 느려 clickedImage라는 변수값이 undefind 가 뜰때가 있는데 그걸 방지하기 위해 넣어놨다.
const clickedImage = document.querySelectorAll('.ootdImageBox'); // 이미지를 감싸고 있는 컨테이너
for(let i = 0; i < arr.length; i++){
clickedImage[i].addEventListener('click', function(){
setModalImage(clickedImage[i].children[0].children[0].src)
})
}
}, [])

```
근데 다시 생각해보니 이전 형제 태그를 선택하게 해주는 previousSibling 를 사용하면 되지 않았을까 싶다.
그래서
```
const clickedImage = (e) => {
console.log(e.target.previousSibling.src)
if(!e.target.previousSibling.src){
return false
}
setModalImage(e.target.previousSibling.src)
}
```
적용해 봤더니 된다.
허무하지만 기분이 좋기도 하고 좀 오묘한기분이다.

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

- [x] OotdList 연결 전 까지 완료
- [x] Sidebar 구현
- [x] previousSibling으로 이미지 모달창 구현 해보기

This issue is a development log describing completed OotdList responsive masonry and image-modal work. It names no source files or tests and does not request a remaining change, so there is no actionable entry point or verifiable definition of done for a newcomer.

Written by the indexing model from the issue text.