[3주차] 최승원 미션 제출합니다.

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는 어느 곳에 써야할지 아직은 감이 잘 안잡혀서 이부분도 더 공부하고 싶습니다.

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",

pages/index.js

@@ -1,13 +1,32 @@
-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 MemorizedLoginForm from "../src/components/login-form";
+import MemorizedVoteForm from "../src/components/vote-form";
 
 export default function Home() {
+  const [isLoggedIn, setLoginStatus] = useState(false);
+
+  const loginCheck = () => {
+    console.log("login check start");
+    if (isLoggedIn) {
+      console.log("dd");
+      return <MemorizedVoteForm />;
+    } else {
+      return (
+        <MemorizedLoginForm
+          isLoggedIn={isLoggedIn}
+          setLoginStatus={setLoginStatus}
+        />
+      );
+    }
+  };
+
   return (
     <Wrapper>
-      리액트 투-표
-      <LoginForm />
+      <Title>리액트 투-표</Title>
+      {loginCheck()}
     </Wrapper>
   );
 }
@@ -17,3 +36,6 @@ const Wrapper = styled.div`
   padding: 10rem 40rem;
   background-color: Azure;
 `;
+const Title = styled.h1`
+  font-size: 4rem;
+`;

src/components/login-form.js

@@ -1,14 +1,118 @@
-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>
+  );
+}
+export const MemoizedLoginForm = React.memo(LoginForm);
 const Wrapper = styled.div`
   width: 100%;
   min-height: 30rem;
   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;
 `;

src/components/vote-form.js

@@ -1,10 +1,78 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
+import axios from "axios";
 
+import List from "./vote-list";
 export default function VoteForm() {
-  return <Wrapper>안녕 나는 투표 폼!</Wrapper>;
+  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>
+        <RedTitle>프론트엔드 인기쟁이</RedTitle>는 누구?
+      </Title>
+      <Desc>CEOS 프론트엔드 개발자 인기순위 및 투표창입니다.</Desc>
+      <VoteSection>
+        {candidates
+          .sort((a, b) => {
+            return b.voteCount - a.voteCount;
+          })
+          .map((candidate) => (
+            <List
+              key={candidate._id}
+              id={candidate._id}
+              i={i++}
+              {...candidate}
+              getCandidateList={getCandidateList}
+            />
+          ))}
+      </VoteSection>
+    </Wrapper>
+  );
 }
+export const MemoizedVoteForm = React.memo(VoteForm);
 
+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;

src/components/vote-list.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import axios from "axios";
+
+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>
+        <Rank>{i}위:</Rank> {name} [{voteCount}]표
+      </Candidate>
+      <VoteButton
+        onClick={() => {
+          Vote();
+        }}
+      >
+        투표
+      </VoteButton>
+    </Wrapper>
+  );
+}
+const Wrapper = styled.div`
+  width: 100%;
+  background-color: white;
+  font-size: 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const Rank = styled.strong``;
+const Candidate = styled.div``;
+const VoteButton = styled.button`
+  background-color: navy;
+  color: white;
+  font-size: 2rem;
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  display: block;
+  margin-left: auto;
+`;