• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

짹짹 버튼 클릭시 게시물을 우측이 아닌 아래로 정렬하는 방법

23.12.21 01:14 작성 23.12.21 01:15 수정 조회수 235

0

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

 

현재 게시물 추가시 화면)

스크린샷 2023-12-21 오전 1.15.39.png

작성한 코드)

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; 

답변 1

답변을 작성해보세요.

0

우측에 정렬된다는 게 어떤 의미인가요..?css쪽을 수정해야 하는 문제 아닌가요?

박해진님의 프로필

박해진

질문자

2023.12.21

상황)
선생님께서 작성하신 화면은
textArea에 글을 쓰고 짹짹 버튼을 클릭하면
이렇게 이미지 업로드와 짹짹 버튼 아래로 게시물이 추가가되는데,
스크린샷 2023-12-21 오전 1.26.02.png제가 작성한 화면은 우측으로 정렬되는 상황이여서요

스크린샷 2023-12-21 오전 1.15.14.png질문) 어떤 파일에 css를 수정해야 선생님과 같은 화면이 될까요?

시도해본것) AppLayout에서 아래 코드를 Row에 추가해봤는데,

 style={{ display: 'flex', flexDirection: 'column' }}


이렇게 수직으로 변경되는 상황입니다.

 

스크린샷 2023-12-21 오전 1.29.45.png

 AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input, Row, Col } from 'antd';
import styled from 'styled-components';

import UserProfile from "../components/UserProfile";
import LoginForm from "../components/LoginForm"
import {useSelector} from 'react-redux';
const SearchInput = styled(Input.Search)`
    vertical-align:middle;
`;

const AppLayout = ({ children }) => {
    const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
    return(
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href="/"><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/profile"><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <SearchInput enterButton />
                </Menu.Item>
                <Menu.Item>
                    <Link href="/signup"><a>회원가입</a></Link>
                </Menu.Item>
            </Menu>    
            <Row gutter={8} style={{ display: 'flex', flexDirection: 'column' }}>
                <Col xs={24} md={6}>
                    {isLoggedIn? <UserProfile/> : <LoginForm/>}
                </Col>
                   {children}
                <Col xs={24} md={6}>
                    <a href="https://github.com/haejin-park?tab=repositories">Made by Haejin</a>
                </Col>
            </Row>
        </div>
    );
};

AppLayout.propTypes = {
    children:PropTypes.node.isRequired,
};

export default AppLayout;

사용중인 OS) macOS
antDesign 버전)

  "@ant-design/icons": "^4.2.1",
  "antd": "^4.2.1",

거기가 아니고 mainPosts를 반복하는 곳 css가 가로배치로 되어있을 겁니다.

박해진님의 프로필

박해진

질문자

2023.12.21

선생님 해결했습니다!
제가 children을 감싸는 Col을 빼먹었었네요!
늦은시각인데도 답변 달아주셔서 감사합니다.

<Col>
  {children}
</Col>