React SNS 2-3. antd 그리드 시스템

antd 를 사용하여 화면의 디자인을 구성합니다.

 

https://ant.design/components/grid/

Ant Design - A UI Design Language

antd는 반응형 을 기본적으로 제공합니다.

가로 너비 기준

xs : 모바일 

sm : 태플릿

md : 노트북

lg : 데스크탑

 

각각 px이 정해져있습니다.

 

로그인 했을때 어떻게 보여지는지 dummy 데이터로 미리 디자인 한 이미지 입니다.

디자인 이미지

AppLayout.js

import React from 'react';
import Link from 'next/link';
import {Menu, Input , Button, Row , Col , Card , Avatar} from 'antd';
import PropTypes from 'prop-types';

const dummy = {
    nickname : 'Dogveloper',
    Post : [],
    Followings : [],
    Followers : [],
};

const AppLayout = ({children}) =>{
    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item>
                <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item>
                <Menu.Item key="mail">
                    <Input.Search enterButton style={{verticalAlign:'middle'}} />
                </Menu.Item>
            </Menu>
            
            <Row>
                <Col xs={24} md={6} >
                    <Card
                        actions={[
                            <div key="twit">짹짹<br/>{dummy.Post.length}</div>,
                            <div key="following">팔로잉<br/>{dummy.Followings.length}</div>,
                            <div key="follower">팔로워<br/>{dummy.Followers.length}</div>,
                        ]}
                    >
                        <Card.Meta 
                            avatar={<Avatar>{dummy.nickname[0]}</Avatar>}
                            title={dummy.nickname}
                        />
                    </Card>
                    <Link href="/signup"><a><Button>회원가입</Button></a></Link>
                </Col>
                <Col xs={24} md={12} >{children}</Col>
                <Col xs={24} md={6} >세번째</Col>
            </Row>
            
        </div>
    );
};

AppLayout.propTypes = {
    children : PropTypes.node,
};

export default AppLayout;

로그인을 했을때 디자인이며

 

다음포스트는 로그인전에 로그인폼을 디자인 하겠습니다.

 

출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw