[3주차] 정시원 미션 제출합니다

pages/index.js

@@ -1,13 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
 import LoginForm from "../src/components/login-form";
+import CandidateList from '../src/components/candidate-list'
 
 export default function Home() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
   return (
     <Wrapper>
-      리액트 투-표
-      <LoginForm />
+      <Title>리액트 투-표</Title>
+      {isLoggedIn ? <CandidateList /> : <LoginForm setIsLoggedIn={setIsLoggedIn} />}
     </Wrapper>
   );
 }
@@ -16,4 +18,11 @@ const Wrapper = styled.div`
   min-height: 100vh;
   padding: 10rem 40rem;
   background-color: Azure;
+  position:relative;
 `;
+
+const Title = styled.div`
+  font-weight: bold;
+  font-size: 4rem;
+  margin-bottom: 20px;
+`

src/components/candidate-list.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import axios from "axios"
+import Candidate from './candidate';
+
+
+
+export default function CandidateList() {
+  const [candidates, setCandidates] = useState([]);
+
+  const getData = async () => {
+    const response = await axios.get(process.env.API_HOST + '/candidates')
+    return response.data
+  }
+
+  const sendVoteRequest = async (id) => {
+    const response = await axios.put(process.env.API_HOST + `/candidates/${id}/vote`);
+    return response.data
+  }
+
+  const handleVote = (id) => {
+    sendVoteRequest(id).then(()=>{
+      getData().then((data)=> {
+        console.log('hhh')
+        setCandidates(data);
+      })
+    })
+  }
+
+
+  useEffect(() => {
+    getData().then((data) => {
+      setCandidates(data);
+    })
+  }, [])
+
+  return <Wrapper>
+    <Title><Red>프론트엔드 인기쟁이</Red>는 누구?</Title>
+    <SubTitle>CEOS 프론트엔드 개발자 인기 순위 및 투표 창입니다.</SubTitle>
+    <Board>
+      {candidates.sort((a, b) => {
+        return b.voteCount - a.voteCount
+      }).map((candidate, rank) => {
+        return <Candidate rank={rank+1} {...candidate} handleVote={handleVote}></Candidate>
+      })}
+    </Board>
+  </Wrapper>
+}
+
+const Wrapper = styled.div`
+  width: 100%;
+  min-height: 30rem;
+  background-color: white;
+  font-size: 18px;
+  padding: 3rem 4rem 10rem;
+`
+
+const Title = styled.h2`
+  font-size: 3rem;
+`
+
+const Red = styled.span`
+  color: red;
+`
+
+const SubTitle = styled.h3`
+  font-size: 2.5rem;
+  color: grey;
+`
+
+const Board = styled.div`
+  width: 100%;
+  padding: 5rem 10rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+  border-image: initial;
+`

src/components/candidate.js

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import axios from 'axios';
+
+export default function Candidate({ rank, name, voteCount, _id, handleVote}) {
+    console.log('id: ', _id)
+    return <Wrapper>
+        <Rank>{rank}위:</Rank>
+        <Name>{name} [{voteCount}표]</Name>
+        <VoteButton onClick={() => {handleVote(_id)}}>투표</VoteButton>
+    </Wrapper>
+}
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`
+
+const Rank = styled.strong`
+    font-size: 2.5rem;
+    width: 10rem;
+    margin-bottom: 1rem;
+`
+
+const Name = styled.p`
+    font-size: 2.5rem;
+    margin: 0rem auto 1rem 0rem;
+`
+
+const VoteButton = styled.button`
+    background-color: navy;
+    color: white;
+    font-size: 2rem;
+    padding: 0.5rem 1rem;
+    border-width: initial;
+    border-style: none;
+    border-color: initial;
+    border-image: initial;
+    border-radius: 1rem;
+`

src/components/login-form.js

@@ -1,14 +1,95 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
+import axios from 'axios'
 
-export default function LoginForm() {
-  return <Wrapper>안녕 나는 로그인 폼!</Wrapper>;
+export default function LoginForm({ setIsLoggedIn }) {
+  const [loginData, setLoginData] = useState({ email: "", password: "" })
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setLoginData({ ...loginData, [name]: value });
+    console.log(loginData);
+  }
+
+
+  const handleSubmit = () => {
+    if (validateInput(loginData)) {
+      axios.post(process.env.API_HOST + '/auth/signin', loginData).
+        then((response) => {
+          console.log(response.data)
+          setIsLoggedIn(true)
+        })
+        .catch((error) => {
+          console.error(error);
+          alert('로그인에 실패했습니다')
+        })
+    }
+  }
+
+  const validateInput = (data) => {
+    const { email, password } = data;
+    if ((!email) || (!password)) {
+      alert('폼을 다 채워주세요')
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  return <Wrapper>
+    <Title>로그인</Title>
+    <Row>
+      <Label>EMAIL</Label>
+      <Input name="email" onChange={handleInputChange} />
+    </Row>
+    <Row>
+      <Label>PASSWORD</Label>
+      <Input name="password" type="password" onChange={handleInputChange} />
+    </Row>
+    <Row>
+      <div style={{ marginRight: 'auto' }}></div>
+      <Button onClick={handleSubmit}>로그인</Button>
+    </Row>
+
+  </Wrapper>;
 }
 
+const Row = styled.div`
+  margin-bottom: 10px;
+  margin-top: 20px;
+  font-size: 15px;
+  display: flex;
+`
+const Label = styled.div`
+  margin-right: auto;
+`
+const Input = styled.input`
+  width: 75%;
+  border: 1px solid grey;
+  padding: 5px;
+  outline: none;
+`
+
 const Wrapper = styled.div`
   width: 100%;
   min-height: 30rem;
   background-color: white;
   font-size: 18px;
   padding: 3rem 4rem;
 `;
+
+const Title = styled.div`
+  font-size: 25px;
+`
+
+const Button = styled.button`
+  outline:none;
+  background-color:#d6d6d6;
+  border-radius:3px;
+  border:none;
+
+  width: 150px;
+  margin-left: auto;
+  font-size: 15px;
+  padding: 5px;
+`