https://www.happycampus.com/js/login.js?jsVer=20260921.1

1// 상수 정의
2const PASSWORD_FIELD_INDEX = 1;
3const ICON_PATH_EYE_CLOSED = '/icon/v5/login/icon_4.svg';
4const ICON_PATH_EYE_OPEN = '/icon/v5/login/icon_4_on.svg';
5
6/**
7 * 입력 필드 초기화
8 */
9function initializeInputFields() {
10	const inputFieldElements = document.querySelectorAll('.login-form__input');
11	const passwordFieldElement = document.getElementById('passwd');
12	const passwordToggleButton = document.getElementById('TogglePwd');
13	const deleteButtonElements = document.querySelectorAll('.login-form__btn-delete');
14	const labelElements = document.querySelectorAll('.login-form__field label');
15
16	inputFieldElements.forEach((inputElement, index) => {
17		const labelElement = labelElements[index];
18
19		// 입력 이벤트
20		inputElement.addEventListener('input', () => {
21			adjustLabelPosition(inputElement, labelElement);
22			toggleDeleteButtonVisibility(deleteButtonElements[index], inputElement.value.length > 0);
23		});
24
25		// 초기 삭제 버튼 표시 상태
26		toggleDeleteButtonVisibility(deleteButtonElements[index], inputElement.value.length > 0);
27		adjustLabelPosition(inputElement, labelElement);
28
29		// 포커스 이벤트
30		inputElement.addEventListener('focus', () => {
31			adjustLabelPosition(inputElement, labelElement);
32		});
33
34		// 블러 이벤트
35		inputElement.addEventListener('blur', () => {
36			adjustLabelPosition(inputElement, labelElement);
37		});
38	});
39
40	// 삭제 버튼 클릭 이벤트
41	deleteButtonElements.forEach((buttonElement, index) => {
42		buttonElement.addEventListener('click', () => {
43			inputFieldElements[index].value = '';
44			toggleDeleteButtonVisibility(buttonElement, false);
45
46			// 비밀번호 필드인 경우
47			if (index === PASSWORD_FIELD_INDEX) {
48				togglePasswordToggleButtonVisibility(passwordToggleButton, false);
49				passwordFieldElement.type = "password";
50				updateEyeIcon(ICON_PATH_EYE_CLOSED);
51			}
52
53			adjustLabelPosition(inputFieldElements[index], labelElements[index]);
54		});
55	});
56}
57
58/**
59 * 삭제 버튼 표시/숨김
60 */
61function toggleDeleteButtonVisibility(buttonElement, isVisible) {
62	buttonElement.style.display = isVisible ? 'block' : 'none';
63}
64
65/**
66 * 비밀번호 토글 버튼 표시/숨김
67 */
68function togglePasswordToggleButtonVisibility(buttonElement, isVisible) {
69	buttonElement.style.display = isVisible ? 'block' : 'none';
70}
71
72/**
73 * 눈 아이콘 업데이트
74 */
75function updateEyeIcon(iconPath) {
76	const eyeIconElement = document.getElementById('IconEye');
77	if (eyeIconElement) {
78		eyeIconElement.src = iconPath;
79	}
80}
81
82/**
83 * 라벨 위치 조정
84 */
85function adjustLabelPosition(inputElement, labelElement) {
86	if (!labelElement) return;
87
88	if (inputElement.value.length > 0 || inputElement === document.activeElement) {
89		labelElement.style.top = '15px';
90		labelElement.style.fontSize = '12px';
91		labelElement.style.color = '#757575';
92	} else {
93		labelElement.style.top = '50%';
94		labelElement.style.transform = 'translateY(-50%)';
95		labelElement.style.fontSize = '14px';
96		labelElement.style.color = '#757575';
97		labelElement.style.transition = 'all 0.25s ease-in-out';
98	}
99}
100
101/**
102 * 비밀번호 보이기/숨기기
103 */
104function togglePasswordVisibility(inputId, iconId, event) {
105	event.preventDefault();
106	const passwordFieldElement = document.getElementById(inputId);
107	const eyeIconElement = document.getElementById(iconId);
108
109	if (passwordFieldElement.type === "password") {
110		passwordFieldElement.type = "text";
111		eyeIconElement.src = ICON_PATH_EYE_OPEN;
112	} else {
113		passwordFieldElement.type = "password";
114		eyeIconElement.src = ICON_PATH_EYE_CLOSED;
115	}
116}
117
118/**
119 * 비밀번호 보이기 버튼 아이콘 표시 여부
120 */
121function toggleEyeIcon(inputId, buttonId) {
122	const inputFieldElement = document.getElementById(inputId);
123	const toggleButtonElement = document.getElementById(buttonId);
124
125	inputFieldElement.addEventListener("input", function() {
126		togglePasswordToggleButtonVisibility(toggleButtonElement, inputFieldElement.value.length > 0);
127	});
128}
129
130/**
131 * DOM 준비 완료 시 초기화
132 */
133document.addEventListener("DOMContentLoaded", function() {
134	// 폼 자동완성 비활성화
135	const formElement = document.querySelector('form');
136
137	if (formElement) {
138		formElement.setAttribute('autocomplete', 'off');
139	}
140
141	// 입력 필드 초기화
142	initializeInputFields();
143
144	// 비밀번호 보이기 아이콘 토글
145	toggleEyeIcon("passwd", "TogglePwd");
146
147	// 비밀번호 토글 버튼 이벤트
148	const passwordToggleButton = document.getElementById("TogglePwd");
149	if (passwordToggleButton) {
150		passwordToggleButton.addEventListener("click", function(event) {
151			togglePasswordVisibility("passwd", "IconEye", event);
152		});
153	}
154});
155
156$(document).ready(function () {
157	// 최근 로그인 위치 START
158	$('.social-login__item button, .login-actions button').on('click', function () {
159		let selectIndex = $(this).data('index');
160		Common.setCookie('loginSelectValue', selectIndex, '', '/');
161	});
162
163	if (Common.getCookie('loginSelectValue') !== null && Common.getCookie(
164		'loginSelectValue') != 0 && Common.getCookie('loginSelectValue') <= $(
165		'.social-login__item button').length) {
166		let selectIndex = Common.getCookie('loginSelectValue');
167		if(selectIndex != null && selectIndex != '') {
168			$('.social-login__item button').removeClass('is-recent');
169			$('.social-login__button[data-index="' + selectIndex + '"]').closest('.social-login__item').addClass('is-recent');
170		}
171	}
172	if(Common.getCookie('loginSelectValue') == 5){
173		$('.login-actions button').removeClass('is-recent');
174		$('.login-actions button').addClass('is-recent');
175	}
176	// 최근 로그인 위치 END
177
178
179})
180