[#63] 전반적인 수정 후 최종본

src/App.jsx

@@ -43,8 +43,8 @@ function App() {
           <Route path='/register' element={<Signup />}/>
           <Route path='/settings' element={<Settings />}/>
           <Route path='/editor' element={<Newarticle />}/> 
-          <Route path='/a' element={<Profile />}/> 
-          <Route path='/b' element={<ArticleDetail />}/> 
+          <Route path='/:username' element={<Profile />}/> 
+          <Route path='/article/:slug' element={<ArticleDetail />}/> 
         </Routes>
       <Footer />
     </div>

src/atoms/auth.jsx

@@ -38,6 +38,8 @@ export const commentsState = atom({
   default:[]
 })
 
+
+
 // export const newArticleState = atom({
 //   key: 'src/atoms/auth.jsx-newArticleState',
 //   default:{

src/component/Article/ArticleContainer.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRecoilValue } from 'recoil'
-import { authState } from '../../atoms/auth'
+import { authState,commentsState } from '../../atoms/auth'
 import ArticleContents from './ArticleContents'
 import ShowComment from './ShowComment'
 import WriteCommet from './WriteCommet'
@@ -9,11 +9,15 @@ import { Link } from 'react-router-dom'
 const ArticleContainer = ({data}) => {
 
   const auth = useRecoilValue(authState)
+  const comments = useRecoilValue(commentsState)
+
   return (
     <div className="container page">
 
     <ArticleContents data={data}/>
-    {auth?<WriteCommet />:<div style={{textAlign:'center', margin:'10px'}}>
+    <div style={{textAlign:'center'}}>댓글 갯수 : {comments.length}개</div>
+    {auth ? <WriteCommet />
+    :<div style={{textAlign:'center', margin:'10px'}}>
       <Link to="/login">sign in</Link> or <Link to="/register">sign up</Link>
     </div>}
     <ShowComment />

src/component/Article/ArticleDetail.jsx

@@ -1,24 +1,41 @@
 import React from 'react'
 import ArticleContainer from './ArticleContainer'
 import ArticleTitle from './ArticleTitle'
-import { getSlugArticle } from '../../remote/index'
+import { getSlugArticle,getLoginComment,getComment } from '../../remote/index'
 import { useEffect } from 'react'
-import { useRecoilValue } from 'recoil'
-import { slugState } from '../../atoms/auth'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { slugState, authState, commentsState } from '../../atoms/auth'
 import { useState } from 'react'
 
 const ArticleDetail = () => {
 
   const slug = useRecoilValue(slugState)
   const [data,setArticleData]=useState()
-
+  const [comments, setComments] = useRecoilState(commentsState);
+  const auth = useRecoilValue(authState)
 
   useEffect(()=>{
     getSlugArticle(localStorage.getItem('slug'))
     .then(res=>{
       setArticleData(res.data.article)
+    }).catch(err=>{
+      console.log(err)
     })
-  },[])
+    auth ? (getLoginComment(localStorage.getItem('slug'))
+      .then((res) => {
+        setComments(res.data.comments)
+      })
+      .catch((err) => {
+        console.log(err);
+      })) 
+      : (getComment(localStorage.getItem('slug'))
+      .then((res) => {
+        setComments(res.data.comments)
+      })
+      .catch((err) => {
+        console.log(err);
+      })) 
+  },[localStorage.getItem('slug')])
 
 
   return (

src/component/Article/ArticleTitle.jsx

@@ -1,24 +1,42 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { commentsState } from "../../atoms/auth";
+import { deleteSlugArticle } from "../../remote/index";
 import WritterInfo from "../WritterInfo";
 
+
 const ArticleTitle = ({data}) => {
 
+  const navigate = useNavigate()
+
+
+  const deleteArticle =()=>{
+    deleteSlugArticle(data.slug)
+    .then(res=>{
+      navigate('/')
+    }).catch(err=>{
+      console.log(err)
+      alert('다른 상대방의 article은 지울 수 없습니다.')
+    })
+  }
+
   return (
     <div className="banner">
       <div className="container">
         <h1>{data&&data.title}</h1>
 
         <div className="article-meta">
           <WritterInfo data={data}/>
-          <button className="btn btn-sm btn-outline-secondary">
-            <i className="ion-plus-round"></i>
-            &nbsp; Follow {data&&data.author.username} 
-          </button>
-          &nbsp;&nbsp;
           <button className="btn btn-sm btn-outline-primary">
             <i className="ion-heart"></i>
             &nbsp; Favorite Post <span className="counter">({data&&data.favoritesCount})</span>
           </button>
+          &nbsp;&nbsp;
+          <button className="btn btn-sm btn-outline-primary" onClick={deleteArticle}>
+            <i class="ion-trash-a"></i>
+            &nbsp; Delete 
+          </button>
         </div>
       </div>
     </div>

src/component/Article/ShowComment.jsx

@@ -2,23 +2,33 @@ import React from "react";
 import { useState } from "react";
 import { useEffect } from "react";
 import { useRecoilValue,useRecoilState } from "recoil";
-import { commentsState, slugState } from "../../atoms/auth";
-import { getComment } from "../../remote/index";
+import { commentsState, slugState,authState} from "../../atoms/auth";
+import { getComment, getLoginComment} from "../../remote/index";
 import WritterInfo from "../WritterInfo";
 
+
 const ShowComment = () => {
   const slug = useRecoilValue(slugState);
-  let [comments, setComments] = useRecoilState(commentsState);
+  const [comments, setComments] = useRecoilState(commentsState);
+  const auth = useRecoilValue(authState)
+
+
 
   useEffect(() => {
-    getComment(slug)
+    auth ? (getLoginComment(slug)
+      .then((res) => {
+        setComments(res.data.comments)
+      })
+      .catch((err) => {
+        console.log(err);
+      })) 
+      : (getComment(slug)
       .then((res) => {
-        console.log(res.data.comments)
         setComments(res.data.comments)
       })
       .catch((err) => {
         console.log(err);
-      });
+      })) 
   }, [comments.length]);
 
   return (

src/component/Article/WriteCommet.jsx

@@ -1,28 +1,31 @@
 import React, { useEffect } from 'react'
 import { useState } from 'react'
-import { useRecoilValue } from 'recoil'
-import { commentsState, slugState, userState } from '../../atoms/auth'
+import { useRecoilValue,useRecoilState } from 'recoil'
+import { commentsState, slugState} from '../../atoms/auth'
 import { postComment } from '../../remote/index'
 
 const WriteCommet = () => {
 
   const [body,setTextComment] = useState('')
   const slug = useRecoilValue(slugState)
-  const user = useRecoilValue(userState)
-  let comments = useRecoilValue(commentsState)
+  const [comments,setComments] = useRecoilState(commentsState)
+
 
     const submitComment = (e) =>{
       e.preventDefault()
 
       postComment(slug,{body})
       .then(res=>{
-          comments = [...comments,res.data.comment]
-          console.log(comments)
+          setComments([...comments,res.data.comment])
           //rerender 되면서 코멘트 부분이 추가됨. 페이지 전환
       }).catch(err=>{
           console.log(err)
       })
+
+      setTextComment('')
+
     }
+
 
 
 return (
@@ -38,7 +41,7 @@ return (
           </div>
           <div className="card-footer">
             <img
-              src="http://i.imgur.com/Qr71crq.jpg"
+              src="https://api.realworld.io/images/smiley-cyrus.jpeg"
               className="comment-author-img"
             />
             <button className="btn btn-sm btn-primary" type='submit'>Post Comment</button>

src/component/ArticleList.jsx

@@ -11,7 +11,7 @@ const ArticleList = ({data}) => {
   const spaceArticle = () =>{
     localStorage.setItem('slug',data.slug)
     setSlug(data.slug)
-    navigate('/b')
+    navigate(`/article/${localStorage.getItem('slug')}`)
   }
 
   // data.slug를 상태에 업데이트를 시켜서 Api 연결 get slug -> ARTICLE DETAIL 컴포넌트 -> 업데이트된 정보를  뿌려준다.

src/component/Home.jsx

@@ -53,9 +53,6 @@ const Home = () => {
             <div className="col-md-9">
                 <div className="feed-toggle">
                     <ul className="nav nav-pills outline-active">
-                        <li className="nav-item">
-                            <a className="nav-link disabled" href="" style={auth?{display:'flex'}:{display:'none'}}>Your Feed</a>
-                        </li>
                         <li className="nav-item">
                             <a className="nav-link active" href="">Global Feed</a>
                         </li>

src/component/Navbar.jsx

@@ -31,7 +31,7 @@ const Navbar = () => {
     getProfile(user.username)
     .then((res)=>{
         setProfile(res.data.profile)
-        navigate('/a')
+        navigate(`/${user.username}`)
     }).catch((err)=>{
         console.log(err)
      })

src/component/Newarticle.jsx

@@ -22,12 +22,13 @@ const Newarticle = () => {
     const submitArticle = (e)=>{
         e.preventDefault()
 
-        createArticle({title,description,body,tag},{user})
+        createArticle({title,description,body,tag})
         .then(res=>{
             setSlug(res.data.article.slug)
-            navigate('/b')
+            localStorage.setItem('slug',res.data.article.slug)
+            navigate(`/article/${localStorage.getItem('slug')}`)
         }).catch(err=>{
-            console.log(err)
+            alert('이미 있는 제목입니다.')
         })
     }
 

src/component/Profile.jsx

@@ -13,7 +13,7 @@ const Profile = () => {
     const auth = useRecoilValue(authState)
 
     useEffect(()=>{
-       auth?(getLoginArticles(profile.username)
+       auth ? (getLoginArticles(profile.username)
        .then(res=>{
         setArticleData(res.data.articles)
 

src/component/Signin.jsx

@@ -30,8 +30,10 @@ const Signin = () => {
             setAuth(true)
             navigate('/')
         }
-        ).catch(err=>
-            console.log(err)
+        ).catch(err=>{
+            alert('이메일 또는 비밀번호가 잘못 입력 되었습니다.')
+        }
+
         )
     }
 

src/component/Signup.jsx

@@ -27,7 +27,10 @@ const Signup = () => {
             navigate('/')
 
         })
-        .catch((err)=>console.log(err));
+        .catch((err)=>{
+            alert('이메일 또는 사용자 이름이 중복됩니다'+'   아니면   칸이 비어있습니다')
+
+        });
 
 }
 
@@ -43,10 +46,6 @@ const Signup = () => {
                     <a href="/login">Have an account?</a>
                 </p>
 
-                <ul className="error-messages">
-                    <li>That email is already taken</li>
-                </ul>
-
                 <form onSubmit={(e)=>handleSubmit(e)}>
                     <fieldset className="form-group">
                         <input className="form-control form-control-lg" type="text" placeholder="Your Name"

src/component/WritterInfo.jsx

@@ -15,7 +15,7 @@ const WritterInfo = ({data}) => {
     getProfile(data.author.username)
     .then((res)=>{
         setProfile(res.data.profile)
-        navigate('/a')
+        navigate(`/${data.author.username}`)
     }).catch((err)=>{
         console.log(err)
      })