src/components/Header.jsx 파일을 생성해줍니다.

src/components/Header.jsx

import {
  AppBar,
  Avatar,
  Box,
  IconButton,
  Menu,
  MenuItem,
  Toolbar,
  Typography,
} from '@mui/material'
import TagIcon from '@mui/icons-material/Tag'
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import '../firebase' //firebass를 사용하기 위해서 임포트 해야함
import { getAuth, signOut } from 'firebase/auth' //로그아웃

export default function Header() {
  // 유저 정보 가져오기
  const { user } = useSelector(state => state)

  // 메뉴 열림 상태
  const [anchorEl, setAnchorEl] = useState(null)

  // 메뉴 열기
  const handleOpenMenu = event => {
    setAnchorEl(event.currentTarget)
  }

  // 메뉴 닫기
  const handleCloseMenu = () => {
    setAnchorEl(null)
  }

  // 로그아웃
  const handleLogout = async () => {
    await signOut(getAuth())
  }

  return (
    <>
      {/* TODO backgroundColor 테마적용 */}
      <AppBar
        position="fixed"
        sx={{
          zIndex: theme => theme.zIndex.drawer + 1,
          color: '#9a939b',
          backgroundColor: '#4c3c4c',
        }}
      >
        <Toolbar
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            height: '50px',
          }}
        >
          <Box sx={{ display: 'flex' }}>
            <TagIcon />
            <Typography variant="h6" component="div">
              SLACK
            </Typography>
          </Box>
          <Box>
            <IconButton onClick={handleOpenMenu}>
              <Typography
                variant="h6"
                component="div"
                sx={{ color: '#9a939b' }}
              >
                {user.currentUser?.displayName}
              </Typography>
              <Avatar
                sx={{ marginLeft: '10px' }}
                alt="profileImage"
                src={user.currentUser?.photoURL}
              />
            </IconButton>
            <Menu
              sx={{ mt: '45px' }}
              anchorEl={anchorEl}
              open={Boolean(anchorEl)}
              onClose={handleCloseMenu}
              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            >
              <MenuItem>
                <Typography textAlign="center">프로필 이미지</Typography>
              </MenuItem>
              <MenuItem onClick={handleLogout}>
                <Typography textAlign="center">로그아웃</Typography>
              </MenuItem>
            </Menu>
          </Box>
        </Toolbar>
      </AppBar>
    </>
  )
}

위 Header 컴포넌트를 Main.jsx에 이식한다.

import { Box } from '@mui/material'
import React from 'react'
import Header from '../components/Header'

export default function Main() {
  return (
    <>
      {/* TODO backgroundColor 테마 적용 */}
      <Box sx={{ display: 'flex', backgroundColor: 'white' }}>
        <Header />
      </Box>
    </>
  )
}

App.js에 루트를 수정해주도록 한다.

import { Navigate, Route, Routes } from 'react-router-dom'
import './App.css'
import Join from './pages/Join'
import Login from './pages/Login'
import { useEffect } from 'react'
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import { useDispatch, useSelector } from 'react-redux'
import { clearUser, setUser } from './store/userReducer'
import Main from './pages/Main'

function App() {
  const dispatch = useDispatch()

  // useSelector를 사용하여 현재 로그인된 사용자 정보 가져오기
  const { isLoading, currentUser } = useSelector(state => state.user)
  console.log(currentUser)

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(getAuth(), user => {
      if (!!user) {
        dispatch(setUser(user))
      } else {
        dispatch(clearUser())
      }
    })
    return () => unsubscribe()
  }, [dispatch])
  return (
    <>
      <Routes>
        <Route
          path="/"
          element={currentUser ? <Main /> : <Navigate to="/login" />} // 로그인 유저가 있을경우 메인, 없을경우 로그인 페이지로
        />
        <Route path="/login" element={<Login />} />
        <Route
          path="/join"
          element={currentUser ? <Navigate to="/" /> : <Join />} //로그인 유저가 있을 경우 메인으로
        />
      </Routes>
    </>
  )
}

export default App