[feat] 파트, 투표 별 투표 창 보이게 하기

src/api/requests.tsx

@@ -83,24 +83,36 @@ export const loginUser = async (id: string, password: string) => {
   }
 };
 
-export const logoutUser = async (refresh: any) => {
+export const logoutUser = async (access: any) => {
   const response = await fetch(process.env.API_URL + '/api/accounts/logout/', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${refresh}`,
+      Authorization: `Bearer ${access}`,
     },
   });
-  console.log(response);
   if (response.ok) {
-    const responseData = await response.json();
-    return { success: true, data: responseData };
+    return { success: true };
   } else {
     return { success: false };
   }
 };
 
-export const refreshAccessToken = async (refresh: any) => {
+export const getIsVoted = async (access : any, userid : any) =>{
+  const response = await fetch(process.env.API_URL + `/api/polls/vote-history/${userid}/`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${access}`,
+    },
+  });
+  if (response.ok) {
+    const data = await response.json();
+    return data;
+  }
+};
+
+export const refreshAccessToken = async (refresh : any) =>{
   const data = {
     refresh: refresh,
   };

src/app/login/page.tsx

@@ -39,7 +39,8 @@ export default function page() {
           id : response.data.user.id,
           part : response.data.user.part,
           team : response.data.user.team,
-          userName : response.data.user.username
+          userName : response.data.user.username,
+          userId : response.data.user.userid
         });
 
         alert("로그인에 성공하였습니다.");

src/app/vote/demo/page.tsx

@@ -1,12 +1,30 @@
 'use client';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Line from '@/components/common/Line';
 import Header from '@/components/common/Header';
 import SelectMenuResult from '@/components/vote/SelectMenuResult';
 import Order from '@/components/common/Order';
+import { userInfoState } from '@/atom/states';
+import { useRecoilState } from 'recoil';
+import getAccessToken from '@/util/getAccessToken';
+import { useCookies } from 'react-cookie';
+import { getIsVoted } from '@/api/requests';
 
 function page() {
+  const [cookies,setCookie,removeCookie] = useCookies();
+  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
+  const [isVoted , setIsVoted] = useState(false);
+
+  useEffect(() => {
+    const checkIsVoted = async () => {
+      let accessToken = await getAccessToken(cookies,setCookie);
+      const response = await getIsVoted(accessToken,userInfo.userId);
+      setIsVoted(response.has_voted_demo);
+    };
+
+    checkIsVoted();
+  }, []);
   return (
     <Container>
       <Order order={'1'} />
@@ -16,6 +34,8 @@ function page() {
         content="데모데이 투표"
         href="/vote/demo/day"
         resultHref="/vote/demo/day/result"
+        isVoted = {isVoted}
+        isShow = {true}
       />
     </Container>
   );

src/app/vote/part/page.tsx

@@ -1,12 +1,30 @@
 'use client';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Line from '@/components/common/Line';
 import Header from '@/components/common/Header';
 import SelectMenuResult from '@/components/vote/SelectMenuResult';
 import Order from '@/components/common/Order';
+import { userInfoState } from '@/atom/states';
+import { useRecoilState } from 'recoil';
+import getAccessToken from '@/util/getAccessToken';
+import { useCookies } from 'react-cookie';
+import { getIsVoted } from '@/api/requests';
 
 function page() {
+  const [cookies,setCookie,removeCookie] = useCookies();
+  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
+  const [isVoted , setIsVoted] = useState(false);
+  useEffect(() => {
+    const checkIsVoted = async () => {
+      let accessToken = await getAccessToken(cookies,setCookie);
+      const response = await getIsVoted(accessToken,userInfo.userId);
+      setIsVoted(response.has_voted_part);
+      console.log(userInfo.part);
+    };
+
+    checkIsVoted();
+  }, []);
   return (
     <Container>
       <Order order={'1'} />
@@ -17,11 +35,15 @@ function page() {
           content="FRONT-END br 파트장 투표"
           href="/vote/part/fe"
           resultHref="/vote/part/fe/result"
+          isVoted = {isVoted}
+          isShow = {userInfo.part === 2}
         />
         <SelectMenuResult
           content="BACK-END br 파트장 투표"
           href="/vote/part/be"
           resultHref="/vote/part/be/result"
+          isVoted = {isVoted}
+          isShow = {userInfo.part === 1}
         />
       </SelectMenuResultWrapper>
     </Container>

src/atom/states.tsx

@@ -10,6 +10,7 @@ const userInfoState = atom({
     part : 0,
     team : 0,
     userName : '',
+    userId : '',
   },
   effects_UNSTABLE: [persistAtom],
 })

src/components/common/Modal.tsx

@@ -4,16 +4,19 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import {useCookies} from 'react-cookie'
 import { logoutUser } from '@/api/requests';
+import getAccessToken from '@/util/getAccessToken';
 
 function Modal({ clickModal }: any) {
   const router = useRouter();
   const [cookies, setCookie, removeCookie] = useCookies();
   const logoutHandler = async () => {
-    const response = await logoutUser(cookies.refresh);
-    console.log(response);
-    // removeCookie("refresh");
-    // removeCookie("access");
-    // router.push("/main");
+    let accessToken = await getAccessToken(cookies,setCookie);
+    const response = await logoutUser(accessToken);
+    if(response.success){
+      removeCookie("refresh");
+      removeCookie("access");
+      router.push("/main");
+    }
   };
   return (
     <ModalBox onClick={clickModal}>

src/components/vote/SelectMenuResult.tsx

@@ -8,12 +8,17 @@ function SelectMenuResult({
   content,
   href,
   resultHref,
+  isVoted,
+  isShow
 }: {
   content: string;
   href: string;
   resultHref: string;
+  isVoted : boolean;
+  isShow : boolean;
 }) {
   const lines = content.split('br');
+  console.log(isShow);
   return (
     <>
       <VoteForm>
@@ -26,9 +31,15 @@ function SelectMenuResult({
           ))}
         </VoteName>
         <CheckWrapper>
-          <Check content={href} />
-          <Result content={resultHref} />
+          {isShow && !isVoted && <Check content={href} />}
+          {isShow && isVoted && <Result content={resultHref} />}
         </CheckWrapper>
+
+      {!isShow && 
+        <DisableBox>
+          <WarnWrapper>본인의 파트만 투표 가능</WarnWrapper>
+        </DisableBox>
+      }
       </VoteForm>
     </>
   );
@@ -44,16 +55,35 @@ const VoteForm = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-top: 50px;
+  position : relative;
 `;
 const VoteName = styled.div`
   font-size: 19px;
   font-weight: bold;
   margin-left: 40px;
-  margin-bottom: 40px;
 `;
 const CheckWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 `;
+
+const DisableBox = styled.div`
+  position : absolute;
+  width: 300px;
+  height: 150px;
+  z-index : 10;
+  top : 0;
+  background-color: #ffe27c;
+  opacity : 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const WarnWrapper = styled.div`
+  text-align: center;
+  font-weight: bold;
+  font-size : 20px;
+`