---
# System prepended metadata

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

---

20220126 Frontend 일일 개발일지
===

###### tags: `20220126`

# 개발 내용

## TradeHistoryItem 작성

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

위 보이는 이미지에서 

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

이 친구를 만들려고 한다.

>[color=#d10a98]생각해보니 이 컴포넌트는 비슷하게 생긴 컴포넌트가 이미 있었던 것으로 기억한다.

바로 이 `smallProductInfo`!

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

이 컴포넌트를 재활용하여 사용하기로 했다.

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

- 5번, 6번째 줄에 보이는 `props` 를 optional 로 바꾸었다.
    - 따라서 `ProductKor` 이 보여야하면 기존 위위 사진처럼 보이고,
    - `size` 가 들어온다면 번역본 제목이 아니라 사이즈 정보도 보이도록 설계했다.

따라서, 만든 컴포넌트는 아래처럼 생겼다.

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


==**이렇게 컴포넌트를 완성할 줄 알았으나...**==

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

구매 내역 상세 페이지에 접근하면 우측에

> 구매 희망가 / 만료일 정보가 있었다.

**따라서 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>
)}
```

#### 그렇게 작은 물건 요약 컴포넌트를 완성했다!

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

이 친구로 이제 TradeHistory 컴포넌트를 만들자.

---

## TradeHistory

==**나름 간단했다!**==
- 미리 만든 컴포넌트를 조합하면 되었기에!

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

:::success
위 보이는 컴포넌트에서,
:::

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

- `CollectionTitle` 컴포넌트와 `Icon` 을 조합하여 위를 만들고,

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

- `TradeSummary` 를 통해 위 컴포넌트를 구현하고,

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

- `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` 태그를 개발할때 미처 챙기지 못한 부분 개발진행했다.

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

- `이메일 주소` 우측에 `*` 표시가 난 것 개발.
- 스니커즈 사이즈 선택하는 기능까지 추가.
    - types로 sneakers 추가.