더북(TheBook)

20.5.2 EditorHeader 컴포넌트

 

에디터 페이지의 위쪽에 위치할 EditorHeader 컴포넌트를 만드세요. 이 컴포넌트에는 왼쪽에 뒤로가기 버튼이 있고, 오른쪽에 작성하기 버튼이 있습니다.

▲ 그림 20-32 EditorHeader 미리보기

 

src/components/editor/EditorHeader/EditorHeader.js

import React from ‘react’;
import styles from ‘./EditorHeader.scss’;
import classNames from ‘classnames/bind’;
import Button from ‘components/common/Button’;
 
const cx = classNames.bind(styles);

const EditorHeader = ({onGoBack, onSubmit}) => {
  return (
    <div className={cx(‘editor-header’)}>
      <div className={cx(‘back’)}>
        <Button onClick={onGoBack} theme=”outline”>뒤로가기</Button>
      </div>
      <div className={cx(‘submit’)}>
        <Button onClick={onSubmit} theme=”outline”>작성하기</Button>
      </div>
    </div>
  );
};

export default EditorHeader;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.