#2. 헤더 부분 구현 | Header, HeaderOption

Header 부분은 로그인 여부와 상관없이 보여지는 부분이다

헤더 부분은 로그인 여부와 상관없이 계속 보여지는 부분이다. 이 부분을 구현하기 위해 Header, HeaderOption으로 컴포넌트를 구성하였다. 우선 Header.js의 코드를 작성하였다.

 

import React from 'react';
import "./Header.css";
import SearchIcon from '@material-ui/icons/Search';
import HeaderOption from './HeaderOption';
import HomeIcon from '@material-ui/icons/Home';
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import ChatIcon from '@material-ui/icons/Chat';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { useDispatch, useSelector } from 'react-redux';
import { logout, selectUser } from './features/userSlice';
import { auth } from './firebase';

function Header() {
    
    //로그인 부분 구현 시 설명할 부분
    
    //redux에서 user에 대한 정보를 가져온다
    const user = useSelector(selectUser);

	//user에 대한 정보를 여기서도 수정할 수 있도록 dispatch 설정
    const dispatch = useDispatch();

	//'me'라고 적힌 부분을 누르면 로그아웃 함수가 작동한다
    const logoutOfApp = () => {
        
        //dispatch로 redux에 설정된 정보에 logout 요청을 보낸다
        dispatch(logout());
        
        //firebase에 내장된 auth 라이브러리로 로그아웃을 진행한다
        auth.signOut();
    };

    return (
        <div className="header">
            {/* 헤더 왼쪽 */}
            //이 부분은 검색창을 구현하는 부분이다
            <div className="header__left">
            	//링크드인 로고 이미지
                <img src="https://cdn.worldvectorlogo.com/logos/linkedin-icon-2.svg" alt="" />
                <div className="header__search">
                    //검색 아이콘을 구현하기 위해 Material UI 라이브러리 사용
                    <SearchIcon />
                    //검색어 입력창
                    <input type="text"></input>
                </div>
            </div>

            {/* 헤더 오른쪽 */}
            //Header 부분의 수많은 Option들을 띄워주는 부분
            <div className="header__right">
            	//각각의 아이콘과 메뉴명을 Props로 HeaderOption에 넘겨준다
                <HeaderOption Icon={HomeIcon} title='Home' />
                <HeaderOption Icon={SupervisorAccountIcon} title='My Network' />
                <HeaderOption Icon={BusinessCenterIcon} title='Jobs' />
                <HeaderOption Icon={ChatIcon} title='Messaging' />
                <HeaderOption Icon={NotificationsIcon} title='Notifications' />
                //'me'라고 적힌 부분을 누르면 logout함수가 작동하도록 EventHandling을 설정하였다.
                <HeaderOption onClick={logoutOfApp} avatar={true} title="me" />
            </div>

        </div>
    )
}

export default Header;

Header 부분에서는 특별한 로직없이 UI 구현이 전부이다. 이때 아이콘 사용을 위해 Material UI라는 라이브러리를 사용하였다.

https://material-ui.com/

Material-UI: A popular React UI framework

 

Header에서 HeaderOption으로 Icon과 title을 Props로 전달해주었기 때문에 이제 이것들을 전달받아 화면에 띄워주도록 HeaderOption.js를 작성한다.

 

import { Avatar } from '@material-ui/core';
import React from 'react'
import { useSelector } from 'react-redux';
import { selectUser } from './features/userSlice';
import './HeaderOption.css'

function HeaderOption({avatar, Icon, title, onClick}) {

	//Redux에서 설정한 user관련 정보를 Selector로 가져온다
    const user = useSelector(selectUser);

    return (
    	//앞서 'me'라고 적힌 부분을 누르면 로그아웃이 되어야 하므로 이 부분을 받아온다.
        <div onClick={onClick} className="headerOption">
        	//Header에서 전달받은 아이콘을 띄워준다
           {Icon && <Icon className="headerOption__icon"/>}
           //프로필 이미지 대신, 유저명의 첫글자를 아이콘으로 띄워준다
           {avatar && (
               <Avatar className="headerOption__icon">{user?.email[0]}</Avatar>
           )}
           //Header에서 전달받은 메뉴명을 띄워준다
           <h3 className="headerOption__title">{title}</h3>
        </div>
    );
}

export default HeaderOption