-
#2-6 프로필 화면 만들기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 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;
'React로 nodebirdSNS 만들기 (인프런) > #2 SNS 화면 만들기' 카테고리의 다른 글
#2-7 컴포넌트 분리하기 (0) 2020.01.07 #2-5 메인 화면 만들기 (0) 2020.01.07 #2-4 커스텀 훅 재사용 및 홈 화면 설정,useCallback (0) 2020.01.07 #2-1 _app.js로 레이아웃 분리하기 (0) 2020.01.06