[Dev_Log] 8/23 (월) 김정빈

## 오늘의 프로젝트에서 기여한 점 및 배운 점은 무엇인가요?

- **JS의 변수를 CSS에서 사용할수 있어?**

역시 안되는건 없었다. react에서 변수를 CSS에 대입할 수 있다.
Hz의 크기에 따라 원 크기가 변하게 하고싶어서, React의 State값이 CSS에서 사용되어야 했고, 그래서 찾아보니 다음과 같이 코드를 작성하여 CSS에 대입할 수 있다.
`setProperty('--변수명',Value)` 를 이용하여 CSS 내부에서 사용될 변수와 value를 지정하고, CSS에서는 `var(--변수명)` 으로 받아준다.

```tsx
// js code
document.documentElement.style.setProperty("--circleSize", `${circleSize(viewPitch)}`);

// CSS code
.backLight {
animation: circleSize 3s infinite;
transform: scale(var(--circleSize));
transition: all 0.3s ease-in-out;
}
```

- **main page refectoring**

버블을 만드는 페이지의 기능을 추가하고, 버블의 위치를 중심부에서 옆으로 옮겼다.
덕분에 기능들을 좀더 많이 채워넣을 수 있게 되었고, react-color를 이용해 버블의 배경색을 변경하는 기능을 구현했다.
하지만 이런저런 기능을 구현하다보니 state의 drilling 현상이 일어나게 되었고, 이를 redux state로 수정해야할 것만 같은 느낌이 강하게 들었다.
시간적 여유가 되면 꼭 redux를 제대로 활용해보고싶다.

### 리팩토링 전

### 리팩토링 후

- **Redux code refactor.... (WIP)**

현재 redux state는 로그인시 유저정보를 state에 저장하는 것과, 유저 정보를 수정할 시에 사용하고있다. 허나 지금 비동기 처리를 못하고있어 유저 닉네임 수정이 제대로 이루어지지 않고있고, 코드역시 명쾌하게 짜여지지 않았다.
redux-thunk를 사용하거나, tool-kit을 사용하고 싶은데 코드사용법이 좀 달라서 기존에 사용하던 것을 갈아엎기에는 시간이 부족하다고 판단을 했고, 우선적으로 변수명만 수정을 진행했다.
메인 기능들을 모두 구현하고, 리덕스코드까지 바꾸고싶다. 조금만 더 힘내보자

# 내일 할 일

- [ ] main-mic 추가 기능 고려해보기
- [ ] 디자인 리팩토링 계속하기