---
# System prepended metadata

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

---

20220124 Frontend 일일 개발일지
===

###### tags: `20220124`

# 개발 내용

## Grid 컴포넌트 모달 테스트 작업

---

## ProductThumbnail 컴포넌트 최종 작성.

---

## 마이페이지 좌측 사이드 바 개발

:::danger
Mypage 화면 개발 시작..! 할게 정말 많네.
:::

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

마이페이지 좌측 사이드 바는 위와 같이 생겼다.

그래서 고려중인 컴포넌트 구조는

1. 대문짝만한 페이지 이름 (마이 페이지)
2. subtitle (쇼핑 정보, 내 정보)
3. 하단 메뉴들 

로 나누어 개발 할 예정이다.

`Atom` 들 3개를 조합하여 구성하면 되겠다 생각했다!

#### 고민사항

근데 이 컴포넌트는 그렇게 재사용 되지도 않는데 굳이 atomic 하게 만들어야할까 고민이다.

>[color=crimson] 큰 제목인 '마이 페이지'는 `Atom` 으로 빼지 말고, 그 외 나머지를 `Atom` 으로 구성해서 작성해야겠다.

*마이 페이지 제목은 여기서만 쓰이므로 굳이 `Atomic` 하게 하지 않아도 되겠다 생각했다.*

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

> 간단하게 만들었다!

- 큰 제목 (마이 페이지) 가 존재하고,
- 작은 제목과 함께,
- 상세 메뉴가 `next/link` 와 함께 쓰였다.

#### 주의 사항

##### Next/link 에서는 커스텀으로 만든 컴포넌트를 `Link` 로 감쌀떄, 이를 먼저 `a` 로 감싸야한다고 한다!

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

---

## UserDetail 컴포넌트 작성