fix: 투표방지, user team 받아오기

Author: hamo-o

react-vote/components/Candidate.tsx

@@ -9,6 +9,7 @@ const Candidate = (candidate: any) => {
       });
     } catch (error) {
       console.log(error);
+      alert('이미 투표하셨습니다!');
     }
   };
 

react-vote/components/Team.tsx

@@ -9,6 +9,7 @@ const Team = (team: any) => {
       });
     } catch (error) {
       console.log(error);
+      alert('이미 투표하셨습니다!');
     }
   };
 

react-vote/pages/vote/index.tsx

@@ -3,11 +3,9 @@ import Link from 'next/link';
 import axios from 'axios';
 import Router from 'next/router';
 
-import Candidate from '../../components/Candidate';
-
 import api from '../../api';
+import { useSelector } from 'react-redux';
 import { getCookie, removeCookie } from '../../util/cookie';
-import { Navigate } from 'react-router-dom';
 
 const Vote = () => {
   interface CandidateProps {
@@ -19,7 +17,7 @@ const Vote = () => {
   const [cand, setCand] = useState<CandidateProps[] | null>(null);
   const [teams, setTeams] = useState([]);
 
-const fetchCandidates = async () => {
+  const fetchCandidates = async () => {
     try {
       const response = await api.get('/candidates/');
       setCand(response.data);
@@ -28,7 +26,7 @@ const fetchCandidates = async () => {
     }
   };
 
-const fetchTeams = async () => {
+  const fetchTeams = async () => {
     try {
       const response = await api.get('/teams/');
       setTeams(response.data);
@@ -37,25 +35,28 @@ const fetchTeams = async () => {
     }
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     if (getCookie('is_login') === undefined) {
       alert('로그인 후 접속');
       Router.push('/');
     } else {
       fetchCandidates();
       fetchTeams();
     }
-  },[])
-  
+  }, []);
 
   const LogOut = () => {
     removeCookie('is_login');
     Router.push('/');
   };
 
-  console.log(cand);
+  const [team, setTeam] = useState('FE');
+
+  const data = useSelector((state: any) => state.joinSlice.joinData);
 
-  const team = 'FE';
+  useEffect(() => {
+    setTeam(data.team);
+  }, []);
 
   return (
     <div className="container">
@@ -70,7 +71,9 @@ const fetchTeams = async () => {
         }}
         as={`/vote/${team}`}
       >
-        <div className="vote-btn">FE 투표하기</div>
+        <button className="vote-btn" disabled={team !== 'FE'}>
+          FE 투표하기
+        </button>
       </Link>
       <Link
         href={{
@@ -83,7 +86,7 @@ const fetchTeams = async () => {
         }}
         as={`/result/FE`}
       >
-        <div className="vote-btn">FE 결과보기</div>
+        <button className="vote-btn">FE 결과보기</button>
       </Link>
 
       <Link
@@ -97,7 +100,9 @@ const fetchTeams = async () => {
         }}
         as={`/vote/BE`}
       >
-        <div className="vote-btn">BE 투표하기</div>
+        <button className="vote-btn" disabled={team !== 'BE'}>
+          BE 투표하기
+        </button>
       </Link>
       <Link
         href={{
@@ -110,7 +115,7 @@ const fetchTeams = async () => {
         }}
         as={`/result/BE`}
       >
-        <div className="vote-btn">BE 결과보기</div>
+        <button className="vote-btn">BE 결과보기</button>
       </Link>
       <Link
         href={{
@@ -121,11 +126,11 @@ const fetchTeams = async () => {
         }}
         as={`/vote/final`}
       >
-        <div className="vote-btn">
+        <button className="vote-btn">
           데모데이
           <br />
           투표하기
-        </div>
+        </button>
       </Link>
       <Link
         href={{
@@ -136,14 +141,14 @@ const fetchTeams = async () => {
         }}
         as={`/result/final`}
       >
-        <div className="vote-btn">
+        <button className="vote-btn">
           데모데이 <br /> 결과보기
-        </div>
+        </button>
       </Link>
       <button onClick={LogOut}>logOut</button>
       <style jsx>{`
         .vote-btn {
-          width: 10em;
+          width: 12em;
           height: 10rem;
           padding: 2rem;
           border: 1px solid white;

react-vote/reducer/joinUser.tsx

@@ -1,58 +1,55 @@
-import { createAsyncThunk,createSlice } from "@reduxjs/toolkit";
-import axios from "axios";
-import Router from "next/router";
-
-const initialState={
-    joinData:[],
-    id:[],
-    error:"",
-    loading:false
-
-}
-
-
-export const signUpDb = createAsyncThunk('post/signup',
-async({joinData}:any)=>{
-    try{
-        const response = await axios.post(
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+import Router from 'next/router';
+
+const initialState = {
+  joinData: [],
+  id: [],
+  error: '',
+  loading: false,
+};
+
+export const signUpDb = createAsyncThunk(
+  'post/signup',
+  async ({ joinData }: any) => {
+    try {
+      const response = await axios.post(
         `https://www.ceosvote.link/accounts/signup/`,
         joinData
-        );
-        alert("가입 성공");
-        Router.push("/");
-        return response.data;
-    }
-    catch(error:any){
-        console.log(error.code);
-        alert("다시 입력해주세요");
-        return error.code;
+      );
+      alert('가입 성공');
+      Router.push('/');
+      return response.data;
+    } catch (error: any) {
+      console.log(error.code);
+      alert('다시 입력해주세요');
+      return error.code;
     }
-}
-)
-
+  }
+);
 
 const joinSlice = createSlice({
-    name:"joinData",
-    initialState,
-    reducers:{},
-    extraReducers:(builder)=>{
-        //회원정보 전송
-        builder.addCase(signUpDb.pending,(state)=>{
-            state.loading = true;
-        });
-        builder.addCase(signUpDb.fulfilled, (state, action) => {
-            state.loading = false;
-            state.joinData = action.payload;
-            state.error = "";
-         });
-        builder.addCase(signUpDb.rejected, (state, action) => {
-            state.loading = false;
-            state.joinData = [];
-            //state.error = action.error.message;
-        });
-    }
-
-})
-
-export{joinSlice};
-export const joinReducer = joinSlice.reducer;
+  name: 'joinData',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    //회원정보 전송
+    builder.addCase(signUpDb.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(signUpDb.fulfilled, (state, action) => {
+      state.loading = false;
+      state.joinData = action.payload;
+      state.error = '';
+    });
+    builder.addCase(signUpDb.rejected, (state, action) => {
+      state.loading = false;
+      state.joinData = [];
+      //state.error = action.error.message;
+    });
+  },
+});
+
+export { joinSlice };
+
+export const joinReducer = joinSlice.reducer;