From 401a4af509e6713fc2ae5576b1c3a756f1f06475 Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Fri, 17 Apr 2020 19:12:17 +0900
Subject: [PATCH 01/12] =?UTF-8?q?candidate=20list=20=EB=B0=9B=EC=95=84?=
 =?UTF-8?q?=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            |  31 ++++++++++
 package.json                 |   1 +
 pages/index.js               |  47 ++++++++++++++-
 src/components/login-form.js | 110 ++++++++++++++++++++++++++++++++++-
 src/components/vote-form.js  |  37 ++++++++++--
 src/components/vote-list.js  |  31 ++++++++++
 6 files changed, 247 insertions(+), 10 deletions(-)
 create mode 100644 src/components/vote-list.js

diff --git a/package-lock.json b/package-lock.json
index a439258..136f0db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1920,6 +1920,37 @@
         }
       }
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
diff --git a/package.json b/package.json
index 0e22c09..817c4b9 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start": "node server"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "compression": "^1.7.4",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
diff --git a/pages/index.js b/pages/index.js
index 6474ebb..c5cca71 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,13 +1,51 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
+import axios from "axios";
 
 import LoginForm from "../src/components/login-form";
+import VoteForm from "../src/components/vote-form";
 
 export default function Home() {
+  const [isLoggedIn, setLoginStatus] = useState(false);
+  const [candidates, setCandidateList] = useState({});
+
+  const loginCheck = () => {
+    console.log("login check start");
+    if (isLoggedIn) {
+      console.log("dd");
+      return (
+        <VoteForm
+          getCandidateList={getCandidateList()}
+          candidates={candidates}
+        />
+      );
+    } else {
+      return (
+        <LoginForm isLoggedIn={isLoggedIn} setLoginStatus={setLoginStatus} />
+      );
+    }
+  };
+
+  const getCandidateList = async () => {
+    console.log("함수 시작");
+    const data = await axios
+      .get(process.env.API_HOST + "/candidates/")
+      .then(function (response) {
+        console.log(response.data);
+        setCandidateList(response.data);
+        console.log("저장값");
+        console.log(candidates);
+        return response.data;
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  };
+
   return (
     <Wrapper>
-      리액트 투-표
-      <LoginForm />
+      <Title>리액트 투-표</Title>
+      {loginCheck()}
     </Wrapper>
   );
 }
@@ -17,3 +55,6 @@ const Wrapper = styled.div`
   padding: 10rem 40rem;
   background-color: Azure;
 `;
+const Title = styled.h1`
+  font-size: 4rem;
+`;
diff --git a/src/components/login-form.js b/src/components/login-form.js
index 418d945..ec8dfa9 100644
--- a/src/components/login-form.js
+++ b/src/components/login-form.js
@@ -1,8 +1,69 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
+import axios from "axios";
 
-export default function LoginForm() {
-  return <Wrapper>안녕 나는 로그인 폼!</Wrapper>;
+export default function LoginForm({ isLoggedIn, setLoginStatus, loginCheck }) {
+  const [form, setForm] = useState({ email: "", password: "" });
+
+  const handleFormChange = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value,
+    });
+  };
+  const initForm = () => {
+    setForm({ email: "", password: "" });
+  };
+  const validCheck = () => {
+    if (form.email.length === 0 || form.password.length === 0) {
+      alert("모든 항목을 입력하세요");
+      return false;
+    }
+    return true;
+  };
+  const handleSubmit = () => {
+    console.log(form);
+    if (!validCheck) return;
+    axios
+      .post(process.env.API_HOST + "/auth/signin/", form)
+      .then(function (response) {
+        console.log(response);
+        alert("로그인 성공!");
+        setLoginStatus(true);
+        console.log(isLoggedIn);
+      })
+      .catch(function (error) {
+        initForm();
+        alert("로그인 실패!");
+        console.log(error);
+      });
+  };
+
+  return (
+    <Wrapper>
+      <LoginLabel>로그인</LoginLabel>
+      <InfoInputArea>
+        <EmailInputArea>
+          <EmailLabel>EMAIL</EmailLabel>
+          <EmailInput
+            name="email"
+            value={form.email}
+            onChange={handleFormChange}
+          />
+        </EmailInputArea>
+        <PasswordInputArea>
+          <PasswordLabel>PASSWORD</PasswordLabel>
+          <PasswordInput
+            name="password"
+            value={form.password}
+            onChange={handleFormChange}
+            type="password"
+          />
+        </PasswordInputArea>
+      </InfoInputArea>
+      <Submit onClick={handleSubmit}>로그인</Submit>
+    </Wrapper>
+  );
 }
 
 const Wrapper = styled.div`
@@ -11,4 +72,47 @@ const Wrapper = styled.div`
   background-color: white;
   font-size: 18px;
   padding: 3rem 4rem;
+  display: flex;
+  flex-direction: column;
+`;
+const LoginLabel = styled.p`
+  font-weight: bold;
+`;
+const InfoInputArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+`;
+const EmailInputArea = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const EmailInput = styled.input`
+  width: 50rem;
+  height: 3rem;
+`;
+const EmailLabel = styled.p`
+  font-size: 12px;
+`;
+const PasswordInput = styled.input`
+  width: 50rem;
+  height: 3rem;
+`;
+const PasswordInputArea = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const PasswordLabel = styled.p`
+  font-size: 12px;
+`;
+const Submit = styled.button`
+  display: block;
+  margin-left: auto;
+  font-size: 1.8rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border: 1rem none;
+  outline: none;
 `;
diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index 65bc549..6f71cd6 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -1,10 +1,39 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
+import axios from "axios";
 
-export default function VoteForm() {
-  return <Wrapper>안녕 나는 투표 폼!</Wrapper>;
+import List from "../components/vote-list";
+export default function VoteForm({ candidates }) {
+  return (
+    <Wrapper>
+      <Title>
+        <RedTitle>프론트엔드 인기쟁이</RedTitle>는 누구?
+      </Title>
+      <Desc>CEOS 프론트엔드 개발자 인기순위 및 투표창입니다.</Desc>
+      <VoteSection>
+        {/* {candidates
+          .sort((a, b) => {
+            return a.voteCount - b.voteCount;
+          })
+          .map((candidate) => (
+            <List key={candidate.id} {...candidate} />
+          ))} */}
+      </VoteSection>
+    </Wrapper>
+  );
 }
-
+const Title = styled.h2``;
+const RedTitle = styled.strong`
+  color: red;
+`;
+const Desc = styled.h3`
+  color: grey;
+`;
+const VoteSection = styled.div`
+  width: 100%;
+  padding: 5rem 10rem;
+  border: 1px solid black initial;
+`;
 const Wrapper = styled.div`
   width: 100%;
   min-height: 30rem;
diff --git a/src/components/vote-list.js b/src/components/vote-list.js
new file mode 100644
index 0000000..ae3e315
--- /dev/null
+++ b/src/components/vote-list.js
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import axios from "axios";
+
+export default function VoteList({ id, name, voteCount }) {
+  const Vote = () => {};
+  return (
+    <Wrapper>
+      <Candidate>
+        {id + 1}위: {name} [{voteCount}]표
+      </Candidate>
+      <VoteButton onClick={Vote()} />
+    </Wrapper>
+  );
+}
+const Wrapper = styled.div`
+  width: 100%;
+  min-height: 30rem;
+  background-color: white;
+  font-size: 18px;
+  padding: 3rem 4rem;
+`;
+
+const Candidate = styled.div``;
+const VoteButton = styled.button`
+  width: 100%;
+  min-height: 30rem;
+  background-color: white;
+  font-size: 18px;
+  padding: 3rem 4rem;
+`;

From 24be826d914ecdad3071da267d4af4c0dc18604c Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Fri, 17 Apr 2020 22:03:55 +0900
Subject: [PATCH 02/12] =?UTF-8?q?vote=EA=B8=B0=EB=8A=A5=20=EC=99=84?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.js              | 27 +++-----------------
 src/components/vote-form.js | 49 ++++++++++++++++++++++++++++++++-----
 src/components/vote-list.js | 48 +++++++++++++++++++++++++++---------
 3 files changed, 82 insertions(+), 42 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index c5cca71..74ee519 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,18 +7,12 @@ import VoteForm from "../src/components/vote-form";
 
 export default function Home() {
   const [isLoggedIn, setLoginStatus] = useState(false);
-  const [candidates, setCandidateList] = useState({});
 
   const loginCheck = () => {
     console.log("login check start");
     if (isLoggedIn) {
       console.log("dd");
-      return (
-        <VoteForm
-          getCandidateList={getCandidateList()}
-          candidates={candidates}
-        />
-      );
+      return <VoteForm />;
     } else {
       return (
         <LoginForm isLoggedIn={isLoggedIn} setLoginStatus={setLoginStatus} />
@@ -26,26 +20,11 @@ export default function Home() {
     }
   };
 
-  const getCandidateList = async () => {
-    console.log("함수 시작");
-    const data = await axios
-      .get(process.env.API_HOST + "/candidates/")
-      .then(function (response) {
-        console.log(response.data);
-        setCandidateList(response.data);
-        console.log("저장값");
-        console.log(candidates);
-        return response.data;
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
-  };
-
   return (
     <Wrapper>
       <Title>리액트 투-표</Title>
-      {loginCheck()}
+      {/* {loginCheck()} */}
+      <VoteForm />
     </Wrapper>
   );
 }
diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index 6f71cd6..42ea480 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -2,8 +2,39 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-import List from "../components/vote-list";
-export default function VoteForm({ candidates }) {
+import List from "./vote-list";
+export default function VoteForm() {
+  const [candidates, setCandidateList] = useState([]);
+  useEffect(() => {
+    getCandidateList();
+  }, []);
+  const getCandidateList = async () => {
+    await axios
+      .get(process.env.API_HOST + "/candidates/", candidates)
+      .then(({ data }) => {
+        setCandidateList(data);
+        console.log(candidates);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  };
+  const Vote = (candidate) => {
+    axios
+      .put(
+        process.env.API_HOST + "/candidates/" + candidate.id + "/vote/",
+        voteCount
+      )
+      .then(({ data }) => {
+        alert(candidate.name + "님께 투표했습니다!");
+        getCandidates();
+      })
+      .catch(function (error) {
+        console.log(error);
+        alert("실패했습니다!");
+      });
+  };
+  let i = 1;
   return (
     <Wrapper>
       <Title>
@@ -11,13 +42,19 @@ export default function VoteForm({ candidates }) {
       </Title>
       <Desc>CEOS 프론트엔드 개발자 인기순위 및 투표창입니다.</Desc>
       <VoteSection>
-        {/* {candidates
+        {candidates
           .sort((a, b) => {
-            return a.voteCount - b.voteCount;
+            return b.voteCount - a.voteCount;
           })
           .map((candidate) => (
-            <List key={candidate.id} {...candidate} />
-          ))} */}
+            <List
+              key={candidate._id}
+              id={candidate._id}
+              i={i++}
+              {...candidate}
+              getCandidateList={getCandidateList}
+            />
+          ))}
       </VoteSection>
     </Wrapper>
   );
diff --git a/src/components/vote-list.js b/src/components/vote-list.js
index ae3e315..8554354 100644
--- a/src/components/vote-list.js
+++ b/src/components/vote-list.js
@@ -2,30 +2,54 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-export default function VoteList({ id, name, voteCount }) {
-  const Vote = () => {};
+export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
+  const Vote = () => {
+    axios
+      .put(process.env.API_HOST + "/candidates/" + id + "/vote/", {
+        params: {},
+      })
+      .then(function (response) {
+        console.log(response);
+        getCandidateList();
+        alert(name + "님께 투표 했습니다!");
+      })
+      .catch(function (error) {
+        console.log(error);
+        alert("실패했습니다!");
+      });
+  };
+
   return (
     <Wrapper>
       <Candidate>
-        {id + 1}위: {name} [{voteCount}]표
+        <Rank>{i}위:</Rank> {name} [{voteCount}]표
       </Candidate>
-      <VoteButton onClick={Vote()} />
+      <VoteButton
+        onClick={() => {
+          Vote();
+        }}
+      >
+        투표
+      </VoteButton>
     </Wrapper>
   );
 }
 const Wrapper = styled.div`
   width: 100%;
-  min-height: 30rem;
   background-color: white;
   font-size: 18px;
-  padding: 3rem 4rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `;
-
+const Rank = styled.strong``;
 const Candidate = styled.div``;
 const VoteButton = styled.button`
-  width: 100%;
-  min-height: 30rem;
-  background-color: white;
-  font-size: 18px;
-  padding: 3rem 4rem;
+  background-color: navy;
+  color: white;
+  font-size: 2rem;
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  display: block;
+  margin-left: auto;
 `;

From f2b87e5ef9c2f534fd1de84291a4138d608bac7e Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Fri, 17 Apr 2020 22:24:36 +0900
Subject: [PATCH 03/12] =?UTF-8?q?memo,=20readme=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                    | 14 +++++++-------
 pages/index.js               | 14 ++++++++------
 src/components/login-form.js |  2 +-
 src/components/vote-form.js  |  2 ++
 src/components/vote-list.js  |  2 +-
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 461c3ec..d9fcd15 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
 # react-vote-11th
 
-## 실행 방법
+## 구현 방법
 
-```
-npm install
-npm run dev
-```
+1. login form과 vote form을 로그인 결과에 따라 보여주는 페이지 index를 만든다.
+2. 로그인시 서버에 리퀘스트를 보내 이메일과 비밀번호를 확인한다
+3. vote form 내부 리스트 정렬을 vote list를 구현하여 진행한다
 
-- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다.
-- npm run dev : react(next) 웹서버를 localhost:3000에서 실행합니다.
+## 어려웠던 점
+
+개인적으로 시간을 너무 촉박하게 잡고 과제를 진행해서 아쉬운 부분이 많이 남습니다. 그리고 이상한 부분에서 계속 삽질을 해서,, 흑흑 시간이 조금 많이 모자랐던 것 같습니다. 서버 통신을 axios로 하는게 되게 간단하고 효율적인 것 같아 좋았습니다! memo는 어느 곳에 써야할지 아직은 감이 잘 안잡혀서 이부분도 더 공부하고 싶습니다.
diff --git a/pages/index.js b/pages/index.js
index 74ee519..e4278d4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-import LoginForm from "../src/components/login-form";
-import VoteForm from "../src/components/vote-form";
+import MemorizedLoginForm from "../src/components/login-form";
+import MemorizedVoteForm from "../src/components/vote-form";
 
 export default function Home() {
   const [isLoggedIn, setLoginStatus] = useState(false);
@@ -12,10 +12,13 @@ export default function Home() {
     console.log("login check start");
     if (isLoggedIn) {
       console.log("dd");
-      return <VoteForm />;
+      return <MemorizedVoteForm />;
     } else {
       return (
-        <LoginForm isLoggedIn={isLoggedIn} setLoginStatus={setLoginStatus} />
+        <MemorizedLoginForm
+          isLoggedIn={isLoggedIn}
+          setLoginStatus={setLoginStatus}
+        />
       );
     }
   };
@@ -23,8 +26,7 @@ export default function Home() {
   return (
     <Wrapper>
       <Title>리액트 투-표</Title>
-      {/* {loginCheck()} */}
-      <VoteForm />
+      {loginCheck()}
     </Wrapper>
   );
 }
diff --git a/src/components/login-form.js b/src/components/login-form.js
index ec8dfa9..b6f0c17 100644
--- a/src/components/login-form.js
+++ b/src/components/login-form.js
@@ -65,7 +65,7 @@ export default function LoginForm({ isLoggedIn, setLoginStatus, loginCheck }) {
     </Wrapper>
   );
 }
-
+export const MemoizedLoginForm = React.memo(LoginForm);
 const Wrapper = styled.div`
   width: 100%;
   min-height: 30rem;
diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index 42ea480..898bbb7 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -59,6 +59,8 @@ export default function VoteForm() {
     </Wrapper>
   );
 }
+export const MemoizedVoteForm = React.memo(VoteForm);
+
 const Title = styled.h2``;
 const RedTitle = styled.strong`
   color: red;
diff --git a/src/components/vote-list.js b/src/components/vote-list.js
index 8554354..15d8f7b 100644
--- a/src/components/vote-list.js
+++ b/src/components/vote-list.js
@@ -15,7 +15,7 @@ export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
       })
       .catch(function (error) {
         console.log(error);
-        alert("실패했습니다!");
+        alert("투표 실패했습니다!");
       });
   };
 

From b98bd794d243dcf01e21972ac7a16bdcbf9e9ef5 Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 10:04:43 +0900
Subject: [PATCH 04/12] =?UTF-8?q?setIsLoggedIn=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                   | 3 ++-
 pages/index.js               | 4 ++--
 src/components/login-form.js | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index a5ac825..f014060 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,5 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
-.env*
\ No newline at end of file
+.env*
+.now
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index e4278d4..7015882 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,7 +6,7 @@ import MemorizedLoginForm from "../src/components/login-form";
 import MemorizedVoteForm from "../src/components/vote-form";
 
 export default function Home() {
-  const [isLoggedIn, setLoginStatus] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   const loginCheck = () => {
     console.log("login check start");
@@ -17,7 +17,7 @@ export default function Home() {
       return (
         <MemorizedLoginForm
           isLoggedIn={isLoggedIn}
-          setLoginStatus={setLoginStatus}
+          setIsLoggedIn={setIsLoggedIn}
         />
       );
     }
diff --git a/src/components/login-form.js b/src/components/login-form.js
index b6f0c17..3aadeef 100644
--- a/src/components/login-form.js
+++ b/src/components/login-form.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-export default function LoginForm({ isLoggedIn, setLoginStatus, loginCheck }) {
+export default function LoginForm({ isLoggedIn, setIsLoggedIn, loginCheck }) {
   const [form, setForm] = useState({ email: "", password: "" });
 
   const handleFormChange = (e) => {
@@ -29,7 +29,7 @@ export default function LoginForm({ isLoggedIn, setLoginStatus, loginCheck }) {
       .then(function (response) {
         console.log(response);
         alert("로그인 성공!");
-        setLoginStatus(true);
+        setIsLoggedIn(true);
         console.log(isLoggedIn);
       })
       .catch(function (error) {
@@ -67,7 +67,7 @@ export default function LoginForm({ isLoggedIn, setLoginStatus, loginCheck }) {
 }
 export const MemoizedLoginForm = React.memo(LoginForm);
 const Wrapper = styled.div`
-  width: 100%;
+  width: 100
   min-height: 30rem;
   background-color: white;
   font-size: 18px;

From 56633f363d36e7cd83308fa1b315f661995b927c Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 10:13:00 +0900
Subject: [PATCH 05/12] =?UTF-8?q?LoginCheck=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0,=20=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.js | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 7015882..2fae33e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,31 +2,17 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-import MemorizedLoginForm from "../src/components/login-form";
-import MemorizedVoteForm from "../src/components/vote-form";
+import LoginForm from "../src/components/login-form";
+import VoteForm from "../src/components/vote-form";
 
 export default function Home() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
-  const loginCheck = () => {
-    console.log("login check start");
-    if (isLoggedIn) {
-      console.log("dd");
-      return <MemorizedVoteForm />;
-    } else {
-      return (
-        <MemorizedLoginForm
-          isLoggedIn={isLoggedIn}
-          setIsLoggedIn={setIsLoggedIn}
-        />
-      );
-    }
-  };
-
   return (
     <Wrapper>
       <Title>리액트 투-표</Title>
-      {loginCheck()}
+      {!isLoggedIn && <LoginForm {...{ setIsLoggedIn }} />}
+      {isLoggedIn && <VoteForm />}
     </Wrapper>
   );
 }

From f0da10206d6d885a090f81771f2a2ddd5b746262 Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 10:14:10 +0900
Subject: [PATCH 06/12] =?UTF-8?q?initForm=20->=20resetForm=20=EC=9B=8C?=
 =?UTF-8?q?=EB=94=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login-form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/login-form.js b/src/components/login-form.js
index 3aadeef..0ee1e84 100644
--- a/src/components/login-form.js
+++ b/src/components/login-form.js
@@ -11,7 +11,7 @@ export default function LoginForm({ isLoggedIn, setIsLoggedIn, loginCheck }) {
       [e.target.name]: e.target.value,
     });
   };
-  const initForm = () => {
+  const resetForm = () => {
     setForm({ email: "", password: "" });
   };
   const validCheck = () => {
@@ -33,7 +33,7 @@ export default function LoginForm({ isLoggedIn, setIsLoggedIn, loginCheck }) {
         console.log(isLoggedIn);
       })
       .catch(function (error) {
-        initForm();
+        resetForm();
         alert("로그인 실패!");
         console.log(error);
       });

From 69eb4e476b9a03a713c3afc7931031476051d79a Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 10:19:55 +0900
Subject: [PATCH 07/12] =?UTF-8?q?loginform=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=B3=91=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login-form.js | 49 ++++++++++++++----------------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/components/login-form.js b/src/components/login-form.js
index 0ee1e84..3033f52 100644
--- a/src/components/login-form.js
+++ b/src/components/login-form.js
@@ -41,27 +41,28 @@ export default function LoginForm({ isLoggedIn, setIsLoggedIn, loginCheck }) {
 
   return (
     <Wrapper>
-      <LoginLabel>로그인</LoginLabel>
-      <InfoInputArea>
-        <EmailInputArea>
-          <EmailLabel>EMAIL</EmailLabel>
-          <EmailInput
+      <Title>로그인</Title>
+      <InputWrapper>
+        <Row>
+          <Label>EMAIL</Label>
+          <Input
             name="email"
+            type="text"
             value={form.email}
             onChange={handleFormChange}
           />
-        </EmailInputArea>
-        <PasswordInputArea>
-          <PasswordLabel>PASSWORD</PasswordLabel>
-          <PasswordInput
+        </Row>
+        <Row>
+          <Label>PASSWORD</Label>
+          <Input
             name="password"
             value={form.password}
             onChange={handleFormChange}
             type="password"
           />
-        </PasswordInputArea>
-      </InfoInputArea>
-      <Submit onClick={handleSubmit}>로그인</Submit>
+        </Row>
+      </InputWrapper>
+      <SubmitButton onClick={handleSubmit}>로그인</SubmitButton>
     </Wrapper>
   );
 }
@@ -75,39 +76,27 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
 `;
-const LoginLabel = styled.p`
+const Title = styled.p`
   font-weight: bold;
 `;
-const InfoInputArea = styled.div`
+const InputWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 `;
-const EmailInputArea = styled.div`
+const Row = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
-const EmailInput = styled.input`
+const Input = styled.input`
   width: 50rem;
   height: 3rem;
 `;
-const EmailLabel = styled.p`
+const Label = styled.label`
   font-size: 12px;
 `;
-const PasswordInput = styled.input`
-  width: 50rem;
-  height: 3rem;
-`;
-const PasswordInputArea = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-const PasswordLabel = styled.p`
-  font-size: 12px;
-`;
-const Submit = styled.button`
+const SubmitButton = styled.button`
   display: block;
   margin-left: auto;
   font-size: 1.8rem;

From c32094b228cadba89d437d0db92e6447400541f0 Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 11:59:15 +0900
Subject: [PATCH 08/12] =?UTF-8?q?vote-form=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95,=20destruct?=
 =?UTF-8?q?uring,=20spread=20operator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vote-form.js | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index 898bbb7..7992010 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-import List from "./vote-list";
+import CandidateCard from "./vote-list";
 export default function VoteForm() {
   const [candidates, setCandidateList] = useState([]);
   useEffect(() => {
@@ -38,23 +38,24 @@ export default function VoteForm() {
   return (
     <Wrapper>
       <Title>
-        <RedTitle>프론트엔드 인기쟁이</RedTitle>는 누구?
+        <Red>프론트엔드 인기쟁이</Red>는 누구?
       </Title>
-      <Desc>CEOS 프론트엔드 개발자 인기순위 및 투표창입니다.</Desc>
+      <SubTitle>CEOS 프론트엔드 개발자 인기순위 및 투표창입니다.</SubTitle>
       <VoteSection>
         {candidates
           .sort((a, b) => {
             return b.voteCount - a.voteCount;
           })
-          .map((candidate) => (
-            <List
-              key={candidate._id}
-              id={candidate._id}
-              i={i++}
-              {...candidate}
-              getCandidateList={getCandidateList}
-            />
-          ))}
+          .map((candidate, index) => {
+            const { _id: id } = candidate;
+            return (
+              <CandidateCard
+                key={id}
+                {...candidate}
+                {...{ getCandidateList }}
+              />
+            );
+          })}
       </VoteSection>
     </Wrapper>
   );
@@ -62,10 +63,10 @@ export default function VoteForm() {
 export const MemoizedVoteForm = React.memo(VoteForm);
 
 const Title = styled.h2``;
-const RedTitle = styled.strong`
+const Red = styled.strong`
   color: red;
 `;
-const Desc = styled.h3`
+const SubTitle = styled.h3`
   color: grey;
 `;
 const VoteSection = styled.div`

From aae61c957c2a0ddd9338a74d21fede6aa28bf05c Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 11:59:45 +0900
Subject: [PATCH 09/12] =?UTF-8?q?initial=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vote-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index 7992010..e567acc 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -72,7 +72,7 @@ const SubTitle = styled.h3`
 const VoteSection = styled.div`
   width: 100%;
   padding: 5rem 10rem;
-  border: 1px solid black initial;
+  border: 1px solid black;
 `;
 const Wrapper = styled.div`
   width: 100%;

From c4583b45b9047e89fa06871944b8a2f22e7cb073 Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 12:02:29 +0900
Subject: [PATCH 10/12] =?UTF-8?q?Vote=ED=95=A8=EC=88=98=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vote-form.js | 16 +---------------
 src/components/vote-list.js |  4 ++--
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index e567acc..a27d101 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -19,21 +19,7 @@ export default function VoteForm() {
         console.log(error);
       });
   };
-  const Vote = (candidate) => {
-    axios
-      .put(
-        process.env.API_HOST + "/candidates/" + candidate.id + "/vote/",
-        voteCount
-      )
-      .then(({ data }) => {
-        alert(candidate.name + "님께 투표했습니다!");
-        getCandidates();
-      })
-      .catch(function (error) {
-        console.log(error);
-        alert("실패했습니다!");
-      });
-  };
+
   let i = 1;
   return (
     <Wrapper>
diff --git a/src/components/vote-list.js b/src/components/vote-list.js
index 15d8f7b..082f42b 100644
--- a/src/components/vote-list.js
+++ b/src/components/vote-list.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import axios from "axios";
 
 export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
-  const Vote = () => {
+  const handleVote = () => {
     axios
       .put(process.env.API_HOST + "/candidates/" + id + "/vote/", {
         params: {},
@@ -26,7 +26,7 @@ export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
       </Candidate>
       <VoteButton
         onClick={() => {
-          Vote();
+          handleVote();
         }}
       >
         투표

From 1f566c7aea60a521c2d9ee539c5220c51184cf9f Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 12:04:26 +0900
Subject: [PATCH 11/12] =?UTF-8?q?onClick=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vote-list.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/vote-list.js b/src/components/vote-list.js
index 082f42b..8145fd9 100644
--- a/src/components/vote-list.js
+++ b/src/components/vote-list.js
@@ -5,7 +5,7 @@ import axios from "axios";
 export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
   const handleVote = () => {
     axios
-      .put(process.env.API_HOST + "/candidates/" + id + "/vote/", {
+      .put(process.env.API_HOST + `/candidates/${id}/vote/`, {
         params: {},
       })
       .then(function (response) {
@@ -24,13 +24,7 @@ export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
       <Candidate>
         <Rank>{i}위:</Rank> {name} [{voteCount}]표
       </Candidate>
-      <VoteButton
-        onClick={() => {
-          handleVote();
-        }}
-      >
-        투표
-      </VoteButton>
+      <VoteButton onClick={handleVote}>투표</VoteButton>
     </Wrapper>
   );
 }

From 4395cd74b9c7cc5d1a1bf8a9d0222f469c8cc7a1 Mon Sep 17 00:00:00 2001
From: seungwon2 <dandelionsw2@gmail.com>
Date: Sun, 19 Apr 2020 17:03:49 +0900
Subject: [PATCH 12/12] custom hook

---
 src/components/login-form.js |  3 +--
 src/components/vote-form.js  | 50 +++++++++++++++---------------------
 src/components/vote-list.js  | 10 ++++++--
 src/hooks/Candidates.js      | 32 +++++++++++++++++++++++
 4 files changed, 61 insertions(+), 34 deletions(-)
 create mode 100644 src/hooks/Candidates.js

diff --git a/src/components/login-form.js b/src/components/login-form.js
index 3033f52..a0188f0 100644
--- a/src/components/login-form.js
+++ b/src/components/login-form.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-export default function LoginForm({ isLoggedIn, setIsLoggedIn, loginCheck }) {
+export default function LoginForm({ setIsLoggedIn }) {
   const [form, setForm] = useState({ email: "", password: "" });
 
   const handleFormChange = (e) => {
@@ -30,7 +30,6 @@ export default function LoginForm({ isLoggedIn, setIsLoggedIn, loginCheck }) {
         console.log(response);
         alert("로그인 성공!");
         setIsLoggedIn(true);
-        console.log(isLoggedIn);
       })
       .catch(function (error) {
         resetForm();
diff --git a/src/components/vote-form.js b/src/components/vote-form.js
index a27d101..f8f9d79 100644
--- a/src/components/vote-form.js
+++ b/src/components/vote-form.js
@@ -3,24 +3,12 @@ import styled from "styled-components";
 import axios from "axios";
 
 import CandidateCard from "./vote-list";
+import { useCandidates } from "../hooks/Candidates";
+
 export default function VoteForm() {
-  const [candidates, setCandidateList] = useState([]);
-  useEffect(() => {
-    getCandidateList();
-  }, []);
-  const getCandidateList = async () => {
-    await axios
-      .get(process.env.API_HOST + "/candidates/", candidates)
-      .then(({ data }) => {
-        setCandidateList(data);
-        console.log(candidates);
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
-  };
+  const { candidates, loading, error, fetchData } = useCandidates();
+  console.log(candidates);
 
-  let i = 1;
   return (
     <Wrapper>
       <Title>
@@ -28,20 +16,22 @@ export default function VoteForm() {
       </Title>
       <SubTitle>CEOS 프론트엔드 개발자 인기순위 및 투표창입니다.</SubTitle>
       <VoteSection>
-        {candidates
-          .sort((a, b) => {
-            return b.voteCount - a.voteCount;
-          })
-          .map((candidate, index) => {
-            const { _id: id } = candidate;
-            return (
-              <CandidateCard
-                key={id}
-                {...candidate}
-                {...{ getCandidateList }}
-              />
-            );
-          })}
+        {candidates &&
+          candidates
+            .sort((a, b) => {
+              return b.voteCount - a.voteCount;
+            })
+            .map((candidate, index) => {
+              const { _id: id } = candidate;
+              return (
+                <CandidateCard
+                  rank={index + 1}
+                  key={id}
+                  {...candidate}
+                  getCandidateList={fetchData}
+                />
+              );
+            })}
       </VoteSection>
     </Wrapper>
   );
diff --git a/src/components/vote-list.js b/src/components/vote-list.js
index 8145fd9..69241b7 100644
--- a/src/components/vote-list.js
+++ b/src/components/vote-list.js
@@ -2,7 +2,13 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import axios from "axios";
 
-export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
+export default function VoteList({
+  name,
+  voteCount,
+  _id: id,
+  rank,
+  getCandidateList,
+}) {
   const handleVote = () => {
     axios
       .put(process.env.API_HOST + `/candidates/${id}/vote/`, {
@@ -22,7 +28,7 @@ export default function VoteList({ name, voteCount, id, i, getCandidateList }) {
   return (
     <Wrapper>
       <Candidate>
-        <Rank>{i}위:</Rank> {name} [{voteCount}]표
+        <Rank>{rank}위:</Rank> {name} [{voteCount}]표
       </Candidate>
       <VoteButton onClick={handleVote}>투표</VoteButton>
     </Wrapper>
diff --git a/src/hooks/Candidates.js b/src/hooks/Candidates.js
new file mode 100644
index 0000000..72d9ddf
--- /dev/null
+++ b/src/hooks/Candidates.js
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import axios from "axios";
+
+export const useCandidates = () => {
+  const [candidates, setCandidateList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const fetchData = async () => {
+    setError(false);
+    setLoading(true);
+
+    try {
+      await axios
+        .get(process.env.API_HOST + "/candidates/", candidates)
+        .then(({ data }) => {
+          setCandidateList(data);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    } catch (error) {
+      setError(true);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return { candidates, loading, error, fetchData };
+};