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 을 로컬로 떨어뜨려야하나 고민.