[myCart] Navbar 컴포넌트 생성 및 적용 /Navbar Link 컴포넌트로 관리

 

components 폴더 생성 후

Navbar 폴더 안에 Navbar 컴포넌트 및 css파일을 생성한다. 

 

 

 

Navbar.jsx

import "./Navbar.css";

const Navbar = () => {

  return (

    <nav className="align_center navbar">

      <div className="align_center">

        <h1 className="navbar_heading">myCart</h1>

        <form className="align_center navbar_form">

          <input

            type="text"

            className="navbar_search"

            placeholder="제품 찾기..."

          />

          <button type="submit" className="search_button">

            검색하기

          </button>

        </form>

      </div>

      <div className="align_center navbar_links"></div>

    </nav>

  );

};

export default Navbar;

 

 

Navbar.css

.navbar {

  justify-content: space-between;

  padding: 0 40px;

  background-color: #fff;

}

.navbar_heading {

  margin-right: 20px;

  font-size: 32px;

}

.navbar_form {

  width: 450px;

  height: 40px;

  border: 1px solid #cdcdcd;

  border-radius: 5px;

  padding: 3px;

}

.navbar_search {

  flex: 1;

  height: 100%;

  padding: 0 7px;

  font-size: 20px;

  font-weight: 500;

  border: none;

  outline: none;

}

.search_button {

  height: 100%;

  padding: 5px 10px;

  font-size: 20px;

  font-weight: 500;

  border: none;

  border-radius: 5px;

  background-color: #6457f9;

  color: #fff;

  cursor: pointer;

}

 

index.css

.align_center {

  display: flex;

  align-items: center;

}

 

 

 

App.jsx

import "./App.css";

import Navbar from "./components/Navbar/Navbar";

function App() {

  return (

    <div className="app">

      <nav>

        <Navbar />

      </nav>

      <main>라우팅</main>

    </div>

  );

}

export default App;

 

Navbar 컴포넌트를 적용한다. 

 

 

 

 

그리고 Navbar에 링크를 달아줄건데 그에 맞는 이미지들을 다운로드 받아서 사용할거당

 

assets (3).zip

0.55MB

 

 

 

Navbar.jsx 에 이미지들을 import 해서 사용한다. 

import rocket from "../../assets/rocket.png";

import star from "../../assets/glowing-star.png";

import idButton from "../../assets/id-button.png";

import memo from "../../assets/memo.png";

import order from "../../assets/package.png";

import lock from "../../assets/locked.png";

 

네브바 링크에 Home을 추가한다. 

      <div className="align_center navbar_links">

        <a href="#" className="align_center">

          Home <img src={rocket} alt="" className="link_emoji" />

        </a>

      </div>

 

Navbar.css

.navbar_links {

  font-size: 20px;

}

.navbar_links > a {

  margin: 15px;

}

.link_emoji {

  width: 25px;

  margin-left: 5px;

}

 

index.css 에 a 공용태그 css 추가함

a {

  font-size: inherit;

  font-weight: 500;

  text-decoration: none;

  color: inherit;

  cursor: pointer;

}

 

 

 

 

 

그리고 방금 만든 이 부분을 컴포넌트로 만들어서 관리한다. 

 

Navbar 폴더 안에 LinkWithIcon.jsx 및 css생성하기

 

props 로 title, link , emoji를 받아와서 아래와 같이 표시한다. 

import "./LinkWithIcon.css";

const LinkWithIcon = ({ title, link, emoji }) => {

  return (

    <a href={link} className="align_center">

      {title} <img src={emoji} alt="" className="link_emoji" />

    </a>

  );

};

export default LinkWithIcon;

 

그리고 Navbar.css에서 작성해둔 

링크 이모지 관련 css를 LinkWithIcon.css로 옮긴다.

.link_emoji {

  width: 25px;

  margin-left: 5px;

}

 

 

Navbar.jsx에서 LinkWithIcon 컴포넌트를 적용한다. 

 

import "./Navbar.css";

import rocket from "../../assets/rocket.png";

import star from "../../assets/glowing-star.png";

import idButton from "../../assets/id-button.png";

import memo from "../../assets/memo.png";

import order from "../../assets/package.png";

import lock from "../../assets/locked.png";

import LinkWithIcon from "./LinkWithIcon";

const Navbar = () => {

  return (

    <nav className="align_center navbar">

      <div className="align_center">

        <h1 className="navbar_heading">myCart</h1>

        <form className="align_center navbar_form">

          <input

            type="text"

            className="navbar_search"

            placeholder="제품 찾기..."

          />

          <button type="submit" className="search_button">

            검색하기

          </button>

        </form>

      </div>

      <div className="align_center navbar_links">

        <LinkWithIcon title="홈페이지" link="." emoji={rocket} />

        <LinkWithIcon title="상품들" link="." emoji={star} />

        <LinkWithIcon title="로그인" link="." emoji={idButton} />

        <LinkWithIcon title="가입" link="." emoji={memo} />

        <LinkWithIcon title="내주문" link="." emoji={order} />

        <LinkWithIcon title="로그아웃" link="." emoji={lock} />

      </div>

    </nav>

  );

};

export default Navbar;

 

 

 

 

그리고 로그아웃 옆에 장바구니 링크는 이모지 없이 만들기 때문에 따로 만들어준다. 

        <LinkWithIcon title="홈페이지" link="." emoji={rocket} />

        <LinkWithIcon title="상품들" link="." emoji={star} />

        <LinkWithIcon title="로그인" link="." emoji={idButton} />

        <LinkWithIcon title="가입" link="." emoji={memo} />

        <LinkWithIcon title="내주문" link="." emoji={order} />

        <LinkWithIcon title="로그아웃" link="." emoji={lock} />

        <a href="/cart" className="align_center">

          장바구니 <p className="align_center cart_counts">0</p>

        </a>

 

 

Navbar.css

.cart_counts {

  justify-content: center;

  width: 20px;

  height: 20px;

  border-radius: 100%;

  background-color: #6457f9;

  color: #fff;

  font-size: 15px;

  margin-left: 5px;

}