20220114 Frontend 일일 개발일지
===

###### tags: `20220114`

# 개발 내용

## Banner Image 관련

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

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


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


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


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

##### 전략 수립

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

이렇게 계획을 세웠다.

##### 왜?

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

#### 이미지 렌더링


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

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

즉, 무슨 말이냐...


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

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

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

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

##### CSS

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


##### props


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

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

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

## Banner Slider 구현

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



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

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

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가지 인자를 보내준다.==

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

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

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

#### 고민 거리

**우측 화살표 주목**


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

##### 해결 방법

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

다음과 같이 해결했다.


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

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

## ProductThumbnail 작성


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



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

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

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