20210225 9일차 모달창

소셜 로그인 모달창을 구현했다.

리액트 모달 라이브러리를 사용하여 구현했는데, 처음에 모달 작동 방식이 살짝 이해가 가지 않아 시간이 걸렸다.

뿐만 아니라, 타입스크립트를 적용해야 했기에 구글링에 정성을 기울였다.

 

관련 코드는 다음과 같다.

 

signin 컴포넌트

hooks 를 이용하여 모달창 상태를 저장했고, socialSignin 컴포넌트에

modalIsOpen(: boolean) 상태와 상태변경 함수인 setIsOpen 를 props 로 전달하여

상태가 true 일 때에 모달창을 열리게 했다.

만약 뒤로가기 버튼을 누르면 setIsOpen 함수를 호출하여 상태를 false 로 바꾸어 주어 모달창이 닫히게 했다.

 

import { findByLabelText } from "@testing-library/react";
import React, { ReactElement } from "react";
import styled, { keyframes } from "styled-components";
import SocialModal from "../components/socialSignin";

export default function Signin(): ReactElement {
	// let subtitle: any;
	const [modalIsOpen, setIsOpen] = React.useState(false);
	function openModal() {
		setIsOpen(true);
	}
	const Main = styled.div`
		/* border: 10px solid yellow; */
		flex-grow: 0.1;
		display: flex;
		justify-content: space-around;
		margin-bottom: 2rem;
	`;
	const Input = styled.div`
		/* border: 3px solid black; */
		margin-right: 4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	`;
	const InputBox = styled.label`
		// border: 1px solid blue;
		font-size: 1rem;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 0.5rem;
	`;
	const InputInfo = styled.input`
		// color: palevioletred;
		font-size: 1.2rem;
		border: 2px solid palevioletred;
		width: 100%;
		/* margin-top: 5rem; */
		background-color: #dcdcdc;
	`;
	const Button = styled.div`
		/* border: 4px solid green; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 9rem;
	`;
	const ClickButton = styled.div`
		// border: 1px solid black;
		width: 8rem;
		height: 4rem;
		display: flex;
		align-items: center;
	`;
	const ButtonSole = styled.button`
		// border: 1px solid black;
		width: 5rem;
		height: 3rem;
		margin: 0.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
	`;
	const fontstyle = {
		fontSize: "1rem",
		marginRight: "0.2rem",
	};

	const formStyle = {
		display: "flex",
		width: "35rem",
	};

	return (
		<Main>
			<form action="" method="" style={formStyle}>
				<Input>
					<InputBox>
						<div style={fontstyle}>이름 쓰는곳</div>
						<div>
							<InputInfo className="inputInfo" type="text" id="useremail" placeholder="전자우편을 입력하세요" />
						</div>
					</InputBox>
					<InputBox>
						<div style={fontstyle}>암호 쓰는곳</div>
						<div>
							<InputInfo className="inputInfo" type="text" id="password" placeholder="암호를 입력하세요" />
						</div>
					</InputBox>
				</Input>
				<Button>
					<ClickButton>
						<ButtonSole type="submit">입장 하기</ButtonSole>
						<ButtonSole type="button">입학 하기</ButtonSole>
					</ClickButton>
					<ClickButton>
						<ButtonSole type="submit">로그 아웃</ButtonSole>
						<ButtonSole type="button" onClick={openModal}>
							소샬 로그인
						</ButtonSole>
					</ClickButton>
					<SocialModal modalIsOpen={modalIsOpen} setIsOpen={setIsOpen} />
				</Button>
			</form>
		</Main>
	);
}

 

socialSignin 컴포넌트(모달창)

import React, { ReactElement } from "react";
import styled, { keyframes } from "styled-components";
import Modal from "react-modal";
import googleLogo from "../assets/images/socialsignin/google.png";
import kakaoLogo from "../assets/images/socialsignin/kakao.png";
import githubLogo from "../assets/images/socialsignin/github.png";

Modal.setAppElement("#root");
interface Props {
	modalIsOpen: boolean;
	setIsOpen: any;
}

export default function SocialModal(props: Props): ReactElement {
	const { modalIsOpen, setIsOpen } = props;
	function closeModal() {
		setIsOpen(false);
	}
	const ModalStyles = {
		content: {
			margin: "auto",
			width: "35rem",
			height: "25rem",
			background: "#f3f3e9",
			display: "flex",
			alignItems: "center",
		},
	};
	const ModalBox = styled.div`
		/* border: 10px solid yellow; */
		margin: auto;
		/* padding-left: 4rem; */
		width: 45rem;
		height: 20rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	`;
	const Title = styled.div`
		/* border: 1px solid red; */
		font-size: 2rem;
		font-weight: bold;
		text-align: center;
	`;
	const Buttons = styled.div`
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
	`;
	const BackBtn = styled.div`
		/* border: 1px solid red; */
		display: flex;
		justify-content: flex-end;
		padding-right: 3rem;
	`;
	const logoStyle = {
		margin: "1rem",
		width: "5rem",
	};
	const btnStyle = {
		border: "1px solid black",
		width: "5rem",
		height: "3rem",
		fontSize: "1rem",
	};

	return (
		<Modal isOpen={modalIsOpen} style={ModalStyles}>
			<ModalBox>
				<Title>쏘샬 로그인으로 입장하기</Title>
				<Buttons>
					<img src={googleLogo} style={logoStyle} alt="" />
					<img src={kakaoLogo} style={logoStyle} alt="" />
					<img src={githubLogo} style={logoStyle} alt="" />
				</Buttons>
				<BackBtn>
					<button onClick={closeModal} type="button" style={btnStyle}>
						뒤로 가기
					</button>
				</BackBtn>
			</ModalBox>
		</Modal>
	);
}

 

참고했던 사이트

1. github.com/reactjs/react-modal

2. reactcommunity.org/react-modal/accessibility/