20220116 Frontend 주말 개발일지
===

###### tags: `20220116`

# 개발 내용

## Shortcut


#### 홈화면에 위와 같은 컴포넌트가 1/15일 기준 업데이트되었다.

> ~~벙찌더라. 저걸 해말아..?~~

그래도 생긴게 귀엽고 있으면 더 이쁠것 같아서 구현하기로 했다!

### 먼저 1개짜리를 만들었다.


Props로 3가지를 받게 구성했다.

type ShortcutItemProps = {
	src: string;
	link: string;
	title: string;
};

- src는 보이는 이미지의 주소,
- link 서버에서 받아 사용자가 클릭시 이동할 링크,
- title은 하단에 보이는 제목.

**결과적으론 아래처럼 만들었고,**

이제 이 친구들 5개를 모아서 최종본을 만들었다.

### Shortcuts


>[color=red] `items` 라는 친구 존재의 여부에 따라 다르게 렌더링 한다. 이는 **고민 끝에 결정된 것!**

#### 고민거리

~~의식의 흐름~~

1. 어차피 저 `ShortcutItem`들의 링크, 이미지 주소, 타이틀은 고정아닌가?
- 고정이면.. 그냥 미리 만들어도 될까?
3. 그리고 서버에서 이렇게 갑자기 업데이트 된거에 대한.. 응답을 준비 못할 수도 있지 않을까.

결론) ==그럼 서버에서 받았을때도 렌더링 가능하고, 서버에서 **받지 않았을때도** 가능하게 하자!==

이런.. 의식의 흐름에 따라 위와 같은 코드가 탄생했다

export interface ShortcutItemRes {
	link: string;
	image: string;
	title: string;
}

type ShortcutsProps = {
	items?: ShortcutItemRes[];
};

`ShortcutItemsRes` 라는 인터페이스를 정의했고, 해당 인터페이스 배열을 ==**서버로부터 받는다면**== 아래 3번째줄이 수행된다.

<StyledShortcutWrapper>
    {items ? (
        items.map((item) => (
            <ShortcutItem link={item.link} src={item.image} title={item.title} />
        ))
    ) : (
        <>
            <ShortcutItem
                link={"/"}
                src="..."
                title="프리미엄"
            />
            <ShortcutItem
                link={"/"}
                src="..."
                title="겨울 아우터"
            />
            <ShortcutItem
                link={"/"}
                src="..."
                title="#스타일"
            />
            <ShortcutItem
                link={"/"}
                src="..."
                title="럭키 드로우"
            />
            <ShortcutItem
                link={"/"}
                src="..."
                title="빠른 배송"
            />
        </>
    )}
</StyledShortcutWrapper>

==**서버로부터 받지 못한다면**== 아래 7번째줄부터 수행하겠다!

### 반응형 구현

<span style="color: red">**1/17 새벽 놀라운 사실을 알아버렸다.**</span>

원래는 아래와 같고,


크기를 줄이면 아래처럼 동글동글해지는데,


반응형을 그냥 간단하게 `media query` 로 해서 border-radius를 50%로만 하려고 했었는데...


:::danger

**??? 이미지가 다른거?!??!?**
:::

<img src="https://i.imgur.com/s9y5fbO.jpg" width="300px"/>

##### 넘모넘모 신나잖아~

#### 고민거리

그렇다면.. `media query` 도 쓰면서.. img src를 바꿔야한다?

1. 일단 그러면 `ShortcutItem` 에게 2개의 이미지를 받게 해서..
2. `media query` 에 따라서 안에 이미지를 바꿔야 하나?

라고 고민 했다.

결론) ==**정답!**==


- `StyledImage` 에게 2개의 img src를 받게했다.
- `bigImgSrc`, `smallImgSrc` 2개를 받게했다.

###### css내부에서 next image의 src를 어케 바꾸나.. 했는데 생각보다 쉬웠다.
- `content: url()` 를 통해서 바꿔주었다!

>[color=hotpink] **물론 해당하는 types는 모두 `smallImgSrc`를 추가했다!**

---

## Price 정보


> 간단한 컴포넌트를 생성했다!

#### 특이점


1. home 화면과 shop 화면에서의 가격 정보 글씨 크기가 조금 달랐다!

>[color=red]**`category` 속성으로 조절했다.**

2. 가격의 정보에 쉼표가 들어가야했었다.

>[color=orange]`string.toLocalString()` 함수로 해결!

---

## QuickFilter 관련

월욜에 적을거야!