[Dev_Log] 8/25 (수) 김정빈

## 오늘 할 일
- [ ] SNS 공유기능 추가
- [ ] 원형으로 다운로드 기능
- [ ] palette page 구현하기
## 오늘의 프로젝트에서 기여한 점 및 배운 점은 무엇인가요?

- **palette page 애니메이션 구현하기**

팔레트페이지에서 마우스 움직임에 따른 애니메이션을 주고싶은데, 랜덤 좌표를 이용하여 조금씩 움직이게끔 하려고 하니 기존에 랜덤으로 주었던 값이 계속 뒤바뀌어서 오류가 생겼다.
아직 마무리를 짓지 못했다.

- **SNS 공유기능**

sns의 대표명사인 Kakao 공유부터 만들기 시작했다. 이는 카카오SDK를 이용해서 할 수 있고, API를 이용할때는 아래와 같은 코드를 index.html의 head안에 넣어주면 된다.
``
그다음, init으로 초기화를 진행해주면 된다. 코드는 아래와 같다.

```tsx
useEffect(() => {
window.Kakao.init(process.env.REACT_APP_KAKAO_KEY);
console.log(window.Kakao.isInitialized());
},[]);

// 이때 Kakao type이 없다고 뜨는데, Kakao 타입을 react-app-env 파일에 추가해준다.
// > react-app-env.d.ts
interface Window {
Kakao: any;
}
```

`message: "Kakao.init: Already initialized"` 라는 에러가 뜬다면, Kakao type을 지정해주지 않아서 에러가 나는 것이다. 아래는 에러 전문이다.

```tsx
KakaoError {name: "KakaoError", message: "Kakao.init: Already initialized"}message: "Kakao.init: Already initialized"name: "KakaoError"[[Prototype]]: Error
at https://developers.kakao.com/sdk/js/kakao.js:1378:26
at https://developers.kakao.com/sdk/js/kakao.js:111:78
at https://developers.kakao.com/sdk/js/kakao.js:112:2
init @ kakao.js:7361
(anonymous) @ UploadModal.tsx:104
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
```

현재 ImageUrl을 우리가 만들 이미지의 viewImage로 입력할 시 에러가 난다.
이부분은 내일 수정할 예정.

```tsx
const createMessage = () => {
console.log("###", `${viewImage}`);
window.Kakao.Link.createDefaultButton({
container: ".KAKAO_icon",
objectType: "feed",
content: {
title: "Bubble!!",
description: "#케익 #딸기 #삼평동 #카페 #분위기 #소개팅",
imageUrl: `${viewImage}`,
link: {
mobileWebUrl: "https://developers.kakao.com",
webUrl: "https://developers.kakao.com",
},
},
buttons: [
{
title: "웹으로 보기",
link: {
mobileWebUrl: "https://www.soundbubble.io/bubble/10",
webUrl: "https://www.soundbubble.io/bubble/10",
},
},
{
title: "앱으로 보기",
link: {
mobileWebUrl: "https://developers.kakao.com",
webUrl: "https://developers.kakao.com",
},
},
],
});
};
```

# 내일 할 일

- [ ] palette page 구성하기
- [ ] SNS공유기능 마저 구현하기