24.08.20 day49 로그인 UI

처음에 소셜로그인과 이메일 로그인 router를 같은 걸로 지정해서 해당 버튼을 클릭 시 이동 시키려고 했는데 모션비트 프로젝트를 진행했을 때 경로가 같을 시 뒤로가기를 적용하기가 좀 까다로웠어서 코드를 좀 수정한 기억이 있었다. 그래서 경로를 각각 소셜, 이메일 로그인으로 나눴다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import styled from "styled-components";
import Main from "./pages/main";
import AboutRoutine from "./pages/aboutRoutine";
import SocialLogin from "./pages/socialLogin";
import EmailLogin from "./pages/emailLogin";

function Routing() {
  return (
    <TotalWrapper>
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<Main />} />
          <Route exact path="/about" element={<AboutRoutine />} />
          <Route exact path="/login" element={<SocialLogin />} />
          <Route exact path="/login/email" element={<EmailLogin />} />
        </Routes>
      </BrowserRouter>
    </TotalWrapper>
  );
}
export default Routing;

const TotalWrapper = styled.div`
  width: 30%;
  min-width: 430px;
  min-height: 100vh;
  background-color: white;
  margin: 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  position: relative;
`;

메인 로그인을 소셜 로그인으로 지정하고 이메일 로그인은 소셜 로그인에서 버튼을 타고 들어가는 방식으로 만들었다.

그래서 이메일 로그인의 경로는 login/email로 해당 페이지에서 접근할 수 있게 했다.

소셜 로그인은 4개의 컴포넌트로 나누었다.

import BackHeader from "../components/common/backHeader";
import LoginTitle from "../components/login/loginTitle";
import OtherBtn from "../components/login/otherBtn";
import SocialKakao from "../components/login/socialKakao";

const SocialLogin: React.FC = () => {
  return (
    <>
      <BackHeader />
      <LoginTitle />
      <SocialKakao />
      <OtherBtn />
    </>
  );
};
export default SocialLogin;

해당 파트 별로 뒤로가기 헤더, 사이트 로고, 로그인 버튼, 추가 기능 버튼으로 나누었고 해당 카카오 로그인은 아직 미구현 상태이다. 아마 UI제작이 끝나면 하나씩 기능을 추가할 예정

이메일 로그인은 뒤로가기와 로고는 똑같은데 입력 칸을 하나의 컴포넌트에 몰아넣어놨다.

import BackHeader from "../components/common/backHeader";
import EmailLoginBox from "../components/login/emailLoginBox";
import LoginTitle from "../components/login/loginTitle";

const EmailLogin: React.FC = () => {
  return (
    <>
      <BackHeader />
      <LoginTitle />
      <EmailLoginBox />
    </>
  );
};
export default EmailLogin;

예전에 폼 태그 내에서 input들도 하나씩 컴포넌트를 나눠놨다가 props 가져오는데 시간이 오래 걸렸기 때문에 하나로 묶어놓았다. 나중에 기능을 구현하면서 불필요한 코드가 있거나 중복된 코드가 분명히 있기에 해당 작업을 하면서 컴포넌트를 나눌 예정이다.

import styled from "styled-components";
import "../../scss/login/emailLogin.scss";

const EmailLoginBox: React.FC = () => {
  return (
    <>
      <div className="loginInputForm">
        <form action="">
          <input className="loginInput" type="email" placeholder="이메일" />
          <input
            className="loginInput"
            type="password"
            placeholder="비밀번호"
          />
          <div className="pwVisible">
            <input type="checkbox" />
            <span>비밀번호 표시</span>
          </div>
          <span className="forgotPw">
            비밀번호를 잊으셨나요? <span>비밀번호 재설정</span>
          </span>
          <button className="loginBtn">로그인</button>
        </form>
      </div>
    </>
  );
};
export default EmailLoginBox;

css를 작업할 때 styled-components와 scss를 번갈아가며 사용하는 중인데, 회사 프로젝트 처럼 코드가 매우 복잡하고 컴포넌트를 기능 단위로 묶었을 때는 scss가 더 좋은 것 같다. 어차피 클래스 이름을 찾을 때 검색해서 찾을 건데 한 파일에 몰려있으면 찾기 쉽지 않을까 싶어서다.

styled-components는 컴포넌트를 원자 단위로 쪼개는 atomic design일 때 해당 부분만 수정하거나 유지보수할 때 바로바로 수정이 되기 때문에 각자의 장점을 찾아 적절하게 사용하는게 맞는 것 같다.