게시물 작성하기
로그인 체크하기
PostWrite.js
import
import { useSelector } from 'react-redux';
로그인 여부 확인하기
- App.js에서 세션을 이미 확인했기 때문에 is_login만 확인한다
const PostWrite = (props) =>{
const is_login = useSelector((state) => state.user.is_login);
}
로그인 안 했을 경우
-
게시물을 작성할 수 없다는 문구 표시
-
로그인 하기 버튼을 누르면 이전에 있던 페이지가 다시 뜨지않도록 메인 페이지와 바꾸기
history.push('/') => history.replace('/')
if(!is_login){
return (
<Grid margin='100px 0px' padding='16px' center>
<Text size='24px'>로그인 후에만 작성이 가능합니다</Text>
<Button
_onClick={() => {history.replace('/');}}
>로그인 하러가기</Button>
</Grid>
)
}
App.js
게시물 추가 버튼
- 로그인 후 게시물 추가 버튼을 누르면 게시물 작성 페이지로 이동
<Button is_float text='+' _onClick={() => {history.push('/write')}}></Button>
게시물 작성 및 저장(firestore)
PostWrite.js
게시물 입력값 저장
- 실시간으로 input창에 입력된 값을 보여줌
const [contents, setContents] = React.useState('');
const changeContents = (e) =>{
setContents(e.target.value)
<Grid padding='16px'>
<Input _onChange={changeContents} lable='게시글 내용' placeholder='게시글 작성' multiLine/>
</Grid>
post.js
import
- 날짜, 시간 객체를 다루는 moment 패키지 설치 및 import
import moment from 'moment';
초기값 날짜 받아오는 부분 변경
- moment().format() 사용
- .format() - 형식에 맞게 날짜를 문자열로 바꿔주는 내장함수
insert_dt : moment().format('YYYY-MM-DD hh:mm:ss')
middleware
-
firestore에 데이터 추가
-
이미 로그인 한 상태에서 데이터를 추가
-
user의 데이터는 리덕스에 저장된 값을 가져옴
-
id는 자동생성 된 것을 가져옴
-
const addPostFB = (contents='') => {
return function(dispatch, getState, {history}){
// 컬렉션 선택
const postDB = firestore.collection('post')
//store에 있는 user 정보를 가져옴
const _user = getState().user.user;
const user_info = {
user_name: _user.user_name,
user_id: _user.uid,
user_profile: _user.user_profile
}
const _post = {
...initialPost,
contents: contents,
// 게시물이 만들어지는 시점 기록
insert_dt : moment().format('YYYY-MM-DD hh:mm:ss')
}
// firestore에 추가된 정보 저장
postDB.add({...user_info, ..._post}).then((doc) =>{
let post = {user_info, ..._post, id:doc.id};
}).catch((err) =>{ // 실패했을 때
console.log('작성 실패', err)
})
}
}
PostWrite.js
import
import { useDispatch } from 'react-redux';
import {actionCreators as postActions} from '../redux/modules/post';
addPostFB 호출
const addPost =() =>{
dispatch(postActions.addPostFB(contents));
}
버튼 onclick 등록
- 버튼 클릭하면 상단의 addPost 함수 실행
<Button text='게시글 작성' _onClick={addPost}>게시글 작성</Button>
게시물 저장(redux)
post.js
middleware
-
리덕스에 데이터 저장
-
게시물 작성 후 페이지 이동
postDB.add({...user_info, ..._post}).then((doc) =>{
let post = {user_info, ..._post, id:doc.id};
dispatch(addPost(post));
history.replace('/');
}).catch((err) =>{
console.log('작성 실패', err)
})
reducer
-
redux에 데이터 추가
-
.unshift() 사용하여 게시물을 배열의 맨 앞에 붙이기
[ADD_POST] : (state, action) => produce(state, (draft) =>{ draft.list.unshift(action.payload.post);
})
export
const actionCreators = {
setPost,
addPost,
getPostFB,
addPostFB,
}
export {actionCreators}
게시물 순서 정리
PostList.js
작성한 게시물을 맨 위로
-
PostList 페이지에 가면 기존의 게시물을 바로 가지고 오기 때문에, 게시물이 0개인 경우에만 기존의 게시물을 가져오게 함
-
리스트가 있으면 getPost를 하지 x
React.useEffect(()=>{
if(post_list.length === 0){
dispatch(postActions.getPostFB());
}
}, []);
Author And Source
이 문제에 관하여(게시물 작성하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zo2kim/게시물-작성하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)