[#129] 공지사항, 펀시스템 상세정보 및 댓글 API 연결

src/apis/communityAPIS.ts

@@ -1,23 +1,30 @@
 import { axiosInstance } from '@/apis/axiosInstance';
 import axios from 'axios';
 
-export const getCommunityItemAPI = async (inquiry :String = "", category : String, page:number=0) => {
+export const getCommunityItemAPI = async (
+  inquiry: String = '',
+  category: String,
+  page: number = 0,
+) => {
   try {
-    if(category === "ALL"){
+    if (category === 'ALL') {
       const response = await axiosInstance.get(`/community/article`, {
-        params :{
-          inquiry : String(inquiry),
-          page : page,
-        }
+        params: {
+          inquiry: String(inquiry),
+          page: page,
+        },
       });
       return response.data;
-    }else{
-      const response = await axiosInstance.get(`/community/article/topic/${category}`, {
-        params :{
-          inquiry : String(inquiry),
-          page : page,
-        }
-      });
+    } else {
+      const response = await axiosInstance.get(
+        `/community/article/topic/${category}`,
+        {
+          params: {
+            inquiry: String(inquiry),
+            page: page,
+          },
+        },
+      );
       return response.data;
     }
   } catch (error) {
@@ -27,3 +34,29 @@ export const getCommunityItemAPI = async (inquiry :String = "", category : Strin
     return null;
   }
 };
+
+export const getCommunityInfoAPI = async (articleID: number) => {
+  try {
+    const response = await axiosInstance.get(`/community/article/${articleID}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getCommunityInfoCommentAPI = async (articleID: number) => {
+  try {
+    const response = await axiosInstance.get(
+      `/community/article/${articleID}/comments`,
+    );
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};

src/apis/funsystemAPIs.ts

@@ -0,0 +1,26 @@
+import { axiosInstance } from '@/apis/axiosInstance';
+import axios from 'axios';
+
+export const getFunsystemInfoAPI = async (funId: number) => {
+  try {
+    const response = await axiosInstance.get(`/funsystem/page/${funId}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getFunsystemInfoCommentAPI = async (funId: number) => {
+  try {
+    const response = await axiosInstance.get(`/funsystem/${funId}/comments`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};

src/apis/noticeAPIS.ts

@@ -1,13 +1,13 @@
-import { axiosInstance } from "@/apis/axiosInstance";
-import axios from "axios";
+import { axiosInstance } from '@/apis/axiosInstance';
+import axios from 'axios';
 
-//Todo : 페이지네이션 
-export const getNoticeAPI = async (searchKeyword:String="") => {
+//Todo : 페이지네이션
+export const getNoticeAPI = async (searchKeyword: String = '') => {
   try {
-    const response = await axiosInstance.get(`/notice`,{
-      params : {
-        searchKeyword : String(searchKeyword),
-      }
+    const response = await axiosInstance.get(`/notice`, {
+      params: {
+        searchKeyword: String(searchKeyword),
+      },
     });
     return response.data;
   } catch (error) {
@@ -18,28 +18,29 @@ export const getNoticeAPI = async (searchKeyword:String="") => {
   }
 };
 
-
-export const getNoticeAPIwithCategory = async (searchKeyword:String ="",category :String, page:number =0) => {
+export const getNoticeAPIwithCategory = async (
+  searchKeyword: String = '',
+  category: String,
+  page: number = 0,
+) => {
   try {
-    if(category === "ALL"){
-      const response = await axiosInstance.get(`/notice`,{
-        params : {
-          searchKeyword : String(searchKeyword),
-          page : page,
-        }
+    if (category === 'ALL') {
+      const response = await axiosInstance.get(`/notice`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
       });
       return response.data;
-    }else{
-      const response = await axiosInstance.get(`/notice/${category}`,{
-        params : {
-          searchKeyword : String(searchKeyword),
-          page : page,
-        }
+    } else {
+      const response = await axiosInstance.get(`/notice/${category}`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
       });
       return response.data;
     }
-
-
   } catch (error) {
     if (axios.isAxiosError(error)) {
       console.log(error.response?.data);
@@ -48,31 +49,57 @@ export const getNoticeAPIwithCategory = async (searchKeyword:String ="",category
   }
 };
 
-export const getFunSystemAPIwithCategory = async (searchKeyword:String ="",category :String, page:number =0) => {
+export const getFunSystemAPIwithCategory = async (
+  searchKeyword: String = '',
+  category: String,
+  page: number = 0,
+) => {
   try {
-    if(category === "ALL"){
-      const response = await axiosInstance.get(`/funsystem`,{
-        params : {
-          searchKeyword : String(searchKeyword),
-          page : page,
-        }
+    if (category === 'ALL') {
+      const response = await axiosInstance.get(`/funsystem`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
       });
       return response.data;
-    }else{
-      const response = await axiosInstance.get(`/funsystem/${category}`,{
-        params : {
-          searchKeyword : String(searchKeyword),
-          page : page,
-        }
+    } else {
+      const response = await axiosInstance.get(`/funsystem/${category}`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
       });
       return response.data;
     }
-
-
   } catch (error) {
     if (axios.isAxiosError(error)) {
       console.log(error.response?.data);
     }
     return null;
   }
-};
+};
+
+export const getNoticeInfoAPI = async (noticeId: number) => {
+  try {
+    const response = await axiosInstance.get(`/notice/page/${noticeId}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getNoticeInfoCommentAPI = async (noticeId: number) => {
+  try {
+    const response = await axiosInstance.get(`/notice/${noticeId}/comments`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};

src/apis/noticeAPIs.ts

@@ -0,0 +1,105 @@
+import { axiosInstance } from '@/apis/axiosInstance';
+import axios from 'axios';
+
+//Todo : 페이지네이션
+export const getNoticeAPI = async (searchKeyword: String = '') => {
+  try {
+    const response = await axiosInstance.get(`/notice`, {
+      params: {
+        searchKeyword: String(searchKeyword),
+      },
+    });
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getNoticeAPIwithCategory = async (
+  searchKeyword: String = '',
+  category: String,
+  page: number = 0,
+) => {
+  try {
+    if (category === 'ALL') {
+      const response = await axiosInstance.get(`/notice`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
+      });
+      return response.data;
+    } else {
+      const response = await axiosInstance.get(`/notice/${category}`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
+      });
+      return response.data;
+    }
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getFunSystemAPIwithCategory = async (
+  searchKeyword: String = '',
+  category: String,
+  page: number = 0,
+) => {
+  try {
+    if (category === 'ALL') {
+      const response = await axiosInstance.get(`/funsystem`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
+      });
+      return response.data;
+    } else {
+      const response = await axiosInstance.get(`/funsystem/${category}`, {
+        params: {
+          searchKeyword: String(searchKeyword),
+          page: page,
+        },
+      });
+      return response.data;
+    }
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getNoticeInfoAPI = async (noticeId: number) => {
+  try {
+    const response = await axiosInstance.get(`/notice/page/${noticeId}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getNoticeInfoCommentAPI = async (noticeId: number) => {
+  try {
+    const response = await axiosInstance.get(`/notice/${noticeId}/comments`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};

src/components/Home/NoticeFunSystemTab/NoticeFunSystemList.tsx

@@ -2,7 +2,6 @@ import * as styles from '../../notice/NoticeList.styles';
 import NoticeItem, { NoticeItemProps } from '../../notice/NoticeItem';
 import React, { FC, ChangeEvent, useState, useEffect } from 'react';
 
-
 const NoticeList: FC<{ items: NoticeItemProps[] }> = ({ items }) => {
   const [mounted, setMounted] = useState<boolean>(false); //기본 브라우저의 클라이언트 사이드 렌더링 제거
 
@@ -14,12 +13,12 @@ const NoticeList: FC<{ items: NoticeItemProps[] }> = ({ items }) => {
     mounted && (
       <styles.NoticeListBoxShort>
         {items.map((item: NoticeItemProps, key: number) => {
-          return <NoticeItem key={key} item={item} />;
+          return <NoticeItem type="notice" key={key} item={item} />;
         })}
       </styles.NoticeListBoxShort>
     )
   );
 };
 
 export default NoticeList;
-3
+3;

src/components/common/Comment/Comment.style.ts

@@ -2,8 +2,8 @@ import { COLORS } from '@/styles/constants/colors';
 import { TEXT_STYLES } from '@/styles/constants/textStyles';
 import styled from '@emotion/styled';
 
-export const CommentWhiteBox = styled.div`
-  padding: 15px 10px;
+export const CommentWhiteBox = styled.div<{ padding: boolean }>`
+  padding: 15px 10px 15px ${(props) => (props.padding ? '10px' : '60px')};
   display: flex;
 `;