[nextjs+ts]프로젝트 04.로그인 페이지 Modifiers(peer/hover)를 이용한 예외처리/이벤트 처리

[nextjs+ts]프로젝트 04.로그인 페이지 TailwindCSS Modifiers를 이용한 예외처리/이벤트 처리

 

[결과 화면] peer를 통하여, 예외처리, hover를 통하여 이벤트 처리를 진행하였다.

 

#react에서 복잡하게 처리해야하는 작업들이 한줄로 간편하게 처리되었다.

예외처리 할 객체 peer등록 후 peer-invalid:bg-red-600 등의 이벤트 처리를 하면된다.

이벤트 처리 할 객체 hover:bg-red-600 등의 이벤트 처리를 하면된다.

 

import type { NextPage } from "next";
const Test: NextPage = () => {
  return (
    <div className="mt-10 flex h-screen w-screen flex-col items-center">
      <div className=" p-10 text-2xl font-bold">
        <span>Test CMS</span>
      </div>
      <form>
        <div className="flex w-64 flex-col  p-2 pt-0">
          <span className="p-1 text-sm font-normal">아이디</span>
          <input required className="peer border-2" type="text"></input>
          <span className="hidden text-xs font-medium text-red-600 peer-invalid:block">
            아이디를 입력해주세요
          </span>
        </div>
        <div className="flex w-64 flex-col  p-2 pt-0">
          <span className="p-1 text-sm font-normal">비밀번호</span>
          <input required className="peer border-2" type="text"></input>
          <span className="hidden text-xs font-medium text-red-600 peer-invalid:block">
            패스워드를 입력해주세요
          </span>
        </div>
        <div className="mt-5 flex items-center   justify-center ">
          <input
            className=" h-10 w-64 rounded-xl bg-gray-300 text-sm font-medium text-white hover:bg-red-200 "
            type="submit"
            value="Login"
          />
        </div>
      </form>
      <div className="mt-6 flex flex-col items-center justify-center">
        <span className="text-sm">
          문의가 있는 경우, 아래의 이메일로 연락부탁드립니다.
        </span>
        <span className="text-sm">test@gmail.com</span>
      </div>
    </div>
  );
};

export default Test;

 

프로젝트 경로

https://github.com/gofogo2/admin-cms-nextjs.git

 

#nextjs #ts #TailwindCSS  #css #js #react #event #peer #hover