[#145] 커뮤니티 api 연결, 반응형으로 수정

src/apis/communityAPIS.ts

@@ -28,9 +28,6 @@ export const getCommunityItemAPI = async (
       return response.data;
     }
   } catch (error) {
-    if (axios.isAxiosError(error)) {
-      console.log(error.response?.data);
-    }
     return null;
   }
 };
@@ -40,9 +37,6 @@ export const getCommunityInfoAPI = async (articleID: number) => {
     const response = await axiosInstance.get(`/community/article/${articleID}`);
     return response.data;
   } catch (error) {
-    if (axios.isAxiosError(error)) {
-      console.log(error.response?.data);
-    }
     return null;
   }
 };
@@ -54,9 +48,41 @@ export const getCommunityInfoCommentAPI = async (articleID: number) => {
     );
     return response.data;
   } catch (error) {
-    if (axios.isAxiosError(error)) {
-      console.log(error.response?.data);
-    }
+    return null;
+  }
+};
+
+export const postCommunityScrapAPI = async (
+  articleID: number,
+  isActive: boolean,
+) => {
+  try {
+    const response = await axiosInstance.post(
+      `/community/article/${articleID}/scrap?isActive=${isActive}`,
+    );
+    return response.data;
+  } catch (error) {
+    return null;
+  }
+};
+
+export const postCommunityLikeAPI = async (articleID: number) => {
+  try {
+    const response = await axiosInstance.post(
+      `/community/article/${articleID}/like`,
+    );
+    return response.data;
+  } catch (error) {
+    return null;
+  }
+};
+export const postCommunityDislikeAPI = async (articleID: number) => {
+  try {
+    const response = await axiosInstance.post(
+      `/community/article/${articleID}/dislike`,
+    );
+    return response.data;
+  } catch (error) {
     return null;
   }
 };

src/components/Home/NoticeFunSystem/NoticeFunSystem.styles.tsx

@@ -1,71 +1,70 @@
 import styled from '@emotion/styled';
 import { TEXT_STYLES } from '@/styles/constants/textStyles';
 export const SummaryBox = styled.div`
-  width : 100%;
-  heigth : 264px;
-  padding : 16px 24px;
-  background: #FFFFFF;
+  width: 100%;
+  height: 264px;
+  padding: 16px 24px;
+  background: #ffffff;
 `;
 export const TopBox = styled.div`
-  display : flex; 
+  display: flex;
   justify-content: space-between;
 `;
 
 export const Title = styled.div`
   ${TEXT_STYLES.HeadM20};
-  left : 0px;
-
+  left: 0px;
 `;
 export const MoreButton = styled.div`
   ${TEXT_STYLES.CapR14};
-  color : #6E6E6E;
-  margin-top : 4px;
-  display : flex;
-  align-items : center;
+  color: #6e6e6e;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
 `;
 
 export const TextBox = styled.div`
   box-sizing: border-box;
   position: relative;
   width: 100%;
-  height : 170px;
-  margin-top : 16px;
-  background: #FFFFFF;
-  border: 1px solid #D9D9D9;
+  height: 170px;
+  margin-top: 16px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.05);
   border-radius: 15px;
 `;
 
-export const Line = styled.div<{top : string}>`
-  width : 100%;
-  height : 1px;
-  top : ${(props)=> props.top};
-  position : absolute;
-  background-color : #D9D9D9;
+export const Line = styled.div<{ top: string }>`
+  width: 100%;
+  height: 1px;
+  top: ${(props) => props.top};
+  position: absolute;
+  background-color: #d9d9d9;
 `;
 
-export const TextLine = styled.div<{top : string}>`
-  display : flex; 
-  width : 100%;
-  position : absolute;
+export const TextLine = styled.div<{ top: string }>`
+  display: flex;
+  width: 100%;
+  position: absolute;
   // margin : 0px 12px;
-  top : ${(props)=> props.top};
-  box-sizing : border-box;
+  top: ${(props) => props.top};
+  box-sizing: border-box;
 `;
 
 export const TextSummary = styled.div`
   ${TEXT_STYLES.BodyM16};
-  white-space : nowrap;
-  overflow : hidden;
-  display : auto;
-  text-overflow : ellipsis;
-  padding-right : 50px;
+  white-space: nowrap;
+  overflow: hidden;
+  display: auto;
+  text-overflow: ellipsis;
+  padding-right: 50px;
   padding-left: 12px;
 `;
 
 export const Date = styled.div`
   ${TEXT_STYLES.CapR14};
-  color : #6E6E6E;
-  position : absolute;
-  right : 12px;
-`;
+  color: #6e6e6e;
+  position: absolute;
+  right: 12px;
+`;

src/components/Home/NoticeFunSystem/NoticeFunSystem.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import * as styles from './NoticeFunSystem.styles';
 import RightArrow from '@icons/icon/Arrow/RightSmallArrow.svg';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 
 export interface SummaryText {
   id: number;
@@ -17,11 +18,21 @@ export interface NoticeFunSystemProps {
 }
 
 const NoticeFunSystem = (props: NoticeFunSystemProps) => {
+  const router = useRouter();
+
+  function handleOnClickMore() {
+    if (props.title === '공지사항') {
+      router.push('/notice');
+    } else {
+      router.push('/funsystem');
+    }
+  }
+
   return (
     <styles.SummaryBox>
       <styles.TopBox>
         <styles.Title>{props.title}</styles.Title>
-        <styles.MoreButton>
+        <styles.MoreButton onClick={handleOnClickMore}>
           더보기
           <Image src={RightArrow} alt="right arrow" />
         </styles.MoreButton>

src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.styles.ts

@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
 import Image from 'next/image';
 import { TEXT_STYLES } from '@/styles/constants/textStyles';
-import {COLORS} from '@/styles/constants/colors';
+import { COLORS } from '@/styles/constants/colors';
 
 export const SearchBarBox = styled.div`
-  width : 100%;
-  height :56px;
-  padding-left : 16px;
-  padding-right : 16px;
-  padding-bottom : 8px; 
-  box-sizing : border-box;
+  width: 100%;
+  height: 56px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-bottom: 8px;
+  box-sizing: border-box;
   background: ${COLORS.grayscale.white};
 `;
 
@@ -26,17 +26,19 @@ export const Input = styled.input`
   border: none;
   outline: none;
   ${TEXT_STYLES.BodyM16};
+  background-color: white;
+  color: ${COLORS.grayscale.Black};
 `;
 
 export const GlassImage = styled(Image)`
   margin-right: 10px;
 `;
 export const Circle = styled.div`
   margin-right: 15px;
-  width : 18px;
-  height : 18px;
-  border-radius : 50%;
-  background-color : ${COLORS.grayscale.Gray3};
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: ${COLORS.grayscale.Gray3};
 `;
 export const CancelImage = styled(Image)`
   filter: brightness(0) invert(1);

src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.tsx

@@ -3,7 +3,11 @@ import * as styles from './LineSearchBar.styles';
 import searchicon from '@icons/icon/Search/BlueSearch.svg';
 import cancelicon from '@icons/icon/SubscribeList/Cancel.svg';
 
-const LineSearchBar = ({onSearch}:{onSearch : (searchText:string)=>void}) => {
+const LineSearchBar = ({
+  onSearch,
+}: {
+  onSearch: (searchText: string) => void;
+}) => {
   const [searchText, setSearchText] = useState('');
 
   const handleOnKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -15,7 +19,7 @@ const LineSearchBar = ({onSearch}:{onSearch : (searchText:string)=>void}) => {
   const handleClearSearch = () => {
     setSearchText('');
   };
-  const handleSearch = () =>{
+  const handleSearch = () => {
     onSearch(searchText);
   };
 
@@ -30,18 +34,23 @@ const LineSearchBar = ({onSearch}:{onSearch : (searchText:string)=>void}) => {
           onChange={(e) => setSearchText(e.target.value)}
         />
         <styles.Circle onClick={handleClearSearch}>
-          <styles.CancelImage src={cancelicon} width={18} height={18} alt={''} />
+          <styles.CancelImage
+            src={cancelicon}
+            width={18}
+            height={18}
+            alt={''}
+          />
         </styles.Circle>
-        
-        <styles.GlassImage 
+
+        <styles.GlassImage
           src={searchicon}
-          width={24} 
-          height={24} 
-          alt={''} 
-          onClick={handleSearch}/>
+          width={24}
+          height={24}
+          alt={''}
+          onClick={handleSearch}
+        />
       </styles.SearchBarStyles>
     </styles.SearchBarBox>
-
   );
 };