diff --git a/src/atoms/auth.jsx b/src/atoms/auth.jsx
index ba8107b..27fcfd4 100644
--- a/src/atoms/auth.jsx
+++ b/src/atoms/auth.jsx
@@ -33,7 +33,10 @@ export const slugState = atom({
default:''
})
-
+export const commentsState = atom({
+ key:'src/atoms/auth.jsx-commentsState',
+ default:[]
+})
// export const newArticleState = atom({
// key: 'src/atoms/auth.jsx-newArticleState',
diff --git a/src/component/Article/ShowComment.jsx b/src/component/Article/ShowComment.jsx
index a0332dc..1d17976 100644
--- a/src/component/Article/ShowComment.jsx
+++ b/src/component/Article/ShowComment.jsx
@@ -1,24 +1,25 @@
import React from "react";
import { useState } from "react";
import { useEffect } from "react";
-import { useRecoilValue } from "recoil";
-import { slugState } from "../../atoms/auth";
+import { useRecoilValue,useRecoilState } from "recoil";
+import { commentsState, slugState } from "../../atoms/auth";
import { getComment } from "../../remote/index";
import WritterInfo from "../WritterInfo";
const ShowComment = () => {
const slug = useRecoilValue(slugState);
- const [comments, setComments] = useState([]);
+ let [comments, setComments] = useRecoilState(commentsState);
useEffect(() => {
getComment(slug)
.then((res) => {
- setComments(res.data.comments);
+ console.log(res.data.comments)
+ setComments(res.data.comments)
})
.catch((err) => {
console.log(err);
});
- }, [comments]);
+ }, [comments.length]);
return (
diff --git a/src/component/Article/WriteCommet.jsx b/src/component/Article/WriteCommet.jsx
index b92dc0d..2f5774e 100644
--- a/src/component/Article/WriteCommet.jsx
+++ b/src/component/Article/WriteCommet.jsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
-import { slugState, userState } from '../../atoms/auth'
+import { commentsState, slugState, userState } from '../../atoms/auth'
import { postComment } from '../../remote/index'
const WriteCommet = () => {
@@ -9,18 +9,21 @@ const WriteCommet = () => {
const [body,setTextComment] = useState('')
const slug = useRecoilValue(slugState)
const user = useRecoilValue(userState)
-
- const submitComment = (e) =>{
- e.preventDefault()
-
- postComment(slug,{body},{user})
- .then(res=>{
- console.log(res)
- //rerender 되면서 코멘트 부분이 추가됨. 페이지 전환
- }).catch(err=>{
- console.log(err)
- })
- }
+ let comments = useRecoilValue(commentsState)
+
+ const submitComment = (e) =>{
+ e.preventDefault()
+
+ postComment(slug,{body})
+ .then(res=>{
+ comments = [...comments,res.data.comment]
+ console.log(comments)
+ //rerender 되면서 코멘트 부분이 추가됨. 페이지 전환
+ }).catch(err=>{
+ console.log(err)
+ })
+ }
+
return (
diff --git a/src/remote/index.jsx b/src/remote/index.jsx
index 712eddb..a8acc3c 100644
--- a/src/remote/index.jsx
+++ b/src/remote/index.jsx
@@ -289,7 +289,7 @@ const getSlugArticle = (slug) => conduitAxios.get(`/articles/${slug}`)
]
}}
*/
-const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
+const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
/**
@param {string} slug
@@ -299,7 +299,7 @@ const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
}
}} comment
@returns {{
- comments: [
+ comment: [
{
id: 0;
createdAt: 2022-09-13T09:11:17.036Z;
@@ -316,6 +316,6 @@ const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
}}
*/
-const postComment =(slug,comment,{user}) => conduitAxios.post(`/articles/${slug}/comments`,{comment},{headers:{authorization:`Bearer ${user.token}`}})
+const postComment =(slug,comment) => conduitAxios.post(`/articles/${slug}/comments`,{comment},{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getGlobalLoginArticles,getGlobalArticles,getArticles,getLoginArticles,createArticle,getSlugArticle,getComment,postComment};
\ No newline at end of file