20220112 Frontend 일일 개발일지
===
###### tags: `20220112`
# 개발 내용
## 제품 상세 정보 컴포넌트
-> 첫 molecule이다!
우선 홈화면에 보이는, 제품 상세 정보는 아래처럼 생겼고,
SHOP 에 진입 시 보이는 그리드에는
위와 같이 **브랜드에 언더바가** 없다.
제품 상세 정보 페이지에서는
위와 같이 글씨 크기가 모두 조금씩 커야했다.
#### 고민거리
> `productInfo` 라는 컴포넌트 하나로 이 3가지를 모두 렌더링 할 수 있는 방법을 고민했다.
결론) `productInfo`를 이루는 3가지 atom에 `category` 속성을 내려주고, 해당 속성에 따라 다르게 `css`를 먹이자!
styled component인 `StyledBrand` 를 보면, `category` 에 따라 다르게 렌더링을 하는 것으로 구현했다.
##### home, shop, product 3가지인데 삼항연산자 한번으로 가능할까?
> 일단은 .. home과 shop이 모양이 똑같아서 가능했다..!
## logo 작성
#### logo를 작성했다!
[여기](https://www.squarespace.com/)에서 생성했는데, 일단 결과물을 첨부하자면 ...
상단 GNB에 들어가는 로고는 아래와 같고,
아래 로고는 회원가입 시 보이는 로고다.
#### 로고 관련 폴더 구조
`Logo` 컴포넌트는 `svg` 폴더안에 2가지 로고 svg 파일을 관리한다.
> `index.ts`
이렇게 `.svg` 파일을 export 하고, export 된 것을 아래 `atoms/Lofo/index.tsx` 에서 컴포넌트로 사용한다!
#### PNG가 아닌 SVG로 변환!
`SVG` 로 변환 후, `Icon` 컴포넌트처럼 `React.createElement` 를 통해서 컴포넌트화 했다.
##### `category` 속성을 추가하여 큰 로고인지 / 아래 태그가 달린 로고인지 구분한다.
#### 왜 SVG로 굳이 컴포넌트화 했을까?
> 결론) 입맛대로 `css style` 넣고 싶다.
이미지로도 충분히 가능하다. 하지만... 내가 원하는 css 스타일들을 넣지 못하므로! svg 로 컴포넌트화 했다.
+) svg 파일은 벡터값이 포함되므로 안깨진단다!
## Input atom 작성
#### 고민거리
1. KREAM에서는 로그인 비밀번호가 틀리면 `alert`로 띄워준다.
- 보통 `input` 태그 아래에 에러메세지 띄우는데 그러질 않는다.
2. 그 와중에 입력시 비밀번호 형식 / 이메일 형식이 안맞으면 **그때 에러메세지**가 뜬다.
일단은 아래처럼 컴포넌트를 구성했다.
> placeholder와 `ErrorMsg` 태그 안에 에러 메세지를 객체를 활용해 다르게 렌더링한다.
#### 예상 사용법..?
아마도 입력을 시작했는지 알 수 있는 변수와 함께 쓰여야 할 것 같다.
```typescript=
const [isTypeStart, setIsTypeStart] = useState<boolean>(false);
const [isErrorEmail, setIsErrorEmail] = useState<boolean>(false);
...
return (
isTypeStart && isErrorEmail ? (<Input error />) : (<Input />)
)
```
약간 이런식으로..? 쓸 생각으로 컴포넌트를 구성했다.
### Product 카테고리 제목 작성
#### 고민거리
> 네이밍이 가장 어렵다...
`ProductTitle` 은.. 너무 마음에 안든다.
뭔가 모여있는 section... categories... 으로 생각하다가 `collection` 단어가 떠올랐다!
**`CollectionTitle` 로 정했다.**
간단하게 작성했다!
`props` 로 title, subtitle 값을 받아와서 렌더링했다.
### HeaderTop organism 개발 시작.
> Semantic tag 를 사용하자.
-> why?) SEO, 그리고 이유 있는 태그사용!
Sign in with Wallet
Connect another wallet