20220119 Frontend 일일 개발일지
===

###### tags: `20220119`

# 개발 내용

## Login 로직 구성

:::warning
==오늘은 Login 로직에서 발생한 오류가 굉장히 심각하여 시간이 오래걸렸다.==
:::

### 장장 4시간의 디버깅

>[color=magenta]==**결론) `Axios.create()`함수 때문에 일어난 버그였다!**==

#### 버그 내용

> 로그인 성공시 상단 GNB의 `로그인/로그아웃` 버튼이 안바뀐다

1. 로그인 처리


- 어찌저찌 로그인을 하면, `onHandleLogin` 함수를 호출한다.
- 4번째 줄에서 로그인 요청을 하고,
- 10번째, 11번째 줄에서 보듯이 Token을 잘 저장하고,
- 잘 처리되어 12번째 줄에서 홈으로 이동시킨다.

2. 홈으로 이동 후 유저 validate 절차


- 홈으로 이동하면 21번째줄에서 `getCurrentUser` 함수를 수행.
- 3번째 줄으로 넘어가서 `validateUser` 함수로 들어간다.

3. `validateUser` 함수 수행


- 2번째줄, token을 검사하고,
- 9번째줄에서 `customAxios` 를 통해 `POST`를 날린다.

4. `customAxios` 수행


> 보면.. 분명히 멀쩡하게 axios 객체를 만들어줄것 같았는데...

==**아니였다.**==

-> 아마 객체를 새롭게 항상 만드는게 아닌것 같은 느낌이다.

5. 다시 `validUser` 함수로 돌아와서,


- 9번째 줄에서 `POST` 요청은 실패로 처리되어,
- 18번째 에러 핸들러에 잡힌다.

### 진짜 충격적인 사실)

-> 새로고침하면 해결된다. 상단에 로그인/로그아웃 버튼이 잘 변경된다.

### 해결한 방법

>[color=crimson]`customAxios` 제거.


- 눈물을 머금고 `custonAxios` 를제거하고 정통으로 요청을 날렸더니,
- ==**해결**==

:::success
왜 안됬는지 더 알아봐야할 것 같다.

`customAxios` 를 통해서 추후에 interceptor도 한번 만들어보고 싶었는데,
이렇게 무너지는가.

여튼 이 문제로 4시간을 날렸는데 해결은 해서 다행이다.
:::

---

## 신발 사이즈 버튼 컴포넌트 구성

간단하게 신발 사이즈 고르는 컴포넌트를 작성했다.


- 먼저 `props` 를 보면,

type ShoeSizeProps = {
    category: "buy" | "sell" | "wish";
    size: number;
    active?: boolean;
    price?: number;
    onClick?: React.MouseEventHandler<HTMLLIElement>;
};

| Props | 사용 목적 |
| -------- | -------- |
| `category` |buy면 빨간색, sell이면 초록색 글씨가 보이며, wish라면 글씨가 아닌 아이콘이 보인다.|
| `size` |신발 사이즈는 모든 컴포넌트에서 동일하게 보이므로 optional 하지 않게 설정했다.|
| `active` |active 속성이 있다면 버튼 외곽과 내부를 진하게 표현한다.|
| `price` |price 는 `number` 로 들어오기 때문에, 이를 `toLocaleString()` 함수를 거쳐 보기 좋은 가격 형태로 바꾼다.|
| `onClick` |상단 컴포넌트에서 `onClick` 함수를 바인딩할때 쓴다.|

위와 같은 이유로 props를 설정했다.