Rental Application (React & Spring boot Microservice) - 23 : MyPage

#1 MyPage

MyPage는 유저를 위한 페이지입니다. 게시글, 찜 리스트, 쪽지함, 대여리스트 등 다양한 기능들이 가능한 페이지이죠. 카카오오븐으로 만든 페이지를 보면서 작업을 진행하도록 하겠습니다.

위의 그림처럼 메인 페이지에서 쓰인 헤더 템플릿을 그대로 쓸 예정인데 이 헤더는 모든 페이지에서 사용될 컴포넌트입니다. 그리고 테이블을 이용하여 마이페이지의 기능들을 만들어보도록 하겠습니다.

#2 컴포넌트 만들기

./src/components/LogoutBox.js

import React from 'react';
import styled from 'styled-components';

const Box = styled.div`
    margin-left: 20%;
    width: 30%;
`;

const LogoutBox = ({ children }) => {
    return(
        <Box>
            { children }
        </Box>
    );
};

export default LogoutBox;

로그아웃 박스입니다. 최종적으로 호출될 이 박스 안에 있는 children은 LogoutButton컴포넌트입니다.

./src/components/LogoutButton.js

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

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

const LogoutButton = () => {
    return(
        <Button>
            Logout
        </Button>
    );
};

export default LogoutButton;

./src/components/MyPageTemplate.js

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

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

const WhiteBox = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    margin: 0;
    width: 100%;
`;

const MyPageTemplate = ({ childiren }) => {
    return(
        <MyPageTemplateBlock>
            <WhiteBox>
                <MyPageForm />
            </WhiteBox>
        </MyPageTemplateBlock>
    );
};

export default MyPageTemplate;

MyPageTemplate 컴포넌트도 마찬가지로 WhiteBox컴포넌트안에 있는 children은 MyPageForm컴포넌트가 그 역할을 하게 만들 것 입니다.

./src/components/MyPageForm.js

import React from 'react';
import styled from 'styled-components';
import { Link, withRouter } from 'react-router-dom';
import LogoutButton from './LogoutButton';
import LogoutBox from './LogoutBox';


const MyPageFormBlock = styled.table`
    width: 50%;
    height: 400px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
`;

const LineBlock = styled.tr`
    width: 100%;
    padding: 0;
    margin: auto 0;
`;

const FullLine = styled.td`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    border-bottom: 2px solid #dcdcdc;
    padding: 0;
    margin: 0;
`;

const HalfLeftLine = styled.td`
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 50%;
    height: 100px;
    border-bottom: 2px solid #dcdcdc;
    border-right: 2px solid #dcdcdc;
    padding: 0;
    margin: 0;
`;

const HalfRightLine = styled.td`
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 49.5%;
    height: 100px;
    border-bottom: 2px solid #dcdcdc;
    padding: 0;
    margin: 0;
`;

const TextBox = styled.div`
    margin-left: 20px;
    font-size: 20px;
`;

const MyPageForm = ({ history }) => {
    return(
        <MyPageFormBlock>
            <LineBlock>
                <FullLine>
                    <TextBox>
                        안녕하세요 <b>nickname</b> 님!
                    </TextBox>
                    <LogoutBox>
                        <LogoutButton />
                    </LogoutBox>
                </FullLine>
            </LineBlock>
            <LineBlock>
                <HalfLeftLine>
                    <TextBox>
                        <Link to="#">
                            회원 정보 수정
                        </Link>
                    </TextBox>
                </HalfLeftLine>
                <HalfRightLine>
                    <TextBox>
                        <Link to="#">
                            내 게시글
                        </Link>
                    </TextBox>
                </HalfRightLine>
            </LineBlock>
            <LineBlock>
                <HalfLeftLine>
                    <TextBox>
                        <Link to="#">
                            찜 리스트
                        </Link>
                    </TextBox>
                </HalfLeftLine>
                <HalfRightLine>
                    <TextBox>
                        <Link to="#">
                            쪽지함
                        </Link>
                    </TextBox>
                </HalfRightLine>
            </LineBlock>
            <LineBlock>
                <FullLine>
                    <TextBox>
                        <Link to="#">
                            대여 내역
                        </Link>
                    </TextBox>
                </FullLine>
            </LineBlock>
        </MyPageFormBlock>
    );
};

export default withRouter(MyPageForm);

여기서 withRouter는 react-router-dom라이브러리의 기능 중 하나인데 이 기능을 사용하면 history를 인자로 받아 history의 기능을 사용할 수 있습니다. history는 이전 페이지로 이동, 페이지 라우팅 등을 수행할 수 있습니다. 자세한 정보는 url을 남겨놓도록 하겠습니다. https://react.vlpt.us/react-router/04-extra.html

• ./src/pages/MyPage.js

import React from 'react';
import HeaderTemplate from '../components/common/HeaderTemplate';
import MyPageTemplate from '../components/user/MyPageTemplate';
import MyPageForm from '../components/user/MyPageForm';

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

export default MyPage;

MyPage를 위한 컴포넌트를 작성하였습니다. 그러면 이 컴포넌트를 라우팅하기 위해 App.js에 추가하도록 하겠습니다.

./src/App.js

import React from 'react';
import { Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import MyPage from './pages/MyPage';

const App = () => {
    return(
        <>
            <Route 
                component={ HomePage }
                path="/"
                exact
            />
            <Route 
                component={ MyPage }
                path="/user/myPage"
                exact
            />
        </>
    );
};

export default App;

결과 페이지를 보도록 하겠습니다.

대략 잘 나온 것 같습니다. 그리고 하단에 footer에 대한 부분은 조금 더 고민을 해보고 넣을지 안넣을지 생각하도록 하겠습니다.

해당 기능들은 관련 메인 페이지들을 생성하고, 백엔드 서비스들과 연결하면서 차근차근 연결해보도록 하겠습니다.

다음 포스트에서는 redux를 이용하여 회원 상태 값을 관리하고, auth-service와 연동을 하도록 하겠습니다.

참고

• react-router-dom
  https://react.vlpt.us/react-router/04-extra.html

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