[DevLog] 정다인 / 2022-03-23

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

- SR 기획 마무리하고 Wiki 문서 최종 수정
- 테스크를 세분화해서 추가 작성
- 메인페이지 레이아웃 구현
- header/footer 레이아웃 구현

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

- 스타일 컴포넌트를 이용해 CSS 작업 중 props를 이용해 컴포넌트마다 속성을 다르게 설정하는 것
- 스타일 컴포넌트에서 `keyframes`을 이용해 애니메이션 구현하는 것
- `flex` 속성을 이용해 컴포넌트를 반응형 레이아웃을 구현하고 싶었는데 못했다

```js

/* 애니메이션 만들기 */
const fadeIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}

/* 스타일 컴포넌트 만들기 */
const Title = styled.h1`
font-size: ${(props) => props.fontSize || "70px"}; // props 로 컴포넌트에서 설정 가능하게 하기
margin: ${(props) => props.morginBottom || "0px"}; // props 로 컴포넌트에서 설정 가능하게 하기
color: #444;
animation: ${fadeIn} 1s linear; // 애니메이션 적용
`;

/* 컴포넌트를 작성할 때 다르게 설정 가능 */
난 코닥을 때 후지를 써..

```

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

- [ ] 메인페이지 레이아웃 구현 마무리(애니메이션 적용)
- [ ] 다른 페이지 레이아웃 구현 테스크 진행