Project) Westagram clone_login page (React)

🗝 로그인 페이지 2차 코드 (JSX, SCSS)

▪️ JSX

import React from 'react';
import './Login.scss';
import Login from './withRouter';

class LoginSung extends React.Component {
  render() {
    return (
      <form className="LoginSung">
        <header className="logo">
          <a href="LoginSung">Westagram</a>
        </header>
        <input
          type="text"
          id="loginId"
          placeholder="전화번호, 사용자 이름 또는 이메일"
        />
        <input type="password" id="loginPassword" placeholder="비밀번호" />
        <Login />
        <a href="/#" className="forgetPassword">
          비밀번호를 잊으셨나요?
        </a>
      </form>
    );
  }
}

export default LoginSung;

▪️ Self-Code Review

지난 html에서는 div 태그로 전체를 감쌌는데,
이번에는 form 태그로 감싸서 전체적인 틀을 잡아줬다.

거기에 Login 컴포넌트를 삽입해서 로그인 버튼을 누르면
main 페이지로 이동할 수 있도록 해주었다.

지난번 html 코드보다는 확실히 깔끔하고 코드 구조도 잘 짜여진 것 같다.

▪️ Scss

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

$atag-decoration: none;

.LoginSung {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ededed;
  padding: 15px 50px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .logo {
    margin: 25px auto 40px;
    a {
      font-family: 'Lobster', cursive;
      font-size: 40px;
      color: black;
      text-decoration: $atag-decoration;
      &:visited {
        color: black;
      }
    }
  }
  input {
    border: 0.2px solid #ededed;
    border-radius: 5px;
    margin: 5px 0;
    padding: 15px 10px;
    width: 260px;
    background-color: #fafafa;
  }
  .loginBtn {
    border: none;
    border-radius: 5px;
    margin-top: 13px;
    padding: 10px;
    width: 260px;
    background-color: #0095f6;
    opacity: 0.2;
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: auto;
  }
  .forgetPassword {
    margin-top: 25%;
    color: #325883;
    font-size: 13px;
  }
}

▪️ Self-Code Review

Sass 기능 중에 Nesting 기능과 변수를 활용해 스타일을 지정하는 것을 사용해 봤다.

이전에 짠 스타일 코드가 중복되는 부분들이 많이 없었던 터라
따로 수정하는 부분은 많이 없었고, 변수 기능을 사용해 보기 위해
<a> 태그에 대한 기능만 추가를 해줬다.

▪️ 2차 코드 리뷰 (JSX, SCSS)

React 를 배우면서 이전에 작성했던 HTML과 CSS 코드를 이전하는 작업을 했는데
많은 코드를 작성한것이 아니라서 어렵지는 않았다.

로그인 페이지를 통해서 import/export 에 대한 개념을 잡았고
이제 중요한건 main 페이지에서 여러 부분들을 수정해야 하기 때문에
그 부분이 가장 중요할 것 같다.