instagram의 맨처음 page
나의 사진 및 follower들의 update된 사진을 볼 수 있음.
component로 다 분리 시키니 잘따라올것 ㅠㅠ
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
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>
)
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를 이용할 때, 이 형식대로 가져다 사용하면 됨