[React] 로그인 페이지 스타일링

📌로그인 페이지 디자인 및 스타일링

안녕하세요, 대학생 개발자 주이어입니다!

오늘은 제가 진행 중인 프로젝트에서 로그인 페이지를 구현해보려고 합니다.
간단하게 디자인과 스타일링을 해주고 로그인 로직을 구현해보겠습니다.

---

✅프로젝트 목표

1. 시작 페이지 제작
2. 로그인 페이지 제작 및 스타일링
3. 테스트 데이터 추가 및 로직 구현

ℹ️기술 스택

• 프론트엔드 : Html, Css
• 백엔드 : Node.js
• 프레임워크 : React.js
• 빌드도구 : Vite

---

1. Start 페이지 제작

개발을 시작하기 전 index.css와 App.css 코드를 모두 지워준 후 시작하였다.

시작 화면

먼저 갤탭으로 간단하게 레이아웃을 잡아주었다. 원래는 Figma를 사용하여 UI/UX를 멋지게 하고 싶었지만 Figma 툴 숙련도 이슈도 있고 간단하게 실습하는데 너무 과한 느낌이 있어 그냥 갤탭으로 해주었다.

import { useState, useRef, createContext } from "react";
import { Route, Routes } from "react-router-dom";
import Start from "./pages/start";
import LoginPage from "./pages/LoginPage";
import Home from "./pages/Home";
import Account from "./pages/Account";
import "./App.css";
 
const mockData = [
  {
    id: 0,
    userId: "saruny",
    userPw: "1234",
  },
];
 
export const userData = createContext();
 
function App() {
  return (
    <>
      <userData.Provider value={{ mockData }}>
        <Routes>
          <Route path="/" element={<Start></Start>}></Route>
          <Route path="/Login" element={<LoginPage></LoginPage>}></Route>
          <Route path="/Home" element={<Home></Home>}></Route>
          <Route path="/Account" element={<Account></Account>}></Route>
        </Routes>
      </userData.Provider>
    </>
  );
}
 
export default App;
 

createContext를 사용하여 테스트 데이터를 자식 컴포넌트가 전달받을 수 있도록 해주었다.

import appIcon from "./../assets/appIcon.png";
import Button from "../components/Button";
import { useNavigate } from "react-router-dom";
import "./Start.css";
 
const Start = () => {
  const nav = useNavigate();
 
  return (
    <div className="Start">
      <img className="StartLogo" src={appIcon} />
      <div className="ConfirmButton">
        <Button text={"시작하기"} onClick={() => nav("/Login")}></Button>
      </div>
    </div>
  );
};
 
export default Start;
 

위 코드는 Start 페이지의 코드이다. 보통 페이지는 컴포넌트를 불러와 렌더링하고 스타일링은 컴포넌트에서 진행하지만 Start 페이지는 간단하여 그냥 바로 스타일링을 해주었다.

Start 페이지는 아까 위에서 레이아웃을 봤듯이 대략 중간 지점에 로고가 들어가고 화면 아래에 버튼이 들어간다.

그래서 2개의 div로 나눠서 그림이 들어갈 부분과 버튼이 들어갈 부분을 나누어주었다. 여기서 사용한 버튼은 이후 로그인 페이지와 일정 추가 페이지에서 똑같은 레이아웃으로 사용할 예정이기 때문에 컴포넌트로 제작해주었다.

import "./Button.css";
 
const Button = ({ text, onClick }) => {
  return (
    <div>
      <button onClick={onClick} className="Button">
        {text}
      </button>
    </div>
  );
};
 
export default Button;
 

Button 컴포넌트는 text와 onClick을 props로 전달받는다. text는 버튼에 들어갈 글 데이터를 전달받고 onClick은 버튼을 클릭했을 때 실행할 함수를 전달받는다.

Start 페이지의 코드를 보면 Button 컴포넌트에 props를 전달해주는 것을 알 수 있다.

.Button {
  background-color: rgb(105, 150, 255);
  text-align: center;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 25px;
  font-weight: bold;
  width: 70vw;
  max-width: 600px;
  padding: 10px 0;
  white-space: nowrap;
  color: white;
}
 

Button 컴포넌트의 스타일링을 간단하게 해주었다. 특별하게 꾸민 것은 없다.

start 페이지 화면(S8+ 기준 화면)

로고는 아직 따로 만들지 않아 프로젝트에 적합한 아이콘을 찾아 대충 넣어주었다. 처음에 레이아웃을 한 것과 얼추 비슷하게 나와주었다.

---

2. Login 페이지 제작

Login 페이지 레이아웃

당연히 Login 페이지도 갤탭으로 프로토타입 레이아웃을 그려주었다.

import Login from "../components/Login";
 
const LoginPage = () => {
  return <Login />;
};
 
export default LoginPage;
 

먼저 Login 페이지에서는 Login 컴포넌트를 불러와 렌더링만 해주도록 했다.

const { mockData } = useContext(userData);

Login 컴포넌트에서는 사용자가 입력한 ID와 PW를 가져와 데이터에 있는지 확인해야 하기 때문에 useContext를 사용하여 mockData를 가져와주었다.

  const userId = useRef();

  const userPw = useRef();

  const onChangeId = (e) => {

    userId.current = e.target.value;

  };

  const onChangePw = (e) => {

    userPw.current = e.target.value;

  };

  const onClickLogin = () => {

    const temp = mockData.filter(

      (item) => item.userId === userId.current && item.userPw

    );

    if (temp.length === 1) {

      nav("/Home");

    } else {

      window.alert("로그인에 실패했습니다.");

    }

  };

useRef를 사용하여 ID와 PW를 저장할 변수를 만들어주고 onChangeId와 onChangePw함수를 사용하여 사용자가 값을 입력할 경우 변수에 저장되도록 해주었다. onClickLogin함수는 ID와 PW를 입력 후 로그인 버튼을 클릭했을 때 데이터에 값이 존재하는지 확인 후 존재한다면 Home페이지로 가도록 해주었다. 값의 존재 여부는 filter함수를 사용하여 판단해주었다.

return (

    <div className="Login">

      <div className="HeaderText">

        <h1>로그인</h1>

        <h5>로그인하고 일정을 관리하세요!</h5>

      </div>

      <div className="InputValue">

        <input

          type="text"

          placeholder="UserName"

          value={userId.current}

          onChange={onChangeId}

        />

        <input

          type="password"

          placeholder="PassWord"

          value={userPw.current}

          onChange={onChangePw}

        />

      </div>

      <div className="Bottom">

        <Button text={"로그인"} onClick={onClickLogin}></Button>

        <h6 onClick={() => nav("/Account")}>회원이 아닌가요?</h6>

      </div>

    </div>

  );

Login 페이지는 위쪽에 있는 글 부분, 입력받는 칸, 로그인 버튼 3개의 div로 구분해주었다. 여기서 사용하는 버튼은 Start 페이지에서 사용한 버튼과 레이아웃이 똑같기 때문에 그대로 가져와서 다시 재활용 해주었다.

.Login {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  height: 100%;

}

.HeaderText {

  margin: 30px 0 0 0;

  text-align: center;

  flex: 1;

}

.InputValue {

  text-align: center;

  display: flex;

  flex-direction: column;

  flex: 2;

}

input {

  width: 65vw;

  max-width: 600px;

  outline: 0;

  border-width: 0 0 1px;

  border-color: rgb(150, 150, 150);

  padding: 6px;

  margin: 10px;

}

input:focus {

  border-color: rgb(105, 150, 255);

}

h1 {

  margin: 10px 0;

}

h5 {

  margin: 0;

  color: rgb(150, 150, 150);

}

.Bottom {

  text-align: center;

  flex: 1;

}

h6 {

  margin: 5px 0;

  text-decoration: underline;

  color: rgb(150, 150, 150);

  cursor: pointer;

}

Login페이지의 스타일링 부분이다. Css는 아직 부족한 점이 많아.. 특별한건 없고 그냥 디자인했던 대로만 나오게 해줬다.

Login 페이지

완성된 화면을 보면 나름 깔끔하게 디자인이 되었다.(디자인한 레이아웃과도 비슷하다.) 

로그인 성공 화면

로그인에 성공했을 경우 사진과 같이 Home 페이지로 넘어가진다.(Home 화면은 아직 구현하지 않았다.)

로그인에 실패할 경우 경고 알림이 뜨도록 해주었다.

마지막으로 로그인 버튼 아래에 있는 "회원이 아닌가요?" 버튼을 누르면 Account 페이지로 넘어가도록 해주었지만 Account 페이지도 아직 구현하지 않았기 때문에 사진은 따로 첨부하지 않았다.

---

실습 마무리

오늘은 React를 사용하여 로그인 페이지를 만들어보았습니다. 아직 데이터베이스를 연결하지 않아 코드에 id와 pw를 적어 실습을 진행했지만 그래도 로그인 로직은 제대로 구현된 것 같습니다. 화면 디자인은 나름 예상한대로 구현되었고 만족도 하지만 Css 실력을 조금 더 늘려서 예쁜 페이지를 만들고 싶다는 생각이 들었습니다.

 

[EZ_Scheduler] - [React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

[React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

다음 개발 일지 읽어보기!