127일차 - 프로젝트 8일차

프로젝트

드디어 Header을 1차적으로 완성했다.
Final Project의 첫 컴포넌트 완성이라서 감격스럽다.
물론 아직 CSS적으로 고칠 부분과 JavaScript를 추가적으로 적용해야 하지만 말이다.
반응형을 처음 시도하지만 성공적으로 적용 시켰다.

오늘 새롭게 배운 점은 display none은 transition이 적용이 되지 않는다는 것이다.
이 사항은 Dev Log와 에러핸들링에 적었으니 짧게 언급만 하고 끝내겠다.
블로그 마지막 추가에 Header 시연 영상을 올리겠다.

Dev Log

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

• header제작을 완료하고 header에 반응형을 넣었다.
• 반응형 테블릿으로 바뀌는 범위를 서칭해서 협의했다.
• 팀 KPT회고를 작성하였다.

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

• display none 애니메이션이 불가능함...
  header를 제작을 완료하고 추가적으로 메뉴창이 자연스럽게 나오는 애니메이션을 제작하려고 했었다.
  display none과 block 을 통해서 상단에 메뉴 버튼을 클릭했을때 메뉴가 나왔다가 숨겨지는 액션을 만들었는데, 약간 딱딱하다는 느낌을 받아서 자연스럽게 내려오는 애니메이션을 넣으려고 했지만, transition이 계속 적용이 되지 않았다.
  그래서 서칭해보니 display none은 transition이 적용되지 않는다고 한다.
  visibility 속성을 이용하면 되다고 하지만 하단의 메뉴 경계선은 그대로 남아있는 문제가 발생했다.
  추후에 시간이 있을때 한번 다시 시도해 보고자 한다.

  const NavMenu = styled.ul`
  display: flex;
  height: 95px;
  @media screen and (max-width: 1023px) {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    display: ${props =>
      props.menu ? 'block' : 'none'};
  }
`;

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

• Footer를 제작할 예정이다.

추가