diff --git a/src/assets/icon/C_badEmoticon.svg b/src/assets/icon/C_badEmoticon.svg
new file mode 100644
index 0000000..c96a0c5
--- /dev/null
+++ b/src/assets/icon/C_badEmoticon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icon/C_goodEmoticon.svg b/src/assets/icon/C_goodEmoticon.svg
new file mode 100644
index 0000000..b7b45ea
--- /dev/null
+++ b/src/assets/icon/C_goodEmoticon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/index.js b/src/assets/index.js
index 1b07f43..f86aaa9 100644
--- a/src/assets/index.js
+++ b/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';
diff --git a/src/components/emoticon/ImoticonInput.jsx b/src/components/emoticon/ImoticonInput.jsx
new file mode 100644
index 0000000..eabd8f3
--- /dev/null
+++ b/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)
+ ? // 좋아요가 이미 클릭된 상태
+ :
+ )
+ : (
+ (clickCategory === 1)
+ ? // 싫어요가 이미 클릭된 상태
+ :
+ )
+ )
+}
+
+export default ImoticonInput;
\ No newline at end of file
diff --git a/src/pages/ConsumptionDetail.jsx b/src/pages/ConsumptionDetail.jsx
index e1fa0fe..9a3110b 100644
--- a/src/pages/ConsumptionDetail.jsx
+++ b/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(){
{consumptionDetail && consumptionDetail.positiveEmoticonCount}
칭찬해요
-
+
-
+
아쉬워요
{consumptionDetail && consumptionDetail.negativeEmoticonCount}