[7주차] 레시피지 미션 제출합니다.

react-vote/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

react-vote/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

react-vote/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

react-vote/api.tsx

@@ -0,0 +1,9 @@
+import axios from "axios";
+import {getCookie} from "./util/cookie";
+
+//axios인스턴스
+const api = axios.create({
+    baseURL:"https://www.ceosvote.link",
+    headers:{Authorization:`Bearer ${getCookie("is_login")}` },
+});
+export default api;

react-vote/components/Candidate.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import api from '../api';
+
+const Candidate = (candidate: any) => {
+  const postCandidates = async (id: any) => {
+    try {
+      const response = await api.post('/candidates/', {
+        id: id,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleClickVoteCount = (id: any) => {
+    postCandidates(id);
+  };
+
+  return (
+    <div
+      className="candidate"
+      onClick={() => handleClickVoteCount(candidate.id)}
+    >
+      <div>{candidate.name}</div>
+      <div>{candidate.vote_count}</div>
+      <style jsx>{`
+        .candidate {
+          display: flex;
+          justify-content: space-between;
+
+          width: 10rem;
+          padding: 1.5rem;
+
+          cursor: pointer;
+          border: 1px solid white;
+          border-radius: 1rem;
+        }
+
+        .candidate:hover {
+          background: white;
+          color: black;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Candidate;

react-vote/components/Layout.tsx

@@ -0,0 +1,18 @@
+export default function Layout({ children }: any) {
+  return (
+    <div className="container">
+      <div className="content">{children}</div>
+
+      <style jsx>{`
+        .container {
+          width: 100vw;
+          height: 100vh;
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      `}</style>
+    </div>
+  );
+}

react-vote/components/ResultCandidate.tsx

@@ -0,0 +1,22 @@
+const ResultCandidate = (candidate: any) => {
+  return (
+    <div className="candidate">
+      <div>{candidate.name}</div>
+      <div>{candidate.vote_count}</div>
+      <style jsx>{`
+        .candidate {
+          display: flex;
+          justify-content: space-between;
+
+          width: 10rem;
+          padding: 1.5rem;
+
+          border: 1px solid white;
+          border-radius: 1rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ResultCandidate;

react-vote/components/ResultTeam.tsx

@@ -0,0 +1,22 @@
+const ResultTeam = (team: any) => {
+  return (
+    <div className="team">
+      <div>{team.team_name}</div>
+      <div>{team.vote_count}</div>
+      <style jsx>{`
+        .team {
+          display: flex;
+          gap: 1rem;
+
+          width: 30rem;
+          padding: 1.5rem;
+
+          border: 1px solid white;
+          border-radius: 1rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ResultTeam;

react-vote/components/Team.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import api from '../api';
+
+const Team = (team: any) => {
+  const postCandidates = async (name: any) => {
+    try {
+      const response = await api.post('/teams/', {
+        team_name: name,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleClickVoteCount = (name: any) => {
+    postCandidates(name);
+  };
+
+  return (
+    <div
+      className="candidate"
+      onClick={() => handleClickVoteCount(team.team_name)}
+    >
+      <div>{team.team_name}</div>
+      <div>{team.vote_count}</div>
+      <style jsx>{`
+        .candidate {
+          display: flex;
+          gap: 1rem;
+
+          width: 30rem;
+          padding: 1.5rem;
+
+          cursor: pointer;
+          border: 1px solid white;
+          border-radius: 1rem;
+        }
+
+        .candidate:hover {
+          background: white;
+          color: black;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Team;

react-vote/components/TeamResult.tsx

@@ -0,0 +1,30 @@
+import ResultTeam from './ResultTeam';
+
+const TeamResult = (voteList: any) => {
+  console.log(voteList);
+  return (
+    <div className="container">
+      <div className="title">결과보기</div>
+      {Object.values(voteList)
+        .sort((a: any, b: any) => b.vote_count - a.vote_count)
+        .map((team: any) => (
+          <ResultTeam key={team.id} {...team} />
+        ))}
+      <style jsx>{`
+        .title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          padding: 1rem;
+        }
+        .container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default TeamResult;

react-vote/components/VoteResult.tsx

@@ -0,0 +1,38 @@
+import ResultCandidate from './ResultCandidate';
+
+const VoteResult = (voteList: any) => {
+  console.log(voteList);
+  const sortList = Object.values(voteList).sort(
+    (a: any, b: any) => b.vote_count - a.vote_count
+  );
+  return (
+    <div className="container">
+      <div className="title">결과보기</div>
+      <div className="content">
+        {sortList.map((cand: any) => (
+          <ResultCandidate key={cand.id} {...cand} />
+        ))}
+      </div>
+      <style jsx>{`
+        .title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          padding: 1rem;
+        }
+        .container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1rem;
+        }
+        .content {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 1rem 1rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default VoteResult;

react-vote/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;