프로필 페이지 만들기 (5) - 헤더 컴포넌트 만들기

이번 포스트에서는 헤더 컴포넌트 제작 과정에 대해 작성해보고자 한다.

 

기존의 참고했던 블로그에서는 다음과 같이 UI가 구현되어 있다.

 

 

Header Item

예시와 다르게 나는 Home, Project, Study 3개의 항목으로 구성할 것이다.

 

Styled-component를 활용한 Style 컴포넌트를 다음과 같이 구성하였다.

const S = {
  HeaderBar: styled.div`
    width: 100%;
    height: 10vh;
    background-color: ${colors.semantic.background.dark};
    display: flex;
    align-items: center;
    justify-content: right;
  `,

  CategoryContainer: styled.div`
    display: flex;
    width: 30%;
    gap: 10%;
  `,

  CategoryItem: styled.div<CategoryItemProps>`
    width: 15%;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 4px;
    background-color: ${(props) =>
      props.active === 'true' ? colors.semantic.secondary : ''};
    color: ${(props) =>
      props.active === 'true'
        ? colors.semantic.text.light
        : colors.semantic.text.dark};
    &:hover {
      color: ${colors.semantic.text.light};
    }
    p {
      cursor: pointer;
    }
  `,
};

이때 CateogryItem에서 CategoryItemProps를 type으로 받는데, 

여기서 activte의 타입을 string으로 하였다.

 

type CategoryItemProps = {
  active: string;
};

 

왜냐하면 ... 

        <S.CategoryItem
          active={location.pathname === STUDY ? 'true' : 'false'}
          onClick={() => navigate(STUDY)}
        >
          <p>Study</p>
        </S.CategoryItem>

 

위 코드와 같이, URL의 값과 ROUTER_PATH 값과 비교를 하는데,

여기서 boolean 값으로 비교를 하면 실제 DOM에 값이 올라간다고 에러가 발생했기 때문이다.

 

구현된 헤더