Rental Application (React & Spring boot Microservice) - 28 : 게시글(1)

#1 게시글 페이지 디자인

게시글을 불러오는 REST 요청을 구현하기 전에 게시글을 보여주고, 쓸 수 있는 페이지들에 대한 디자인을 작업하도록 하겠습니다.

대략적으로 다음의 사진처럼 작업을 진행하겠습니다.

#2 검색창

• ./src/pages/PostPage.js

import React from 'react';
import HeaderTemplate from '../components/common/HeaderTemplate';

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

export default PostPage;

우선 HeaderTemplate을 PostPage에 불러오도록 하겠습니다. 그리고 그 아래에 검색창을 만들도록 하겠습니다. 검색창은 특정 키워드를 바탕으로 키워드에 해당하는 게시글들을 불러올 수 있도록 하는 기능입니다.

• ./src/components/posts/common/SearchBar.js

import React from 'react';
import styled from 'styled-components';
import Input from '../../common/Input';

const SearchBarArea = styled.div`
    float: left;
    width: 100%;
`;

const SearchBar = () => {
    return(
        <SearchBarArea>
            <Input 
                name="searchBar"
                type="text"
                placeholder="키워드를 입력해주세요"
            />
        </SearchBarArea>
    );
};

export default SearchBar;

• ./src/components/posts/SearchBarTemplate.js

import React from 'react';
import styled from 'styled-components';
import SearchBar from './common/SearchBar';

const SearchBarBlock = styled.div`
    float: left;
    width: 30%;
`;

const SearchBarTemplate = () => {
    return(
        <SearchBarBlock>
            <SearchBar />
        </SearchBarBlock>
    );
};

export default SearchBarTemplate;

• ./src/components/posts/common/SearchButton.js

import React from "react";
import styled from "styled-components";
import palette from "../../../lib/styles/palettes";

const SearchButtonArea = styled.div`
    width: 60px;
    float: left;
`;

const Button = styled.button`
    width: 90px;
    height: 40px;
    border-radius: 4px;
    background-color: ${ palette.blue[1] };
    color: #ffffff;
    outline: none;
    border: none;
    &: hover {
        width: 60px;
        height: 40px;
        border-radius: 4px;
        background-color: ${ palette.blue[2] };
        color: #ffffff;
        outline: none;
        border: none;
    }
`;

const SearchButton = () =>{
    return(
        <SearchButtonArea>
            <Button>
                검색
            </Button>
        </SearchButtonArea>
    );
};

export default SearchButton;

• ./src/components/posts/SearchHeaderTemplate.js

import React from 'react';
import styled from 'styled-components';
import SearchButton from './common/SearchButton';
import SearchBarTemplate from './SearchBarTemplate';

const HeaderTemplateBlock = styled.div`
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 150px;
    width: 90%;
`;

const SearchHeaderTemplate = () => {
    return(
        <HeaderTemplateBlock>
            <SearchBarTemplate />
            <SearchButton />
        </HeaderTemplateBlock>
    );
};

export default SearchHeaderTemplate;

• ./src/pages/PostPage.js

import React from 'react';
import HeaderTemplate from '../components/common/HeaderTemplate';
import PostListTemplate from '../components/posts/PostListTemplate';

const PostPage = () => {
    return(
        <>
            <HeaderTemplate />
            <SearchHeaderTemplate />
        </>
    );
};

export default PostPage;

검색창을 만들었으니 잘 나오는지 확인을 해보겠습니다.

#3 글쓰기 버튼

이제 그 아래에 글쓰기 버튼과 게시글 리스트를 보여줄 수 있는 컴포넌트를 작성하도록 하겠습니다.

• ./src/components/posts/PostHeader.js

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import palette from '../../lib/styles/palettes';

const HeaderBlock = styled.div`
    width: 90%;
    height: 80px;
    display: flex;
    justify-content: flex-end;
    padding: 40px;
`;

const BorderButton = styled.button`
    width: 100px;
    height: 50px;
    border-radius: 30px;
    border: 2px solid ${palette.blue[1]};
    color: ${palette.blue[1]};
    background-color: white;
    font-size: 20px;
    font-weight: bold;
`;

const PostHeader = () => {
    return(
        <HeaderBlock>
            <BorderButton>
                <Link to="/posts/write">
                    글쓰기
                </Link>
            </BorderButton>
        </HeaderBlock>
    );
};

export default PostHeader;

• ./src/components/posts/PostListTemplate.js

import React from 'react';
import styled from 'styled-components';
import palette from '../../lib/styles/palettes';
import { withRouter } from 'react-router';
import PostHeader from './PostHeader';

const PostListTemplateBlock = styled.div`
    background: ${ palette.gray[2] };
    padding-top: 130px;
    margin-top: 20px;
    display: flex;
    flex-direction: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
`;

const PostListTemplate = ({ history }) => {
    return(
        <>
            <PostHeader />
            <PostListTemplateBlock>
                {/* PostCard 추가 */}
            </PostListTemplateBlock>
        </>
    );
};

export default withRouter(PostListTemplate);

• ./src/components/posts/PostListTemplate.js

import React from 'react';
import styled from 'styled-components';
import palette from '../../lib/styles/palettes';
import { withRouter } from 'react-router';
import PostHeader from './PostHeader';

const PostListTemplateBlock = styled.div`
    background: ${ palette.gray[2] };
    padding-top: 130px;
    margin-top: 20px;
    display: flex;
    flex-direction: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
`;

const PostListTemplate = ({ history }) => {
    return(
        <>
            <PostHeader />
            <PostListTemplateBlock>
                {/* PostCard 추가 */}
            </PostListTemplateBlock>
        </>
    );
};

export default withRouter(PostListTemplate);

• ./src/pages/PostPage.js

import React from 'react';
import HeaderTemplate from '../components/common/HeaderTemplate';
import PostListTemplate from '../components/posts/PostListTemplate';
import SearchHeaderTemplate from '../components/posts/SearchHeaderTemplate';

const PostPage = () => {
    return(
        <>
            <HeaderTemplate />
            <SearchHeaderTemplate />
            <PostListTemplate />
        </>
    );
};

export default PostPage;

회색 부분에 게시글(PostCard)를 추후에 추가시키도록 하겠습니다. 이렇게 게시글 페이지를 대략적으로 완성했습니다.

글쓰기 부분은 다음 포스트에서 리덕스를 적용하며 구현을 하도록 하겠습니다.

참고

리액트를 다루는 기술 - 저자: 김민준