5-6. 회원인증 폼 (Form) 구성하기

이번 섹션에서는, 인풋과 버튼으로 구성된 로그인폼과 회원가입폼을 만들어보겠습니다.

그러기 위해선, 라벨과 세트로 있는 인풋 컴포넌트와, 로그인 버튼을 만들어주어야합니다. 추가적으로 회원가입 페이지로 이동하기 위한 텍스트링크 컴포넌트도 만들어보겠습니다.

InputWithLabel 컴포넌트 만들기

라벨과 함께있는 인풋이니, InputWithLabel 이라는 이름을 설정해주도록 하겠습니다.

src/components/Auth/InputWithLabel.js

import React from 'react';
import styled from 'styled-components';
import oc from 'open-color';

// 두개가 함께 있을땐 상단 (그 사이) 에 여백을 준다
const Wrapper = styled.div`
    & + & {
        margin-top: 1rem;
    }
`;

const Label = styled.div`
    font-size: 1rem;
    color: ${oc.gray[6]};
    margin-bottom: 0.25rem;
`;

const Input = styled.input`
    width: 100%;
    border: 1px solid ${oc.gray[3]};
    outline: none;
    border-radius: 0px;
    line-height: 2.5rem;
    font-size: 1.2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
`;

// rest 쪽에는 onChange, type, name, value, placeholder 등의 input 에서 사용 하는 값들을 넣어줄수 있다.
const InputWithLabel = ({label, ...rest}) => (
    <Wrapper>
        <Label>{label}</Label>
        <Input {...rest}/>
    </Wrapper>
);

export default InputWithLabel;

이제 이 컴포넌트를 인덱스에 추가해줍시다.

src/components/Auth/index.js

export { default as AuthWrapper } from './AuthWrapper';
export { default as AuthContent } from './AuthContent';
export { default as InputWithLabel } from './InputWithLabel';

자, 그럼 이 컴포넌트를 로그인 라우트에서 띄워볼까요? 이메일과 비밀번호 인풋을 넣어줍시다

src/containers/Auth/Login.js

import React, { Component } from 'react';
import { AuthContent, InputWithLabel } from 'components/Auth';

class Login extends Component {
    render() {
        return (
            <AuthContent title="로그인">
                <InputWithLabel label="이메일" name="email" placeholder="이메일"/>
                <InputWithLabel label="비밀번호" name="password" placeholder="비밀번호" type="password"/>
            </AuthContent>
        );
    }
}

export default Login;

우리가 방금 만든 인풋이 잘 나타났나요?

버튼 만들기

이제 로그인 버튼을 만들어주겠습니다. 버튼의 이름은 AuthButton 으로 하도록 하겠습니다. 컴포넌트의 이름을 지어줄 때는 고유성을 유지해주는것이 좋습니다. 이 부분은 필수사항은 아니지만, 각 컴포넌트마다 고유적인 이름을 설정해주면, 나중에 컴포넌트의 갯수가 많아졌을 때 컴포넌트를 수정해야 할 때 헤멜필요가 없고 IDE의 기능을 사용하여 바로 파일이름을 입력하여 찾을 수 있기 때문입니다.

src/components/Auth/AuthButton.js

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

const Wrapper = styled.div`
    margin-top: 1rem;
    padding-top: 0.6rem;
    padding-bottom: 0.5rem;

    background: ${oc.teal[6]};
    color: white;

    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;

    cursor: pointer;
    user-select: none;
    transition: .2s all;

    &:hover {
        background: ${oc.teal[5]};
        ${shadow(0)}
    }

    &:active {
        background: ${oc.teal[7]};
    }

`;

const AuthButton = ({children, onClick}) => (
    <Wrapper onClick={onClick}>
        {children}
    </Wrapper>
);

export default AuthButton;

그 다음엔 이 컴포넌트를 컴포넌트 인덱스에 추가하세요.

src/components/Auth/index.js

export { default as AuthWrapper } from './AuthWrapper';
export { default as AuthContent } from './AuthContent';
export { default as InputWithLabel } from './InputWithLabel';
export { default as AuthButton } from './AuthButton';

이제 이 버튼을 인풋들 하단에 렌더링 하세요.

src/containers/Auth/Login.js

import React, { Component } from 'react';
import { AuthContent, InputWithLabel, AuthButton } from 'components/Auth';

class Login extends Component {
    render() {
        return (
            <AuthContent title="로그인">
                <InputWithLabel label="이메일" name="email" placeholder="이메일"/>
                <InputWithLabel label="비밀번호" name="password" placeholder="비밀번호" type="password"/>
                <AuthButton>로그인</AuthButton>
            </AuthContent>
        );
    }
}

export default Login;

버튼이 성공적으로 만들어졌습니다!

RightAlignedLink 컴포넌트 만들기

이제 우측에 정렬된 링크 컴포넌트를 만들겠습니다. 이름은 속성을 그대로 RightAlignedLink 라고 짓도록 하죠.

src/components/Auth/RightAlignedLink.js

import React from 'react';
import styled from 'styled-components';
import oc from 'open-color';
import { Link } from 'react-router-dom';

const Aligner = styled.div`
    margin-top: 1rem;
    text-align: right;
`;

const StyledLink = styled(Link)`
    color: ${oc.gray[6]};
    &:hover {
        color: ${oc.gray[7]};
    }
`

const RightAlignedLink = ({to, children}) => (
    <Aligner>
        <StyledLink to={to}>{children}</StyledLink>
    </Aligner>
);

export default RightAlignedLink;

컴포넌트를 만들었으니, 인덱스에 추가해줍시다.

src/components/Auth/index.js

export { default as AuthWrapper } from './AuthWrapper';
export { default as AuthContent } from './AuthContent';
export { default as InputWithLabel } from './InputWithLabel';
export { default as AuthButton } from './AuthButton';
export { default as RightAlignedLink } from './RightAlignedLink';

이제 이 컴포넌트를 Login 컴포넌트에서 보여줍시다!

src/containers/Auth/Login.js

import React, { Component } from 'react';
import { AuthContent, InputWithLabel, AuthButton, RightAlignedLink } from 'components/Auth';

class Login extends Component {
    render() {
        return (
            <AuthContent title="로그인">
                <InputWithLabel label="이메일" name="email" placeholder="이메일"/>
                <InputWithLabel label="비밀번호" name="password" placeholder="비밀번호" type="password"/>
                <AuthButton>로그인</AuthButton>
                <RightAlignedLink to="/auth/register">회원가입</RightAlignedLink>
            </AuthContent>
        );
    }
}

export default Login;

로그인 폼이 얼추 완성되었습니다. 이제 회원가입 링크를 눌러보세요. Register 을 채워주지 않았기때문에 비어있는 폼이 나타날 것입니다.

Register 컴포넌트 내용 채우기

그럼 이제, Register 컴포넌트를 채워줍시다. Login 과 매우 비슷한데, 차이점은 아이디 값을 필요로하고, 비밀번호 확인이 필요하기 때문에 인풋이 두개 더 있고, 하단 버튼과 우측정렬 링크의 텍스트가 다릅니다.

여기서 아이디는 username 입니다. 회원 인증용으로 사용된다기보다는, 서비스상에서 나타나는 이름입니다. 한국 인터넷상에서는 유저네임이라는 표현보다는 아이디가 더 익숙하니, 이렇게 부르도록 하겠습니다.

src/containers/Auth/Register.js

import React, { Component } from 'react';
import { AuthContent, InputWithLabel, AuthButton, RightAlignedLink } from 'components/Auth';


class Register extends Component {
    render() {
        return (
            <AuthContent title="회원가입">
                <InputWithLabel label="이메일" name="email" placeholder="이메일"/>
                <InputWithLabel label="아이디" name="username" placeholder="아이디"/>
                <InputWithLabel label="비밀번호" name="password" placeholder="비밀번호" type="password"/>
                <InputWithLabel label="비밀번호 확인" name="passwordConfirm" placeholder="비밀번호 확인" type="password"/>
                <AuthButton>회원가입</AuthButton>
                <RightAlignedLink to="/auth/login">로그인</RightAlignedLink>
            </AuthContent>
        );
    }
}

export default Register;

로그인 컴포넌트와 매우 비슷하죠?

인풋이 4개나 있으니까 조금 복잡해보입니다. 이 복잡해 보이는 느낌은, placeholder 를 더 연하게 해주면 어느정도 해소 된답니다.

InputWithLabel 컴포넌트에서 인풋의 ::placeholder 를 통하여 색상을 변경하세요.

src/components/Auth/InputWithLabel.js - Input

const Input = styled.input`
    width: 100%;
    border: 1px solid ${oc.gray[3]};
    outline: none;
    border-radius: 0px;
    line-height: 2.5rem;
    font-size: 1.2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    ::placeholder {
        color: ${oc.gray[3]};
    }
`;

조금은 눈이 편하지지 않았나요? 사용자는 폼에 인풋이 더 적게 있을수록 편안함을 느낍니다. 여러분이 만약에 여기서 유저경험을 더욱 최적화 하고 싶다면, 회원가입 과정에서 뷰를 하나 더 만들어서 아이디 값만 받는 폼을 만들면 됩니다.

이제 어느정도 로그인을 위한 유저 인터페이스가 완성되었습니다. 다음 섹션에서는, 각 인풋에 상태를 연결시키는 부분을 다뤄보도록 하겠습니다.