21.08.16 21:59 작성
·
141
답변 2
0
2021. 08. 17. 12:42
아래 소스 첨부 드립니다.
import { Button, Card } from 'antd';
import Avatar from 'antd/lib/avatar/avatar';
import React, { useCallback } from 'react';
import styled from 'styled-components';
// import PropTypes from 'prop-types';
const UserInfoContainer = styled.div`
display: flex;
justify-content: space-between;
`;
const UserProfile = ({ setIsLoggedIn }) => {
const onLogOut = useCallback(() => {
setIsLoggedIn(false)
}, [])
return (
<Card
actions={[
<div div key='twit' > 짹짹 < br /> 0</div >,
<div key='followings'>팔로잉<br />0</div>,
<div key='followings'>팔로워<br />0</div>,
]}
>
<UserInfoContainer>
<Card.Meta
avatar={<Avatar>OH</Avatar>}
title="OSH"
/>
<Button
onClick={onLogOut}
>
로그아웃
</Button>
</UserInfoContainer>
</Card>
);
}
// UserProfile.propTypes = {
// setIsLoggedIn: PropTypes.bool.isRequired,
// }
export default UserProfile;
import React, { useMemo, useState } from 'react';
import Prototype from 'prop-types'
import Link from 'next/link'
import { Input, Menu, Row, Col } from 'antd'
import 'antd/dist/antd.css'
import styled, { css } from 'styled-components'
import logo from '../img/logo.svg';
import changeLogo from '../img/logo_on.svg';
import UserProfile from '../compontents/UserProfile';
import LoginForm from '../compontents/LoginForm';
const LogoContainter = styled.div`
display: flex;
`;
const UrlLogo = styled.a`
width: 32px;
height: 32px;
display: block;
text-indent: -9999px;
${props =>
props.img &&
css`
background-image: url(${props => props.img});
`
}
&:hover{
background-image: url(${changeLogo});
}
`
const SearchInput = styled(Input.Search)`
vertical-align: middle;
`;
const LinkWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
const AppLayout = ({ children }) => {
const [isLoggeIn, setIsLoggIn] = useState(false)
return (
<>
<Menu mode="horizontal">
<Menu.Item key='1'>
<Link href='/'><a>노드버드</a></Link>
</Menu.Item>
<Menu.Item key='2'>
<Link href='/profile'><a>프로필</a></Link>
</Menu.Item>
<Menu.Item key='3'>
<SearchInput enterButton />
</Menu.Item>
<Menu.Item key='4'>
<Link href='/signup'><a>회원가입</a></Link>
</Menu.Item>
</Menu>
<Row gutter={8}>
<Col xs={24} md={6}>
{
isLoggeIn
? <UserProfile
setIsLoggedIn={setIsLoggIn}
/>
: <LoginForm
setIsLoggedIn={setIsLoggIn}
/>
}
</Col>
<Col xs={24} md={12}>
{/* 프로필 */}
{children}
</Col>
<Col xs={24} md={6}>
<LinkWrapper>
<a
style={useMemo(() => (
{ marginBottom: '10px' }
), [])}
href="https://blog.naver.com/qhanfckwsmsd"
target="_blank"
rel="noreferrer noopener"
>
Made by OSH
</a>
<LogoContainter className='gitLogoContainter'>
<UrlLogo
img={logo}
href="https://github.com/oshosh"
target="_blank"
rel="noreferrer noopener"
>
Github
</UrlLogo>
</LogoContainter>
</LinkWrapper>
</Col>
</Row>
</>
);
}
export default AppLayout;
AppLayout.Prototype = {
children: Prototype.node.isRequired,
}
0
2021. 08. 17. 13:31
UserInfoContainer를 제거하세요.