[add]: 컴포넌트 초기 세팅

frontend/src/App.jsx

@@ -1,35 +1,23 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import React from "react";
+import InputBlock from "./components/InputBlock";
+import InfoBlock from "./components/InfoBlock";
+import PageBtn from "./components/PageBtn";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
       <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        <InputBlock />
+        <InfoBlock />
+        <PageBtn
+          buttons={[
+            { label: "ASSIGNMENT CHECK", href: "/assignment" },
+            { label: "ATTENDANCE CHECK", href: "/attendance" },
+          ]}
+        />
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

frontend/src/assets/root.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "Cafe24Moyamoya-Regular-v1.0";
+  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/Cafe24Moyamoya-Regular-v1.0.woff2")
+    format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+:root {
+  --main-green: #49ff24;
+  --card-toggle-green: #2aff00;
+  --card-detail-green: #2d791d;
+  --icon-top-green: #14ae5c;
+  --icon-detail-green: #14ae5c;
+  --icon-detail-yellow: #ffcd29;
+  --icon-detail-red: #ff2c2c;
+  --background-black: #000000;
+  --fill-gray: #d9d9d9;
+  --warn-red: #ff5858;
+  --text-white: #ffffff;
+  --border-gray: #c7c7c7;
+}
+.noto-sans-kr-context {
+  font-family: "Noto Sans KR", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

frontend/src/components/InfoBlock.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const InfoBlock = () => {
+  return (
+    <div>
+      <p className={InfoBlock.title}></p>
+      <p className={InfoBlock.context}></p>
+    </div>
+  );
+};
+
+export default InfoBlock;

frontend/src/components/InputBlock.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./componentsCss/InfoBlock.css";
+
+const InputBlock = () => {
+  return (
+    <div>
+      <input class="inputTag" type="text" placeholder="이름" />
+      <input class="inputTag" type="password" placeholder="비밀번호" />
+      <input
+        class="inputTag"
+        type="text"
+        placeholder="출석코드를 입력하세요."
+      />
+    </div>
+  );
+};
+
+export default InputBlock;

frontend/src/components/PageBtn.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const PageBtn = ({ buttons }) => {
+  return (
+    <div>
+      {buttons.map((btn, index) => (
+        <button key={index} onClick={() => (window.location.href = btn.href)}>
+          {btn.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default PageBtn;

frontend/src/components/componentsCss/InfoBlock.css

@@ -0,0 +1,10 @@
+.inputTag {
+  width: 309px;
+  height: 47px;
+  border-radius: 14px;
+  background-color: var(--border-gray);
+  color: var(--text-white);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: "Noto Sans KR", sans-serif;
+}

frontend/src/main.jsx

@@ -1,10 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+import "./assets/root.css";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);