Skip to content

[이민서] Sprint4 #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kich555 merged 3 commits into from
Nov 17, 2024
Merged

[이민서] Sprint4 #152

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d37cbfd
refactor(auth): 이벤트 리스너 제거 함수 추가 및 리팩토링
LMS10 Nov 14, 2024
ba1ee56
feat(auth): 비밀번호 표시/숨기기 아이콘 토글 기능 추가
LMS10 Nov 14, 2024
046a96c
style: 반응형 디자인 여백 수정
LMS10 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,13 @@
placeholder="비밀번호를 입력해 주세요"
required
>
<img
class="toggle-password"
<button type="button" class="password-toggle-button">
<img
class="password-toggle-icon"
src="/images/icons/eye-invisible.svg"
alt="비밀번호 숨김"
alt="비밀번호 숨김 상태 아이콘"
>
</button>
</div>
<span class="password-empty-error error-message">비밀번호를 입력해 주세요</span>
<span class="password-invalid-error error-message">비밀번호를 8자 이상 입력해 주세요</span>
Expand Down
38 changes: 31 additions & 7 deletions scripts/auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ document.addEventListener("DOMContentLoaded", () => {

const emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;

const loginForm = document.querySelector('.login-form');
const signupForm = document.querySelector('.signup-form');
const emailInput = document.querySelector('#email');
const nicknameInput = document.querySelector('#nickname');
const passwordInput = document.querySelector('#password');
const passwordConfirmationInput = document.querySelector('#passwordConfirmation');
const submitButton = document.querySelector('button[type="submit"]');
const loginForm = document.querySelector(".login-form");
const signupForm = document.querySelector(".signup-form");
const emailInput = document.querySelector("#email");
const nicknameInput = document.querySelector("#nickname");
const passwordInput = document.querySelector("#password");
const passwordConfirmationInput = document.querySelector("#passwordConfirmation");
const submitButton = document.querySelector("button[type='submit']");
Comment on lines -7 to +15
Copy link
Collaborator

@kich555 kich555 Nov 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 부분은 커밋 이름인 feat(auth): 비밀번호 표시/숨기기 아이콘 토글 기능 추가 과 연관성이 없고 사전에 self-review를 진행했다면 나오지 않을 불필요한 변경점 인 것 같아요 ㅎ

뭐 크리티컬하게 문제가 있는 부분은 아니긴한데 커밋을 잘 통제할 수 있도록 git 다루는 연습을 미리 해두시면 좋을것 같아요!


// 오류 메세지 노출 함수
function showError(input, errorClass) {
Expand Down Expand Up @@ -127,6 +127,25 @@ document.addEventListener("DOMContentLoaded", () => {
submitButton.disabled = !isFormValid;
}

// 비밀번호 토글 버튼 동작
function togglePasswordVisibility(event) {
const button = event.currentTarget;
const inputField = button.parentElement.querySelector("input");
const toggleIcon = button.querySelector(".password-toggle-icon");

// 비밀번호가 표시된 상태인지 확인
const isPasswordVisible = inputField.type === "text";

inputField.type = isPasswordVisible ? "password" : "text";
toggleIcon.src = isPasswordVisible ? "/images/icons/eye-invisible.svg" : "/images/icons/eye-visible.svg"
toggleIcon.alt = isPasswordVisible ? "비밀번호 숨김 상태 아이콘" : "비밀번호 표시 상태 아이콘";
Comment on lines +140 to +141
Copy link
Collaborator

@kich555 kich555 Nov 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HTML에서 이렇게 data- 속성을 지정하면 js에서 이렇게 간편하게 쓸 수 있어요~

<button class="password-toggle-button"
  data-visible-icon="/images/icons/eye-visible.svg"
  data-invisible-icon="/images/icons/eye-invisible.svg"
  data-visible-alt="비밀번호 표시 상태 아이콘"
  data-invisible-alt="비밀번호 숨김 상태 아이콘">
  <img class="password-toggle-icon" src="/images/icons/eye-invisible.svg" alt="비밀번호 숨김 상태 아이콘">
</button>

JS

 // 데이터 속성에서 아이콘 및 대체 텍스트 가져오기
  const visibleIcon = button.dataset.visibleIcon;
  const invisibleIcon = button.dataset.invisibleIcon;
  const visibleAlt = button.dataset.visibleAlt;
  const invisibleAlt = button.dataset.invisibleAlt;

}

// 비밀번호 토글 버튼에 이벤트 리스너 추가
const toggleButtons = document.querySelectorAll(".password-toggle-button");
toggleButtons.forEach((button) =>
button.addEventListener("click", togglePasswordVisibility)
);

// 입력 필드에 이벤트 리스너 추가
if (emailInput) {
Expand Down Expand Up @@ -160,6 +179,11 @@ document.addEventListener("DOMContentLoaded", () => {
passwordConfirmationInput.removeEventListener("focusout", checkPasswordConfirmationValidity);
passwordConfirmationInput.removeEventListener("input", checkPasswordConfirmationValidity);
}

// 비밀번호 토글 버튼의 이벤트 리스너 제거
toggleButtons.forEach((button) =>
button.removeEventListener("click", togglePasswordVisibility)
);
}

// 이후 기능 추가 후 수정 (현재는 단순히 특정 페이지로 이동)
Expand Down
20 changes: 12 additions & 8 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,13 @@
placeholder="비밀번호를 입력해 주세요"
required
>
<img
class="toggle-password"
<button type="button" class="password-toggle-button">
<img
class="password-toggle-icon"
src="/images/icons/eye-invisible.svg"
alt="비밀번호 숨김"
alt="비밀번호 숨김 상태 아이콘"
>
</button>
</div>
<span class="password-empty-error error-message">비밀번호를 입력해 주세요</span>
<span class="password-invalid-error error-message">비밀번호를 8자 이상 입력해 주세요</span>
Expand All @@ -69,11 +71,13 @@
placeholder="비밀번호를 다시 한 번 입력해 주세요"
required
/>
<img
src="images/icons/eye-invisible.svg"
alt="비밀번호 숨김"
class="toggle-password"
/>
<button type="button" class="password-toggle-button">
<img
class="password-toggle-icon"
src="/images/icons/eye-invisible.svg"
alt="비밀번호 숨김 상태 아이콘"
>
</button>
</div>
<span class="password-confirmation-error error-message">비밀번호가 일치하지 않습니다.</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion styles/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ input:focus {
display: none;
}

.toggle-password {
.password-toggle-button {
position: absolute;
right: 2.4rem;
cursor: pointer;
Expand Down