[ React ] React 실전 ② 프로젝트 기초 공사 1

[ 폰트 세팅 ]

 

Open Font License : 글꼴 및 관련 소프트웨어용으로 특별히 설계된 무료 오픈 소스 라이선스

 

구글 폰트 : https://fonts.google.com/

Google Fonts

 

폰트를 적용하는 방법은 App.css에 import를 해주면 된다.

 

App.css

@import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap");

.App {
  padding: 20px;
  text-align: center;
  font-family: "Nanum Pen Script", cursive;
  font-family: "Yeon Sung", cursive;
}

 

font-family 속성은 가장 밑에 있는 속성이 적용이 된다. 

 

* align-items 속성은 display가 flex일 때 세로 축의 가운데에 위치하게 둔다.

 

---

[ 레이아웃 세팅 ]

 

레이아웃 세팅 : 모든 페이지에 반영되는 레이아웃 세팅 

 

@import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap");

body {
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Nanum Pen Script";
  min-height: 100vh;
  margin: 0px;
}

@media (min-width: 650px) {
  .App {
    width: 640px;
  }
}

@media (max-width: 650px) {
  .App {
    width: 90vw;
  }
}

#root {
  background-color: aliceblue;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.App {
  min-height: 100vh;
  padding-left: 20px;
  padding-right: 20px;
}

 

 

---

[ 이미지 에셋 세팅 ]

 

감정 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경 세팅

 

<img src={process.env.PUBLIC_URL + `/assets/emotion1.png`}></img>

 

peocess.env.PUBLIC_URL : public 디렉토리에 대한 경로를 바로 사용할 수 있는 명령어

 

 

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Edit from "./pages/Edit";

function App() {
  const env = process.env;
  env.PUBLIC_URL = env.PUBLIC_URL || "";

  return (
    <BrowserRouter>
      <div className="App">
        <img src={process.env.PUBLIC_URL + `/assets/emotion1.png`}></img>
        <img src={process.env.PUBLIC_URL + `/assets/emotion2.png`}></img>
        <img src={process.env.PUBLIC_URL + `/assets/emotion3.png`}></img>
        <img src={process.env.PUBLIC_URL + `/assets/emotion4.png`}></img>
        <img src={process.env.PUBLIC_URL + `/assets/emotion5.png`}></img>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="/diary" element={<Diary />} />
          <Route path="/edit" element={<Edit />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

---

[ 공통 컴포넌트 세팅 ]

 

모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅

 

공통으로 사용이 되는 요소들은 따로 디렉토리를 만들어서 컴포넌트를 생성하면 된다. 

 

1. 버튼

 

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Edit from "./pages/Edit";

// COMPONENTS
import MyButton from "./components/MyButton";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h1>APP.js</h1>

        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼 출력")}
          type={"positive"}
        />

        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼 출력")}
          type={"negative"}
        />

        <MyButton text={"버튼"} onClick={() => alert("버튼 출력")} />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="/diary" element={<Diary />} />
          <Route path="/edit" element={<Edit />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

Mybutton.js

const MyButton = ({ text, type, onClick }) => {
  // 타입을 정해주고 타입에 존재한다면 그대로 반환하고 없다면 default를 반환한다.
  const btnType = ["positive", "negative"].includes(type) ? type : `default`;

  return (
    <button
      className={["MyButton", `MyButton_${btnType}`].join(" ")}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

MyButton.defaultProps = {
  type: "default",
};

export default MyButton;

 

App.css

/* MyButton */

.MyButton {
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  font-family: "Nanum Pen Script";
  white-space: nowrap; /*글자가 버튼을 초과하지 않도록*/
}

.MyButton_default {
  background-color: greenyellow;
  color: black;
}

.MyButton_positive {
  background-color: blue;
  color: white;
}

.MyButton_negative {
  background-color: red;
  color: white;
}

 

---

2. 헤더

 

MyHeader.js

const MyHeader = ({ headText, leftChild, rightChild }) => {
  return (
    <header>
      <div className="head_btn_left">{leftChild}</div>
      <div className="head_text">{headText}</div>
      <div className="head_btn_right">{rightChild}</div>
    </header>
  );
};

export default MyHeader;

 

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Edit from "./pages/Edit";

// COMPONENTS
import MyButton from "./components/MyButton";
import MyHeader from "./components/MyHeader";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <MyHeader
          headText={"App"}
          leftChild={
            <MyButton text={"왼쪽 버튼"} onClick={() => alert("왼쪽 클릭")} />
          }
          rightChild={
            <MyButton
              text={"오른쪽 버튼"}
              onClick={() => alert("오른쪽 클릭")}
            />
          }
        />
        <h1>APP.js</h1>

        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼 출력")}
          type={"positive"}
        />

        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼 출력")}
          type={"negative"}
        />

        <MyButton text={"버튼"} onClick={() => alert("버튼 출력")} />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="/diary" element={<Diary />} />
          <Route path="/edit" element={<Edit />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

App.css

/* header */
header {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid salmon;
}

header > div {
  display: flex;
}

header .head_text {
  width: 50%;
  font-size: 25px;
  justify-content: center;
}

header .head_btn_left {
  width: 25%;
  justify-content: start;
}
header .head_btn_right {
  width: 25%;
  justify-content: end;
}

header button {
  font-family: "Nanum Pen Script";
}