[Dev Log] 마우스를 올릴 때마다 감정상태와 날짜 표시하기

### 오늘은 어떻게 프로젝트에 기여했나요?
+ 드디어 Hover 부분 완성했습니다.
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
+ Hover 부분을 어떻게 구현해야될지 고민을 했습니다.
- 1방안: 컴포넌트를 따로 만들어서 구현한다.
- 문제점: 구현하는 것이 너무 어렵고, 디자인적으로도 조절하는 것이 어렵다.
- 2방안: 기존 컴포넌트를 수정하고 상태에 따라서 다르게 렌더링한다.
- 문제점: 구현은 쉬운데 상태를 어떻게 통제할 것인지가 문제가 된다.
- 해결책: 상태를 1개만 만드는 것이 아니라, 여러개 만들어 둔다.
+ 실질적 해결책
- Post의 크기를 조정한다.
- 상태를 여러개 만든다.(상태를 여러개 만들려면 객체를 사용해 주어야됨)
- 삼항연산자를 이용하여 상태에 따라서 다르게 렌더링 하게 한다.
- (이때 상태를 불러오기 위해서는 isHover[post.id] 형식으로 **computed property**를 이용해 준다.)
- 그리고 각 컴포넌트 마다 조절을 해준다.(이때 spread syntax로 얕은 복사를 해주는 것이 포인트)
```
const [isHovers, setIsHovers] = useState({
1: false,
2: false,
3: false,
4: false,
5: false,
6: false,
7: false,
8: false,
9: false,
10: false,
})
...(중략)

{isHovers[post.id] ? <>{post.updatedAt[0]}.{post.updatedAt[1]}.{post.updatedAt[2]}
{moods(post.mood)} : null}
{
dispatch(changeImage(post))
dispatch(detailedPostMode())}}
onMouseEnter={() => {setIsHovers({...isHovers, [post.id]: true})}}
onMouseLeave={() => {setIsHovers({...isHovers, [post.id]: false})}}>

```
+ 이렇게 해서 4일 만의 고민은 끝을 맺었다고 한다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- 백엔드와 슬슬 연결을 시켜야 될 것 같다.