import React, { useEffect, useRef } from 'react'; import { useDispatch } from 'react-redux'; import styled, { css } from 'styled-components'; import Division from './Division'; import Button from '../Global/Button'; import { setScrollLocationY } from '../../Modules/home'; const Amenities = ({ home, isScreenMedium }) => { const ref = useRef(); const dispatch = useDispatch(); useEffect(() => { dispatch(setScrollLocationY('amenitiesRef', ref.current)); }, []); return ( <Division title="편의시설" sentRef={ref}> <StAmenityList> {home.amenities.map((amenity, i) => { if (isScreenMedium && i > 4) return; const noIcon = amenity.icon === 'None'; return ( <StAmenity key={i} noIcon={noIcon}> <svg aria-hidden="true" role="presentation" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" // dangerouslySetInnerHTML={{ // __html: `<path d="${amenity.icon}"></path>`, // }} > <path d={ !noIcon ? amenity.icon : 'M25 2a5 5 0 0 1 4.995 4.783L30 7v18a5 5 0 0 1-4.783 4.995L25 30H7a5 5 0 0 1-4.995-4.783L2 25V7a5 5 0 0 1 4.783-4.995L7 2zm0 2H7a3 3 0 0 0-2.995 2.824L4 7v18a3 3 0 0 0 2.824 2.995L7 28h18a3 3 0 0 0 2.995-2.824L28 25V7a3 3 0 0 0-2.824-2.995zM11.1 17a5.006 5.006 0 0 0 3.9 3.9v2.03A7.005 7.005 0 0 1 9.071 17zm9.8 0l2.029.001a7.005 7.005 0 0 1-5.928 5.928v-2.03A5.006 5.006 0 0 0 20.9 17zM16 13a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm1.001-5.929A7.005 7.005 0 0 1 22.929 15H20.9A5.006 5.006 0 0 0 17 11.1zm-2.001 0v2.03A5.006 5.006 0 0 0 11.1 15H9.07A7.005 7.005 0 0 1 15 9.07zM23 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2z' } /> </svg> <span>{!noIcon ? amenity.name : '일산화탄소 경보기'}</span> </StAmenity> ); })} </StAmenityList> <Button padding="13px 23px" transition> 편의시설 모두 보기 </Button> </Division> ); }; const StAmenityList = styled.ul` margin-bottom: 24px; @media ${({ theme }) => theme.size.medium} { max-height: 200px; overflow: hidden; } `; const StAmenity = styled.li` display: inline-flex; align-items: center; width: calc(50% - 2rem); margin-right: 2rem; padding-bottom: 16px; @media ${({ theme }) => theme.size.medium} { width: 100%; margin-right: 0; } svg { display: block; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin-right: 16px; fill: currentcolor; } ${({ noIcon }) => noIcon && css` svg { fill: ${({ theme }) => theme.color.gray}; } span { text-decoration: line-through; } `} `; export default Amenities;