[Full Stack] 리액트와 FastAPI로 온라인 서점 웹사이트 실습 -1 (랜딩페이지1)

[기술 아키텍처]

프론트 : React

백엔드 : FastAPI

DB : PostgresSQL

 

1. Hero 컴포넌트

랜딩페이지에서 Hero 컴포넌트는 정적 서빙.

Daisy UI(https://v3.daisyui.com/)를 사용하여 carousel 사용

// components/Hero.jsx
import { Link } from "react-router-dom";

import hero1 from "../assets/hero1.png";
import hero2 from "../assets/hero2.png";
import hero3 from "../assets/hero3.png";
import hero4 from "../assets/hero4.png";
import hero5 from "../assets/hero5.png";

const carouselImages = [hero1, hero2, hero3, hero4, hero5];

const Hero = () => {
  return (
    <div className="grid lg:grid-cols-2 gap-24 items-center">
      <div>
        <h1 className="max-w-2xl text-4xl font-bold tracking-tight sm:text-6xl">
          읽는 자는 멀리본다
        </h1>
        <p className="mt-8 max-w-2xl text-lg leading-8 text-gray-400">
          한 권의 책이 시야를 넓히고, 한 줄의 문장이 마음을 흔듭니다. 지금 이
          순간의 당신이 무엇을 읽느냐가 내일의 생각을 만듭니다. 당신의 하루가 더
          깊어지고, 더 멀리 나아가길 우리는 그 여정의 첫 페이지가
          되어드릴게요.
        </p>
        <div className="mt-10">
          <Link to="/products" className="btn btn-primary">
            책 보러가기
          </Link>
        </div>
      </div>
      <div className="hidden h-[30rem] lg:carousel carousel-center p-4 space-x-4 bg-base-200 rounded-box">
        {carouselImages.map((image) => {
          return (
            <div key={image} className="carousel-item">
              <img
                src={image}
                className="rounded-box h-full w-80 object-cover"
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Hero;

 

2. 랜딩 페이지에 추가

// pages/Landing.jsx
const Landing = () => {
  return (
    <>
      <Hero />
      <FeaturedProducts text='인문학 추천도서'/>
    </>
  );
};
export default Landing;

 

3. 결과