20220204 Frontend 일일 개발일지
===

###### tags: `20220204`

# 개발 내용

## 로그아웃 기능 개선

### 문제점

1. customAxios로 인해서 새로고침 없이는 token을 접근하지 못함.
- 즉, 로그인하자마자 로그아웃하려면 안됨.

>[color=#ef40a0]해결책) 일반 axios로 변경.

const token = getToken("accessToken");
    try {
        const res = await axios.post(
            `${process.env.END_POINT_USER}/users/logout`,
            {},
            {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            },
        );
    }
    ...

- 이런식으로 일반적인 방법 따르도록 변경.

2. 로그아웃 되었다는 `alert` 창 또한 sweet alert으로 변경.

try {
    const res = await axios.post(
        `${process.env.END_POINT_USER}/users/logout`,
        {},
        {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        },
    );
    if (res.data === "") {
        // user logout OK.
        window.localStorage.removeItem("creamAccessToken");
        window.localStorage.removeItem("creamRefreshToken");
        Swal.fire({
            position: "top",
            icon: "success",
            html: `로그아웃 되었습니다!`,
            showConfirmButton: true,
            didClose: () => router.reload(),
        });
    }
} catch (e) {
    console.error("STH wrong when user logout.");
    console.log(e.response);
}

- 15번째 줄에 `Swal`를 통해 구현.

==특이사항==으로는 `didClose` 메소드를 통해 해당 `alert`가 닫혔을때 새로고침하도록 유도함.

## SHOP filtering 작업

### 필터링 id 구조 개선

export const category_id = {
    의류: "streetwear",
    스니커즈: "sneakers",
    "패션 잡화": "accessories",
    라이프: "life",
    테크: "electronics",
};

export const gender_id = {
    남성: "men",
    여성: "women",
    공용: "unisex",
};

export const priceRange = {
    "10만원 이하": {
        priceTo: 100000,
    },
    "10만원 ~ 30만원 이하": {
        priceFrom: 100000,
        priceTo: 300000,
    },
    "30만원 ~ 50만원 이하": {
        priceFrom: 300000,
        priceTo: 500000,
    },
    "50만원 이상": {
        priceFrom: 500000,
    },
    };

export const sort_id = {
    인기순: "total_sale",
    "발매일 최신순": "released_date",
    프리미엄순: "premium_price",
    "즉시 구매가순": "lowest_ask",
    "즉시 판매가순": "highest_bid",
    };

- 위와 같이 `utils/filterId.ts` 를 만들어 구조를 개선함.
- 한번밖에 쓰이지 않기때문에 `utils`에 넣었음

## SHOP 화면 소팅 개선


위와 같이 보여야하지만


아래처럼 가려진 버그가 있었다.

#### 해결방법

> 간단하게 하단 그리드에 `z-index` 값을 -1를 주었다.

## HOME 화면 구성 시작

#### 고민거리

1. 기존에 쓰이던 HomeTemplate

- `HomeTemplate` 컴포넌트의 역할이 무엇인지 많은 고민이 생긴다.

- 모든 화면에 보이는 Template같은 느낌인데.. 이름이 좀 바뀌어야 할까 싶기도 하다.
- 내비게이션 템플릿? NavTemplate 정도도 나쁘지 않을것 같다.

:::success
결론) `HomeTemplate` => `NavTemplate` 로 개명.
:::

2. 그렇다면 새로운 `HomeTemplate` 은?

> Slider 배너 광고 + ShortcutItem 컴포넌트를 하나의 템플릿이라고 지정하면 어떨까 생각했다.

-> 하지만 Template에선 api 통신을 지양하므로 Slider에 필요한 이미지는 페이지에서 주자.


- 위와 같이 `Slider`, `Shortcuts` 를 모아두고, 하단에 받은 데이터를 렌더링하는 방식으로 `HomeTemplate` 를 구성할까 생각했다.