🥞 오늘 한 일

• 최종 프로젝트
  • 로그인, 회원가입 페이지에서 비밀번호 보기/숨기기 기능 구현

최종 프로젝트

비밀번호 보기/숨기기 기능 구현

어제 팀원분이 한 번 도전해보면 좋을 것 같다고 하셔서 내가 해보기로 했다. 사실 결국엔 type만 바꿔주면 되기 때문에, Input 컴포넌트에 setPasswordType을 넘겨서 눈 모양 아이콘을 클릭하면 type이 바뀌도록 제작했다.

// JoinForm.tsx
  const [passwordType, setPasswordType] = useState(true);
  const [passwordConfirmType, setPasswordConfirmType] = useState(true);

        <Input
          label="비밀번호"
          type={passwordType ? "password" : "text"}
          value={password}
          name="password"
          placeholder="숫자와 영문 조합으로 입력해주세요"
          onChange={onChangeInput}
          error={error.passwordError}
          setPasswordType={setPasswordType}
        />
        <Input
          label="비밀번호 확인"
          type={passwordConfirmType ? "password" : "text"}
          value={passwordConfirm}
          name="passwordConfirm"
          placeholder="비밀번호를 한번 더 입력해주세요."
          onChange={onChangeInput}
          error={error.passwordConfirmError}
          setPasswordType={setPasswordConfirmType}
        />

// Input.tsx
  const onToggleHide = () => {
    if (setPasswordType) {
      setPasswordType((prev) => !prev);
    }
  };

      {(type === "text" || type === "password") && (
        <div className="relative">
          <input
            className={`${variantStyles[variant]}`}
            type={type}
            value={value}
            name={name}
            placeholder={placeholder}
            onChange={onChange}
            readOnly={readOnly}
            id={inputId}
          />
          {setPasswordType && (
            <button
              onClick={onToggleHide}
              type="button"
              className="absolute right-4 top-[14px]"
            >
              <Image
                src="/img/icon-eye.png"
                alt="눈 아이콘"
                width={20}
                height={20}
              />
            </button>
          )}
        </div>
      )}

state passwordType에 따라 type의 password, text 여부를 결정하도록 했고, setPasswordType을 넘겨서 버튼을 클릭할 시 onToggleHide 함수로 현재 상태를 변경하는 함수를 제작했다. 아직 눈 아이콘의 디자인이 제작되지 않아 일단 하나의 이미지를 적용해두었지만, 디자인이 나오면 각 상태에 따라 눈 이미지가 바뀌도록 제작할 예정이다.

🍴 돌아보기

내가 바꿀 수 있는 것과 없는 것에 대한 객관적인 판단이 중요하고, 바꿀 수 있는 것에 집중하는 게 좋다는 걸 이번 프로젝트 내내 깨달았지만 특히 오늘 깨달았다. 어쩔 수 없는 것에 매몰되지 말고 할 수 있는 걸 하자!

🍳 내일 목표

• 최종 프로젝트
  • 성능 개선