Avatar component

들어가기
간단한 Photo의 header, page의 header에 사용될 Avatar component
별로 어렵고 할 거는 없음.
사진을 뿌리는 방법 확인할것!

1. src/components/Avatar.js

url받는부분

import styled from 'styled-components'

const SAvatar = styled.div`
  width: ${(props) => (props.lg ? '35px' : '25px')};
  height: ${(props) => (props.lg ? '35px' : '25px')};
  border-radius: 15px;
  /* background-color: #2c2c2c; */
  overflow: hidden;
`
const Img = styled.img`
  max-width: 100%;
`
function Avatar({ url = '', lg = false }) {
  return <SAvatar lg={lg}>{url !== '' ? <Img src={url} /> : null}</SAvatar>
}

export default Avatar

2. Header.js

url보내주는 부분

return (
    <SHeader>
      <Wrapper>
        <Column>
          <FontAwesomeIcon icon={faInstagram} size="2x" />
        </Column>
        <Column>
          {isLoggedIn ? (
            <IconsContainer>
              <Icon>
                <FontAwesomeIcon icon={faHome} size="lg" />
              </Icon>
              <Icon>
                <FontAwesomeIcon icon={faCompass} size="lg" />
              </Icon>
              <Icon>
                <Avatar url={data?.me?.avatar} />
                /////////이부분만 확인할 것!!!!
                
              </Icon>
              <Icon onClick={logOut}>
                <FontAwesomeIcon size="lg" icon={faUser} />
              </Icon>
            </IconsContainer>
          ) : (
            <Link to={routes.home}>
              <Button>Login</Button>
            </Link>
          )}
        </Column>
      </Wrapper>
    </SHeader>
  )