[6주차] Milimate 미션 제출합니다.

package.json

@@ -3,15 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@nextui-org/react": "^1.0.1-alpha.57",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.0",
+    "antd": "^4.17.4",
+    "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/App.css

@@ -0,0 +1,9 @@
+@import "~antd/dist/antd.css";
+
+.Content {
+  -ms-overflow-style: none;
+  margin-top: 120px;
+}
+::-webkit-scrollbar {
+  display: none;
+}

src/App.tsx

@@ -1,9 +1,32 @@
-import React from 'react';
+import { Routes, Route } from "react-router";
+import Signup from "./components/signup/signup.components";
+import MainPage from "./components/mainpage/mainpage.components";
+import Login from "./components/login/login.components";
+import Header from "./header";
+import "./App.css";
+import Front from "./components/vote/frontend.vote.components";
+import Back from "./components/vote/backend.vote.components";
+import { useEffect, useState } from "react";
+import axios from "axios";
 
 function App() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   return (
     <div className="App">
-
+      <Header isLoggedIn={isLoggedIn} />
+      <div className="Content">
+        <Routes>
+          <Route path="/" element={<MainPage />} />
+          <Route
+            path="/login"
+            element={<Login setIsLoggedIn={setIsLoggedIn} />}
+          />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/frontend" element={<Front isLoggedIn={isLoggedIn} />} />
+          <Route path="/backend" element={<Back isLoggedIn={isLoggedIn} />} />
+        </Routes>
+      </div>
     </div>
   );
 }

src/components/login/login.components.tsx

@@ -0,0 +1,50 @@
+import { Input, Spacer, Radio, Button, useInput } from "@nextui-org/react";
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+type LoginProps = {
+  setIsLoggedIn: Function;
+};
+
+function Login({ setIsLoggedIn }: LoginProps) {
+  let navigate = useNavigate();
+  return (
+    <>
+      <div className="Title">
+        <h2>로그인</h2>
+      </div>
+      <div className="Container">
+        <Input placeholder="아이디" />
+        <Spacer y={1.5} />
+        <Input.Password placeholder="비밀번호" />
+        <Spacer y={1.5} />
+        <Button
+          auto
+          ghost
+          onClick={() => {
+            setIsLoggedIn(true);
+            navigate("/", { replace: true });
+          }}
+        >
+          로그인
+        </Button>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <p style={{ marginBottom: "0" }}>계정이 없으신가요?</p>
+        <p style={{ marginTop: "0" }}>
+          <Link
+            to="/signup"
+            style={{
+              textDecoration: "none",
+              fontSize: "0.8rem",
+            }}
+          >
+            회원가입하기
+          </Link>
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default Login;

src/components/mainpage/mainpage.components.css

@@ -0,0 +1,10 @@
+.Cards {
+  margin-top: 200px;
+}
+.Cards .Display {
+  display: flex;
+  gap: 2%;
+}
+.Cards .Footer {
+  text-align: center;
+}

src/components/mainpage/mainpage.components.tsx

@@ -0,0 +1,46 @@
+import { Grid, Card, Row, Text } from "@nextui-org/react";
+import { Link } from "react-router-dom";
+import "./mainpage.components.css";
+
+function MainPage() {
+  return (
+    <div className="Cards">
+      <Grid.Container justify="center">
+        <Grid className="Display">
+          <Link to="/frontend">
+            <Card bordered hoverable clickable width="500px" height="450px">
+              <Card.Body noPadding>
+                <Card.Image
+                  objectFit="cover"
+                  src="/images/React.png"
+                  height="500px"
+                  alt="CEOS 15기 프론트엔드 파트장 투표하러 가기"
+                />
+              </Card.Body>
+              <Card.Footer className="Footer">
+                <p>CEOS 15기 프론트엔드 파트장 투표하러 가기</p>
+              </Card.Footer>
+            </Card>
+          </Link>
+          <Link to="/backend">
+            <Card bordered hoverable clickable width="500px" height="450px">
+              <Card.Body noPadding>
+                <Card.Image
+                  objectFit="cover"
+                  src="/images/django.png"
+                  height="500px"
+                  alt="CEOS 15기 백엔드 파트장 투표하러 가기"
+                />
+              </Card.Body>
+              <Card.Footer className="Footer">
+                <p>CEOS 15기 백엔드 파트장 투표하러 가기</p>
+              </Card.Footer>
+            </Card>
+          </Link>
+        </Grid>
+      </Grid.Container>
+    </div>
+  );
+}
+
+export default MainPage;

src/components/signup/signup.components.css

@@ -0,0 +1,18 @@
+.Title {
+  margin-top: 140px;
+  text-align: center;
+  margin-bottom: 50px;
+}
+.Container {
+  display: flex;
+  flex-direction: column;
+  width: 20rem;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.Container .select {
+  margin-left: auto;
+  margin-right: auto;
+}

src/components/signup/signup.components.tsx

@@ -0,0 +1,43 @@
+import { Input, Spacer, Radio, Button, useInput } from "@nextui-org/react";
+import React from "react";
+import { Link } from "react-router-dom";
+import "./signup.components.css";
+
+function Signup() {
+  return (
+    <>
+      <div className="Title">
+        <h2>회원가입</h2>
+      </div>
+      <div className="Container">
+        <Input placeholder="이름" />
+        <Spacer y={1.5} />
+        <Input placeholder="아이디" />
+        <Spacer y={1.5} />
+        <Input placeholder="이메일" />
+        <Spacer y={1.5} />
+        <Input.Password placeholder="비밀번호" />
+        <Spacer y={1.5} />
+        <Button auto ghost>
+          회원가입
+        </Button>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <p style={{ marginBottom: "0" }}>이미 계정이 있으신가요?</p>
+        <p style={{ marginTop: "0" }}>
+          <Link
+            to="/login"
+            style={{
+              textDecoration: "none",
+              fontSize: "0.8rem",
+            }}
+          >
+            로그인하기
+          </Link>
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default Signup;

src/components/vote/BackData.js

@@ -0,0 +1,72 @@
+export default [
+  {
+    id: 0,
+    name: "이수진",
+    image: "/images/back1.png",
+    detail: "이수진",
+    vote: 8,
+  },
+  {
+    id: 1,
+    name: "서수경",
+    image: "/images/back2.png",
+    detail: "서수경",
+    vote: 7,
+  },
+  {
+    id: 2,
+    name: "박경준",
+    image: "/images/back3.png",
+    detail: "박경준",
+    vote: 5,
+  },
+  {
+    id: 3,
+    name: "한혜원",
+    image: "/images/back4.png",
+    detail: "한혜원",
+    vote: 4,
+  },
+  {
+    id: 4,
+    name: "권민아",
+    image: "/images/back5.png",
+    detail: "권민아",
+    vote: 3,
+  },
+  {
+    id: 5,
+    name: "정환우",
+    image: "/images/back6.png",
+    detail: "정환우",
+    vote: 3,
+  },
+  {
+    id: 6,
+    name: "김승우",
+    image: "/images/back7.png",
+    detail: "김승우",
+    vote: 3,
+  },
+  {
+    id: 7,
+    name: "김윤지",
+    image: "/images/back8.png",
+    detail: "김윤지",
+    vote: 2,
+  },
+  {
+    id: 8,
+    name: "유준환",
+    image: "/images/back9.png",
+    detail: "유준환",
+    vote: 1,
+  },
+  {
+    id: 9,
+    name: "김채리",
+    image: "/images/back10.png",
+    detail: "김채리",
+    vote: 0,
+  },
+];

src/components/vote/FrontData.js

@@ -0,0 +1,66 @@
+export default [
+  {
+    id: 0,
+    name: "김정수",
+    image: "/images/front1.png",
+    detail: "김정수",
+    vote: 7,
+  },
+  {
+    id: 1,
+    name: "박준열",
+    image: "/images/front2.png",
+    detail: "박준열",
+    vote: 5,
+  },
+  {
+    id: 2,
+    name: "구본준",
+    image: "/images/front3.png",
+    detail: "구본준",
+    vote: 5,
+  },
+  {
+    id: 3,
+    name: "김주현",
+    image: "/images/front4.png",
+    detail: "김주현",
+    vote: 4,
+  },
+  {
+    id: 4,
+    name: "김태은",
+    image: "/images/front5.png",
+    detail: "김태은",
+    vote: 3,
+  },
+  {
+    id: 5,
+    name: "김현재",
+    image: "/images/front6.png",
+    detail: "김현재",
+    vote: 3,
+  },
+
+  {
+    id: 6,
+    name: "양기욱",
+    image: "/images/front7.png",
+    detail: "양기욱",
+    vote: 2,
+  },
+  {
+    id: 7,
+    name: "유시원",
+    image: "/images/front8.png",
+    detail: "유시원",
+    vote: 1,
+  },
+  {
+    id: 8,
+    name: "이로움",
+    image: "/images/front9.png",
+    detail: "이로움",
+    vote: 1,
+  },
+];

src/components/vote/backend.vote.components.tsx

@@ -0,0 +1,16 @@
+import Candidates from "./candidates.vote.components";
+
+type BackProps = {
+  isLoggedIn: boolean;
+};
+
+function Back({ isLoggedIn }: BackProps) {
+  return (
+    <>
+      <h1 className="Title">CEOS 15기 백엔드 파트장 투표</h1>
+      <Candidates isLoggedIn={isLoggedIn} part={false} />
+    </>
+  );
+}
+
+export default Back;