[React] Github page로 포트폴리오 웹페이지 만들기 #11 header 를 만들어보자!

Github page로 포트폴리오 웹페이지 만들기

---

Main 페이지를 제외한 About 과 Work 페이지에는 헤더를 넣어 nav를 통해 다른 페이지로 이동할수 있게끔 해줍니다.

이때 사용하는 소스들은 Main에 사용된 svg들을 Nav 컴포넌트로 이동 → 변경 한뒤 스타일 및 코드를 통해 다른 스타일로 만들어 주려고 합니다.

시작!!!

components 만들기

---

먼저 src 디렉토리에 components 디렉토리를 생성하고 그안에 nav 와 header 디렉토리를 각각 생성해 줍니다.

이제 nav → index.js 에 main→index.js에 있는 소스코드를 옮겨 줍니다.

스르륵

추가적으로 변경된 사항은 window.location.pathname을 통해 ‘/’가 아닐경우 HIIO420 텍스트를 다른 텍스트들앞에 넣어주고 flex display를 통해 스타일을 적용 시켜 줍니다.

insertBefore를 해주기위해 useRef로 각각의 element들을 사용할수 있게끔 해주었습니다.

// src/pages/main/index.js

// modules
import React, { Fragment, useEffect, useRef } from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";

// SVG
import HIIO420 from "@resources/images/common/HIIO420.svg";
import ABOUT from "@resources/images/common/ABOUT.svg";
import WORK from "@resources/images/common/WORK.svg";
import BLOG from "@resources/images/common/BLOG.svg";
import GITHUB from "@resources/images/common/GITHUB.svg";

import {FlexLayout, svgHover } from "@resources/globalStyle";

const SvgWrapper = styled(FlexLayout)`
  ${svgHover}
  a,
  div,
  svg {
    width: 100%;
    height: 100%;
  }
`;

const Nav = () => {
  const { pathname } = window.location;
  const logoRef = useRef();
  const menuRef = useRef();
  useEffect(() => {
    const svgs = document.querySelectorAll("svg");
    svgs.forEach((svg, i) => {
      const width = svg.getAttribute("width");
      const height = svg.getAttribute("height");
      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
    });
    if (pathname !== "/") {
      const logo = logoRef.current;
      menuRef.current.insertBefore(logo, menuRef.current.firstChild);
    }
  }, []);
  return (
    <Fragment>
      <SvgWrapper ref={logoRef}>
        <Link to="/">
          <HIIO420 />
        </Link>
      </SvgWrapper>
      <FlexLayout gap="32px" ref={menuRef}>
        <SvgWrapper>
          <Link to="/about">
            <ABOUT />
          </Link>
        </SvgWrapper>
        <SvgWrapper justifyContent="center">
          <Link to="/work">
            <WORK />
          </Link>
        </SvgWrapper>
        <SvgWrapper justifyContent="center">
          <a href="https://twentytwentyone.tistory.com" target="_blank">
            <BLOG />
          </a>
        </SvgWrapper>
        <SvgWrapper justifyContent="flex-end">
          <a
            href="https://github.com/hiio42O/hiio42O.github.io.git"
            target="_blank"
          >
            <GITHUB />
          </a>
        </SvgWrapper>
      </FlexLayout>
    </Fragment>
  );
};

export default Nav;

이렇게 만든 Nav를 각각 main 과 header에서 불러와 반영해 줍니다.

// src/components/header/index.js

// modules
import React from "react";
import styled from "styled-components";

// components
import Nav from "@components/nav";
import { FlexLayout } from "@resources/globalStyle";

const HeaderLayout = styled(FlexLayout).attrs({
  as: "header",
})`
  padding: 20px;
  @media screen and (max-width: 660px) {
    padding: 10px 20px;
  }
`;

const Header = () => {
  return (
    <HeaderLayout>
      <Nav />
    </HeaderLayout>
  );
};

export default Header;

// src/pages/main/index.js

// modules
import React from "react";
import styled from "styled-components";
import Nav from "@components/nav";
// SVG

import { FlexCenterLayout, GridColumnLayout } from "@resources/globalStyle";

const MainWrapper = styled(FlexCenterLayout)`
  > div {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  @media screen and (max-width: 660px) {
    padding: 0 20px;
    width: calc(100% - 40px);
  }
`;

const Main = () => {
  return (
    <MainWrapper>
      <div>
        <Nav />
      </div>
    </MainWrapper>
  );
};

export default Main;

What is Next?

---

이번 글은 쓰다보니 너무 허무한 느낌이 없지 않아 꼭 좀더 보충해서 써야 겠습니다 ㅜㅜ

다음에는 지금 만들어 놓은 header를 적용할 layout component를 만들어 about과 work 페이지에 적용시켜 봅니다.

하하하.

끝!!!