React SNS 2-5. 메인화면 만들기

메인 화면 에 작성 글 영역 꾸며주기

 

 

메인페이지

index.js 

import React from 'react';
import { Form , Input , Button, Card , Icon , Avatar} from 'antd';

const dummy = {
    isLoggedIn : true,
    imagePaths: [],
    mainPosts : [{
        User : {
            id : 1,
            nickname : "Dogveloper",
        },
        content : "첫번째 게시글",
        img : 'https://source.unsplash.com/random',
    }],
}

const Home = () =>{
    return (
        <div>
            {dummy.isLoggedIn && <Form style={{marginBottom : "20px"}} encType="multipart/form-data">
                <Input.TextArea maxLength={140} placeholder="리엑트 재밌다.." />
                <div>  
                    <input type="file" multiple hidden />
                    <Button>이미지 업로드</Button>
                    <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button>
                </div>
                <div>
                    {dummy.imagePaths.map((v,i) =>{
                        <div key={v} style={{display:'inline-block'}}>
                            <img src={'http://localhost:3000'+ v} style={{width : '200px'}} all={v} />
                            <div>
                                <Button>제거</Button>
                            </div>
                        </div>
                    })}
                </div>
            </Form>}
            {dummy.mainPosts.map((c) => {
                return (
                    <Card
                        key={+c.createdAt}
                        cover={c.img && <img alt="example" src={c.img} />}
                        actions = {[
                            <Icon type="retweet" key="retweet" />,
                            <Icon type="heart" key="heart" />,
                            <Icon type="message" key="message" />,
                            <Icon type="ellipsis" key="ellipsis" />,
                        ]}
                        extra={<Button>팔로우</Button>}
                    >
                        <Card.Meta
                            avatar={<Avatar>{c.User.nickname[0]}</Avatar>}
                            title={c.User.nickname}
                            description={c.content}
                        />
                    </Card>
                );
            })}
        </div>
    );
};

export default Home;

더미데이터에 랜덤 이미지를 넣어 이미지가 있을때의 화면이 어떻게 구성되어있는지 확인했습니다.

 

거의 대부분 디자인 꾸미는 작업이라 딱히 설명할 곳이 없습니다.

 

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

ZeroCho TV