Header and Layout. Home.js

instagram의 맨처음 page
나의 사진 및 follower들의 update된 사진을 볼 수 있음.
component로 다 분리 시키니 잘따라올것 ㅠㅠ

1. src/components/Layout.js

import styled from 'styled-components'
import Header from './Header'

const Content = styled.main`
  margin: 0 auto;
  //가운데 정렬 할떄 사용!
  margin-top: 45px;
  max-width: 930px;
  width: 100%;
`

function Layout({ children }) {
  return (
    <>
      <Header />
      <Content>{children}</Content>
    </>
  )
}

export default Layout

2. App.js

 return (
    <ApolloProvider client={client}>
      <HelmetProvider>
        <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
          <GlobalStyles />
          <Router>
            <Routes>
              <Route
                path={routes.home}
                exact
                element={
                  isLoggedIn ? (
                    <Layout>
                      <Home />
                    </Layout>
                    ///위에서 만든 Layout.js로 덥어버림. <Header/>를 적용시키기 위해서
                    
                  ) : (
                    <Layout>
                      <Login />
                    </Layout>
                  )
                }
              />
              {isLoggedIn ? null : (
                <Route path={routes.signUp} element={<SignUp />} />
              )}
              <Route path="/nomad" element={<Nomad />} />
            </Routes>
          </Router>
        </ThemeProvider>
      </HelmetProvider>
    </ApolloProvider>
  )

3. src/components/Header.js

  
  import styled from 'styled-components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faInstagram } from '@fortawesome/free-brands-svg-icons'
import { isLoggedInVar } from '../apollo'
import { faHome } from '@fortawesome/free-solid-svg-icons'
import { faCompass, faUser } from '@fortawesome/free-regular-svg-icons'
import { Link } from 'react-router-dom'
import routes from '../routes'
import { LOCALSTORAGE_TOKEN } from '../constant'
import { useReactiveVar } from '@apollo/client'
import useUser from '../hooks/useUser'
import Avatar from './Avatar'

const logOut = () => {
  localStorage.removeItem(LOCALSTORAGE_TOKEN)
  isLoggedInVar(false)
}
///logOut Fn 사용하고 싶은데서 가져다 사용하면됨.
///localStorage에서 token을 delete함.

const SHeader = styled.header`
  width: 100%;
  border-bottom: 1px solid ${(props) => props.theme.borderColor};
  background-color: ${(props) => props.theme.bgColor};
  padding: 18px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
`
const Wrapper = styled.div`
  max-width: 930px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
`
const Column = styled.div``
const Icon = styled.span`
  margin-left: 15px;
`

const Btn = styled.span`
  background-color: ${(props) => props.theme.accent};
  color: black;
  border-radius: 4px;
  padding: 5px 15px;
  font-weight: 600;
`
const Button = styled.span`
  background-color: ${(props) => props.theme.accent};
  border-radius: 4px;
  padding: 4px 15px;
  color: white;
  font-weight: 600;
`
const IconsContainer = styled.div`
  display: flex;
  align-items: center;
`

function Header() {
  const { data } = useUser()
  ///useUser hook을 사용해 loggedInUser의 data 불러옴.

  const isLoggedIn = useReactiveVar(isLoggedInVar)
  ///login 여부를 사용하기 위해 isLoggedIn을 여기서도 사용할 수 있음.
  
  return (
    <SHeader>
      <Wrapper>
        <Column>
          <FontAwesomeIcon icon={faInstagram} size="2x" />
          ///FontAwesomeIcon사용!!
        </Column>
        <Column>
          {isLoggedIn ? (
            <IconsContainer>
              <Icon>
                <FontAwesomeIcon icon={faHome} size="lg" />
              </Icon>
              <Icon>
                <FontAwesomeIcon icon={faCompass} size="lg" />
              </Icon>
              <Icon>
                <Avatar url={data?.me?.avatar} />
                //Avatar component에 useUser로 볼러온 avatar url을 보내줌.
                
              </Icon>
              <Icon onClick={logOut}>
                <FontAwesomeIcon size="lg" icon={faUser} />
              </Icon>
            </IconsContainer>
          ) : (
            <Link to={routes.home}>
              <Button>Login</Button>
            </Link>
            ///login이 안되어잇을떄, 보여주는 부분, Login을 클릭하면, login page로 감.
            
          )}
        </Column>
      </Wrapper>
    </SHeader>
  )
}

export default Header

다음에 header를 이용할 때, 이 형식대로 가져다 사용하면 됨