[myCart] 홈페이지 생성 및 heroSection 컴포넌트 재사용

 

import React from "react";

const HomePage = () => {

  return (

    <div>

      <HeroSection />

      {/* 상품들 */}

      {/* 히어로 섹션 */}

    </div>

  );

};

export default HomePage;

 

 

 

 

HeroSection.jsx , css생성

 

HeroSection.jsx

import "./HeroSection.css";

import iphone from "../../assets/iphone-14-pro.webp";

const HeroSection = () => {

  return (

    <section className="hero_section">

      <div className="align_center">

        <h2 className="hero_title">아이폰 14 구매하세요</h2>

        <p className="hero_subtitle">

          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,

          quibusdam.

        </p>

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

          바로구매

        </a>

      </div>

      <div className="align_center">

        <img src={iphone} alt="" className="hero_image" />

      </div>

    </section>

  );

};

export default HeroSection;

 

 

App.jsx 에 HomePage컴포넌트를 적용한다. 

 

import "./App.css";

import HomePage from "./components/Home/HomePage";

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

function App() {

  return (

    <div className="app">

      <nav>

        <Navbar />

      </nav>

      <main>

        <HomePage />

      </main>

    </div>

  );

}

export default App;

 

 

 

HeroSection.css

.hero_section {

  display: grid;

  grid-template-columns: 1fr 1fr;

  height: 550px;

  padding: 0 60px;

  background-color: #000;

  color: #fff;

}

.hero_section > div {

  justify-content: center;

  flex-direction: column;

  text-align: center;

}

.hero_title {

  font-size: 45px;

  font-weight: 700;

  margin-bottom: 15px;

}

.hero_subtitle {

  font-size: 24px;

  margin-bottom: 32px;

  width: 70%;

}

.hero_link {

  padding: 16px 32px;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  font-weight: 700;

  border: 2px solid #fff;

  border-radius: 32px;

  background-color: #fff;

  color: #000;

  transition: all 0.3s ease-in-out;

}

.hero_link:hover {

  background-color: transparent;

  color: #fff;

}

.hero_image {

  height: 500px;

  transition: all 0.3s ease-in-out;

}

.hero_image:hover {

  transform: scale(1.05);

}

 

 

 

 

 

그리고 HeroSection 컴포넌트를 재사용 하기위해서 props로 받아서 사용 할 수 있게끔 코드 수정을한다. 

 

HeroSection.jsx

import "./HeroSection.css";

const HeroSection = ({ title, subtitle, link, image }) => {

  return (

    <section className="hero_section">

      <div className="align_center">

        <h2 className="hero_title">{title}</h2>

        <p className="hero_subtitle">{subtitle}</p>

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

          바로구매

        </a>

      </div>

      <div className="align_center">

        <img src={image} alt="" className="hero_image" />

      </div>

    </section>

  );

};

export default HeroSection;

 

 

HomePage.jsx

import HeroSection from "./HeroSection";

import iphone from "../../assets/iphone-14-pro.webp";

import mac from "../../assets/mac-system-cut.jfif";

const HomePage = () => {

  return (

    <div>

      <HeroSection

        title="아이폰 14 프로 그 이상"

        subtitle="Experience the power of the latest iPhone 14 with our most Pro camera ever."

        link="/"

        image={iphone}

      />

      {/* 상품들 */}

      <HeroSection

        title="궁극의 장비를 세팅하세요"

        subtitle="You can add Studio Display and colour-matched Magic accessories to your bag after configure your Mac mini."

        link="/"

        image={mac}

      />

    </div>

  );

};

export default HomePage;

 

 

 

 

두 개의 섹션이 나온다