#2-3 antd 그리드 시스템

- xs:모바일 , sm: 작은 화면, md: 중간 화면 , lg: 큰 화면 

 

- Card: 로그인한 회원정보를 이런 컴포넌트로 나타냄

- Avatar: 디자인

 

- antd 참조

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

// 가짜 데이터
const dummy = {
  nickname: "정중식",
  Post: [],
  Following: [],
  Follower: []
};

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>
      <Link href="/signup">
        <a>
          <Button>회원가입</Button>
        </a>
      </Link>
      <Row>
        <Col xs={24} md={6}>
          <Card
            actions={[
              <div key="twit">
                짹짹
                <br />
                {dummy.Post.length}
              </div>,
              <div key="following">
                팔로잉
                <br />
                {dummy.Following.length}
              </div>,
              <div key="follower">
                팔로워
                <br />
                {dummy.Follower.length}
              </div>
            ]}
          >
            <Card.Meta
              avatar={<Avatar>{dummy.nickname[0]}</Avatar>}
              title={dummy.nickname}
            />
          </Card>
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          세번째
        </Col>
      </Row>
    </div>
  );
};

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

export default AppLayout;

- 결과물