7-1. UserThumbnail 만들기

유저 기본 프로필 이미지 저장

먼저, 유저 기본 프로필 이미지를 추가하겠습니다.

위 이미지를 클라이언트쪽 디렉토리 public/static/images/default_thumbnail.png 에 저장하세요. 만약에 사용하고싶은 기본 이미지가 있다면 다른 파일을 사용해도 됩니다.

유저 썸네일 보여주기

src/components/Base/Header/UserThumbnail.js

import React from 'react';
import styled from 'styled-components';
import oc from 'open-color';

const Wrapper = styled.div`
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;

    background: ${oc.cyan[5]};
    background-image: url(${props => props.image});
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    &:hover {
        filter: brightness(105%);
    }
`;

const UserThumbnail = ({thumbnail, onClick}) => (
    <Wrapper image={thumbnail} onClick={onClick}>

    </Wrapper>
);

export default UserThumbnail;

위 컴포넌트는 썸네일로 사용할 이미지 thumbnail 과, 클릭 되었을 때 실행 할 액션 onClick 을 props 로 전달 받습니다.

컴포넌트를 만든 다음에는, 헤더 컴포넌트 인덱스에 설정하세요.

src/components/Base/Header/UserThumbnail.js

export { default } from './Header';
export { default as LoginButton } from './LoginButton';
export { default as UserThumbnail } from './UserThumbnail';

그리고 나서, 위 컴포넌트를 HeaderContainer 컴포넌트에서 보여줍니다. thumbnail 의 값으로는 user 리듀서가 지니고있는 loggedInfo 안에 있는 썸네일 값을 사용합니다.

src/containers/Base/HeaderContainer.js

import Header, { LoginButton, UserThumbnail } from 'components/Base/Header';

(...)

class HeaderContainer extends Component {

    (...)

    render() {
        const { visible, user } = this.props;
        if(!visible) return null;



        return (
            <Header>
                { user.get('logged') 
                    ? (
                        <UserThumbnail thumbnail={user.getIn(['loggedInfo', 'thumbnail'])}/>
                    )
                    : <LoginButton/> 
                }
            </Header>
        );
    }
}

(...)

;

이제 썸네일이 보여졌습니다.