---
# System prepended metadata

title: 20220117 Frontend 일일 개발일지
tags: ['20220117']

---

20220117 Frontend 일일 개발일지
===

###### tags: `20220117`

# 개발 내용

## Buy, Sell 버튼 컴포넌트 추가.

#### 고민사항

![](https://i.imgur.com/vM9XzxC.png)


:::info
이미 만들어 놓은 버튼 하나로 판매/구매 버튼 기능까지 모두 했으면 좋겠다 생각했다.

문제) KREAM 사이트를 보니까, 버튼이 아니라 `a` 태그이다...
:::

`a` 태그기도 하고, 버튼외에 만드는것이 너무 마음에 안들지만 그냥 외부 `atom` 으로 분리해서 작성해야겠다고 생각!

-> 이름은 Knob! (문고리... 구매하고 판매하러 들어간다는 의미)





>[color=red] `Knob` 컴포넌트를 작성했다!

![](https://i.imgur.com/UTvHsPj.png)

==`KnobProps` 설정 이유==
- 구매, 판매 버튼이 따로 있으니까 -> `category` 항목을 추가했고,
- 해당 버튼을 누르면 제품 id에 해당하는 `ProductId`를 기반으로 `/buy/select/${ProductId}?size=` 로 넘어가야하기 때문에 필요하다.
- `price` 정보도 `Knob` 에 포함되어 가격이 나와야하므로 추가했다.


#### 큰일 난 상황

:::spoiler

:::danger
버튼을 만들어 놓은 것들이 문제가 있다.

기능상의 이슈는 아니지만 / primary | sell | buy 로 나눈 것이 문제다.

![](https://i.imgur.com/znsCdUv.png)

![](https://i.imgur.com/0qEfWdR.png)

이런 버튼들이 많은데.. 이들을 `Button` 컴포넌트 내부에서 구현하고 싶다.

- category 를 또 만들어서 작성할까 생각중이다.
:::

---

## Footer 컴포넌트 작성.

>[color=magenta] **KREAM 사이트에 보이는 Footer를 그대로 베끼기로했다!**

==특별한 기능은 없다!==

![](https://i.imgur.com/BOaiVV1.png)


# 그 외

## 주말 개발 내용 적용

## Frontend 로그 관련 라이브러리 조사

- Sentry -> 에러 검출
- pino / next-logger 고려, 해당 json 을 로컬로 떨어뜨려야하나 고민.