From 6fdc104ce6cad15915528e4be2d3fc7d1c8a7656 Mon Sep 17 00:00:00 2001
From: hoyychoi <hoyeon8165@gmail.com>
Date: Fri, 16 Sep 2022 21:40:14 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=84=EB=B0=98=EC=A0=81=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=9B=84=20=EC=B5=9C=EC=A2=85=EB=B3=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                |  4 +-
 src/atoms/auth.jsx                         |  2 +
 src/component/Article/ArticleContainer.jsx |  8 ++-
 src/component/Article/ArticleDetail.jsx    | 27 +++++++--
 src/component/Article/ArticleTitle.jsx     | 28 ++++++++--
 src/component/Article/ShowComment.jsx      | 22 ++++++--
 src/component/Article/WriteCommet.jsx      | 17 +++---
 src/component/ArticleList.jsx              |  2 +-
 src/component/Home.jsx                     |  3 -
 src/component/Navbar.jsx                   |  2 +-
 src/component/Newarticle.jsx               |  7 ++-
 src/component/Profile.jsx                  |  2 +-
 src/component/Signin.jsx                   |  6 +-
 src/component/Signup.jsx                   |  9 ++-
 src/component/WritterInfo.jsx              |  2 +-
 src/remote/index.jsx                       | 65 ++++++++++++++++++++--
 16 files changed, 158 insertions(+), 48 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index ccfb7a2..fbd0252 100644
--- a/src/App.jsx
+++ b/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>
diff --git a/src/atoms/auth.jsx b/src/atoms/auth.jsx
index 27fcfd4..fdd1447 100644
--- a/src/atoms/auth.jsx
+++ b/src/atoms/auth.jsx
@@ -38,6 +38,8 @@ export const commentsState = atom({
   default:[]
 })
 
+
+
 // export const newArticleState = atom({
 //   key: 'src/atoms/auth.jsx-newArticleState',
 //   default:{
diff --git a/src/component/Article/ArticleContainer.jsx b/src/component/Article/ArticleContainer.jsx
index d3b4012..1502598 100644
--- a/src/component/Article/ArticleContainer.jsx
+++ b/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 />
diff --git a/src/component/Article/ArticleDetail.jsx b/src/component/Article/ArticleDetail.jsx
index b31d031..bc07d59 100644
--- a/src/component/Article/ArticleDetail.jsx
+++ b/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 (
diff --git a/src/component/Article/ArticleTitle.jsx b/src/component/Article/ArticleTitle.jsx
index 321a533..73bad64 100644
--- a/src/component/Article/ArticleTitle.jsx
+++ b/src/component/Article/ArticleTitle.jsx
@@ -1,8 +1,26 @@
 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">
@@ -10,15 +28,15 @@ const ArticleTitle = ({data}) => {
 
         <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>
diff --git a/src/component/Article/ShowComment.jsx b/src/component/Article/ShowComment.jsx
index 1d17976..b7b7d73 100644
--- a/src/component/Article/ShowComment.jsx
+++ b/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 (
diff --git a/src/component/Article/WriteCommet.jsx b/src/component/Article/WriteCommet.jsx
index 2f5774e..db1c13c 100644
--- a/src/component/Article/WriteCommet.jsx
+++ b/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>
diff --git a/src/component/ArticleList.jsx b/src/component/ArticleList.jsx
index 0931a39..e4986cc 100644
--- a/src/component/ArticleList.jsx
+++ b/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 컴포넌트 -> 업데이트된 정보를  뿌려준다.
diff --git a/src/component/Home.jsx b/src/component/Home.jsx
index 44420e0..bc3f0d7 100644
--- a/src/component/Home.jsx
+++ b/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>
diff --git a/src/component/Navbar.jsx b/src/component/Navbar.jsx
index 4b262f5..e8fa673 100644
--- a/src/component/Navbar.jsx
+++ b/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)
      })
diff --git a/src/component/Newarticle.jsx b/src/component/Newarticle.jsx
index 0a1d99c..0b3c7fd 100644
--- a/src/component/Newarticle.jsx
+++ b/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('이미 있는 제목입니다.')
         })
     }
 
diff --git a/src/component/Profile.jsx b/src/component/Profile.jsx
index 1c97abd..dc3fd41 100644
--- a/src/component/Profile.jsx
+++ b/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)
         
diff --git a/src/component/Signin.jsx b/src/component/Signin.jsx
index 2cd8c09..8fb9a5d 100644
--- a/src/component/Signin.jsx
+++ b/src/component/Signin.jsx
@@ -30,8 +30,10 @@ const Signin = () => {
             setAuth(true)
             navigate('/')
         }
-        ).catch(err=>
-            console.log(err)
+        ).catch(err=>{
+            alert('이메일 또는 비밀번호가 잘못 입력 되었습니다.')
+        }
+            
         )
     }
 
diff --git a/src/component/Signup.jsx b/src/component/Signup.jsx
index 0ae9bcc..9e5fd2f 100644
--- a/src/component/Signup.jsx
+++ b/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"
diff --git a/src/component/WritterInfo.jsx b/src/component/WritterInfo.jsx
index 895a8e9..90a3d88 100644
--- a/src/component/WritterInfo.jsx
+++ b/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)
      })
diff --git a/src/remote/index.jsx b/src/remote/index.jsx
index a8acc3c..2939199 100644
--- a/src/remote/index.jsx
+++ b/src/remote/index.jsx
@@ -69,7 +69,7 @@ const postRegisterUser=(user)=>conduitAxios.post('/users',{user});
     image: string;
   }}}
 */
-  const putLoginUser=(user)=>conduitAxios.put('/user',{user},{headers:{authorization:`Bearer ${user.token}`}});
+  const putLoginUser=(user)=>conduitAxios.put('/user',{user},{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}});
 
 
 
@@ -90,8 +90,38 @@ const postRegisterUser=(user)=>conduitAxios.post('/users',{user});
   // profile [post] ,[delete] 부분
 
 
+
+
   //Article
 
+   /**
+   @returns {{articles: [
+    {
+      slug: string;
+  title: string;
+  description: string;
+  body: string;
+  tagList: [
+    string
+  ];
+  createdAt: 2022-09-11T06:38:57.899Z;
+  updatedAt: 2022-09-11T06:38:57.899Z;
+  favorited: true;
+  favoritesCount: 0;
+  author: {
+    username: string;
+    bio: string;
+    image: string;
+    following: true;
+      }
+    }
+  ],
+  articlesCount: 0;
+}}
+   */
+  const getYourFeedArticles = () => conduitAxios.get('articles/feed?limit=20&offset=0',{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
+
+
    /**
    @returns {{articles: [
     {
@@ -240,7 +270,7 @@ author: {
 }}
  */
 
-const createArticle = (article,{user}) => conduitAxios.post('/articles',{article},{headers:{authorization:`Bearer ${user.token}`}})
+const createArticle = (article) => conduitAxios.post('/articles',{article},{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
 
 /**
  @param {string} slug
@@ -268,6 +298,33 @@ author: {
  */
 const getSlugArticle = (slug) => conduitAxios.get(`/articles/${slug}`)
 
+/**
+@param {string} slug
+ */
+const deleteSlugArticle = (slug) => conduitAxios.delete(`/articles/${slug}`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
+
+
+//comments
+/**
+ @param {string} slug
+ @returns {{
+  comments: [
+    {
+      id: 0;
+      createdAt: 2022-09-13T09:11:17.036Z;
+      updatedAt: 2022-09-13T09:11:17.036Z;
+      body: string;
+      author: {
+        username: string;
+        bio: string;
+        image: string;
+        following: true
+      }
+    }
+  ]
+}}
+ */
+const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
 
 
 /**
@@ -289,7 +346,7 @@ const getSlugArticle = (slug) => conduitAxios.get(`/articles/${slug}`)
   ]
 }}
  */
-const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
+const getLoginComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
 
 /**
  @param {string} slug
@@ -318,4 +375,4 @@ const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`,{head
 
 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
+  export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getYourFeedArticles,getGlobalLoginArticles,getGlobalArticles,getArticles,getLoginArticles,createArticle,getSlugArticle,deleteSlugArticle,getComment,getLoginComment,postComment};
\ No newline at end of file