[02]SocialGallery Project

Login 기능 구현

Front-End

Sign up

Sign in

• Sign up에서 Sign in으로 화면 전환

  .container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(
      -45deg,
      var(--test-color) 100%,
      var(--facebook-color) 100%
    );
    transition: 1s ease-in-out;
    z-index: 6;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
    border-bottom-right-radius: max(50vw, 0vh);
    border-top-left-radius: max(50vw, 0vh);
    opacity: 0.5;
  }
  
  
  .container.sign-in::before {
    transform: translate(0,0);
    right: 50%;
  }
  
  .container.sign-up::before {
    transform: translate(100%, 0);
    right: 45%;
  }

• JS Toggle버튼 활성화, Sign in 누를시 Sign up으로 화면 전환

  function Toggle(){
     window.onload=function(){
         const container = document.getElementById("container");
         const signIn = document.getElementById("sign-in");
         const signUp = document.getElementById("sign-up");
     
         setTimeout(() => {
         container.classList.add("sign-in");
         }, 200);
     
         const toggle = () => {
         container.classList.toggle("sign-in");
         container.classList.toggle("sign-up");
         };
     
         signIn.addEventListener("click", toggle);
         signUp.addEventListener("click", toggle);
     }
  }

- Icon 컴포넌트를 생성해 추후에 사용예정
- boxicons cdn을 index.html에 추가
    
```js
function Icons(){
	return(
		<>              
		<div className="align-center facebook-bg">
			<i className="bx bxl-facebook"></i>
		</div>
		<div className="align-center google-bg">
			<i className="bx bxl-google"></i>
		</div>
		<div className="align-center twitter-bg">
			<i className="bx bxl-twitter"></i>
		</div>
		<div className="align-center insta-bg">
			<i className="bx bxl-instagram-alt"></i>
	  </div>
		</>
	)
}

Boxicons cdn

<link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet"/>

---

Back-End