-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
짹짹 버튼 클릭시 게시물을 우측이 아닌 아래로 정렬하는 방법
23.12.21 01:14 작성 23.12.21 01:15 수정 조회수 235
0
질문)짹짹을 눌렀을 때 게시물이 우측에 정렬되는데 어떻게 해야 아래로 정렬될까요?
현재 게시물 추가시 화면)
작성한 코드)
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;
답변을 작성해보세요.
0
박해진
질문자2023.12.21
상황)
선생님께서 작성하신 화면은
textArea에 글을 쓰고 짹짹 버튼을 클릭하면
이렇게 이미지 업로드와 짹짹 버튼 아래로 게시물이 추가가되는데,
제가 작성한 화면은 우측으로 정렬되는 상황이여서요
질문) 어떤 파일에 css를 수정해야 선생님과 같은 화면이 될까요?
시도해본것) AppLayout에서 아래 코드를 Row에 추가해봤는데,
style={{ display: 'flex', flexDirection: 'column' }}
이렇게 수직으로 변경되는 상황입니다.
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",
박해진
질문자2023.12.21
선생님 해결했습니다!
제가 children을 감싸는 Col을 빼먹었었네요!
늦은시각인데도 답변 달아주셔서 감사합니다.
<Col>
{children}
</Col>
답변 1