20220118 Frontend 일일 개발일지
===

###### tags: `20220118`

# 개발 내용

## Login 화면 구성

==로그인 화면이 드디어! 추가되었다 😛==


:::success
>[color=magenta] `Login` 컴포넌트를 만들면서 느낀점이 많다.
1. 정말 정말 미리 만들어놓은 `atom` 들 덕분에 수월하다.
- 해당하는 하위 컴포넌트들을 쏙쏙 빼서 CSS만 건드려주면 빠르더라.
2. 확실히 그래도 처음에 진행 속도가 느린점은 단점.

###### 다 좋지만, 팀으로 일할때의 `Atomic Design Pattern은...`

- API call를 어디다가 붙일건지에 대한 컨벤션,
- 각 단계에 대한 기준

등 정말 모호한 부분이 많겠다, 생각이 들었다.

:::

#### 고민했던 사항들.

1. 사용자가 입력한 email의 형식 확인에 어떤 방법이 좋을까?

a. `input` 태그에서 type을 `email` 로 해준다.
b. 모든 입력에 대해서 `onChange` 이벤트를 통해 확인을 해준다.

**내가 선택한 방법은 b번!**
- `input` 태그에서 자동으로 지원해주는 validation 기능은 원하는대로 커스터마이징이 어렵다.
- 무엇보다, 이쁘지 않다.

-> 라는 이유로 정하게 되었다.


`inputeEmail` 를 통해서 모든 판단을 시작한다.

1. 먼저 일단은 이메일 관련 입력 검증 flag에 문제가 있다고 설정하고,
2. 검증한 후,
3. 괜찮다면 flag를 다시 풀어주거나 / 안괜찮다면 냅두는 형식으로 진행했다.

#### 더 발전해야 하는 것들

설정한 로직은 다음과 같은 이메일도 통과시킨다.

- `testnaver@.com`
- `@com`

이런 인풋도 통과시킨다.

:::danger
이거.. 막아야한다. 로직 추가 예정이다!
:::

#### API 통신


정말 무난하게 구현했다.
> 아직 서버에서 CORS 처리가 되지 않아 try문 안에서 콘솔만 찍는다.

##### 궁금한 점

:::info
위와 같은 `try-catch`문에서의 에러 핸들링은 보통 어떤 방법으로 처리하는지 궁금하다.
:::

## Delivery 컴포넌트 생성


- 정말 깜쯱한 컴포넌트를 생성했다

>[color=lightgreen] 참고사항
- KREAM에 실존하는 빠른배송 기능은 제외하기로 했다!
- 따라서 해당 컴포넌트는 정말 만들기만 해서 원할때 슥 쓰는 용도로 만들었다.

## 상품 상세 정보 컴포넌트 구성


##### 제품의 이름 / 브랜드 / 이름 번역이 아닌 컴포넌트를 생성했다.

이 컴포넌트 또한 위에 `Delivery` 와 같이 같아 붙일 수 있게 생성했다.

type ProductDetail = {
	modelNum: string;
	releasedAt: string;
	color: string;
	price: number;
};

위와 같은 props를 받으며, 눈에 보이는 4가지 정보만을 받아 렌더링한다!

## Floater 컴포넌트 작성


`Product` 페이지에 들어갔을때, 스크롤을 내리다 보면 쨘 생기는 `floater` 를 생성했다.

==**특별한 로직이 있는 컴포넌트는 아니다!*==
~~CSS가 매우 깨대로웠을 뿐...~~

type FloaterProps = {
	imgSrc: string;
	backgroundColor: string;
	productName: string;
	productNameKor: string;
	isWishProduct: boolean;
	wishes: number;
	productId: string;
	buyPrice: number;
	sellPrice: number;
};

상당히 많은 props가 필요할 것 같았다.

1. 좌측에 보이는 신발 이미지 - `imgSrc`,
2. **심지어 그 이미지 뒤에는 backgroundColor속성을 가진 div이므로**, 배경색 - `backgroundColor`,
3. 제품의 이름과 번역이름 - `productName`, `productNameKor`,
4. 해당 제품이 이미 찜 목록에 있는지에 대한 여부 - `isWishProduct`,
5. 얼마나 많은 인원이 찜을 했는지 - `wishes`,
6. 구매나 판매 버튼을 누르면 해당 상품에 대한 구매 판매 링크로 넘어가야하기 때문에 - `productId`,
7. `Knob` 컴포넌트에 가격정보를 내려줘야 하므로, `buyPrice`, `sellPrice`!

이렇게 제작했다. ==나름 이유가 다 있다!==

#### 고민사항

:::warning
*문제는, 해당 `Floater` 는 스크롤이 460px 정도 되면 보이고, 아니면 보이지 않는다는 점이다.*

>[color=darkgreen] **해당 기능을 어떻게 구현할까?**
1. `Floater` 를 사용하는 컴포넌트에서 `useEffect` 로 scroll 감지.
2. `observer` 패턴 사용.

-> 해당 기능은 추가할 **예정**이므로, 아직은 확정은 아니지만 1번을 선택할것 같다!
:::