Feat. 위시리스트 하트 클릭시 하트변경 & api 요청보냄 #45

codesquad-members-2021 · Jun 3, 2021 · 6f39764 · 6f39764
1 parent 796c744
commit 6f39764
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 17 deletions.
diff --git a/frontend/src/components/searchResult/HouseList.tsx b/frontend/src/components/searchResult/HouseList.tsx
@@ -1,10 +1,8 @@
 import { useState } from 'react'
 import styled from 'styled-components'
-import IconButton from '@material-ui/core/IconButton'
-import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
-import FavoriteIcon from '@material-ui/icons/Favorite'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Reservation from '../reservation/Reservation'
+import WishList from './WishListToggle'
 import {
   RecoilValueGroup,
   defaultValue, RoomData
@@ -32,10 +30,12 @@ function HouseList({ data }: any) {
 
     return str.join(` · `)
   }
-
+ 
   const [open, setOpen] = useState(false)
   const [targetData, setTargetData] = useState(null)
   const handleModalClick = (e:React.MouseEvent<HTMLDivElement, MouseEvent>, el:any) => {
+    const target = e.target as Element;
+    if (target.closest('.likeUnClick')!==null) return
     setOpen(true)
     setTargetData(el)
   }
@@ -59,14 +59,7 @@ function HouseList({ data }: any) {
                   {el.home_details.max_guest}명
                 </SmallSpan>
               </div>
-              <LikeBtn>
-                <IconButton aria-label='delete'>
-                  <FavoriteBorderIcon fontSize='large' />
-                </IconButton>
-                {/* <IconButton aria-label='delete'>
-                  <FavoriteIcon color='secondary' />
-                </IconButton> */}
-              </LikeBtn>
+              <WishList setOpen={setOpen} targetData={el}/>
             </div>
             <div>
               <Review>
@@ -91,11 +84,6 @@ const ListTitle = styled.div`
   font-weight: ${({ theme }) => theme.fontWeight.w2};
   font-size: ${({ theme }) => theme.fontSize.lg};
 `
-const LikeBtn = styled.div`
-  position: absolute;
-  top: -16px;
-  left: 356px;
-`
 const PriceBlock = styled.div`
   display: flex;
   flex-flow: column;

diff --git a/frontend/src/components/searchResult/WishListToggle.tsx b/frontend/src/components/searchResult/WishListToggle.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import styled from 'styled-components'
+import IconButton from '@material-ui/core/IconButton'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
+import FavoriteIcon from '@material-ui/icons/Favorite'
+import useAxios from '../../customHook/useAxios'
+import { wishToggle } from '../../customHook/axiosAPI'
+interface IWish {
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  targetData : any
+}
+function WishList({setOpen, targetData}:IWish){
+  const [isHeartClick, setHeartClick] = useState<boolean>(false)
+  const {state, fetchData} = useAxios(()=>wishToggle(targetData.id),[], true)
+  const handleLikeClick = (id:number) =>{
+    setOpen(false)
+    setHeartClick(true)
+    // const response = fetchData()
+    const response = wishToggle(id)
+    console.log(response)
+  }
+
+  return !isHeartClick ? (
+      <LikeBtn className="likeUnClick" onClick={()=>handleLikeClick(targetData.id)}>
+        <IconButton  aria-label='like'>
+          <FavoriteBorderIcon fontSize='large' />
+        </IconButton>
+      </LikeBtn>
+  ) : (<LikeBtn className="likeClick">
+        <IconButton aria-label='like'>
+          <FavoriteIcon color='secondary' />
+        </IconButton> 
+      </LikeBtn>)
+}
+
+const LikeBtn = styled.div`
+  position: absolute;
+  top: -16px;
+  left: 356px;
+`
+export default WishList