221205 프론트엔드6 수업 정리

포트폴리오 시작해주세요

오늘 아래 항목 설명 예정입니다

• 카카오로그인
• 공공데이터포털 API 사용 방법

위 내용 설명해줬는데 필요할 때 영상 다시 봐야할듯 + 구글링

로그인 화면 html/css 작성

input에 기본으로 글자 나타내려면 속성에 placeholder 쓰면 됨
체크박스는 <input type="checkbox">
글자 양옆으로 선긋기
아직 반응형은 아닙니다..

Login.js

import React from "react";
import axios from "axios";
import "./Login.css";
import logoimg from "../img/yeohaengGo(logo)_crop.png";

import { 세션정보가져오기 } from "../App";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigation = useNavigate();
  const [data, setData] = React.useState({
    id: "",
    pw: "",
  });

  const valuechange = (event) => {
    const name = event.target.name;
    const cloneData = { ...data };
    cloneData[name] = event.target.value;
    setData(cloneData);
  };

  const userlogin = async () => {
    await axios({
      url: "http://localhost:5000/login",
      method: "POST",
      data: data,
    })
      .then((res) => {
        const { code, message } = res.data;
        if (code === "error") {
          alert(message);
          return;
        }
        // console.log("세션정보가져오기실행");
        세션정보가져오기();
        navigation("/main", { replace: true }); //{ replace: true }
      })
      .catch((e) => {
        console.log("로그인 오류!", e);
      });
  };

  const handleClickRadioButton = (e) => {
    if (e.target.checked) {
      console.log(e.target.value);
    }
  };

  return (
    <div className="login-container">
      <div className="centerfix">
        <div className="logininfo">
          <img
            src={logoimg}
            alt="logo이미지"
            onClick={() => {
              navigation("/main");
            }}
          />
          <span className="title">로그인</span>
          <input
            type="text"
            name="id"
            placeholder="아이디"
            className="item"
            onChange={valuechange}
          />
          <input
            type="password"
            name="pw"
            placeholder="비밀번호"
            className="item"
            onChange={valuechange}
          />
          <span className="autologincheck">
            <input
              type="checkbox"
              value="autologin"
              onClick={handleClickRadioButton}
            />
            자동로그인
          </span>
          <button className="loginbtn" onClick={userlogin}>
            로그인
          </button>
        </div>
        <div className="more">
          <span
            onClick={() => {
              navigation("/join");
            }}
          >
            회원가입
          </span>
          <span onClick={() => {}}>아이디 찾기</span>
          <span onClick={() => {}}>비밀번호 찾기</span>
        </div>
        <div className="hr-sect">SNS 간편 로그인</div>
        <div className="easylogin">여기에 아이콘들</div>
      </div>
    </div>
  );
}

export default Login;

Login.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Handot;
}

u,
li {
  list-style: none;
  text-decoration: none;
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
}

.login-container {
  width: 100%;
  height: 100vh;
}

.login-container .centerfix {
  width: 790px;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-container .centerfix > div {
  margin-bottom: 36px;
}

.login-container .centerfix .logininfo {
  /* border: solid 1px red; */
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-container .centerfix .logininfo img {
  margin-top: 72px;
  cursor: pointer;
}

.login-container .centerfix .logininfo > * {
  margin-bottom: 42px;
}

.login-container .centerfix .logininfo .title {
  font-size: 1.75rem;
  font-weight: bold;
}

.login-container .centerfix .logininfo .item {
  border: none;
  outline: none;
  border-bottom: solid 1px lightgrey;
  width: 100%;
  font-size: 1rem;
  padding-bottom: 6px;
}
.login-container .centerfix .logininfo > :nth-child(4) {
  margin-bottom: 16px;
}
.login-container .centerfix .logininfo > :last-child {
  margin-bottom: 0;
}
.login-container .centerfix .logininfo .item:focus {
  border-bottom: solid 1px black;
}
.login-container .centerfix .logininfo .autologincheck {
  /* border: solid 1px red; */
  font-size: 1rem;
  width: 100%;
}

.login-container .centerfix .logininfo .autologincheck > input {
  /* border: solid 1px red; */
  appearance: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 1.5px solid lightgrey;
  border-radius: 0.2rem;
  margin-right: 8px;
}

.login-container .centerfix .logininfo .autologincheck > input:checked {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #015c56;
}
.login-container .centerfix .logininfo .loginbtn {
  width: 100%;
  height: 42px;
  font-size: 1rem;
  font-weight: bold;
  background-color: #015c56;
  color: #ffffff;
  border-radius: 30px;
}

.login-container .centerfix .logininfo .loginbtn:hover {
  opacity: 0.8;
}

.login-container .centerfix .more {
  border: solid 1px #ffffff;
  font-size: 0.8rem;
}
.login-container .centerfix .more > span {
  cursor: pointer;
}
.login-container .centerfix .more > span:hover {
  color: #015c56;
  border-bottom: solid 1px #015c56;
}

.login-container .centerfix .more span:nth-child(2) {
  margin: 0 16px;
}

.hr-sect {
  width: 360px;
  height: 36px;
  display: flex;
  /* flex-basis: 100%; */
  align-items: center;
  /* color: rgba(0, 0, 0, 0.35); */
  font-size: 0.75rem;
  margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
  content: "";
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.35);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 16px;
}

.login-container .centerfix .easylogin {
  /* border: solid 1px red; */
}