From 0e16e057e4ea0f01e0065bcdab179f20f24a0c24 Mon Sep 17 00:00:00 2001 From: seabstianjeong Date: Sat, 18 Apr 2020 20:38:29 +0900 Subject: [PATCH 1/4] modify index.js --- pages/index.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/pages/index.js b/pages/index.js index 6474ebb..ea36e38 100644 --- a/pages/index.js +++ b/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 ( - 리액트 투-표 - + 리액트 투-표 + {isLoggedIn ? : } ); } @@ -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; +` From a0c0c1acebf07ae3e47208317b3b8464d68b35c1 Mon Sep 17 00:00:00 2001 From: seabstianjeong Date: Sat, 18 Apr 2020 20:38:36 +0900 Subject: [PATCH 2/4] modify candidate.js --- src/components/candidate-list.js | 78 ++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/components/candidate-list.js diff --git a/src/components/candidate-list.js b/src/components/candidate-list.js new file mode 100644 index 0000000..e628e7c --- /dev/null +++ b/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 + <Red>프론트엔드 인기쟁이</Red>는 누구? + CEOS 프론트엔드 개발자 인기 순위 및 투표 창입니다. + + {candidates.sort((a, b) => { + return b.voteCount - a.voteCount + }).map((candidate, rank) => { + return + })} + + +} + +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; +` \ No newline at end of file From 610f721e34e8a031ad170bd7ca926821364424a1 Mon Sep 17 00:00:00 2001 From: seabstianjeong Date: Sat, 18 Apr 2020 20:39:29 +0900 Subject: [PATCH 3/4] Create candidate.js --- src/components/candidate.js | 41 +++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/candidate.js diff --git a/src/components/candidate.js b/src/components/candidate.js new file mode 100644 index 0000000..8e508aa --- /dev/null +++ b/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 + {rank}위: + {name} [{voteCount}표] + {handleVote(_id)}}>투표 + +} + +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; +` \ No newline at end of file From eb5862435e395e728f00a189fec70a144d2183dd Mon Sep 17 00:00:00 2001 From: seabstianjeong Date: Sat, 18 Apr 2020 20:39:33 +0900 Subject: [PATCH 4/4] Update login-form.js --- src/components/login-form.js | 87 ++++++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 3 deletions(-) diff --git a/src/components/login-form.js b/src/components/login-form.js index 418d945..09aa5a5 100644 --- a/src/components/login-form.js +++ b/src/components/login-form.js @@ -1,10 +1,75 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; +import axios from 'axios' -export default function LoginForm() { - return 안녕 나는 로그인 폼!; +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 + 로그인 + + + + + + + + + +
+ + + + ; } +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; @@ -12,3 +77,19 @@ const Wrapper = styled.div` 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; +`