1-4. Post 페이지 UI 구현

포스트 내용을 볼 수 있는 Post 페이지를 만들어봅시다. 구현하기 전에, 어떤 모양인지 먼저 확인해볼까요?

헤더의 바로 하단에 꽉 찬 파란색 배경이 있고, 그 배경의 내부에는 포스트의 제목과 태그, 그리고 날짜가 보여집니다.

그 하단에는, 흰색 박스가 있고, 여기에 포스트의 내용이 나타나게됩니다.

이 페이지에 필요한 컴포넌트들은 src/components/post 디렉토리에 만들겠습니다. 이 디렉토리에 Generate new component 를 통해 포스트 정보가 보여지는 PostInfo 컴포넌트와, 포스트 내용이 보여지는 PostBody 컴포넌트를 만드세요.

PostInfo 컴포넌트

PostInfo 컴포넌트에서는 제목, 태그, 그리고 작성날짜가 나타납니다.

src/components/post/PostInfo/PostInfo.js

import React from 'react';
import styles from './PostInfo.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

const PostInfo = () => (
  <div className={cx('post-info')}>
    <div className={cx('info')}>
      <h1>타이틀</h1>
      <div className={cx('tags')}>
        <a>#태그</a> <a>#태그</a> <a>#태그</a>
      </div>
      <div className={cx('date')}>Oct 29, 2017</div>
    </div>
  </div>
);

export default PostInfo;

이제 스타일링을 해주겠습니다.

src/components/post/PostInfo/PostInfo.scss

@import 'utils';

.post-info {
  background: $oc-blue-6;
  height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .info {
    margin-top: -5rem; // 헤더 크기 만큼 위로
    width: 1024px;
    padding: 1rem;
    color: white;
    h1 {
      font-weight: 300;
      font-size: 3rem;
      margin: 0;
      word-wrap: break-word; // 내용이 너무 길면 다음 줄에 작성
    }
    .tags {
      margin-top: 1rem;
      font-size: 1.25rem;
      font-weight: 500;
      a { 
        &:hover {
          text-decoration: underline;
        }
      }
      a + a {
        margin-left: 0.25rem; // 사이 여백
      }
    }
    .date {
      text-align: right;
      opacity: 0.75;
      font-style: italic;
      font-size: 1.25rem;
    }
  }

  @include media("<large") {
    .info {
      h1 { 
        font-size: 2rem;
      }
      .tags, .date {
        font-size: 1rem;
      }
      width: 768px;
    }
  }
  @include media("<medium") {
    height: auto;
    padding-bottom: 4rem;
    .info {
      padding-top: 0;
      margin: 0;
      .tags {
        margin-top: 0.25rem;
      }
      .tags, .date {
        font-size: 0.85rem;
      }
    }
  }
}

PostInfo 의 틀이 갖춰졌습니다. 이 컴포넌트를 PostPage 에서 렌더링해볼건데요, PageTemplate 컴포넌트도 불러오고, PostInfo 를 PageTemplate 로 감싸서 렌더링하세요.

src/pages/PostPage.js

import React from 'react';
import PageTemplate from 'components/common/PageTemplate';
import PostInfo from 'components/post/PostInfo';

const PostPage = () => {
  return (
    <PageTemplate>
      <PostInfo/>
    </PageTemplate>
  );
};

export default PostPage;

컴포넌트가 잘 보여지는지 확인해봅시다. http://localhost:3000/post/1 경로에 들어가서 페이지를 확인해보세요.

PostBody 컴포넌트

이번엔 포스트의 내용이 보여지는 PostBody 컴포넌트를 만들어봅시다. 이 컴포넌트는, 파란색과 회색 배경 사이에 떠있는 종이모양처럼 생겼습니다.

src/components/post/PostBody/PostBody.js

import React from 'react';
import styles from './PostBody.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

const PostBody = () => (
  <div className={cx('post-body')}>
    <div className={cx('paper')}>
      내용
    </div>
  </div>
);

export default PostBody;

이제 스타일링을 하겠습니다.

src/components/post/PostBody/PostBody.scss

@import 'utils';

.post-body {
  .paper {
    padding: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: white;
    @include material-shadow(4, 0.5);
    // 위로 3rem 이동시켜주어 파란색 배경을 침범하게 합니다.
    transform: translateY(-3rem); 
    margin: 0 auto;
    min-height: 20rem;

    // 해상도에 따라 다른 width를 설정합니다
    width: 1024px;
    @include media("<large") { width: 768px; }
    @include media("<medium") { width: calc(100% - 2rem); }
  }
}

컴포넌트를 다 작성했다면, 이 컴포넌트를 PostPage 에서 렌더링해보세요.

src/pages/PostPage.js

import React from 'react';
import PageTemplate from 'components/common/PageTemplate';
import PostInfo from 'components/post/PostInfo';
import PostBody from 'components/post/PostBody';

const PostPage = () => {
  return (
    <PageTemplate>
      <PostInfo/>
      <PostBody/>
    </PageTemplate>
  );
};

export default PostPage;

PostBody 컴포넌트가 잘 보여졌나요? 이제 Post 를 보여주기 위한 유저인터페이스는 모두 만들었습니다. 이제 글을 쓸 수 있는 Editor 페이지를 구현해볼까요?