Merge pull request #145 from CartoonIsArt/lhs

네비게이터/포탈(메인 타임라인 페이지) 관련 사항 수정
CartoonIsArt · Mar 27, 2021 · 936f615 · 936f615
2 parents f470f84 + 4c5778f
commit 936f615
Show file tree

Hide file tree

Showing 30 changed files with 1,008 additions and 557 deletions.
diff --git a/package.json b/package.json
@@ -4,15 +4,16 @@
   "private": true,
   "homepage": "https://cartoonisart.github.io",
   "dependencies": {
-    "antd": "2.13.11",
+    "antd": "3.26.19",
     "axios": "0.21.1",
     "connected-react-router": "^6.8.0",
     "history": "^4.6.1",
     "moment": "^2.29.1",
     "prop-types": "^15.5.10",
-    "react": "16.4.2",
-    "react-dom": "16.4.2",
-    "react-markdown": "^2.5.0",
+    "react": "16.8",
+    "react-dom": "16.8",
+    "react-dropzone": "^11.3.2",
+    "react-markdown": "^5.0.3",
     "react-redux": "6.0.1",
     "react-router": "5.2.0",
     "react-router-dom": "^5.2.0",
@@ -26,7 +27,6 @@
     "babel-core": "6.22.1",
     "babel-jest": "18.0.0",
     "babel-loader": "7.1.4",
-    "babel-plugin-import": "^1.13.3",
     "babel-preset-react-app": "^2.2.0",
     "babel-runtime": "^6.20.0",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",

diff --git a/src/App.js b/src/App.js
@@ -51,7 +51,7 @@ class App extends Component {
     return (
       <div style={{ background: '#dfdfdf' }}>
         {isNavEnabled(this.props.history) && <Nav />}
-        <div className="Container">
+        <div className="Container" style={{ marginTop: '4px' }} >
           {routes.map((route, idx) =>
             // eslint-disable-next-line
             (

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -163,7 +163,7 @@ export const getCommentedTimeline = (username, page = 1, keyword = undefined) =>
   const parameter = keyword ? { page, keyword } : { page }
   const queryString = new URLSearchParams(parameter).toString()
 
-  axios.get(`/timeline/${username}/commented?${queryString}`)
+  axios.get(`/timeline/${username}/comments?${queryString}`)
     .then((r) => {
       dispatch(page == 1 ? setTimeline(r.data) : appendTimeline(r.data))
     })

diff --git a/src/components/Activity.js b/src/components/Activity.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 class Activity extends Component {
@@ -15,22 +16,31 @@ class Activity extends Component {
       }}
       >
         <div style={{ width: '34%' }}>
-          <div style={{ height: '50%' }}> 글</div>
-          <a className="ant-anchor-link-title" href="#">
+          <div style={{ height: '50%' }}>글</div>
+          <Link
+            className="ant-anchor-link-title"
+            to={`/members/${user.username}`}
+          >
             {user.documentsCount}
-          </a>
+          </Link>
         </div>
         <div style={{ width: '33%' }}>
-          <div style={{ height: '50%' }}> 댓글 </div>
-          <a className="ant-anchor-link-title" href="#">
+          <div style={{ height: '50%' }}>댓글</div>
+          <Link
+            className="ant-anchor-link-title"
+            to={`/members/${user.username}/comments`}
+          >
             {user.commentsCount}
-          </a>
+          </Link>
         </div>
         <div style={{ width: '33%' }}>
-          <div style={{ height: '50%' }}> 좋아요 </div>
-          <a className="ant-anchor-link-title" href="#">
+          <div style={{ height: '50%' }}>좋아요</div>
+          <Link
+            className="ant-anchor-link-title"
+            to={`/members/${user.username}/likes`}
+          >
             {user.likedDocumentsCount}
-          </a>
+          </Link>
         </div>
       </div>
     )

diff --git a/src/components/Album.js b/src/components/Album.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import { PropTypes } from 'prop-types'
-
-const Modal = require('antd/lib/modal')
+import { Modal } from 'antd'
 
 class Album extends Component {
   constructor(props) {

diff --git a/src/components/Comment.js b/src/components/Comment.js
@@ -6,9 +6,7 @@ import Recomments from './Recomments'
 import Namecard from './Namecard'
 import { printTime } from '../policy'
 import { postCommentLike, deleteCommentLike } from '../actions'
-
-const Button = require('antd/lib/button')
-const Popover = require('antd/lib/popover')
+import { Button, Popover } from 'antd'
 
 class Comment extends Component {
   constructor(props) {

diff --git a/src/components/Doc.js b/src/components/Doc.js
@@ -9,9 +9,7 @@ import { printTime } from '../policy'
 // import Album from './Album'
 import Write from './Write'
 import { getUser, postDocumentLike, deleteDocumentLike } from '../actions'
-
-const Button = require('antd/lib/button')
-const Popover = require('antd/lib/popover')
+import { Button, Popover } from 'antd'
 
 class Doc extends Component {
   constructor(props) {
@@ -93,7 +91,7 @@ class Doc extends Component {
           </div>
         </div>
         <div style={{ margin: '4px 0px' }}>
-          <ReactMarkdown source={content.content} />
+          <ReactMarkdown children={content.content} />
         </div>
         { /* <Album content={images} height="320px" /> */ }
         <div style={isAppend ? { display: 'block' } : { display: 'none' }}>

diff --git a/src/components/Noti.js b/src/components/Noti.js
@@ -1,22 +1,25 @@
 import React, { Component } from 'react'
+import { withRouter } from 'react-router'
 import PropTypes from 'prop-types'
 import Namecard from './Namecard'
 import Line from './Line'
 import { printTime } from '../policy'
-
-const Popover = require('antd/lib/popover')
+import { Popover } from 'antd'
 
 class Noti extends Component {
+  routeToFeed(feedId) {
+    this.props.history.push(`/feed/${feedId}`)
+  }
+
   render() {
     const noti = this.props.content
-    console.log(noti)
     const nickname = `${noti.from.nTh}기 ${noti.from.fullname}`
     return (
       <div key={noti.id}>
         <div
           className="noti"
           // eslint-disable-next-line
-              onClick={() => console.log(noti.id)}
+          onClick={() => this.routeToFeed(noti.id)}
           style={
             noti.had_read
               ? { height: '56px', display: 'flex', alignItems: 'stretch' }
@@ -48,21 +51,19 @@ class Noti extends Component {
                   placement="leftTop"
                   content={<Namecard content={noti.from} />}
                 >
-                  <a href="#">
-                    {' '}
+                  <a style={{ fontSize: '10pt' }} href="#">
                     {nickname}
                   </a>
                 </Popover>
               </div>
-              <div style={{ color: 'rgba(1,1,1,0.5)' }}>
-                {' '}
+              <div style={{ fontSize: '9pt', color: 'rgba(1,1,1,0.5)' }}>
                 {printTime(noti.createdAt)}
-                {' '}
               </div>
             </div>
             <div style={{ flexGrow: '1', display: 'flex', marginLeft: '12px' }}>
               <a href="#">
                 <div style={{
+                  fontSize: '9pt', 
                   color: 'rgba(0,0,0, 0.8)', wordWrap: 'break-word', WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', width: '232px', textOverflow: 'ellipsis', overflow: 'hidden', display: '-webkit-box',
                 }}
                 >
@@ -80,6 +81,7 @@ class Noti extends Component {
 
 Noti.propTypes = {
   content: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
 }
 
-export default Noti
+export default withRouter(Noti)
diff --git a/src/components/PostComment.js b/src/components/PostComment.js
@@ -3,10 +3,8 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import koKR from 'antd/lib/locale-provider/ko_KR'
 import { postComment } from '../actions'
-
-const Mention = require('antd/lib/mention')
-const Button = require('antd/lib/button')
-const LocaleProvider = require('antd/lib/locale-provider')
+import { isSpace } from '../lib'
+import { Button, Mention, LocaleProvider, notification } from 'antd'
 
 const { toString, toContentState } = Mention
 
@@ -20,10 +18,19 @@ class PostComment extends Component {
 
   onButtonClicked() {
     const content = toString(this.state.contentState).replace(/(?=.*(?<!  \n)$)(?=\n$)/, '  \n')
-    this.props.postComment({
-      documentId: this.props.feedId,
-      content,
-    })
+    if (isSpace(content)) {
+      notification.warning({
+        message: '댓글을 확인해주세요!',
+        description: '업로드하고자 하는 댓글 내용이 없습니다',
+        duration: 3,
+      })
+    }
+    else {
+      this.props.postComment({
+        documentId: this.props.feedId,
+        content,
+      })
+    }
     this.setState({ contentState: toContentState('') })
   }
 

diff --git a/src/components/PostRecomment.js b/src/components/PostRecomment.js
@@ -2,10 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import koKR from 'antd/lib/locale-provider/ko_KR'
 import { postComment } from '../actions'
-
-const Mention = require('antd/lib/mention')
-const Button = require('antd/lib/button')
-const LocaleProvider = require('antd/lib/locale-provider')
+import { isSpace } from '../lib'
+import { Button, Mention, LocaleProvider, notification } from 'antd'
 
 const { toString, toContentState } = Mention
 
@@ -19,10 +17,19 @@ class PostRecomment extends Component {
 
   onButtonClicked() {
     const content = toString(this.state.contentState).replace(/(?=.*(?<!  \n)$)(?=\n$)/, '  \n')
-    this.props.postComment({
-      commentId: this.props.commentId,
-      content,
-    })
+    if (isSpace(content)) {
+      notification.warning({
+        message: '댓글을 확인해주세요!',
+        description: '업로드하고자 하는 댓글 내용이 없습니다',
+        duration: 3,
+      })
+    }
+    else {
+      this.props.postComment({
+        commentId: this.props.commentId,
+        content,
+      })
+    }
     this.setState({ contentState: toContentState('') })
   }
 

diff --git a/src/components/Recomment.js b/src/components/Recomment.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Namecard from './Namecard'
-
-const Popover = require('antd/lib/popover')
+import { Popover } from 'antd'
 
 class Recomment extends Component {
   render() {

diff --git a/src/components/Regulared.js b/src/components/Regulared.js
@@ -1,8 +1,6 @@
 import { Link } from 'react-router-dom'
 import React, { Component } from 'react'
-
-const Button = require('antd/lib/button')
-const Icon = require('antd/lib/icon')
+import { Button, Icon } from 'antd'
 
 class Regulared extends Component {
   render() {