created PostAction button

Author: velopert

velog-frontend/src/components/base/UserMenu/UserMenu.js

@@ -21,7 +21,7 @@ const UserMenu = ({ onClick, onLogout, username }: Props) => {
             <UserMenuItem to={`/@${username}`}>내 벨로그</UserMenuItem>
             <div className="separator" />
             <UserMenuItem to="/write">새 글 작성</UserMenuItem>
-            <UserMenuItem>임시 글</UserMenuItem>
+            <UserMenuItem to="/saves">임시 글</UserMenuItem>
             <div className="separator" />
             <UserMenuItem>설정</UserMenuItem>
             <UserMenuItem onClick={onLogout}>로그아웃</UserMenuItem>

velog-frontend/src/components/post/PostActionButtons/PostActionButtons.js

@@ -0,0 +1,14 @@
+// @flow
+import React from 'react';
+import './PostActionButtons.scss';
+
+type Props = {};
+
+const PostActionButtons = (props: Props) => (
+  <div className="PostActionButtons">
+    <button className="btn">수정</button>
+    <button className="btn">삭제</button>
+  </div>
+);
+
+export default PostActionButtons;

velog-frontend/src/components/post/PostActionButtons/PostActionButtons.scss

@@ -0,0 +1,17 @@
+@import 'utils';
+.PostActionButtons {
+  margin-right: -0.4rem;
+  margin-top: -2rem;
+  display: flex;
+  justify-content: flex-end;
+  .btn {
+    font-size: 0.875rem;
+    color: $oc-gray-6;
+    font-weight: 500;
+    padding: 0.125rem 0.5rem;
+    cursor: pointer;
+    &:hover {
+      color: $oc-violet-5;
+    }
+  }
+}

velog-frontend/src/components/post/PostActionButtons/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './PostActionButtons';

velog-frontend/src/components/post/PostHead/PostHead.js

@@ -5,6 +5,7 @@ import type { Categories } from 'store/modules/posts';
 import PostLikeButton from 'components/post/PostLikeButton';
 import { Link } from 'react-router-dom';
 import defaultThumbnail from 'static/images/default_thumbnail.png';
+import PostActionButtons from '../PostActionButtons';
 import './PostHead.scss';
 
 type Props = {
@@ -18,10 +19,11 @@ type Props = {
   },
   likes: number,
   liked: boolean,
+  ownPost: boolean,
   onToggleLike: () => void,
 };
 
-const PostHead = ({ title, categories, user, likes, liked, onToggleLike }: Props) => {
+const PostHead = ({ title, categories, user, likes, liked, ownPost, onToggleLike }: Props) => {
   const userLink = `/@${user.username}`;
 
   return (
@@ -44,6 +46,7 @@ const PostHead = ({ title, categories, user, likes, liked, onToggleLike }: Props
         <PostLikeButton onClick={onToggleLike} liked={liked} likes={likes} />
       </div>
       <div className="separator" />
+      {ownPost && <PostActionButtons />}
     </div>
   );
 };

velog-frontend/src/containers/post/PostViewer.js

@@ -16,6 +16,7 @@ type Props = {
   toc: ?(TocItem[]),
   activeHeading: ?string,
   likeInProcess: boolean,
+  currentUsername: ?string,
 };
 
 class PostViewer extends Component<Props> {
@@ -56,7 +57,7 @@ class PostViewer extends Component<Props> {
   }
 
   render() {
-    const { post, toc, activeHeading } = this.props;
+    const { post, toc, activeHeading, username, currentUsername } = this.props;
     const { onSetToc, onActivateHeading } = this;
     if (!post) return null;
 
@@ -71,6 +72,7 @@ class PostViewer extends Component<Props> {
           likes={post.likes}
           liked={post.liked}
           onToggleLike={this.onToggleLike}
+          ownPost={currentUsername === username}
         />
         <PostContent
           thumbnail={post.thumbnail}
@@ -85,7 +87,8 @@ class PostViewer extends Component<Props> {
 }
 
 export default connect(
-  ({ posts, pender }: State) => ({
+  ({ posts, pender, user }: State) => ({
+    currentUsername: user.user && user.user.username,
     post: posts.post,
     toc: posts.toc,
     activeHeading: posts.activeHeading,