닉네임 수정폼 만들기
profile.js
import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';
import NicknameEditForm from '../components/NicknameEditForm';
const Profile = () => {
return(
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>
<NicknameEditForm/>
</AppLayout>
</>
)
}
export default Profile;NicknameEditForm.js
import React, { useMemo } from 'react';
import { Form, Input } from 'antd';
const NicknameEditForm = () => {
const style = useMemo(()=>({
marginBottm:'20px',
border:'1px solid #d9d9d9',
padding:'20px',
}), [])
return(
<Form style={style}>
<Input.Search addonBefore="닉네임" enterButton="수정" />
</Form>
)
}
export default NicknameEditForm;
팔로워, 팔로잉 리스트 만들기
임시로 더미 리스트를 만들어 준다 followerList, followingList
profile.js
import FollowList from '../components/FollowList';
const Profile = () => {
const followerList = [{ nickname:'제로초' }, { nickname:'바보' }, { nickname:'노드버드오피셜' }];
const followingList = [{ nickname:'제로초' }, { nickname:'바보' }, { nickname:'노드버드오피셜' }];
return(
<>
<AppLayout>
<FollowList header="팔로잉 목록" data={followingList}/>
<FollowList header="팔로워 목록" data={followerList}/>
</AppLayout>
</>
)
}
export default Profile;FollowList.js
import React from 'react';
import { StopOutlined } from '@ant-design/icons';
import { List, Button, Card } from 'antd';
import PropTypes from 'prop-types';
const FollowList = ({ header, data }) => {
return(
<List
style={{marginBottom:20}}
grid={{ gutter:4, xs:2, md:3 }}
size="small"
header={<div>{header}</div>}
loadMore={<div style={{ textAlign:'center', margin:'10px 0' }}><Button>더 보기</Button></div>}
bordered
dataSource={data}
renderItem={(item)=>(
<List.Item style={{ marginTop:20 }}>
<Card actions={[<StopOutlined key="stop"/>]}>
<Card.Meta description={item.nickname} />
</Card>
</List.Item>
)}
/>
)
}
FollowList.propTypes = {
header : PropTypes.string.isRequired,
data : PropTypes.array.isRequired,
}
export default FollowList;
List안에있는 인라인스타일들은 나중에 최적화를 해줘야한다.
List안에는 구성요소가 많은데 외울 필요없이 공식문서를 참고 하면된다.
https://ant.design/components/list
