[Frontend] 사용자 UI 수정

개요

이 컴포넌트는 사용자의 프로필 정보 및 비밀번호 변경, 알림 설정 등을 관리하는 UI를 제공하는 React 컴포넌트입니다.

비밀번호 표시/숨김 토글 기능

기능 설명

비밀번호 입력창에 표시된 눈 모양의 아이콘(Eye, EyeOff) 을 클릭하면, 비밀번호가 text 형식으로 표시되거나 password 형식으로 숨겨지도록 전환됩니다.

이는 React의 useState 훅을 사용하여 구현되었습니다.

작동 방식

show라는 상태 객체는 세 가지 속성을 가집니다: current, new, confirm. 각각 현재 비밀번호, 새 비밀번호, 새 비밀번호 확인 필드의 표시 여부를 나타냅니다.

toggleVisibility(field) 함수를 통해 각 필드의 show 상태를 토글할 수 있습니다.

JSX 내의 요소의 type 속성은 해당 show[field] 값에 따라 “text” 또는 “password”로 설정됩니다.

아이콘도 해당 상태에 따라 Eye 또는 EyeOff 컴포넌트가 조건부로 렌더링됩니다.

<input
  type={show.current ? "text" : "password"}
  ...
/>
<button onClick={() => toggleVisibility("current")}>
  {show.current ? <EyeOff /> : <Eye />}
</button>

소셜 계정 사용자의 비밀번호 변경 폼 숨김 처리

기능 설명

사용자의 로그인 방식이 소셜 로그인이라면 비밀번호 정보가 없어 비밀번호 변경 시 오류가 발생합니다. 그런 이유로 소셜 로그인 사용자의 경우 비밀번호 변경 폼을 화면에 표기하지 않습니다.

작동 방식

비밀번호 변경 섹션은 조건부 렌더링을 사용하여 userInfo.role이 “googleUser”가 아닐 경우에만 렌더링됩니다.

{userInfo.role !== "googleUser" && (
  <div className="..."> {/* 비밀번호 변경 UI */}
    ...
  </div>
)}

요약

기능	설명
비밀번호 보기 토글	각 입력창 옆 눈 아이콘 클릭 시 표시/숨김 전환
소셜 로그인 사용자 제한	Google 로그인 사용자에겐 비밀번호 변경 기능 비활성화

이 구조는 사용자 경험을 향상시키고, OAuth 사용자에게 불필요한 옵션을 제거하여 보안을 강화하는 데 기여합니다.

UI 구성

Enter 키 이벤트 처리 (LoginPage 컴포넌트)

목적

사용자가 이메일 또는 비밀번호 입력 필드에서 Enter 키를 눌렀을 때 로그인 동작(handleLogin)이 자동으로 실행되도록 하여 사용자 경험(UX)을 개선합니다.

적용 위치

이벤트 처리는 다음 두 입력 필드에 적용되어 있습니다:

Email 입력 필드 ()

Password 입력 필드 ()

코드 설명

이메일 입력 필드

<Input
  id="email"
  type="email"
  placeholder="m@example.com"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      handleLogin(); // Enter 키 입력 시 로그인 실행
    }
  }}
/>

비밀번호 입력 필드

<Input
  type="password"
  placeholder="Enter your password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      handleLogin(); // Enter 키 입력 시 로그인 실행
    }
  }}
/>