인프런 커뮤니티 질문&답변

질문)짹짹을 눌렀을 때 게시물이 우측에 정렬되는데 어떻게 해야 아래로 정렬될까요?

현재 게시물 추가시 화면)

작성한 코드)

PostForm.js

import React,{useCallback, useState, useRef} from 'react';
import {Form, Input, Button} from 'antd';
import {useSelector, useDispatch} from 'react-redux';
import {addPost} from '../reducers/post';

const PostForm = () => {
        const {imagePaths} = useSelector((state) => state.post);
        const dispatch = useDispatch();
        const imageInput =  useRef();
        const [text, setText] = useState('');
        const onChangeText = useCallback((e) => {
            setText(e.target.value);
        }, [])
        const onSubmit = useCallback(()=> {
            dispatch(addPost);
            setText('');
        });
        const onClickImageUpload = useCallback(() => {
            imageInput.current.click();
        }, [imageInput.current]);
    return (
        <Form style={{ margin: '10px 0 20px'}} encType="multipart/form-data" onFinish={onSubmit}>
            <Input.TextArea 
                value={text} 
                onChange={onChangeText} 
                maxLength={140} 
                placeholder="어떤 신기한 일이 있었나요?"
            />
            <div>
                <input type="file" multiple hidden ref={imageInput}/>
                <Button onClick={onClickImageUpload}>이미지 업로드</Button>
                <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button>
            </div>
            <div>
                {imagePaths.map((v) => (
                    <div key={v} style={{display: 'inline-block'}}>   
                        <img src={v} style={{width:'200px'}} alt={v}/>
                        <div>
                            <Button>제거</Button>
                        </div>
                    </div>
                ))}
            </div>
        </Form>
    )
}
export default PostForm;

post.js

export const initalState = {
    mainPosts:[{
        id:1,
        User:{
            id:1,
            nickname: '해지니1',
        },
        content: '첫 번째 게시글 #해시태그 #행복한집사생활',
        Images:[{
            src: 'https://loremflickr.com/640/360'
        },{
            src: 'https://placekitten.com/640/360'
        },{ 
            src: 'https://picsum.photos/640/360'
        }],
        Comments: [{
            User: {
                nickname:'해지니2'
            }, 
            content: '고양이는 다 기여벙',
        }, {
            User: {
                nickname:'해지니3'
            }, 
            content: '냥냥냥'
        }]
    }],
    imagePaths: [], //게시물 저장 경로
    postAdded: false //게시글 추가 완료시 true
}

const ADD_POST = 'ADD_POST'; 
export const addPost = {
    type: ADD_POST
}

const dummyPost = {
    id: 2,
    content: '더미데이터',
    User: {
        id:1,
        nickname:'해지니',
    },
    Images: [],
    Comments: [],
};

const reducer = (state = initalState, action) => {
    switch(action.type){
        case ADD_POST:
            return {
                ...state,
                mainPosts: [dummyPost, ...state.mainPosts],
                postAdded: true,
            };
        default:
            return state;
    }
}
export default reducer;