feat: ✨이모티콘 POST api 연결

src/assets/index.js

@@ -4,8 +4,12 @@ export {ReactComponent as ICFriend} from './icon/friend.svg';
 export {ReactComponent as ICHome} from './icon/home.svg';
 export {ReactComponent as ICSetting} from './icon/setting.svg';
 export {ReactComponent as ICProfile} from './icon/profile.svg';
+
 export {ReactComponent as ICGoodEmoticon} from './icon/goodEmoticon.svg';
 export {ReactComponent as ICBadEmoticon} from './icon/badEmoticon.svg';
+export {ReactComponent as ICCheckGoodEmoticon} from './icon/C_goodEmoticon.svg';
+export {ReactComponent as ICCheckBadEmoticon} from './icon/C_badEmoticon.svg';
+
 export {ReactComponent as ICComment} from './icon/comment.svg';
 export {ReactComponent as ICArrowLeft} from './icon/arrowLeft.svg';
 export {ReactComponent as ICArrowRight} from './icon/arrowRight.svg';

src/components/emoticon/ImoticonInput.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { client } from '../../libs/api';
+import {ICGoodEmoticon, ICBadEmoticon, ICCheckGoodEmoticon, ICCheckBadEmoticon} from '../../assets';
+
+function ImoticonInput({cHistoryID, category, clickCategory}) {
+    const user = JSON.parse(sessionStorage.getItem("user"));
+
+    // 클릭하지 않은 이모티콘 클릭 -> post
+    const newClick = async () => {
+        const postData = {
+            userID: user.userID,
+            category: category
+        }
+        const {data} =  await client.post(`/emoticon/${cHistoryID}`,{...postData});
+        if(data.success){
+            window.location.reload();
+        }
+    }
+
+    // 클릭한 적이 있는 이모티콘 클릭 -> delete
+    const oldClick = async () => {
+        const deleteData = {
+            userID: user.userID,
+            category: category
+        }
+        const {data} =  await client.delete(`/emoticon/${cHistoryID}`,{...deleteData});
+        if(data.success){
+            window.location.reload();
+        }
+    }
+
+    return(
+        (category === 0)
+        ? (
+            (clickCategory === 0) 
+            ? <ICGoodEmoticon onClick={oldClick} width="25" height="25"/> // 좋아요가 이미 클릭된 상태
+            : <ICGoodEmoticon onClick={newClick} width="25" height="25"/>
+        )
+        : (
+            (clickCategory === 1)
+            ? <ICBadEmoticon onClick={oldClick} width="25" height="25"/> // 싫어요가 이미 클릭된 상태
+            : <ICBadEmoticon onClick={newClick} width="25" height="25"/>
+        )
+    )
+}
+
+export default ImoticonInput;

src/pages/ConsumptionDetail.jsx

@@ -5,19 +5,22 @@ import styled from 'styled-components';
 import { client } from '../libs/api';
 import Header from '../components/common/Header';
 import Navigator from '../components/common/Navigator';
-import {ICProfile, ICGoodEmoticon, ICBadEmoticon} from '../assets';
+import {ICProfile} from '../assets';
 
 import Tag from '../components/common/TagDesign';
 import CommentInput from '../components/comment/CommentInput';
+import ImoticonInput from '../components/emoticon/ImoticonInput';
 
 function ConsumptionDetail(){
     const {search} = useLocation();
     const cHistoryID = queryString.parse(search).id;
+    const user = JSON.parse(sessionStorage.getItem("user"));
 
     const [consumptionDetail, setConsumptionDetail] = useState();
     const [comment, setComment] = useState();
     const [replyActive, setReplyActive] = useState(false);
     const [replyCommentInfo, setReplyCommentInfo] = useState([]);
+    const [emoticon, setEmoticon] = useState();
 
     const getConsumptionDetailData = async () => {
         const {data} = await client.get(`/consumptions/${cHistoryID}`);
@@ -28,11 +31,21 @@ function ConsumptionDetail(){
     const getCommentData = async() => {
         const {data} = await client.get(`/comment/${cHistoryID}`);
         data.data && setComment(data.data);
+        console.log(data);
         console.log(comment);
     }
+
+        // 유저가 해당 소비내역에 남긴 좋아요/ 싫어요 정보 가져오기
+    const getEmoticonData = async() => {
+        let {data} = await client.get(`/emoticon/${cHistoryID}/${user.userID}`);
+        data.data && setEmoticon(data.data);
+        console.log(emoticon);
+    }
+
     useEffect(() => {
         getConsumptionDetailData();
         getCommentData();
+        getEmoticonData();
     },[]);
 
     return(
@@ -70,10 +83,10 @@ function ConsumptionDetail(){
                     <StyledGoodEmoticon>
                         <p>{consumptionDetail && consumptionDetail.positiveEmoticonCount}</p>
                         <p>칭찬해요</p>
-                        <ICGoodEmoticon width="25" height="25"></ICGoodEmoticon>
+                        <ImoticonInput cHistoryID={cHistoryID} category={0} clickCategory={emoticon}/>
                     </StyledGoodEmoticon>
                     <StyledBadEmoticon>
-                        <ICBadEmoticon width="25" height="25"></ICBadEmoticon>
+                        <ImoticonInput cHistoryID={cHistoryID} category={1} clickCategory={emoticon}/>
                         <p>아쉬워요</p>
                         <p>{consumptionDetail && consumptionDetail.negativeEmoticonCount}</p>
                     </StyledBadEmoticon>