Rename 나만 보기 -> 비공개, and show a label on private post

Author: velopert

src/components/common/PostCard.tsx

@@ -11,6 +11,7 @@ import Skeleton from './Skeleton';
 import SkeletonTexts from './SkeletonTexts';
 import RatioImage from './RatioImage';
 import media from '../../lib/styles/media';
+import PrivatePostLabel from './PrivatePostLabel';
 
 const PostCardBlock = styled.div`
   padding-top: 4rem;
@@ -172,6 +173,11 @@ const PostCard = ({ post, hideUser }: PostCardProps) => {
       <div className="subinfo">
         <span>{formatDate(post.released_at)}</span>
         <span>{post.comments_count}개의 댓글</span>
+        {post.is_private && (
+          <span>
+            <PrivatePostLabel />
+          </span>
+        )}
       </div>
     </PostCardBlock>
   );

src/components/common/PrivatePostLabel.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
+import { LockIcon } from '../../static/svg';
+
+export type PrivatePostLabelProps = {};
+
+function PrivatePostLabel(props: PrivatePostLabelProps) {
+  return (
+    <Block>
+      <LockIcon /> 비공개
+    </Block>
+  );
+}
+
+const Block = styled.div`
+  background: ${palette.gray8};
+  color: white;
+  line-height: 1;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    'Apple SD Gothic Neo', arial, 나눔고딕, 'Nanum Gothic', 돋움, Dotum, Tahoma,
+    Geneva, sans-serif;
+  display: inline-flex;
+  align-items: center;
+  svg {
+    margin-right: 0.5rem;
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+`;
+
+export default PrivatePostLabel;

src/components/post/PostHead.tsx

@@ -10,6 +10,8 @@ import PopupOKCancel from '../common/PopupOKCancel';
 import media from '../../lib/styles/media';
 import TagList from '../common/TagList';
 import { Link } from 'react-router-dom';
+import { LockIcon } from '../../static/svg';
+import PrivatePostLabel from '../common/PrivatePostLabel';
 
 const PostHeadBlock = styled(VelogResponsive)`
   margin-top: 5.5rem;
@@ -63,6 +65,7 @@ const SubInfo = styled.div`
       margin-left: 0.5rem;
       margin-right: 0.5rem;
     }
+
     ${media.small} {
       font-size: 0.875rem;
     }
@@ -126,6 +129,7 @@ export interface PostHeadProps {
   onEdit: () => any;
   shareButtons: React.ReactNode;
   toc: React.ReactNode;
+  isPrivate?: boolean;
 }
 
 const PostHead: React.FC<PostHeadProps> = ({
@@ -142,6 +146,7 @@ const PostHead: React.FC<PostHeadProps> = ({
   onEdit,
   shareButtons,
   toc,
+  isPrivate,
 }) => {
   const [askRemove, toggleAskRemove] = useToggle(false);
 
@@ -160,6 +165,12 @@ const PostHead: React.FC<PostHeadProps> = ({
             </span>
             <span className="separator">&middot;</span>
             <span>{formatDate(date)}</span>
+            {isPrivate && (
+              <>
+                <span className="separator">&middot;</span>
+                <PrivatePostLabel />
+              </>
+            )}
           </div>
           {ownPost && (
             <EditRemoveGroup>

src/components/write/PublishPrivacySetting.tsx

@@ -72,7 +72,7 @@ const PublishPrivacySetting: React.FC<PublishPrivacySettingProps> = ({
       </Button>
       <Button active={isPrivate} onClick={onClickPrivate}>
         <LockIcon />
-        나만 보기
+        비공개
       </Button>
     </PublishPrivacySettingBlock>
   );

src/components/write/__tests__/PublishPrivacySetting.test.tsx

@@ -15,7 +15,7 @@ describe('PublishPrivacySetting', () => {
     );
     const buttons = {
       public: utils.getByText('전체 공개'),
-      private: utils.getByText('나만 보기'),
+      private: utils.getByText('비공개'),
     };
     return {
       ...utils,

src/components/write/__tests__/__snapshots__/PublishPrivacySetting.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`PublishPrivacySetting matches snapshot 1`] = `
         <svg>
           icon-lock.svg
         </svg>
-        나만 보기
+        비공개
       </button>
     </div>
   </section>

src/containers/post/PostViewer.tsx

@@ -335,6 +335,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
           />
         }
         toc={<PostToc />}
+        isPrivate={post.is_private}
       />
       <PostContent isMarkdown={post.is_markdown} body={post.body} />
       <UserProfileWrapper>

src/containers/write/__tests__/PublishPrivacySettingContainer.test.tsx

@@ -18,7 +18,7 @@ describe('PublishPrivacySettingContainer', () => {
     );
     const buttons = {
       public: utils.getByText('전체 공개'),
-      private: utils.getByText('나만 보기'),
+      private: utils.getByText('비공개'),
     };
     return {
       ...utils,