로그인 페이지 구성 with TailwindCSS

화면

 

 

소스코드

import TextInput from "@/component/Input/TextInput";
import Label from "@/component/text/Label";
import Image from "next/image";

const LoginScreen = () => {
  return (
    <div className="flex items-center justify-center w-screen h-screen bg-red-100 ">
      <div className="flex flex-col w-1/2 gap-4 p-12 bg-blue-100 border border-black">
        <figure className="flex justify-center">
          <Image src={"next.svg"} width={300} height={100} />
        </figure>
        <div className="flex justify-between gap-2">
          <Label forId="id">ID</Label>
          <TextInput id="id" name="id" />
        </div>
        <div className="flex justify-between gap-2">
          <Label forId="pw">PW</Label>
          <TextInput id="pw" name="pw" />
        </div>
      </div>
    </div>
  );
};

export default LoginScreen;

 

로그인 화면에 보여질 라벨, 텍스트 박스 컴포넌트들을 위치 시킬 때는 미리 준비된 tailwindCSS의 클래스를 사용하면 편하게 작업이 가능하다.

 

const TextInput = ({ id, name, type }) => {
  return (
    <input
      className="w-11/12 px-2 py-1"
      id={id}
      type={type}
      name={name}
    />
  );
};

export default TextInput;

const Label = ({ forId, children }) => {
  return <label for={forId}>{children}</label>;
};

export default Label;

 

하지만 컴포넌트로 구성한 후, 가로 길이와 같이 외부에서 값을 받아서 사용해야 하는 스타일 속성의 경우 컴포넌트로 만들기가 어려운 것 같다.