mash-up-kr#2 heart state 수정

godjoy · Mar 26, 2021 · 69be1af · 69be1af
1 parent 12161ec
commit 69be1af
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/components/answerlist/AnswerItem.tsx b/src/components/answerlist/AnswerItem.tsx
@@ -1,15 +1,24 @@
 import React, { useState } from 'react'
 import * as Styled from './AnswerItem.Styled'
 import { Answer, AnswerListProps } from 'types/Answer'
-import heart from './../../assets/heart.svg'
+import redheart from './../../assets/heart.svg'
+import grayheart from './../../assets/grayheart.svg'
 
 interface AnswerItemProps {
   answer: any
 }
 
 function AnswerItem({ answer }: AnswerItemProps) {
-  const [like, setLike] = useState<number>(answer.likeNum)
-  const addLike = () => setLike(like + 1)
+  const [likeNum, setLikeNum] = useState(answer.likeNum)
+  const [like, setLike] = useState(answer.like)
+  const [heart, setHeart] = useState(answer.like ? redheart : grayheart)
+
+  const addLike = () => {
+    setLikeNum(like ? likeNum - 1 : likeNum + 1)
+    setLike(!like)
+    setHeart(like ? grayheart : redheart)
+    console.log(like)
+  }
 
   return (
     <Styled.AnswerArea>
@@ -18,8 +27,8 @@ function AnswerItem({ answer }: AnswerItemProps) {
       <Styled.AnswerInfoBlock>
         <div className="time">{answer.time}</div>
         <div className="likeButton" onClick={addLike}>
-          <img src={heart} alt="heart icon" />
-          {like}
+          <img src={heart} alt="heart icon" onClick={addLike} />
+          {likeNum}
         </div>
       </Styled.AnswerInfoBlock>
     </Styled.AnswerArea>

diff --git a/src/pages/Concern.tsx b/src/pages/Concern.tsx
@@ -20,6 +20,7 @@ const dummy: Answer[] = [
     contents:
       '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...',
     time: '2010.02.12 오전 08:00',
+    like: true,
     likeNum: 10,
   },
   {
@@ -28,6 +29,7 @@ const dummy: Answer[] = [
     contents:
       '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...',
     time: '2010.02.12 오전 08:01',
+    like: false,
     likeNum: 20,
   },
   {
@@ -36,6 +38,7 @@ const dummy: Answer[] = [
     contents:
       '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...',
     time: '2010.02.12 오전 08:01',
+    like: false,
     likeNum: 20,
   },
   {
@@ -44,6 +47,7 @@ const dummy: Answer[] = [
     contents:
       '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...',
     time: '2010.02.12 오전 08:01',
+    like: true,
     likeNum: 20,
   },
 ]
diff --git a/src/types/Answer.ts b/src/types/Answer.ts
@@ -6,5 +6,6 @@ export interface Answer {
   name: string
   contents: string
   time: string
+  like: boolean
   likeNum: number
 }