#4.0 Home Screen

목표

• 이번 색션에서는

  • 이번 코스에서 최종적으로 구현 될 실제 프로젝트 중 아래 페이지들을 만든다.
    • 로그아웃 시, 제공되는 페이지
    • 로그인 페이지
      • 이메일, 패스워드 사용
      • 사용자의 전화번호로 SMS보내는 인증을 통한 로그인
    • 회원가입 페이지
  • 모든 HTML 은 Tailwind를 사용하여 작성한다.
    • 시간 관계상 UI에 너무 많은 시간을 들이지는 않을 것이기 때문에,
      • 다크모드를 기준으로 스타일링 한다.
      • 반응형 디자인 또한 적당히만 적용한다.

• 기본 HTML 요소를 준비하고, Tailwind CSS를 연습하는 색션이므로

  → 빠르게 클론코딩하며 넘어간다.

#4.1 Create Account Screen

목표

• 이번 강의에서는 아래 페이지에서 공통으로 사용 할 모든 요소를 Component 로 추상화 한다.
  • 계정 생성
  • 로그인
  • SMS 로그인

정리

• Tailwind CSS 의 @layer components 를 활용하면, CSS만을 컴포넌트처럼 추상화 하여 사용 할 수 있다.
  • 세트를 묶어서, 컴포넌트 역할을 하는 클래스 네임으로 사용하고
  • 다른 클래스 네임들을 조합하여 Props 처럼 스타일을 확장 할 수 있다.
• 미리 컴포넌트를 준비해 놓으면, 앞으로 반복되는 작업에 빠르게 재활용 하며 생산성을 크게 향상 시킬 수 있다.

Heroicons

Heroicons

https://github.com/tailwindlabs/heroicons

• Tailwind CSS 제작자들이 만든 무료 Icon 라이브러리
• 모든 아이콘들은 SVG 이다.

  1. 설치 후

     npm install @heroicons/react

  2. 원하는 아이콘을 import 하여 사용 하면 된다.

#4.2 Form Components