Shows title for Posthead

Author: velopert

src/App.tsx

@@ -8,7 +8,6 @@ import Core from './containers/base/Core';
 import RegisterPage from './pages/RegisterPage';
 import { JazzbarProvider } from './lib/jazzbar';
 const MainPage = loadable(() => import('./pages/main/MainPage'));
-const PostPage = loadable(() => import('./pages/PostPage'));
 const EmailLoginPage = loadable(() => import('./pages/EmailLoginPage'));
 const WritePage = loadable(() => import('./pages/WritePage'));
 const VelogPage = loadable(() => import('./pages/velog/VelogPage'));

src/components/post/PostHead.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import VelogResponsive from '../velog/VelogResponsive';
+import palette from '../../lib/styles/palette';
+
+const PostHeadBlock = styled(VelogResponsive)`
+  margin-top: 5.5rem;
+  h1 {
+    font-size: 3rem;
+    line-height: 1.25;
+    letter-spacing: -0.02rem;
+    margin-top: 0;
+    font-weight: 800;
+    color: ${palette.gray8};
+  }
+`;
+
+export interface PostHeadProps {
+  title: string;
+  tags: string[];
+  username: string;
+  date: string | number;
+}
+
+const PostHead: React.FC<PostHeadProps> = ({ title }) => {
+  return (
+    <PostHeadBlock>
+      <h1>{title}</h1>
+    </PostHeadBlock>
+  );
+};
+
+export default PostHead;

src/components/post/__tests__/PostHead.test.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import PostHead, { PostHeadProps } from '../PostHead';
+
+describe('PostHead', () => {
+  const setup = (props: Partial<PostHeadProps> = {}) => {
+    const initialProps: PostHeadProps = {
+      title: 'title',
+      tags: ['tagA', 'tagB'],
+      username: 'velopert',
+      date: new Date(Date.now() - 1000 * 60 * 60 * 5),
+    };
+    const utils = render(<PostHead {...initialProps} {...props} />);
+    return {
+      ...utils,
+    };
+  };
+  it('renders title', () => {
+    const { getByText } = setup();
+    getByText('title');
+  });
+  it('renders tags', () => {});
+  it('renders username', () => {});
+  it('renders date', () => {});
+});

src/components/velog/VelogResponsive.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const VelogResponsiveBlock = styled.div`
+  width: 768px;
+  margin: 0 auto;
+`;
+
+export interface VelogResponsiveProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const VelogResponsive: React.FC<VelogResponsiveProps> = ({
+  children,
+  className,
+  style,
+}) => {
+  return (
+    <VelogResponsiveBlock
+      children={children}
+      className={className}
+      style={style}
+    />
+  );
+};
+
+export default VelogResponsive;

src/containers/post/PostViewer.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { Query, QueryResult } from 'react-apollo';
 import { READ_POST, SinglePost } from '../../lib/graphql/post';
+import PostHead from '../../components/post/PostHead';
 
 export interface PostViewerProps {
   username: string;
@@ -17,9 +18,22 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
         url_slug: urlSlug,
       }}
     >
-      {(result: QueryResult<{ post: SinglePost }>) => {
-        console.log(result);
-        return null;
+      {({ loading, error, data }: QueryResult<{ post: SinglePost }>) => {
+        console.log(data);
+        if (loading) return null; // TODO: show placeholder
+        if (!data || !data.post) return null;
+        if (error) return null; // SHOW ERROR
+        const { post } = data;
+        return (
+          <>
+            <PostHead
+              title={post.title}
+              tags={post.tags}
+              username={username}
+              date={post.released_at}
+            />
+          </>
+        );
       }}
     </Query>
   );

src/pages/PostPage.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { RouteComponentProps } from 'react-router';
+import PostViewer from '../../containers/post/PostViewer';
+
+const PostPageBlock = styled.div``;
+
+export interface PostPageProps
+  extends RouteComponentProps<{
+    username: string;
+    urlSlug: string;
+  }> {}
+
+const PostPage: React.FC<PostPageProps> = ({ match }) => {
+  const { username, urlSlug } = match.params;
+  return <PostViewer username={username} urlSlug={urlSlug} />;
+};
+
+export default PostPage;

src/pages/velog/PostPage.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import VelogPageTemplate from '../../components/velog/VelogPageTemplate';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps, Route } from 'react-router';
 import ConfigLoader from '../../containers/velog/ConfigLoader';
+import PostViewer from '../../containers/post/PostViewer';
+import PostPage from './PostPage';
 
 export interface VelogPageProps
   extends RouteComponentProps<{
     username: string;
   }> {}
 
 const VelogPage: React.FC<VelogPageProps> = ({ match }) => {
+  const { username } = match.params;
   return (
     <VelogPageTemplate>
-      <ConfigLoader username={match.params.username} />
+      <ConfigLoader username={username} />
+      <Route path="/@:username/:urlSlug" component={PostPage} />
     </VelogPageTemplate>
   );
 };