Main Project 진행

메인 프로젝트 진행.

Header만 있던 방식에서, 모바일로 이동시 메뉴바를 아래쪽으로 옮기고, 상단에는 검색창만 남기는 방식으로 변경.

style-component 를 사용해서 react-router-dom의 Link에 css를 줄 때, a태그에 css를 입히듯,

const ErrorMessage = styled.div`
  margin-bottom: 15px;

  &.title {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: bolder;
    @media ${props => props.theme.mobile} {
      font-size: 2rem;
    }
  }

  a {
    color: hsl(206deg 100% 40%);
    &:hover {
      color: hsl(206deg 100% 52%);
    }
  }
`;

와 같은 방식으로 css를 줄 수 있었다.

페이지의 크기를 줄이면 본문이 footer를 침범하는 문제가 생겼는데, 본문에 min-height를 줌으로서 문제를 해결하였다.