codestates / codestates/FilmStorage

[DevLog] 정다인 / 2022-04-10

Open
#303 0 comments 0 reactions 1 assignee Claimed by @jeongdxxn View on GitHub
DevLog
Dominant language
JavaScript
Stars
5
Forks
5
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?

- 반응형 레이아웃 구현(헤더/ 메인/ 필름토크 게시판)
- 헤더 토글 버튼으로 레이아웃 구현

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- 화면이 작아졌을때 margin 과 padding 을 하나하나 조절하는게 힘들었습니다
- 토글 버튼을 이용해 메뉴 카테고리를 반응형으로 구현하고, 적절하게 배열하는 것이 힘들었습니다

```js
// menu ul component
@media screen and (max-width: 1024px) {
display: ${(props) => (props.isToggled ? "flex" : "none")};
text-align: center;
width: 100%;
padding: 0px;
position: absolute;
top: 70px;
right: 0px;
flex-direction: column;
background: #fff;
}

// menu li component
@media screen and (max-width: 768px) {
display: block;
padding: 30px 0;
}

...
setIsToggled(!isToggled)}>

// 컴포넌트에 state 값을 전달해주면 css에서 조건문에 isToggled를 이용해 속성을 줄 수 있다

...

```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 반응형 레이아웃 추가 구현

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.