React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기
#2-6 프로필 화면 만들기
정중식
2020. 1. 7. 16:57
- profile.js
import React from "react";
import { Form, Button, Input, List, Icon, Card } from "antd";
// 내가 팔로잉 하고있는 사람 혹은 내가 쓴 게시글 볼 수있는 화면
const Profile = () => {
return (
<div>
<Form
style={{
marginBottom: "20px",
border: "1px solid #d9d9d9",
padding: "20px"
}}
>
<Input addonBefore="닉네임" />
<Button type="primary">수정</Button>
</Form>
<List
style={{ marginBottom: "20px" }}
grid={{ gutter: 4, xs: 2, md: 3 }}
size="small"
header={<div>팔로잉 목록</div>}
loadMore={<Button style={{ width: "100%" }}>더 보기</Button>}
bordered
dataSource={["정중식", "정백구", "정백설"]}
renderItem={item => (
<List.Item style={{ marginTop: "20px" }}>
<Card actions={[<Icon key="stop" type="stop" />]}>
<Card.Meta description={item} />
</Card>
</List.Item>
)}
/>
<List
style={{ marginBottom: "20px" }}
grid={{ gutter: 4, xs: 2, md: 3 }}
size="small"
header={<div>팔로워 목록</div>}
loadMore={<Button style={{ width: "100%" }}>더 보기</Button>}
bordered
dataSource={["정중식", "정백구", "정백설"]}
renderItem={item => (
<List.Item style={{ marginTop: "20px" }}>
<Card actions={[<Icon key="stop" type="stop" />]}>
<Card.Meta description={item} />
</Card>
</List.Item>
)}
/>
</div>
);
};
export default Profile;