[모두의 이력서_9일차] 헤더, 푸터 ui 구현(+ 반응형)

단순하게 css만 짠거라 변경사항 코드만 붙이겠습니다.

 

styles > gloval.ts

import { createGlobalStyle } from "styled-components";
import { reset } from "styled-reset";

const Global = createGlobalStyle`
  ${reset}

  *{
    box-sizing: border-box;
    outline: none;
  }

  html, input, select, textarea{
    letter-spacing: -0.05em;
    color: ${({ theme }) => theme.colors.blackText};
  }

  a{
    text-decoration: none;
    color: ${({ theme }) => theme.colors.blackText};
  }
`;

export default Global;

• a태그 text-decoration 변경 및 글씨 색 검정으로 변경 (a태그 reset)

 

styles > common > css.ts

import { css } from "styled-components";

export const inner = css`
  padding: 0 24px;
`;

• 이번에는 inner의 width값을 따로 지정을 안하고 좌우에 패딩을 주고 작업했습니다.

 

헤더

---

tsx

components > layout > header > Header.tsx

import Image from "next/image";
import Link from "next/link";

import Nav from "./Nav";
import User from "./User";

import * as styled from "../../../styles/components/layout/header/Header";

import logo from "../../../public/logo.svg";

const Header = () => {
  return (
    <styled.HeaderCon>
      <styled.TopCon>
        <h1>
          <Link href="/">
            <Image src={logo} alt="모두의 이력서 로고" />
          </Link>
        </h1>
        <User device={"mobile"} />
      </styled.TopCon>

      <styled.RightCon>
        <Nav />
        <User device={"pc"} />
      </styled.RightCon>
    </styled.HeaderCon>
  );
};

export default Header;

 

components > layout > header > Nav.tsx

import Link from "next/link";
import { useRouter } from "next/router";

import * as styled from "../../../styles/components/layout/header/Nav";

const Nav = () => {
  const router = useRouter();

  return (
    <styled.NavCon>
      <ul>
        <styled.Navli pathname={router.pathname === "/"}>
          <Link href="/">발견</Link>
        </styled.Navli>
        <styled.Navli pathname={router.pathname === "/Resume"}>
          <Link href="/Resume">이력서</Link>
        </styled.Navli>
      </ul>
    </styled.NavCon>
  );
};

export default Nav;

 

components > layout > header > User.tsx

import Link from "next/link";

import * as Styled from "../../../styles/components/layout/header/User";

interface Props {
  device: string;
}

const User = ({ device }: Props) => {
  console.log(device);
  return (
    <Styled.UserList device={device}>
      <li>
        <Link href="/Login">로그인</Link>
      </li>
      <li>
        <Link href="/Register">회원가입</Link>
      </li>
    </Styled.UserList>
  );
};

export default User;

 

스타일

styles > components > layout > header > Header.ts

import styled from "styled-components";
import { inner } from "../../../common/css";

export const HeaderCon = styled.header`
  display: flex;
  align-items: center;
  gap: 40px;
  position: sticky;
  top: 0;
  left: 0;
  ${inner}
  border-bottom: 1px solid ${({ theme }) => theme.colors.grayBd};
  background: #fff;

  ${({ theme }) => theme.device.mobile} {
    display: block;

    h1 {
      padding: 16px 0;
      img {
        width: auto;
        height: 18px;
      }
    }
  }
`;

export const TopCon = styled.div`
  ${({ theme }) => theme.device.mobile} {
    ${({ theme }) => theme.common.flexBetween}
  }
`;

export const RightCon = styled.div`
  ${({ theme }) => theme.common.flexBetween}
  width: 100%;
`;

 

styles > components > layout > header > Nav.ts

import styled from "styled-components";

export const NavCon = styled.nav`
  ul {
    display: flex;
    gap: 32px;
    font-weight: 500;
  }
`;

export const Navli = styled.li<{ pathname: boolean }>`
  position: relative;
  padding: 20px 0;

  &:after {
    content: "";
    ${({ theme }) => theme.common.positionXCenter}
    top: inherit;
    bottom: 0;
    width: 24px;
    height: 4px;
    background: ${({ pathname, theme }) =>
      pathname ? theme.colors.blackText : "transparent"};
  }

  a {
    transition: all 0.3s;

    &:hover {
      color: ${({ theme }) => theme.colors.grayText};
    }
  }

  ${({ theme }) => theme.device.mobile} {
    padding: 16px 0;
  }
`;

 

styles > components > layout > header > User.ts

import styled from "styled-components";

export const UserList = styled.ul<{ device: string }>`
  display: ${({ device }) => (device === "pc" ? "flex" : "none")};

  li {
    padding: 0 8px;
    font-weight: 300;
    font-size: ${({ theme }) => theme.fontSizes.small};
  }

  li:nth-of-type(2n) {
    border-left: 1px solid ${({ theme }) => theme.colors.grayBd};
  }

  a {
    transition: all 0.3s;

    &:hover {
      color: ${({ theme }) => theme.colors.main};
    }
  }

  ${({ theme }) => theme.device.mobile} {
    display: ${({ device }) => (device === "pc" ? "none" : "flex")};
  }
`;

 

푸터

---

tsx

components > layout > Footer.tsx

import Image from "next/image";

import * as styled from "../../styles/components/layout/Footer";

import logo from "../../public/logo.svg";

const Footer = () => {
  return (
    <styled.FooterCon>
      <styled.TopCon>
        <h1>
          <Image src={logo} alt="모두의 이력서 로고" />
        </h1>

        <styled.ListWrap>
          <li>이용약관</li>
          <li>개인정보 처리방침</li>
        </styled.ListWrap>
      </styled.TopCon>

      <styled.BottomCon>
        <p>© 2023. modooResume all rights reserved.</p>
      </styled.BottomCon>
    </styled.FooterCon>
  );
};

export default Footer;

 

스타일

styles > components > layout > Footer.ts

import styled from "styled-components";
import { inner } from "../../common/css";

export const FooterCon = styled.footer`
  border-top: 1px solid ${({ theme }) => theme.colors.grayBd};
  background: #fff;
`;

export const TopCon = styled.div`
  display: flex;
  align-items: center;
  gap: 40px;
  height: 48px;
  ${inner}

  h1 {
    img {
      width: auto;
      height: 16px;
    }
  }

  ${({ theme }) => theme.device.mobile} {
    display: block;
    height: auto;
    padding-top: 24px;

    h1 {
      text-align: center;
    }
  }
`;

export const ListWrap = styled.ul`
  display: flex;
  gap: 44px;

  li:last-of-type {
    font-weight: 500;
  }

  ${({ theme }) => theme.device.mobile} {
    ${({ theme }) => theme.common.flexCenter}
    margin-top: 32px;
  }
`;

export const BottomCon = styled.div`
  border-top: 1px solid ${({ theme }) => theme.colors.grayBd};
  padding: 24px;
  padding-bottom: 80px;

  p {
    font-weight: 300;
    font-size: ${({ theme }) => theme.fontSizes.small};
    color: ${({ theme }) => theme.colors.grayText};
  }

  ${({ theme }) => theme.device.mobile} {
    padding: 40px 24px 80px 24px;
    border-top: 0;
    text-align: center;
  }
`;

 

 

구현 화면

---

PC

 

Mobile