Merge pull request #380 from SejongPeer/feature/28

feat : [28] 게시글 작성 -> alert & 작성한 스터디 지원자 조회 css & 수락 거절 통신

src/components/studyMyPost/api/applicantSelection.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const applicantSelection = async data => {
+  const accessToken = localStorage.getItem('accessToken');
+  const refreshToken = localStorage.getItem('refreshToken');
+
+  if (!accessToken || !refreshToken) {
+    throw new Error('Tokens not found in local storage.');
+  }
+
+  const response = await axios.patch(
+    'https://www.api-sejongpeer.shop/api/v1/study/relations/matching/status',
+    data,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Refresh-token': refreshToken,
+        'Content-Type': 'application/json',
+      },
+      withCredentials: true,
+    }
+  );
+  return response;
+};

src/components/studyMyPost/api/earlyClose.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const earlyClose = async studyId => {
+  const accessToken = localStorage.getItem('accessToken');
+  const refreshToken = localStorage.getItem('refreshToken');
+
+  if (!accessToken || !refreshToken) {
+    throw new Error('Tokens not found in local storage.');
+  }
+
+  const response = await axios.patch(
+    `https://www.api-sejongpeer.shop/api/v1/study/relations/early-close/${studyId}`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Refresh-token': refreshToken,
+        'Content-Type': 'application/json',
+      },
+      // withCredentials: true,
+    }
+  );
+  return response;
+};

src/components/studyMyPost/api/fetchMyPost.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+export const fetchMyPost = async () => {
+  const accessToken = localStorage.getItem('accessToken');
+  const refreshToken = localStorage.getItem('refreshToken');
+
+  if (!accessToken || !refreshToken) {
+    throw new Error('Tokens not found in local storage.');
+  }
+
+  const response = await axios.get(
+    'https://www.api-sejongpeer.shop/api/v1/study/relations/applicants',
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Refresh-token': refreshToken,
+        'Content-Type': 'application/json',
+      },
+      withCredentials: true,
+    }
+  );
+  return response.data.data;
+};

src/components/studyMyPost/studyMyPost.js

@@ -3,8 +3,11 @@ import styled from 'styled-components';
 import COLORS from '../../theme';
 
 import { useEffect, useState } from 'react';
-import { fetchMyPost } from './api';
-import style from './studyMyPost.module.css';
+
+import { fetchMyPost } from './api/fetchMyPost';
+import { applicantSelection } from './api/applicantSelection';
+import { earlyClose } from './api/earlyClose';
+
 
 const StudyMyPost = () => {
   const [myPosts, setMyPosts] = useState([]);
@@ -21,28 +24,74 @@ const StudyMyPost = () => {
 
     loadPosts();
   }, []);
+
+
+  const AcceptHandle = async (studyId, nickname, value) => {
+    const patchData = {
+      studyId: studyId,
+      applicantNickname: nickname,
+      isAccept: value,
+    };
+    try {
+      const response = await applicantSelection(patchData);
+      console.log('Response:', response);
+    } catch (error) {
+      console.log(error);
+    }
+    const msg = value === true ? '수락' : '거절';
+    alert(`${msg}되었습니다`);
+  };
+  const CancelHandle = async studyId => {
+    try {
+      const response = await earlyClose(studyId);
+      console.log('Response:', response);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <Container>
       {myPosts.map((post, index) => (
         <OuterBox key={index}>
           <HeaderStyle>
-            <Title className={style.title}>{post.studyTitle}</Title>
+
+            <Title>{post.studyTitle}</Title>
             <HeaderBottom>
               <ApplicantNum>지원인원 : {post.applicants.length}명</ApplicantNum>
-              <EndBtn>모집마감하기</EndBtn>
+              <EndBtn onClick={() => CancelHandle(post.studyId)}>
+                모집마감하기
+              </EndBtn>
+
             </HeaderBottom>
           </HeaderStyle>
 
           {post.applicants.length > 0 && (
-            <BottomStyle className={style.applicantsList}>
+
+            <BottomStyle>
+
               {post.applicants.map((applicant, appIndex) => (
                 <ApplicantBox key={appIndex}>
                   <ApplicantInfo>
                     {applicant.major} {applicant.grade}학년
                   </ApplicantInfo>
                   <BtnBox>
-                    <AcceptBtn>수락</AcceptBtn>
-                    <RefuseBtn>거절</RefuseBtn>
+
+                    <AcceptBtn
+                      onClick={() =>
+                        AcceptHandle(post.studyId, applicant.nickname, true)
+                      }
+                    >
+                      수락
+                    </AcceptBtn>
+                    <RefuseBtn
+                      onClick={() =>
+                        AcceptHandle(post.studyId, applicant.nickname, false)
+                      }
+                    >
+                      거절
+                    </RefuseBtn>
+
                   </BtnBox>
                 </ApplicantBox>
               ))}
@@ -73,8 +122,15 @@ const HeaderStyle = styled.div`
   padding: 15px;
   display: flex;
   flex-direction: column;
+
+  justify-content: center;
   gap: 15%;
   border-bottom: 1px solid ${COLORS.line2};
+  @media (min-width: 768px) {
+    height: 9vh;
+    gap: 15%;
+  }
+
 `;
 const Title = styled.p`
   width: 100%;
@@ -83,6 +139,9 @@ const Title = styled.p`
   padding: 0;
   font-size: 1.2rem;
   font-weight: 700;
+  @media (min-width: 768px) {
+    font-size: 1.5rem;
+  }
 `;
 const HeaderBottom = styled.div`
   display: flex;
@@ -92,12 +151,20 @@ const ApplicantNum = styled.span`
   color: ${COLORS.main};
   font-size: 0.9rem;
   font-weight: 600;
+
+  @media (min-width: 768px) {
+    font-size: 1.2rem;
+  }
+
 `;
 const EndBtn = styled.button`
   background-color: ${COLORS.back2};
   color: ${COLORS.font4};
   font-size: 0.9rem;
   font-weight: 500;
+  @media (min-width: 768px) {
+    font-size: 1.1rem;
+  }
 `;
 
 const BottomStyle = styled.div`
@@ -118,6 +185,9 @@ const ApplicantInfo = styled.span`
   display: flex;
   justify-content: center;
   align-items: center;
+  @media (min-width: 768px) {
+    font-size: 1.3rem;
+  }
 `;
 const BtnBox = styled.div`
   display: flex;

src/pages/myPage/myPost/myPost.js

@@ -1,35 +1,56 @@
+
+import React from 'react';
+import styled from 'styled-components';
 import StudyMyPost from '../../../components/studyMyPost/studyMyPost';
 import COLORS from '../../../theme';
-import style from './myPost.module.css';
 
 const MyPost = () => {
   return (
-    <div
-      className={style.container}
-      style={{
-        backgroundColor: COLORS.back2,
-      }}
-    >
-      <div className={style.innerContainer}>
-        <div
-          style={{
-            backgroundColor: 'white',
-            width: '100%',
-            height: '8%',
-            marginTop: '7vh',
-            fontSize: '0.9rem',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginBottom: '8px',
-          }}
-        >
+    <Container>
+      <InnerContainer>
+        <Notice>
           *모집마감 버튼을 누르면 인원 수와 상관없이 모집이 마감됩니다.
-        </div>
+        </Notice>
         <StudyMyPost />
-      </div>
-    </div>
+      </InnerContainer>
+    </Container>
+
   );
 };
 
 export default MyPost;
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background-color: ${COLORS.back2};
+`;
+
+const InnerContainer = styled.div`
+  width: 100vw;
+
+  background-color: #fbe4e4;
+  @media (min-width: 768px) {
+    width: 674px;
+    margin-top: 1vh;
+  }
+`;
+
+const Notice = styled.div`
+  background-color: white;
+  width: 100%;
+  height: 8%;
+  margin-top: 7vh;
+  font-size: 0.9rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 8px;
+  @media (min-width: 768px) {
+    font-size: 1.3rem;
+  }
+`;
+

src/pages/study/studyPostWrite/StudyPostWrite.js

@@ -262,7 +262,8 @@ const StudyPostWrite = props => {
       if (imgFiles.length > 0) {
         await imgUpload(studyId);
       }
-
+      alert('게시글 작성 완료');
+      navigate(`/study/post/${studyId}`);
       if (!response.ok) {
         throw new Error(data.message || 'Something went wrong');
       }
@@ -340,6 +341,8 @@ const StudyPostWrite = props => {
       if (data.data !== null) {
         errorClassName = data.data.errorClassName;
       }
+      alert('게시글 수정 완료');
+      navigate(`/study/post/${studyId}`);
     } catch (err) {
       console.log('ErrorMessage : ', err.message);