[tvingLogin] UserButton 컴포넌트 구현

[kimInDa]

UserButton 컴포넌트를 구현하였습니다.

• 로그인, 회원가입, 아이디 찾기, 비밀번호 찾기 페이지에 사용될 수 있습니다.(재사용성)
• 컴포넌트에 isActive와 isRed 속성을 전달 하거나 혹은 전달 하지 않음으로써 3가지 버튼 중 하나로 바꿀 수 있습니다.
• 컴포넌트 위치 : src > components > User > UserButton.jsx

1. 비활성 (inactive) 상태

• 회원가입, 아이디 찾기, 비밀번호 찾기 페이지에서 사용됩니다.

• 컴포넌트에 isActive와 isRed 속성 두 가지 모두 전달하지 않습니다.

• 비활성 상태에서는 버튼의 상태가 disabled 상태가 되어 클릭하거나 포커스 할 수 없습니다.

2. 활성 상태 ver. Red (active__red)

• 로그인, 회원가입 페이지에서 사용됩니다.

• 컴포넌트에 isActive와 isRed 속성 두 가지 모두 전달해야 합니다.

• 접근성

  • 마우스를 올리거나 키보드로 포커싱하면 버튼의 배경색상이 바뀝니다.
  • 키보드로 포커싱하면 하얀 테두리선으로 현재 버튼을 포커싱 중임을 사용자에게 알려줍니다.

3. 활성 상태 ver. White (active__white)

• 아이디 찾기, 비밀번호 찾기 페이지에 사용됩니다.

• 컴포넌트에 isActive 속성만 전달합니다.

• 접근성

  • 마우스를 올리거나 키보드로 포커싱하면 버튼의 배경색상이 바뀝니다.
  • 키보드로 포커싱하면 아웃라인이 생겨 현재 버튼을 포커싱 중임을 사용자에게 알려줍니다.