import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import styled, { css, keyframes } from 'styled-components'; import { FaCrown } from 'react-icons/fa'; import { FiShare } from 'react-icons/fi'; import Rating from '../Global/Rating'; import Button from '../Global/Button'; import HomePhotos from './HomePhotos'; import { Heart } from '../Global/Heart'; import { toggleBookmark } from '../../lib/bookmarkUtils'; const Subject = ({ isLoading, home }) => { const { isLoggedIn } = useSelector(state => state.user); const dispatch = useDispatch(); const onClickBookmark = () => toggleBookmark(isLoggedIn, home, dispatch); const isBookmarked = home && home.isBookmarked; console.log(isBookmarked, typeof isBookmarked); return ( <StDetailTitle> <StH2 isLoading={isLoading}>{home && home.title}</StH2> <StLinkWrapper isLoading={isLoading}> {!isLoading && ( <> <Rating scale="1.4" rate={home.reviews.rating} count={home.reviews.count} /> {home.host.isSupperhost && ( <> <StDot>·</StDot> <StSuperHost> <FaCrown style={{ color: '#FF385C' }} /> <span>슈퍼호스트</span> </StSuperHost> </> )} <StDot>·</StDot> <StLocationLink>{home.address}</StLocationLink> <StButton transition> <FiShare /> 공유하기 </StButton> <StButton transition onClick={onClickBookmark}> <StHeart size="smaller" bgColor={isBookmarked ? 'main' : 'white'} stroke={isBookmarked ? 'main' : 'black'} /> 저장 </StButton> </> )} </StLinkWrapper> <HomePhotos isLoading={isLoading} home={home} /> </StDetailTitle> ); }; const skeleton = keyframes` 0% { opacity: 0.1; } 100% { opacity: 0.3; } `; const skeletonUi = css` background-color: currentColor; animation-name: ${skeleton}; animation-duration: 0.6s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-timing-function: ease-in-out; `; const inlineFlex = css` display: inline-flex; align-items: center; `; const StDetailTitle = styled.section` max-width: 1200px; padding: 0 40px; padding-top: 2.4rem; margin: 0 auto; `; const StH2 = styled.h2` margin-bottom: 0.5rem; font-size: 2.6rem; line-height: 3rem; font-weight: 600; word-break: break-word; ${({ isLoading }) => isLoading && css` width: 48rem; height: 3rem; ${skeletonUi} `} `; const StLinkWrapper = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; font-size: 14px; ${({ isLoading }) => isLoading && css` width: 32rem; height: 16px; margin-top: 1.6rem; margin-bottom: 2.2rem; ${skeletonUi}; `} `; const StDot = styled.span` margin: 0 8px; `; const StSuperHost = styled.span` ${inlineFlex} color: ${({ theme }) => theme.size.darkGray}; & svg { margin-right: 4px; } `; const StLocationLink = styled.a` flex-grow: 1; color: ${({ theme }) => theme.size.darkGray}; text-decoration: underline; `; const StButton = styled(Button)` border: none; padding: 0.8rem; font-size: 14px; text-decoration: underline; & svg { margin-right: 8px; } `; const StHeart = styled(Heart)` height: 16px; `; export default React.memo(Subject);