[마이머니앱] 프로젝트 시작/로그인 / 가입하기 페이지 생성

 

App.jsx, App.css, index.css 정리

 

index.css 

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* base styles */
body {
  font-family: Poppins, sans-serif;
  margin: 0;
  font-size: 1.1em;
}
ul,
li,
p,
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}
.btn {
  background: none;
  border: 2px solid #1f9751;
  padding: 6px 12px;
  border-radius: 4px;
  color: #1f9751;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
}
.btn:hover {
  background: #1f9751;
  color: #fff;
}

 

 

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <>
      <div className="App">앱입니다</div>
    </>
  );
}

export default App;

 

 

각 페이지를 만든다. pages폴더 생성 후 안에 각 페이지 폴더 생성

 

각  css는 styles로 import함 

---

CSS Module을 하는 이유는?

CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다. 

Module을 사용하기 위해서는 css 생성 시 확장자를 module.css로 하면 됨 

import 할 때 styles로 import하면 사용 할 수 있다.

---

 

라우터를 설치해서 각 페이지로 이동 가능하도록 할거임

 

각 페이지에 라우터로 연결한다. 

 

 

각 페이지를 브라우저에 입력 시 잘 출력되는지 확인 한다. 

 

components 폴더 생성 후 Navbar 컴포넌트 및 css생성

/* navbar styles */
.navbar {
  width: 100%;
  background: #effaf0;
  padding: 20px 10px;
  box-sizing: border-box;
}
.navbar ul {
  display: flex;
  margin: 0 auto;
  max-width: 960px;
  align-items: center;
}
.title {
  margin-right: auto;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 1.2em;
}
.navbar button,
.navbar a {
  margin-left: 16px;
}
.navbar a {
  color: #333;
  text-decoration: none;
}

import styles from "./Navbar.module.css";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className={styles.navbar}>
      <ul>
        <li className={styles.title}>myMoney</li>
        <li>
          <Link to="/login">로그인</Link>
        </li>
        <li>
          <Link to="/signup">가입</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

 

위에서 설명했던 module.css 사용 방법 styles의 navbar 클래스 사용 이런 뜻임. 

 

 

네브바의 로그인, 가입 버튼 눌렀을 경우 각 페이지로 이동하는지 확인한다. 

 

 

---

이제 로그인 페이지를 만들면 됨

 

Login.module.css

.login-form {
  max-width: 360px;
  margin: 60px auto;
  padding: 20px;
}
.login-form label {
  display: block;
  margin: 30px auto;
}
.login-form span {
  display: block;
  margin-bottom: 6px;
}
.login-form input {
  padding: 8px 6px;
  font-size: 1em;
  color: #777;
  width: 100%;
}

 

 

 

Login.jsx

 

import { useState } from "react";

import styles from "./Login.module.css";

const Login = () => {

  const [email, setEmail] = useState(""); //이메일

  const [password, setPassword] = useState(""); //비밀번호

  const handleSubmit = (e) => {

    e.preventDefault();

    console.log(email, password);

  };

  return (

    <form onSubmit={handleSubmit} className={styles["login-form"]}>

      <h2>Login</h2>

      <label>

        <span>email:</span>

        <input

          type="email"

          onChange={(e) => setEmail(e.target.value)}

          value={email}

        />

      </label>

      <label>

        <span>password:</span>

        <input

          type="password"

          onChange={(e) => setPassword(e.target.value)}

          value={password}

        />

      </label>

      <button className="btn">로그인</button>

    </form>

  );

};

export default Login;

 

 

각 이메일과 패스워드의 input태그에 onchange 이벤트를 추가해서 

input의 내용이 바뀔 때 마다 각  값을 useState에 저장한다.

 

그리고,

 

form 에서 submit 이 되면 handleSubmit함수를 실행한다. 

 

handleSubmit함수는 submit  이벤트를 일시적으로 중단하고 

 

console.log로 저장된 이메일과 패스워드를 출력한다. 

 

그리고 

특수 문자가 들어갈 경우 대괄호 사용해야함 

 

 

 

테스트 해보기 

 

 

---

Signup.module.css

.signup-form {
  max-width: 360px;
  margin: 60px auto;
  padding: 20px;
}
.signup-form label {
  display: block;
  margin: 30px auto;
}
.signup-form span {
  display: block;
  margin-bottom: 6px;
}
.signup-form input {
  padding: 8px 6px;
  font-size: 1em;
  color: #777;
  width: 100%;
}

 

 

 

Signup.jsx

 

import { useState } from "react";

import styles from "./Signup.module.css";

const Signup = () => {

  const [email, setEmail] = useState(""); //이메일

  const [password, setPassword] = useState(""); //비밀번호

  const [name, setName] = useState(""); //이름

  const handleSubmit = (e) => {

    e.preventDefault();

    console.log(email, password, name);

  };

  return (

    <form onSubmit={handleSubmit} className={styles["signup-form"]}>

      <h2>Signup</h2>

      <label>

        <span>email:</span>

        <input

          type="email"

          onChange={(e) => setEmail(e.target.value)}

          value={email}

        />

      </label>

      <label>

        <span>password:</span>

        <input

          type="password"

          onChange={(e) => setPassword(e.target.value)}

          value={password}

        />

      </label>

      <label>

        <span>name:</span>

        <input

          type="text"

          onChange={(e) => setName(e.target.value)}

          value={name}

        />

      </label>

      <button className="btn">가입하기</button>

    </form>

  );

};

export default Signup;