9-2. WritePost 컴포넌트 틀 구성하기

이제 WritePost 컴포넌트를 본격적으로 구현하기전에 틀을 먼저 구성하여 페이지에서 띄운 다음에 브라우저에서 확인을 해가면서 컴포넌트를 만들어보겠습니다.

WritePost 는 홈 화면에 위치하게 되니, Home 으로 분류하겠습니다.

src/components/Home/WritePost/WritePost.js

import React from 'react';
import styled from 'styled-components';
import oc from 'open-color';
import { shadow } from 'lib/styleUtils';

const Wrapper = styled.div`
    width: 768px;
    margin: 0 auto;
    padding: 1rem;
    background: ${oc.gray[7]};
    ${shadow(1)}
`;

const WritePost = ({children}) => (
    <Wrapper>

    </Wrapper>
);

export default WritePost;

먼저, 회색 박스를 만들고 그림자를 씌워줬습니다. 이제, 이 컴포넌트를 기본 컴포넌트로 내보내도록 인덱스 파일을 반들겠습니다.

src/components/Home/WritePost/index.js

export { default } from './WritePost';

그 다음엔 WritePostContainer 를 만들겠습니다. 나중에 이 컴포넌트에 인풋 내용을 리덕스 상태에 연결시키고, 포스트 API도 여기서 호출 하게 됩니다. 일단은 컴포넌트를 먼저 브라우저에 띄워놓고, 상태 연동 작업은 나중에 하도록 하겠습니다.

src/containers/Home/WritePostContainer.js

import React, { Component } from 'react';
import WritePost from 'components/Home/WritePost';

class WritePostContainer extends Component {
    render() {
        return (
            <WritePost>

            </WritePost>
        );
    }
}

export default WritePostContainer;

이제 이 컴포넌트도 containers/Home 에 인덱스를 만들어줍시다.

src/containers/Home/index.js

export { default as WritePostContainer } from './WritePostContainer';

이제 어느정도 기본적인 준비가 끝났으니, 홈에서 띄워볼까요?

src/pages/Home.js

import React, { Component } from 'react';
import PageWrapper from 'components/Base/PageWrapper';
import { WritePostContainer } from 'containers/Home';

class Home extends Component {
    render() {
        return (
            <PageWrapper>
                <WritePostContainer/>
            </PageWrapper>
        );
    }
}

export default Home;

회색 박스가 떴다면 성공입니다.