ReactLogin

React 로그인 Modal 만들기 2 - styled-component 사용하기

React 로그인 Modal 만들기 2 - styled-component 사용하기

기존에 style 내용들을 css 파일로 관리해도 문제가 없으나, React에서는 style마저도 js파일로 관리할 수 있도록 지원해주는 다양한 프레임 워크들이 있다. js파일로 관리하게 되면 React의 여러 기능을 사용하기 좋기 때문에 기존에 작성해준 Login 관련 css 내용을 js 파일로 변경하려고 한다.

import styled, { keyframes } from "styled-components";

export const ModalFade = keyframes`{
    from {
        opacity: 0;
        margin-top: -50px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}
`;

export const ModalBackGround = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const ModalBox = styled.div`
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 0.3rem;
  background-color: #fff;
  animation: ${ModalFade} 0.5s;
  overflow: hidden;
`;

export const LoginHeader = styled.div`
  position: relative;
  padding: 16px 64px 16px 16px;
  background-color: #f1f1f1;
  font-weight: 700;

  & > button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    color: #999;
    border: 0;
  }
`;

export const LoginBody = styled.div`
  padding: 10px;

  & > div {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & > div > input {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    width: 290px;
    height: 30px;
    font-size: 14px;
    border: 1px solid rgb(222, 226, 230);
  }
`;

export const LoginFooter = styled.div`
  border-top: 1px solid rgb(222, 226, 230);
  padding: 7px 16px;
  text-align: right;
  & > button {
    padding: 6px 12px;
    color: #fff;
    background-color: #6c757d;
    border-radius: 5px;
    font-size: 13px;
  }
`;

Styled-Component 적용하기

import React, { useState, useCallback } from "react";
import {
  LoginBody,
  LoginFooter,
  LoginHeader,
  ModalBackGround,
  ModalBox,
} from "../assets/css/login";

const LoginTemplate = ({ open, close }) => {
  const [form, setForm] = useState({
    email: "",
    password: "",
  });

  const onChange = useCallback(
    (e) => {
      setForm({
        ...form,
        [e.target.name]: e.target.value,
      });
    },
    [form]
  );

  return open ? (
    <ModalBackGround>
      <ModalBox>
        <LoginHeader>
          로그인
          <button className="close" onClick={close}>
            {" "}
            &times;{" "}
          </button>
        </LoginHeader>
        <LoginBody className="login-body">
          <div>
            <input
              id="email"
              name="email"
              type="email"
              placeholder="Email"
              onChange={onChange}
            />
          </div>
          <div>
            <input
              id="password"
              name="password"
              type="password"
              placeholder="Password"
              onChange={onChange}
            />
          </div>
        </LoginBody>
        <LoginFooter>
          <button onClick={close}>닫기</button>
        </LoginFooter>
      </ModalBox>
    </ModalBackGround>
  ) : null;
};

export default LoginTemplate;
Share