feat: [14] 재지원 시 1시간 패널티 alert 처리

SejongPeer · Jul 19, 2024 · d306c1b · d306c1b
1 parent 3d680e0
commit d306c1b
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 74 deletions.
diff --git a/src/pages/study/studyPostDetail/Popup.js b/src/pages/study/studyPostDetail/Popup.js
@@ -0,0 +1,66 @@
+// Popup.js
+import React from 'react';
+import styled from 'styled-components';
+import COLORS from '../../../theme';
+
+const Popup = ({ title, message, onClose }) => {
+  return (
+    <PopupContainer>
+      <PopupContent>
+        <PopupTitle>{title}</PopupTitle>
+        <PopupMessage>{message}</PopupMessage>
+        <ConfirmButton onClick={onClose}>확인</ConfirmButton>
+      </PopupContent>
+    </PopupContainer>
+  );
+};
+
+export default Popup;
+
+const PopupContainer = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  padding: 20px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+`;
+
+const PopupContent = styled.div`
+  display: flex;
+  text-align: center;
+  color: ${COLORS.font1};
+  flex-direction: column;
+`;
+
+const PopupTitle = styled.h2`
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 10px;
+`;
+
+const PopupMessage = styled.p`
+  font-size: 14px;
+  color: ${COLORS.font2};
+  line-height: 1.5;
+  margin-bottom: 20px;
+`;
+
+const ConfirmButton = styled.button`
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: ${COLORS.main};
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+`;
diff --git a/src/pages/study/studyPostDetail/StudyPostDetail.js b/src/pages/study/studyPostDetail/StudyPostDetail.js
@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+
+import Popup from './Popup';
 import styled from 'styled-components';
 import useStore from './useStore';
 import COLORS from '../../../theme';
@@ -8,6 +10,7 @@ import filledHeart from '../../../assets/image/filledHeart.svg';
 import {
   fetchStudyData,
   applyForStudy,
+  cancelStudyApplication,
   toggleScrap,
   fetchScrapCount,
 } from './api';
@@ -20,12 +23,14 @@ const StudyListPostDetail = () => {
     isApplied,
     isScrapped,
     scrapCount,
+    popupTitle,
     setPopupVisible,
     setPopupMessage,
     setStudyData,
     setApplied,
     setScrapped,
     setScrapCount,
+    setPopupTitle,
   } = useStore();
 
   const { studyId } = useParams();
@@ -38,11 +43,9 @@ const StudyListPostDetail = () => {
         const scrapped = localStorage.getItem(`isScrapped_${studyId}`);
         setScrapped(scrapped ? JSON.parse(scrapped) : data.data.isScrapped);
         const appliedStatus = localStorage.getItem(`isApplied_${studyId}`);
-        // console.log(data);
         if (appliedStatus) {
           setApplied(JSON.parse(appliedStatus));
         }
-        // 스크랩 수 조회
         const scrapData = await fetchScrapCount(studyId);
         setScrapCount(scrapData.data.scrapCount);
       } catch (error) {
@@ -68,16 +71,26 @@ const StudyListPostDetail = () => {
 
   const applyForStudyHandler = async () => {
     try {
-      const response = await applyForStudy(studyId);
-      if (response.status === 201) {
-        togglePopup(
-          '지원 완료! 모집자가 수락 후, 모집인원이 다 차거나 마감일이 되면 메시지로 오픈채팅 링크가 전달됩니다.'
-        );
-        setApplied(true);
-        localStorage.setItem(`isApplied_${studyId}`, true);
-        // console.log(response);
+      if (isApplied) {
+        const response = await cancelStudyApplication(studyId);
+        if (response.status === 200) {
+          togglePopup('지원 취소 완료');
+          setApplied(false);
+          localStorage.setItem(`isApplied_${studyId}`, false);
+        } else {
+          console.error('Failed to cancel study application:', response);
+        }
       } else {
-        console.error('Failed to apply for study:', response);
+        const response = await applyForStudy(studyId);
+        if (response.status === 201) {
+          togglePopup(
+            '지원 완료! 모집자가 수락 후, 모집인원이 다 차거나 마감일이 되면 메시지로 오픈채팅 링크가 전달됩니다.'
+          );
+          setApplied(true);
+          localStorage.setItem(`isApplied_${studyId}`, true);
+        } else {
+          console.error('Failed to apply for study:', response);
+        }
       }
     } catch (error) {
       if (error.response && error.response.status === 409) {
@@ -87,6 +100,10 @@ const StudyListPostDetail = () => {
       } else {
         console.error('Error applying for study:', error);
       }
+
+      if (error.response.status === 403) {
+        togglePopup('1시간 패널티 부과 중입니다!');
+      }
     }
   };
 
@@ -160,17 +177,17 @@ const StudyListPostDetail = () => {
             <ScrapCount>{scrapCount}</ScrapCount>
           </ScrapButton>
           <ApplyButton onClick={applyForStudyHandler} isApplied={isApplied}>
-            {isApplied ? '지원완료' : '지원하기(1/4)'}
+            {isApplied
+              ? '지원취소'
+              : `지원하기 (${studyData.data.participantCount} / ${studyData.data.totalRecruitmentCount})`}
           </ApplyButton>
         </CommentContainer>
         {isPopupVisible && (
-          <Popup>
-            <PopupContent>
-              <PopupTitle>스터디 지원 완료</PopupTitle>
-              <PopupMessage>{popupMessage}</PopupMessage>
-              <ConfirmButton onClick={closePopup}>확인</ConfirmButton>
-            </PopupContent>
-          </Popup>
+          <Popup
+            title={popupTitle}
+            message={popupMessage}
+            onClose={closePopup}
+          />
         )}
       </div>
     </Container>
@@ -219,7 +236,6 @@ const StudyMethod = styled.div`
   margin-right: 10px;
 `;
 
-
 const Nickname = styled(Title2)`
   font-weight: 400;
   color: ${COLORS.font2};
@@ -345,7 +361,8 @@ const ApplyButton = styled.button`
   flex-shrink: 0;
   border-radius: 28px;
   background: ${props => (props.isApplied ? COLORS.line2 : COLORS.main)};
-  color: #fff;
+  color: ${props =>
+    props.isApplied ? '#111' : '#fff'}; /* 글씨 색상 조건부 변경 */
   text-align: center;
   font-size: 18px;
   font-style: normal;
@@ -356,51 +373,3 @@ const ApplyButton = styled.button`
   cursor: pointer;
   border: none;
 `;
-
-const Popup = styled.div`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 300px;
-  padding: 20px;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-`;
-
-const PopupContent = styled.div`
-  display: flex;
-  text-align: center;
-  color: ${COLORS.font1};
-  flex-direction: column;
-`;
-
-const PopupTitle = styled.div`
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 10px;
-`;
-
-const PopupMessage = styled.div`
-  font-size: 14px;
-  color: ${COLORS.font2};
-  line-height: 1.5;
-  margin-bottom: 20px;
-`;
-
-const ConfirmButton = styled.button`
-  margin-top: 20px;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  background-color: ${COLORS.main};
-  color: white;
-  font-size: 16px;
-  cursor: pointer;
-`;
diff --git a/src/pages/study/studyPostDetail/api.js b/src/pages/study/studyPostDetail/api.js
@@ -6,6 +6,7 @@ export const fetchStudyData = async studyId => {
   const refreshToken = localStorage.getItem('refreshToken');
 
   if (!accessToken || !refreshToken) {
+    alert('재로그인 해야합니다!');
     throw new Error('토큰이 없음!');
   }
 
@@ -28,6 +29,7 @@ export const applyForStudy = async studyId => {
   const refreshToken = localStorage.getItem('refreshToken');
 
   if (!accessToken || !refreshToken) {
+    alert('재로그인 해야합니다!');
     throw new Error('토큰이 없음!');
   }
 
@@ -42,7 +44,31 @@ export const applyForStudy = async studyId => {
       },
     }
   );
+  console.log(response.data);
+  return response;
+};
+
+// 스터디 지원 취소
+export const cancelStudyApplication = async studyId => {
+  const accessToken = localStorage.getItem('accessToken');
+  const refreshToken = localStorage.getItem('refreshToken');
+
+  if (!accessToken || !refreshToken) {
+    alert('재로그인 해야합니다!');
+    throw new Error('토큰이 없음!');
+  }
 
+  const response = await axios.delete(
+    `${process.env.REACT_APP_BACK_SERVER}/study/relations/${studyId}`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+        'Refresh-token': `${refreshToken}`,
+      },
+    }
+  );
+  console.log(response.data);
   return response;
 };
 
@@ -51,10 +77,9 @@ export const toggleScrap = async (studyId, isScrapped) => {
   const accessToken = localStorage.getItem('accessToken');
   const refreshToken = localStorage.getItem('refreshToken');
   const scrapId = localStorage.getItem(`scrapId_${studyId}`);
-  // console.log(accessToken);
-  // console.log(refreshToken);
-  // console.log(scrapId);
+
   if (!accessToken || !refreshToken) {
+    alert('재로그인 해야합니다!');
     throw new Error('토큰이 없음!');
   }
 
@@ -99,6 +124,7 @@ export const fetchScrapCount = async studyId => {
   const refreshToken = localStorage.getItem('refreshToken');
 
   if (!accessToken || !refreshToken) {
+    alert('재로그인 해야합니다!');
     throw new Error('토큰이 없음!');
   }
 
@@ -113,5 +139,6 @@ export const fetchScrapCount = async studyId => {
     }
   );
 
+  // console.log(response.data);
   return response.data;
 };
diff --git a/src/pages/study/studyPostDetail/useStore.js b/src/pages/study/studyPostDetail/useStore.js
@@ -3,16 +3,18 @@ import { create } from 'zustand';
 const useStore = create(set => ({
   isPopupVisible: false,
   popupMessage: '',
+  popupTitle: '',
   studyData: null,
   isApplied: false,
   isScrapped: false,
-  scrapCount: 0, // 스크랩 수 상태 추가
+  scrapCount: 0,
   setPopupVisible: isVisible => set({ isPopupVisible: isVisible }),
   setPopupMessage: message => set({ popupMessage: message }),
+  setPopupTitle: title => set({ popupTitle: title }),
   setStudyData: data => set({ studyData: data }),
   setApplied: isApplied => set({ isApplied }),
   setScrapped: isScrapped => set({ isScrapped }),
-  setScrapCount: count => set({ scrapCount: count }), // 스크랩 수 설정 함수 추가
+  setScrapCount: count => set({ scrapCount: count }),
 }));
 
 export default useStore;