[Dev-Log] 박진현 2021-12-10

오늘은 각종 오류들을 수정했다.

### 토큰 만료시 로그아웃을 못하는 문제
```tsx
const logoutHandler = () => {
// axios 요청
instance
.get('/users/logout')
.then((res) => {
console.log(res);
localStorage.removeItem('lumiereUserInfo');
setIsLogin(false);
history('/');
})
.catch((err) => {
console.log(err);
});
};
```
이 문제는 catch부분에서 예외처리를 안해줘서 일어나는 문제였다.
```tsx
.catch((err) => {
console.log(err);
localStorage.removeItem('lumiereUserInfo');
setIsLogin(false);
history('/');
});
```
그래서 위와 같이 catch문에 예외처리를 해줬다. 근데, 로그아웃으로 해결할 게 아니라, 각 페이지에 들어갔을때 토큰이 유효한지 확인하고 유효하지 않다면 강제로 로그아웃을 시켜야 한다.

### 페이지네이션에 따른 type변경
```tsx
export interface Order {
orderItems: [
{
image: string;
title: string;
artist: string;
size: string;
price: number;
},
];
result: {
id: string;
paidAt: Date;
status: number;
updatedAt: Date;
};
deliver: {
address: string;
receiver: string;
request: string;
};
ordererInfo: {
name: string;
phoneNum: string;
email: string;
refundTerms: string;
};
shippingPrice: number;
totalPrice: number;
// deliveredAt: Date;
user: {
name: string;
_id: string;
};
_id: string;
}
```
타입이 이렇게 되어 있었는데 page와 pages를 넣어서
```tsx
export interface Order {
orders: [
{
orderItems: [
{
artist: string;
image: string;
price: number;
product: string;
size: string;
title: string;
},
];
result: {
id: string;
paidAt: string;
status: number;
updatedAt: string;
};
totalPrice: number;
user: {
general: {
email: string;
};
kakao?: string;
naver?: string;
google?: string;
name: string;
_id: string;
};
_id: string;
},
];
page: number;
pages: number;
}
```
이렇게 바꼇다.. 타입이 바뀌다보니 안에 있던 내용들도 싹 바꿔줘야 했는데, 처음엔 이전에 했던대로
```tsx
const [orderList, setOrderList] = useState>([]);
```
이렇게 초기값을 설정했었는데 배열안의 요소들을 맵핑할때 자꾸 undefined가 떠서 결국엔 아래처럼 모든 초기값을 써줬다.
```tsx
const [orderList, setOrderList] = useState({
orders: [
{
orderItems: [
{
artist: '',
image: '',
price: 0,
product: '',
size: '',
title: '',
},
],
result: {
id: '',
paidAt: '',
status: 0,
updatedAt: '',
},
totalPrice: 0,
user: {
general: {
email: '',
},
kakao: '',
naver: '',
google: '',
name: '',
_id: '',
},
_id: '',
},
],
page: 0,
pages: 0,
});
```

작품/작가 목록 어드민목록들에 모두 페이지네이션이 들어가서 구조를 다 바꿔야만 했는데, 자바스크립트였다면 일도 아니었겠지만 타입스크립트을 쓰니 이게 엄청나게 힘들더라!! 분명 다른방법도 있을텐데 알아내지 못한점이 조금 아쉽다.