Merge pull request #346 from SejongPeer/feature/12

feat: [12] 단건 게시물 별 스크랩 수 조회 구현
SejongPeer · Jul 17, 2024 · a4d0463 · a4d0463
2 parents 1f87571 + 2a89c67
commit a4d0463
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/src/pages/study/studyPostDetail/StudyPostDetail.js b/src/pages/study/studyPostDetail/StudyPostDetail.js
@@ -5,7 +5,12 @@ import useStore from './useStore';
 import COLORS from '../../../theme';
 import heart from '../../../assets/image/heart_postdetail.svg';
 import filledHeart from '../../../assets/image/filledHeart.svg';
-import { fetchStudyData, applyForStudy, toggleScrap } from './api';
+import {
+  fetchStudyData,
+  applyForStudy,
+  toggleScrap,
+  fetchScrapCount,
+} from './api';
 
 const StudyListPostDetail = () => {
   const {
@@ -14,11 +19,13 @@ const StudyListPostDetail = () => {
     studyData,
     isApplied,
     isScrapped,
+    scrapCount,
     setPopupVisible,
     setPopupMessage,
     setStudyData,
     setApplied,
     setScrapped,
+    setScrapCount,
   } = useStore();
 
   const { studyId } = useParams();
@@ -35,6 +42,9 @@ const StudyListPostDetail = () => {
         if (appliedStatus) {
           setApplied(JSON.parse(appliedStatus));
         }
+        // 스크랩 수 조회
+        const scrapData = await fetchScrapCount(studyId);
+        setScrapCount(scrapData.data.scrapCount);
       } catch (error) {
         console.error('Error fetching study data:', error);
       }
@@ -91,12 +101,12 @@ const StudyListPostDetail = () => {
         if (newScrappedStatus) {
           alert('스크랩에 추가합니다!');
           localStorage.setItem(`scrapId_${studyId}`, response.data.data);
+          setScrapCount(scrapCount + 1);
         } else {
           alert('스크랩에서 제거합니다!');
           localStorage.removeItem(`scrapId_${studyId}`);
+          setScrapCount(scrapCount - 1);
         }
-
-        // console.log(response.data.data);
       } else {
         console.error('스크랩 실패:', response);
       }
@@ -127,6 +137,13 @@ const StudyListPostDetail = () => {
             {studyData.data.recruitmentEnd}
           </ApplicationPeriod3>
         </FlexContainer>
+        <FlexContainer>
+          <Title2>방식</Title2>
+          <StudyMethod></StudyMethod>
+        </FlexContainer>
+        <FlexContainer>
+          <Title2>문의</Title2>
+        </FlexContainer>
         <Tag>
           <TagText>{studyData.data.categoryName}</TagText>
         </Tag>
@@ -137,7 +154,7 @@ const StudyListPostDetail = () => {
         <CommentContainer>
           <ScrapButton onClick={toggleScrapHandler}>
             <ScrapImage src={isScrapped ? filledHeart : heart} alt="heart" />
-            <ScrapCount>12</ScrapCount>
+            <ScrapCount>{scrapCount}</ScrapCount>
           </ScrapButton>
           <ApplyButton onClick={applyForStudyHandler} isApplied={isApplied}>
             {isApplied ? '지원완료' : '지원하기(1/4)'}
@@ -191,13 +208,15 @@ const Title2 = styled.div`
   margin-bottom: 2px;
 `;
 
+const StudyMethod = styled.div``;
+
 const Nickname = styled(Title2)`
   font-weight: 400;
   color: ${COLORS.font2};
 `;
 
 const ApplicationPeriod = styled(Title2)`
-  color: ${COLORS.font1};
+  /* color: ${COLORS.font1}; */
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.333px;

diff --git a/src/pages/study/studyPostDetail/api.js b/src/pages/study/studyPostDetail/api.js
@@ -19,7 +19,7 @@ export const fetchStudyData = async studyId => {
       },
     }
   );
-  // console.log(response);
+  console.log(response.data);
   return response.data;
 };
 
@@ -92,3 +92,26 @@ export const toggleScrap = async (studyId, isScrapped) => {
     return response;
   }
 };
+
+// 단건 게시물 별 스크랩 수 조회
+export const fetchScrapCount = async studyId => {
+  const accessToken = localStorage.getItem('accessToken');
+  const refreshToken = localStorage.getItem('refreshToken');
+
+  if (!accessToken || !refreshToken) {
+    throw new Error('토큰이 없음!');
+  }
+
+  const response = await axios.get(
+    `${process.env.REACT_APP_BACK_SERVER}/scraps/study/${studyId}`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+        'Refresh-token': `${refreshToken}`,
+      },
+    }
+  );
+
+  return response.data;
+};