20220126 Frontend 일일 개발일지
===
###### tags: `20220126`
# 개발 내용
## TradeHistoryItem 작성
위 보이는 이미지에서
이 친구를 만들려고 한다.
>[color=#d10a98]생각해보니 이 컴포넌트는 비슷하게 생긴 컴포넌트가 이미 있었던 것으로 기억한다.
바로 이 `smallProductInfo`!
이 컴포넌트를 재활용하여 사용하기로 했다.
- 5번, 6번째 줄에 보이는 `props` 를 optional 로 바꾸었다.
- 따라서 `ProductKor` 이 보여야하면 기존 위위 사진처럼 보이고,
- `size` 가 들어온다면 번역본 제목이 아니라 사이즈 정보도 보이도록 설계했다.
따라서, 만든 컴포넌트는 아래처럼 생겼다.
==**이렇게 컴포넌트를 완성할 줄 알았으나...**==
구매 내역 상세 페이지에 접근하면 우측에
> 구매 희망가 / 만료일 정보가 있었다.
**따라서 props type을 다음과 같이 바꾸었고, **
```typescript=
type TradeHistoryItemProps = {
imgSrc: string;
backgroundColor: string;
productName: string;
size: string;
status?: number;
wishedPrice?: number;
expiredDate?: string;
};
```
- status, wishedPrice, expiredDate 를 optional 하게 바꾸고,
```htmlembedded=
<HistoryStatusArea>
{status >= 0 && (
<StatusBlock>
<StautsText>{StatusCode[status]}</StautsText>
</StatusBlock>
)}
{wishedPrice && (
<StatusBlock>
<StautsText>{wishedPrice.toLocaleString()}원</StautsText>
</StatusBlock>
)}
{expiredDate && (
<StatusBlock>
<StautsText>{`${expiredDate.slice(0, 4)} / ${expiredDate.slice(
4,
6,
)} / ${expiredDate.slice(6)}`}</StautsText>
</StatusBlock>
)}
</HistoryStatusArea>
```
- 각 항목마다 존재하면 렌더링하는 조건부 렌더링을 집어 넣어줬다.
#### 고민거리
==**서버에서 주는 status 코드에 따라 렌더링 해야하는 글귀가 달랐다.**==
```htmlmixed=
<StatusBlock>
<StautsText>/* 렌더링해야하는 상태 값 */</StautsText>
</StatusBlock>
```
- 이렇게 `StatusText` 태그 내부에 서버에서 받은 `statusCode`에 따라 다르게 보여줘야 했었는데, 안에서 조건부 렌더링을 복잡하게 하는 것 보다는 객체로 하나 만들어서 참조하는게 낫겠다 싶었다.
- 왜냐하면... status가 크게 3가지 이상으로 짜여질것 같았고, 3가지 이상인 조건부 렌더링을 하면 **nested ternary**가 될것 같았기 때문이다!
```typescript=
const StatusCode = {
0: "입찰 중",
1: "진행 중",
2: "종료",
};
```
따라서 이렇게 객체를 선언해주고, 접근해서 렌더링 했다!
```htmlembedded=
{status >= 0 && (
<StatusBlock>
<StautsText>{StatusCode[status]}</StautsText>
</StatusBlock>
)}
```
#### 그렇게 작은 물건 요약 컴포넌트를 완성했다!
이 친구로 이제 TradeHistory 컴포넌트를 만들자.
---
## TradeHistory
==**나름 간단했다!**==
- 미리 만든 컴포넌트를 조합하면 되었기에!
:::success
위 보이는 컴포넌트에서,
:::
- `CollectionTitle` 컴포넌트와 `Icon` 을 조합하여 위를 만들고,
- `TradeSummary` 를 통해 위 컴포넌트를 구현하고,
- `TradeHistoryItem`을 통해 위 컴포넌트를 구현했다.
##### 총 4개의 molecules들이 조합되어 생성되었다!
---
## Input tag 수정
#### 고민거리
:::warning
Input tag 관련해서 `validation` 절차를 어디다가 두어야 할지 고민이다.
1. `Atom` 에서 처리하여 상단 컴포넌트에서는 신경쓰지 않게하거나,
2. 상단 컴포넌트에서 `input` `atom` 을 쓸때 상단에서 선언에 validate 하거나.
- 1번 방법이 뭔가 코드상 중복되는 부분을 막기 때문에 더 효율적이다 생각했다.
- 하지만... `Atom` 에서 validate 절차를 밟아버리면,
> Email, password 등 모든 validation 절차가 들어가게 되어,
- `Atom`이 너무 방대해 질것이라고 생각했다.
- +) `Atom`에 validate 함수가 들어가게 되면 부모 상태 변경될떄 해당 함수들도 다시 생성될텐데... -> `useCallback` 으로 하면 되긴 하겠다, 생각했다.
:::
:::success
==**결론) 지금 상태로 유지하자.**==
- `Atom` 에서 정의한다면 효율적이겠지만,
- `Design Pattern` 에 걸맞지 않게 `Atom` 이 방대해질거라고 생각했고,
- 중복되는 코드는 `utils` 로 validate 함수를 뺄 수 있겠다 생각이 들었기 때문이다.
:::
- 처음 `input` 태그를 개발할때 미처 챙기지 못한 부분 개발진행했다.
- `이메일 주소` 우측에 `*` 표시가 난 것 개발.
- 스니커즈 사이즈 선택하는 기능까지 추가.
- types로 sneakers 추가.
Sign in with Wallet
Connect another wallet