Watcha-Pedia Ep.2 (header, footer)

emotion Library

npm i @emotion/react @emotion/styled

styled components 사용

emotion icons

npm i react-icons

search 아이콘을 쓰기 위해 react-icons을 설치

Header

styled components를 사용하여 구성

// Menu 
const Menu = styled.li`
    display: flex;
    align-items: center;
    height: 62px;
    flex-shrink: 0;
    &:not(:first-child) {
        margin-left: 24px;
    }
`;
// MenuButton
const MenuButton = styled.button<{active?: boolean}>`
    font-size: 15px;
    color: ${({ active }) => active ? 'rgb(53,53,53)' : 'rgb(126,126,126)'}; // logo 색상 차이
    cursor: pointer;
    border: none;
    background: none;
`;

Header 부분

Footer

policy 부분

const TermAndPolicyItem = styled.li`
    display: inline-block;
    color: #a5a5a7;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    vertical-align: top;
    cursor: pointer;
    &:not(:last-of-type) {
        &:after {
            content: "";
            display: inline-block;
            background: #848485;
            vertical-align: top;
            width: 1px;
            height: 12px;
            margin: 5px 8px 0;
        }
    }
`;