20220120 Frontend 일일 개발일지
===

###### tags: `20220120`

# 개발 내용

## 로그인 로직 수정

> 작일 발생했던 `axios` create 관련 문제

해당 모듈은 그대로 내버려두었다!

:::info
내 생각에는

1. `axios` create 메소드는 정말 처음에만 작동하는것 같다.
2. 따라서 웹이 처음 구동했을 때 -> 만들고 `axios` 객체를,
3. 그러고 로그인했을때 `axios` 객체를 만들며 token 을 넣어야하는데,
-> ==**그러질 않는다!**==

처음에만 만들고 그 다음부터는 안만들어주는 것 같다. (추측)
:::

##### 결론)

일단은 `getCurrentUser` 및 `validateUser` 내부에서 `customAxios` 을 쓰지 않기로 했다.

---

## 제품 상세 컴포넌트 내부 컴포넌트 개발

### 가격정보 렌더링


가격이 상승중인지 / 하락중인지 여부에 대한 flag를 통해 색을 지정한다.

그 외 나머지 정보들은 단순히 받아서 보여주는 형식으로 개발했다.

### 사이즈 정보 선택 컴포넌트


사이즈를 선택하는 컴포넌트를 생성했다.

가장 우측 아이콘을 선택하면 모달이 생성되는데, 해당 내용을 바인딩 할 수 있게


3번째 줄 처럼 props 로 받아 가능하게 구현했다.

---

## 모달 생성

#### 모달을 생성했다!

외부 라이브러리를 사용하지 않고 만들었다.


:::warning
**NEXTjs에서는 초기에 렌더링이 서버에서 일어나기 때문에 약간의 조작이 필요하다.**

기존의 SPA라면 `index.html` 에

<div id='modal-root'></div>

를 통해서 최 상단에 접근하여 모달을 렌더링 할 수 있겠지만,

nextjs는 첫 렌더링이 서버에서 일어나기때문에 접근 자체가 불가능하다.

따라서 2가지의 단계를 밟아야한다.

:::

#### 1. `_document.tsx` 작성

- Nextjs는

KREAM 서비스에는 모달의

개좋은덴ㅇ;린멍림나얼미낭럼니ㅏㅇ럼니아러0938ㅣㅏㅓㄹㅁㄴ릴ㅇㅍㄴㅅㅎ우ㅕㄹ