[React][개발기] 8. Login 모달, 그리고 전체 점검의 필요성

개요

---

 시작부터 어려운 것들을 만들기엔 순서가 아닌거 같다고 생각하여 간단한 요소들 부터 만들고 있다. 한달을 굶주린 사람에게 스테이크를 먹으라고 해도 먹을 수 없고 우선 수프부터 먹여야 하듯, 소화할 수 있는 것들부터 하나씩 소화해나가고 있다.

목표

 소화할 만한 것들을 찾다가 들어가는 컴포넌트가 제일 적은 로그인 페이지부터 만들기로 했다. 통신 로직은 대략적인 UI가 구현되면 이전에 Supabase로 만들어놨던 API들을 가져와 연결할 것이다. ▼

혼자 백엔드까지 배우기엔... 능력이 부족하다...

 

 

로그인 페이지(모달)

---

바뀌어버린 계획

 원래 계획대로라면 페이지로 만들기로 했고, 이를 위해 LoginPage.js도 만들고 RoutePaths에 넣어놓기도 했는데 생각해보니 소셜 로그인 말고는 로그인 기능이 없는데 크게 한 페이지를 차지할 이유가 있나 싶었다. 텍스트 필드가 필요한 것도 아니고, 필요한건 딱 구글, 카카오, 애플 로그인 버튼 3개인데 크게 한 페이지를 사용할 이유가 없는거 같아 페이지가 아니라 모달로 바꾸기로 했다.

 

 다른 사이트들을 참고해봤을 때, 로그인 페이지로 이동하는 사이트가 있고 모달로 띄워주는 사이트가 있는데 소셜 로그인이 중점인 곳이면 대부분 모달로 띄워주는 듯 했다. ▼

 

당근마켓과 같이 특수한 로그인이라 설명이 필요한 곳이 아니라면 대부분 위의 방식대로 보여주는 듯 했다. ▼

 

내가 만들고자 하는 사이트는 소셜 로그인만 넣을 거고, 로그인에 설명이나 다른 요소들이 필요한 게 아니므로 모달로 보여주는 것으로 최종 결정했다.

 

 

초기 구현

 초기에는 아래와 같이 구현했다. 가운데에 큰 로고가 있고, 아래에 소셜 로그인 버튼을 조그맣게 넣었다. 이렇게 구현한 이유는 모바일 버전에서 큰 로고와 텍스트를 보여주기 때문이다. ▼

앱의 디자인을 그대로 따라간 초기 구현

 

 그러나 로고에 특별한 기능을 하는 것도 아닌데 이렇게 클 이유가 있나 싶기도 하고, 소셜 로그인 버튼의 가시성이 전혀 좋지 못해 번개장터의 디자인을 참고하기로 했다.

 

현재 구현

 번개장터의 디자인을 참고하여 아래와 같이 구현했다. 아직 애플 로그인에 대한 폰트 색상 예외처리는 하지 않아서 애플 로그인은 제대로 보이지 않지만, 이 역시 들어갈 예정이다. ▼

 

 

코드

전체 코드는 더보기를 누르면 볼 수 있다. ▼

LoginButton.js

import styled from "styled-components";
import React, { useState } from 'react';
import { theme } from "./ui/Theme";
import Logo from "./Logo";
import SocialLoginButtonList from "./SocialLoginButtonList";
import { ReactComponent as KakaoIcon } from "../assets/kakaotalk.svg";
import { ReactComponent as GoogleIcon } from "../assets/google.svg";

const StyledLoginButton = styled.button`
  background-color: transparent;
  border: none;
  color: ${theme.color.primary};
  padding-right: 1rem;
  font-size: 1rem;
  cursor: pointer;
  font-family: "JalnanGothic";
`;

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

const StyledModalContainer = styled.div`
  position: relative;
  padding: 2rem 3rem;
  background-color: ${theme.color.darkgray};
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
`;

const StyledText= styled.div`
  font-size: 0.9rem;
  color: ${theme.color.lightgray};
`;

const StyledWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
`;

const StyledDivisionLine = styled.div`
  border-top: 1px solid ${theme.color.gray};
  margin: 2rem;
  flex-grow: 1;
`;

const StyledDivisionWrapper = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
`;

const StyledCloseButton = styled.div`
  position: absolute;
  top: 0.1rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: ${theme.color.gray};
  font-size: 2rem;
  cursor: pointer;
;`

function LoginButton() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const SocialLoginButtonData = [
    {title: "카카오로 로그인", size: "1.4rem", color: theme.color.kakao, icon: KakaoIcon, onClick: ()=>{}},
    {title: "구글로 로그인", size: "1.4rem", color: theme.color.white, icon: GoogleIcon, onClick: ()=>{}},
    {title: "카카오로 로그인", size: "1.4rem", color: theme.color.black, icon: KakaoIcon, onClick: ()=>{}},
  ]

  return (
    <div>
      <StyledLoginButton onClick={openModal}>회원가입/로그인</StyledLoginButton>
      {isModalOpen && (
        <StyledModalBackground onClick={closeModal}>
          <StyledModalContainer onClick={(e) => e.stopPropagation()}>
            <StyledWrapper>
              <StyledCloseButton onClick={closeModal}>×</StyledCloseButton>
              <Logo size={"3rem"}></Logo>
              <StyledDivisionWrapper>
                <StyledDivisionLine></StyledDivisionLine>
                <StyledText>소셜 로그인</StyledText>
                <StyledDivisionLine></StyledDivisionLine>
              </StyledDivisionWrapper>
              <SocialLoginButtonList data={SocialLoginButtonData}></SocialLoginButtonList>
            </StyledWrapper>
          </StyledModalContainer>
        </StyledModalBackground>
      )}
    </div>
  );
}

export default LoginButton;

 

트러블 슈팅 : 매직 넘버가 너무 많다.

 전체 픽셀 단위를 `rem`단위로 한 건 옳은 선택이었다. 옳은 선택이라기 보다 기본적으로 해야할 당연한 선택이었다. 하지만 어디서 몇의 rem을 사용할 것인지가 정해지지 않아 매직넘버가 즐비해있다. 벌써 아래의 코드만 봐도 오른쪽 패딩, 폰트 크기, 가로축 세로축 패딩에 모두 rem이 사용되고 있는데 우선 이 값 자체만 봤을 때는 어떤 의미인지 파악하기도 어려운데다가 값들을 매번 외우고 있어야하는 번거로움이 생기기도 한다. 그렇다고 값들을 다 잘 외웠냐고 하면 그것또한 아니라서 전체 파일을 보면 패딩으로 들어간 값들이 제각각이다. ▼

여기서만 rem들이 벌써 4개

 

그래서 로그인 모달 버튼을 모두 구현한 뒤, 새로운 컴포넌트를 개발하는 것이 아니라 전체적인 코드를 점검하기로 했다.

 

 

마치며

---

 이번 개발은 간단하게 끝이 났다. 생각보다 리액트가 어렵지 않아서 쉽게 구현할 수 있었다. 하지만 이대로 두서없이 개발하게 되면 나중에 시간도 더 걸리고 나도 헷갈리는 일이 발생할 거 같아 여기까지 개발한 뒤 전체적인 점검을 해보기로 했다. 공통으로 사용하는 데이터를 관리하는 법이라거나, 데이터를 주고받는 방법, 디자인 패턴 등등 지금 단계에서 정의를 하고 들어갈 예정이다.

 

 노션에도 좀 정리하면서 점검해보는 시간을 가질 것이다. ▼