[깃허브 앱] 새 프로젝트 시작, 테일윈드 설치 및 각 컴포넌트 생성

https://tailwindcss.com/docs/guides/vite

Install Tailwind CSS with Vite - Tailwind CSS

 

 

 

 

 

 

 

 

 

 

 

 

App.css와 App.jsx 초기화

 

 

테일윈드 적용됐는지 테스트해보기 

 

 

 

 

 

 

https://daisyui.com/

daisyUI — Tailwind CSS Components ( version 4 update is here )

 

https://daisyui.com/docs/install/

Install daisyUI as a Tailwind CSS plugin — Tailwind CSS Components ( version 4 update is here )

 

 

 

 

 

데이지UI 적용하고 테스트해봄

 

 

 

https://daisyui.com/docs/themes/

daisyUI themes — Tailwind CSS Components ( version 4 update is here )

 

 

테마를 적용함

 

색상이 변하는것을 확인할 수 있다. 

 

 

 

라우터랑 아이콘 설치

 

 

 

 

rfcp로 만듬 

 

 

 

 

 

 

Navbar.jsx

import { FaGithub } from "react-icons/fa";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";

const Navbar = ({ title }) => {
  return (
    <nav className="navbar mb-12 shadow-lg bg-neutral text-neutral-content">
      <div className="container mx-auto">
        <div className="flex-none px-2 mx-2">
          <FaGithub className="inline pr-2 text-3xl" />
          <Link to="/" className="text-lg font-bold align-middle">
            {title}
          </Link>
        </div>

        <div className="flex-1 px-2 mx-2">
          <div className="flex justify-end">
            <Link to="/" className="btn btn-ghost btn-sm rounded-btn">
              HOME
            </Link>
            <Link to="/about" className="btn btn-ghost btn-sm rounded-btn">
              ABOUT
            </Link>
          </div>
        </div>
      </div>
    </nav>
  );
};
//컴포넌트의 프롭스 타입을 설정
Navbar.propTypes = {
  //타이틀은 문자열
  title: PropTypes.string,
};

Navbar.defaultProps = {
  title: "Github Finder",
};

export default Navbar;

 

 

 

 

 

 

 

const Footer = () => {
  const footerYear = new Date().getFullYear();
  return (
    <footer className="footer p-10 bg-gray-700 text-primary-content footer-center">
      <div>
        <svg
          width="50"
          height="50"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/200/svg"
          fillRule="evenodd"
          clipRule="evenodd"
          className="inline-block fill-current"
        >
          <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
        </svg>
        <p>Copyright &copy; {footerYear} All rights reserved</p>
      </div>
    </footer>
  );
};

export default Footer;

 

 

 

index.html 의 theme 지우기

 

 

 

 

 

컴포넌트 폴더 아래에 pages폴더를 생성한 후 About.jsx, Home.jsx , NotFoud.jsx 생성한다. 

About.jsx

import React from "react";

const About = () => {
  return (
    <>
      <h1 className="text-6xl mb-4">Github Finder</h1>
      <p className="mb-4 text-2xl font-light">
        깃허브 사용자를 찾고 프로파일을 확인할 수 있는 리액트 앱입니다. 나의
        블로그 주소는 다음과 같습니다.
        <strong>
          <a href="https://euni8917.tistory.com/">내 블로그</a>
        </strong>
        .
      </p>
      <p className="text-lg text-gray-400">
        Version<span>1.0.0</span>
      </p>
    </>
  );
};

export default About;

 

 

Home.jsx

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

 

 

 

 

NotFound.jsx

import React from "react";
import { FaHome } from "react-icons/fa";
import { Link } from "react-router-dom";

const NotFound = () => {
  return (
    <div className="hero">
      <div className="text-center hero-content">
        <div className="max-w-lg">
          <h1 className="text-8xl font-bold mb-8">Oops!</h1>
          <p className="text-5xl mb-8">404 - Page Not Found!</p>
          <Link className="btn btn-primary btn-lg" to="/">
            <FaHome className="mr-2" />
            Back To Home
          </Link>
        </div>
      </div>
    </div>
  );
};

export default NotFound;

 

 

 

 

 

App.js에서 각 페이지별로 route 지정해주고 , 컴포넌트 사용한다. 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import NotFound from "./components/pages/NotFound";

function App() {
  return (
    <BrowserRouter>
      <div className="flex flex-col justify-between h-screen">
        <Navbar />
        <main className="container mx-auto px-3 pb-12">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/notfound" element={<NotFound />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

테스트하기 

 

 

 

 

그 외의 모든 주소