24.2.1.1 AuthTemplate 완성하기

    AuthTemplate 컴포넌트는 children으로 받아 온 내용을 보여 주기만 하는 역할이므로 매우 간단합니다. 이 컴포넌트의 배경은 회색이고, 중앙에 흰색 박스를 띄워 주며, 홈 경로 /로 돌아가는 링크도 보여 줍니다.

    components/auth/AuthTemplate.js

    import React from 'react';
    import styled from 'styled-components';
    import palette from '../../lib/styles/palette';
    import { Link } from 'react-router-dom';
    
    /**
     * 회원가입/로그인 페이지의 레이아웃을 담당하는 컴포넌트입니다.
     */
    
    /* 화면 전체를 채움 */
    const AuthTemplateBlock = styled.div`
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: ${palette.gray[2]};
      /* flex 내부 내용 중앙 정렬 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    `;
    
    /* 흰색 박스 */
    const WhiteBox = styled.div`
      .logo-area {
        display: block;
        padding-bottom: 2rem;
        text-align: center;
        font-weight: bold;
        letter-spacing: 2px;
      }
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.025);
      padding: 2rem;
      width: 360px;
      background: white;
      border-radius: 2px;
    `;
    
    const AuthTemplate = ({ children }) => {
      return (
        <AuthTemplateBlock>
          <WhiteBox>
            <div className="logo-area">
              <Link to="/">REACTERS</Link>
            </div>
            {children}
          </WhiteBox>
        </AuthTemplateBlock>
      );
    };
    
    export default AuthTemplate;

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