[📚Dev Log] 김우석 / 2021.09.30

### 오늘은 어떻게 프로젝트에 기여했나요?
- 메인 상세 페이지 axios 구현 및 버그 픽스
- 설문조사 페이지로 다시 이동했을 때, 버튼이 켜져있는 버그 픽스
- 폰트 데이터 수정

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

- 상세 레시피 페이지 구현하는데 있어서 useEffect와 로딩의 관련된 로직을 짜는 것이 꽤 시간이 오래걸렸다.

```js
// 코드를 첨부해도 좋습니다.
useEffect(() => {
handlePageData();
}, []);

useEffect(() => {
}, [handlePageData]);

useEffect(() => {
if (recipeData !== null) {
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
setLoading(false);
return () => {};
}
}, [recipeData]);

useEffect(() => {
if (loading === false) {
dispatch({ type: SET_DETAIL_DATA, payload: recipeData });
setStart(true);
const totalLength = recipeData.recipe.descriptions.length;
const moveRatio = 100 / totalLength;

const goToSection = (i: number, anim?: any) => {
gsap.to(window, {
scrollTo: { y: i * window.innerHeight, autoKill: false },
duration: 0.5,
});
const image = document.body.querySelector(
".image"
) as HTMLParagraphElement;
const rightScroll = document.body.querySelector(
".rightScroll"
) as HTMLParagraphElement;
const topBox = document.body.querySelector(
".topbox"
) as HTMLParagraphElement;
const leftBox = document.body.querySelector(
".leftbox"
) as HTMLParagraphElement;
const rightBox = document.body.querySelector(
".rightbox"
) as HTMLParagraphElement;
const main = document.body.querySelector(
".main"
) as HTMLParagraphElement;
const sub = document.body.querySelector(".sub") as HTMLParagraphElement;
const totalMap = document.body.querySelectorAll(
".totalMap"
) as NodeListOf;
[...totalMap].map((item: any) => {
if ([...item.classList].includes(String(i))) {
item.classList.add("mapActive");
} else {
item.classList.remove("mapActive");
}
});
if (
rightScroll &&
topBox &&
leftBox &&
rightBox &&
image &&
main &&
sub
) {
rightScroll.style.transform = `translateY(${i * -262}px)`;
topBox.style.transform = `translateY(${i * -100}%)`;
leftBox.style.transform = `translateX(${i * -moveRatio}%)`;
rightBox.style.transform = `translateX(${
moveRatio - 100 - moveRatio * -i
}%)`;
image.style.transform = `translateY(${i * -100}%)`;
main.style.transform = `translateY(${i * -100}%)`;
sub.style.transform = `translateY(${i * -100}%)`;
}

if (anim) {
anim.restart();
}
};
```

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

- [ ] 소개 페이지 구현을 위해 힘써보려고 한다.
- [ ] 우선 오늘 axios 통신을 마무리 지어야한다.

**Additional context**
Add any other context or screenshots about the feature request here.