---
# System prepended metadata

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

---

20220112 Frontend 일일 개발일지
===

###### tags: `20220112`

#  개발 내용

## 제품 상세 정보 컴포넌트

-> 첫 molecule이다!


우선 홈화면에 보이는, 제품 상세 정보는 아래처럼 생겼고,
![](https://i.imgur.com/12Q9kFV.png)


SHOP 에 진입 시 보이는 그리드에는
![](https://i.imgur.com/UsIl8B6.png)
위와 같이 **브랜드에 언더바가** 없다.

제품 상세 정보 페이지에서는

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

위와 같이 글씨 크기가 모두 조금씩 커야했다.

#### 고민거리

> `productInfo` 라는 컴포넌트 하나로 이 3가지를 모두 렌더링 할 수 있는 방법을 고민했다.

결론) `productInfo`를 이루는 3가지 atom에 `category` 속성을 내려주고, 해당 속성에 따라 다르게 `css`를 먹이자!

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

styled component인 `StyledBrand` 를 보면, `category` 에 따라 다르게 렌더링을 하는 것으로 구현했다.

##### home, shop, product 3가지인데 삼항연산자 한번으로 가능할까?

> 일단은 .. home과 shop이 모양이 똑같아서 가능했다..!


## logo 작성

#### logo를 작성했다!

[여기](https://www.squarespace.com/)에서 생성했는데, 일단 결과물을 첨부하자면 ...

상단 GNB에 들어가는 로고는 아래와 같고,

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

아래 로고는 회원가입 시 보이는 로고다.

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

#### 로고 관련 폴더 구조

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

`Logo` 컴포넌트는 `svg` 폴더안에 2가지 로고 svg 파일을 관리한다.

> `index.ts`

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

이렇게 `.svg` 파일을 export 하고, export 된 것을 아래 `atoms/Lofo/index.tsx` 에서 컴포넌트로 사용한다!

#### PNG가 아닌 SVG로 변환!

`SVG` 로 변환 후, `Icon` 컴포넌트처럼 `React.createElement` 를 통해서 컴포넌트화 했다.

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

##### `category` 속성을 추가하여 큰 로고인지 / 아래 태그가 달린 로고인지 구분한다.

#### 왜 SVG로 굳이 컴포넌트화 했을까?

> 결론) 입맛대로 `css style` 넣고 싶다.

이미지로도 충분히 가능하다. 하지만... 내가 원하는 css 스타일들을 넣지 못하므로! svg 로 컴포넌트화 했다.

+) svg 파일은 벡터값이 포함되므로 안깨진단다!

## Input atom 작성

#### 고민거리

1. KREAM에서는 로그인 비밀번호가 틀리면 `alert`로 띄워준다.
    - 보통 `input` 태그 아래에 에러메세지 띄우는데 그러질 않는다.

2. 그 와중에 입력시 비밀번호 형식 / 이메일 형식이 안맞으면 **그때 에러메세지**가 뜬다.

일단은 아래처럼 컴포넌트를 구성했다.

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

> placeholder와 `ErrorMsg` 태그 안에 에러 메세지를 객체를 활용해 다르게 렌더링한다.

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

#### 예상 사용법..?

아마도 입력을 시작했는지 알 수 있는 변수와 함께 쓰여야 할 것 같다.

```typescript=
const [isTypeStart, setIsTypeStart] = useState<boolean>(false);
const [isErrorEmail, setIsErrorEmail] = useState<boolean>(false);

...

return (
    isTypeStart && isErrorEmail ? (<Input error />) : (<Input />)
)
```

약간 이런식으로..? 쓸 생각으로 컴포넌트를 구성했다.

### Product 카테고리 제목 작성

#### 고민거리

> 네이밍이 가장 어렵다...

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

`ProductTitle` 은.. 너무 마음에 안든다.

뭔가 모여있는 section... categories... 으로 생각하다가 `collection` 단어가 떠올랐다! 

**`CollectionTitle` 로 정했다.**

간단하게 작성했다!

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

`props` 로 title, subtitle 값을 받아와서 렌더링했다.

### HeaderTop organism 개발 시작.

> Semantic tag 를 사용하자.
-> why?) SEO, 그리고 이유 있는 태그사용!