---
# System prepended metadata

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

---

20220114 Frontend 일일 개발일지
===

###### tags: `20220114`

# 개발 내용

## Banner Image 관련

KREAM 서비스에서 배너 이미지 관련 기능이 3가지가 있다.

#### 1. 이미지 슬라이더 배너

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

#### 2. 낱개 이미지 배너

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

#### 3. SHOP 화면, 작은 배너

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

==1번과 3번은 이미지 슬라이더이고, 2번은 낱개이다.==

##### 전략 수립

1. 일단은 낱장짜리 작은것과 큰것을 만들고,
2. 그 낱장짜리들을 사용해서 이미지 슬라이더에 넣자.

이렇게 계획을 세웠다.

##### 왜?

>[color=#cec404]큰 배너, 작은 배너 낱장 이미지를 만들면 전자는 이미지 슬라이더, 낱장 배너에 각각 재사용되고, 후자는 이미지 슬라이드에 추가할 예정이니까!

#### 이미지 렌더링

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

KREAM은 참 특이한 구조로 배너를 렌더링한다.

**++딱 배너 이미지를 주고 보여주는게 아니라,++** 적당한 크기의 이미지 + *그 이미지를 감싸고 있는 `div` 태그 (**with 배경 색 서버로 부터 받아서 양 옆으로 넓혀서 보여주기.**)

즉, 무슨 말이냐...

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

여기서 보면 양 옆으로 초록색 선이 보이는가?

==저 초록색 선으로 둘러쌓인게 이미지고, 나머지 양옆으로 넓혀진 것이 `div` 태그 (with 서버로부터 받은 배경색) 이다...==

이런식으로 배너를 생성하더라.

**그래서 같은 방법으로 구현했다.**

##### CSS

> CSS은 아래처럼 **`category` 로 구현했당.**

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

##### props

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

크게 4가지 props로 설계했다.

:::info
links? :string // 클릭하면 이동할 링크! optional 로 설정.
bgColor: string // 양 옆으로 넓힐때의 색
category: string // 큰건지 작은건지 구분을 위해!
readonly src: string // 서버로 받을 이미지 주소.
:::

link를 optional 로 준 이유는 다른 페이지로 링킹을 안해줄 수 있겠다 생각을 했기 때문이다.

## Banner Slider 구현

KREAM에 slider 컴포넌트는 2개가 있다.

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

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

이렇게 2가지가 존재하며, 자동으로 슬라이드가 넘어간다.

> [color=red] react-slideshow-image 라이브러리를 활용했다.

```typescript=
const properties = {
    duration: 4000,
    transitionDuration: 400,
    infinite: true,
    prevArrow: (
        <Icon
            name="ChevronLeft"
            style={{
                marginRight: "-30px",
                zIndex: "99",
                cursor: "pointer",
            }}
        />
    ),
    nextArrow: (
        <Icon
            name="ChevronRight"
            style={{ marginLeft: "-30px", zIndex: "99", cursor: "pointer" }}
        />
    ),
};
```

위와 같은 `properties` 를 가지는데, 해당 [docs](https://react-slideshow.herokuapp.com/api)를 참고해서 개발했다.

==props로는 2가지 인자를 보내준다.==

```typescript=
type SliderProps = {
	small?: boolean;
	images: typeof BannerImage[];
};
```

- small은 작은 slider인지, 큰 slider인지 정해주며,
- `images` 는 슬라이더에 넘겨진 `ProductImage` 컴포넌트 배열이 넘어간다.

#### *++미리미리 atom들 만들어 놓으니까 너무 편하긴하다.++*

#### 고민 거리

**우측 화살표 주목**


![](https://i.imgur.com/hlEmXSU.gif)

다음과 같이 반응형이 작은 배너에서 잘 안되는 문제점 발견.

##### 해결 방법

저 우측 chevron right 에 계속 css를 넣어보려고 시간 투자를 했지만... *아니더라*

다음과 같이 해결했다.

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

==마지막에 `StyledFade` 를 통해 `react-slideshow-image` 의 `Fade` 컴포넌트를 `styled`로 조정했고,==

>[color=cyan] `Fade` 컴포넌트에 `max-width` 속성을 추가했다.

## ProductThumbnail 작성

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

위에 해당하는 ==`ProductImage` 컴포넌트와 `Icon` 컴포넌트가 합쳐진 컴포넌트를 작성했다.==

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


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

**<span style = "color:red">해당 컴포넌트는 `molecules` 에 해당하기 때문에 API 콜이 들어가면 안된다고 생각했다.</span>**

따라서 `ProductThumbnail` 컴포넌트에 `onHandleWishClick` 이라는 callback 함수를 지정해주었다.

상위 컴포넌트에서 `ProductThumbnail` 를 호출하며 부르도록 설계했다.