20220128 Frontend 일일 개발일지
===

###### tags: `20220128`

# 개발 내용

## SHOP 템플릿 작성.

### 1. 레이아웃 배치.


위 그림 처럼 실제 KREAM 과 흡사하게 만드려고 노력했다.

:::info

<center>제목</center>

QuickFilter 컴포넌트

Banner 컴포넌트

우측(SearchFilter) 좌측 `Tags`

좌측(contents)
:::

> 약간 무슨 말인진 알아듣기 어렵겠지만..

위처럼 6개의 컴포넌트로 구성했다.

### 2. QuickFilter 와 Tags 연결



위 두개의 컴포넌트를 연결시키는 작업진행.

#### 고민 거리

>[color=crimson] Tag들을 클릭함에 따라 QuickFilter에 반영이 안되는 상황.

==반대로 QuickFilter 를 누르면 Tag는 반응이 바로 되는 상황이였다.==

useEffect(() => {
    setLuxuryFilter(luxaryActivateState);
    setActivateItem(filteredCategory);
}, [luxaryActivateState, filteredCategory]);

QuickFilterBar 에서 다음과 같은 코드를 추가했다.

- 받는 props가 변경되면 해당 내용을 바로 지역 상태 관리에 반영하는 로직.
- 해당 내용을 추가하니 자동으로 반영못하는 문제를 해결.

### 3. ==대망의 SWR 도입==

:::success
천천히 SWR를 도입해보자!

1. `yarn add swr` 수행.
2. 간단한 `fetcher` 함수 구성.

import axios from "axios";

export const fetcher = async (url: string) => {
	const res = await axios.get(url);
	const data = await res.data;
	return data;
};

3. `useSWR` 함수를 통해 첫 `GET` 요청 제작.

const { data, error } = useSWR(`${process.env.END_POINT_PRODUCT}/filters`, fetcher);

:::danger
CORS 문제로 아직 통신이 불가능하다!
:::

---

## 전역 상태 라이브러리 도입의 고민