[Dev_Log] 8/17 (화) 김정빈

## 오늘 할 일 (To Do)

- PalettePart type 지정하기
- mainpage 버블 그리기
- mainpage 성공 modal 제작
- Record.js → tsx파일로 제작

## 오늘 한 일 (Done)

- [x] PalettePart type 지정하기
- [x] Record.js → tsx파일로 제작
- [x] bubble upload 구현

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

- **Array와 Object의 타입 완성하기 (feat.Palette page)**

서버에서 받아온 bubble들의 타입을 어떻게 지정해줘야할지 몰라서 무작정 any로 받아버렸었는데,
array와 object의 타입을 정하는 법을 제대로 알아보고 설정했다.
우선 받아온 bubble들을 3개의 배열로 구분해줘야 하기 때문에 bubbleArr1,2,3으로 나누었고,
이 배열안에는 버블이라는 객체가 들어가기 때문에 `Bubble[] (혹은 Array)`이라는 Array타입으로 설정해주고, Bubble 내에서 user는 email과 nickname이 들어가는 객체타입이다.
아래와 같이 interface로 설정해주어서 타입 문제를 잘 해결했다.

```tsx
interface User {
email: string;
nickname: string;
}

interface Bubble {
id: number;
image: string;
thumbnail: string;
sound: string;
textContent: string;
createdAt: string;
user: User;
}

const bubbleArr1: Bubble[] = [];
const bubbleArr2: Bubble[] = [];
const bubbleArr3: Bubble[] = [];

bubbles.forEach((bubble: Bubble, idx: number) => {
const index = idx % 3;
if (index === 0) bubbleArr1.push(bubble);
else if (index === 1) bubbleArr2.push(bubble);
else if (index === 2) bubbleArr3.push(bubble);
});
```

- **원안의 랜덤 좌표를 찍어서 색을 표현해야 하는데, 어떻게하지?**

지금 가장 고민중인 부분이다.
랜덤한 좌표를 찍어서 여러 도형들을 겹쳐 색을 표현해야 하는데, 내가 지정한 원 안쪽으로 색이 들어오려면 원이 어디에 위치해있던 절대 좌표를 알아야한다.
근데 지금 그 좌표를 어떻게 찾아야할지 몰라서 고민이 되고, 쉽지 않다는 결론이 나왔다.

# 내일 할 일

- [ ] bubble upload modal 제작
- [ ] 메인페이지 기능 구현하기