Merge pull request CEOS-Developers#7 from Team-MailedIt/corinthionia

Vote, Result 페이지 기본 컴포넌트 추가

Author: corinthionia

package-lock.json

@@ -20,7 +20,8 @@
     "styled-components": "^5.3.3",
     "styled-normalize": "^8.0.7",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yarn": "^1.22.17"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -1,5 +1,5 @@
-import { normalize } from 'styled-normalize';
-import { createGlobalStyle } from 'styled-components';
+import { normalize } from "styled-normalize";
+import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
   ${normalize}
@@ -8,6 +8,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     height: 100vh;
     width: 100vw;
+    
     margin: 0;
     padding: 0;
   }

src/assets/styles/global-styles.tsx

@@ -0,0 +1,41 @@
+import {
+  Wrapper,
+  Title,
+  ResultsWrapper,
+  ResultWrapper,
+} from "./ResultPresenter";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+const ResultContainer = () => {
+  const [resultList, setResultList] = useState([]);
+
+  useEffect(() => {
+    const fetchResult = async () => {
+      const response = await axios.get(
+        "https://9a63efda-a674-4015-be3c-824740a2aa52.mock.pstmn.io/vote"
+      );
+      setResultList(response.data);
+    };
+    fetchResult();
+  }, []);
+
+  resultList.sort((a, b: any) => {
+    return b["voteCount"] - a["voteCount"];
+  });
+
+  console.log(resultList);
+
+  return (
+    <Wrapper>
+      <Title>Result</Title>
+      <ResultsWrapper>
+        {resultList.map((result: any) => (
+          <ResultWrapper key={result.name}>{result.name}</ResultWrapper>
+        ))}
+      </ResultsWrapper>
+    </Wrapper>
+  );
+};
+
+export default ResultContainer;

src/components/header/HeaderContainer.tsx

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.section`
+  width: 80%;
+  padding: 2.5%;
+`;
+
+export const Title = styled.span`
+  font-size: 50px;
+  font-weight: 400;
+
+  margin: 0;
+`;
+
+export const ResultsWrapper = styled.section`
+  width: 80%;
+  height: 80%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-wrap: wrap;
+
+  border: 1px solid black;
+`;
+
+export const ResultWrapper = styled.section`
+  width: 500px;
+  height: 50px;
+
+  margin: 0 25px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 10px;
+  border: 1px solid #d2d2d2;
+`;

src/components/header/HeaderPresenter.tsx

@@ -0,0 +1,32 @@
+import {
+  Sidebar,
+  ItemsWrapper,
+  StyledNavLink,
+  Logo,
+  Text,
+} from "./SidebarPresenter";
+import logo from "../../assets/images/logo.png";
+
+// 수정 중
+const SidebarContainer = () => {
+  return (
+    <Sidebar>
+      <ItemsWrapper>
+        <StyledNavLink to={"/"}>
+          <Logo src={logo} alt="" />
+        </StyledNavLink>
+        <StyledNavLink to={"/vote/:part"}>
+          <Text>Vote</Text>
+        </StyledNavLink>
+        <StyledNavLink to={"/result"}>
+          <Text>Result</Text>
+        </StyledNavLink>
+      </ItemsWrapper>
+      <StyledNavLink to={"/"}>
+        <Text>Profile</Text>
+      </StyledNavLink>
+    </Sidebar>
+  );
+};
+
+export default SidebarContainer;

src/components/result/ResultContainer.tsx

@@ -0,0 +1,47 @@
+import { NavLink } from "react-router-dom";
+import styled from "styled-components";
+
+export const Sidebar = styled.section`
+  width: 20%;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  border-right: 1px solid #e2e2e2;
+`;
+
+export const ItemsWrapper = styled.section`
+  height: 45%;
+  width: 100%;
+
+  margin-top: 10%;
+`;
+
+export const StyledNavLink = styled(NavLink)`
+  height: 25%;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  text-decoration: none;
+  color: black;
+
+  .active {
+    color: pink;
+  }
+`;
+
+export const Logo = styled.img`
+  width: 150px;
+  height: 30px;
+
+  object-fit: contain;
+`;
+
+export const Text = styled.h3`
+  display: flex;
+`;

src/components/result/ResultPresenter.tsx

@@ -0,0 +1,38 @@
+import {
+  Wrapper,
+  Title,
+  CandidatesWrapper,
+  CandidateWrapper,
+  SubmitButton,
+} from "./VotePresenter";
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+const VoteContainer = () => {
+  const [candidates, setCandidates] = useState([]);
+
+  useEffect(() => {
+    const fetchCandidates = async () => {
+      const response = await axios.get(
+        "https://9a63efda-a674-4015-be3c-824740a2aa52.mock.pstmn.io/vote"
+      );
+      setCandidates(response.data);
+    };
+    fetchCandidates();
+  }, []);
+
+  return (
+    <Wrapper>
+      <Title>Front-end</Title>
+      <CandidatesWrapper>
+        {candidates.map((candidate: any) => (
+          <CandidateWrapper>{candidate.name}</CandidateWrapper>
+        ))}
+      </CandidatesWrapper>
+      <SubmitButton>Vote!</SubmitButton>
+    </Wrapper>
+  );
+};
+
+export default VoteContainer;