Skip to content

[유선향] - sprint4 #40

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
kiJu2 merged 11 commits into from
Dec 31, 2024
Merged

[유선향] - sprint4 #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
95bf2ff
Docs : 모듈파일인 login_signup.js 파일생성과 함수 계획작성
Dec 27, 2024
e2acf9c
Docs : 모듈 설계
Dec 27, 2024
2e65279
Docs : fuc Password_focus_out 함수 작성
Dec 27, 2024
6bf93ef
Docs: function Email_focus_out 함수 작성 ,
Dec 27, 2024
d630e4d
docs: button_inactive 함수 작성, 원하는 대로 동작하지 않아 수정필요, 일단 회원가입 페이지 함수 작성후 …
Dec 27, 2024
d9c4ff6
Docs: signup.js 파일내핸들러 작성과 등록 완료 이제 작동이 안되는 함수 수정 예정
Dec 27, 2024
22f3069
fix: login.js
Dec 27, 2024
b416887
Fix : login.js
Dec 27, 2024
9cb5029
fix : signup.js
Dec 28, 2024
195c9d1
[Test] create Test.js file
Dec 30, 2024
9411055
Merge branch 'Basic-유선향' into part1-유선향-sprint4
grimza99 Dec 31, 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
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
코드잇 프론트 엔드 13기 유선향 스프린트 미션 3입니다.
제출일 12월 27일
13기 프론트엔드 개인 스프린트 미션4
제출일 12월 3일
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
content="https://fastidious-tiramisu-8831ce.netlify.app/"
/>

<link rel="stylesheet" href="./main.css" />
<link rel="stylesheet" href="./style/main.css" />
</head>
<body>
<header>
Expand Down
34 changes: 22 additions & 12 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
<title>판다마켓-로그인</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.0, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<link rel="stylesheet" href="./signup_login.css" />
<link rel="stylesheet" href="./style/signup_login.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
Expand All @@ -27,23 +27,32 @@
<form class="form_area">
<label class="label_text" for="user_email"
>이메일

<input
class="input_area"
id="user_email"
type="email"
placeholder="이메일을 입력해주세요"
name="user_email"
/></label>
name="user_email" />

<div class="error_message"></div
></label>
<label class="label_text" for="password"
>비밀번호
<input
class="input_area"
id="password"
type="password"
placeholder="비밀번호를 입력해주세요"
name="password" /><i class="fa-solid fa-eye"></i
<div class="i_tag_position">
<input
class="input_area"
id="login_password"
type="password"
placeholder="비밀번호를 입력해주세요"
name="password"
/><i class="fa-solid fa-eye-slash"></i>
</div>
<div class="error_message"></div
></label>
<button class="active_blue_button">로그인</button>
<button id="Btn" class="active_blue_button" type="button">
로그인
</button>
</form>
<div class="sns_login_area">
<span class="sns_login_text">간편로그인하기</span>
Expand All @@ -61,6 +70,7 @@
<a class="signup_or_login_link" href="./signup.html">회원가입</a>
</div>
</main>
<script type="module" src="./login.js"></script>
<!-- <script type="module" src="./src/test.js"></script> -->
<script type="module" src="./src/login.js"></script>
</body>
</html>
Empty file removed login.js
View file
Open in desktop
Empty file.
13 changes: 13 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"name": "13-sprint-mission",
"version": "1.0.0",
"description": "13기 프론트엔드 개인 스프린트 미션4 제출일 12월 3일",
"main": "",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
7 changes: 7 additions & 0 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head> </head>
<body>
signin페이지
</body>
</html>
65 changes: 38 additions & 27 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@
<title>판다마켓-회원가입</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no"
content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<link rel="stylesheet" href="./signup_login.css" />
<link rel="stylesheet" href="./style/signup_login.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
Expand All @@ -33,48 +32,59 @@
id="user_email"
type="email"
placeholder="이메일을 입력해주세요"
name="user_email"
/></label>
name="user_email" />
<div class="error_message"></div
></label>
<label class="label_text" for="user_nickname"
>닉네임
<input
class="input_area"
id="user_nickname"
type="text"
placeholder="닉네임을 입력해주세요"
name="nickname"
/></label>
name="nickname" />
<div class="error_message"></div
></label>
<label class="label_text" for="password"
>비밀번호
<input
class="input_area"
id="password"
type="password"
placeholder="비밀번호를 입력해주세요"
name="password" />
<i class="fa-solid fa-eye"></i
<div class="i_tag_position">
<input
class="input_area"
id="password"
type="password"
placeholder="비밀번호를 입력해주세요"
name="password"
/>
<i class="fa-solid fa-eye-slash"></i>
</div>
<div class="error_message"></div
></label>
<label class="label_text" for="password"
<label class="label_text" for="password_correct"
>비밀번호 확인
<input
class="input_area"
id="password"
type="password"
placeholder="비밀번호를 다시 한 번 입력해주세요"
name="password"
/>
<i class="fa-solid fa-eye"></i>
<div class="i_tag_position">
<input
class="input_area"
id="password_correct"
type="password"
placeholder="비밀번호를 다시 한 번 입력해주세요"
name="password"
/>
<i class="fa-solid fa-eye-slash"></i>
</div>
<div class="error_message"></div>
</label>
<button class="active_blue_button">회원가입</button>
<button type="button" id="Btn" class="active_blue_button">
회원가입
</button>
</form>
<div class="sns_login_area">
<span class="sns_login_text">간편로그인하기</span>
<div class="sns_icons">
<a target="_blank" href="https://www.google.co.kr/?hl=ko">
<img class="sns_icon" src="./img/Component 2@2x.svg"
<img class="sns_icon" src="./img/ic_google.svg"
/></a>
<a target="_blank" href="https://www.kakaocorp.com/page/">
<img class="sns_icon" src="./img/Component 3@2x.svg"
<img class="sns_icon" src="./img/ic_kakao.svg"
/></a>
</div>
</div>
Expand All @@ -83,6 +93,7 @@
<a class="signup_or_login_link" href="./login.html">로그인</a>
</div>
</main>
<script type="module" src="./signup.js"></script>
<!-- <script type="module" src="./src/test.js"></script> -->
<script type="module" src="./src/signup.js"></script>
</body>
</html>
Empty file removed signup.js
View file
Open in desktop
Empty file.
105 changes: 105 additions & 0 deletions src/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
const Email = document.querySelector("#user_email");
const password = document.querySelector("#login_password");
const Error_message = document.querySelectorAll(".error_message");
const Btn = document.querySelector("#Btn");
const eyes = document.querySelector("i");
const Input = document.querySelectorAll(".input_area");

const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;

document.addEventListener("DOMContentLoaded", () => {
Button_inactive();
}); //초기 Button 상태 설정

Btn.addEventListener("click", () => {
if (!Btn.disabled) {
location.href = "./items.html";
}
});

//이메일 유효성 검사 함수
function email_check(email) {
return pattern.test(email);
}
//비밀번호 8자리 이상 체크 함수
function password_checked(password) {
return password.length > 7;
}

//a태그 존재시 삭제
function tag_delete(i) {
let isTag = Error_message[i].querySelector("a");
if (isTag) {
Error_message[i].lastChild.remove();
}
}
Comment on lines +30 to +35
Copy link
Collaborator

@kiJu2 kiJu2 Dec 31, 2024

Choose a reason for hiding this comment

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

줄임말 보다는 의도를 명확히 전달해보는건 어떨까요?

Suggested change
function tag_delete(i) {
let isTag = Error_message[i].querySelector("a");
if (isTag) {
Error_message[i].lastChild.remove();
}
}
function tag_delete(errorMessageIndex) {
let isTag = Error_message[errorMessageIndex].querySelector("a");
if (isTag) {
Error_message[errorMessageIndex].lastChild.remove();
}
}

물론 btn, pw 등 편의를 위해서 사용되기도 하나, 명확한 클래스 이름을 사용하시는게 더욱 의도된 바를 전달하기 쉽습니다.

이는 "닌자 코드"에 해당하는 문법입니다:
약어 사용하기
팀에 한 글자 짜리 변수나 모호한 변수명을 사용하지 못하게 하는 제약이 있다면 약어를 쓰는 기지를 발휘하세요. 변수명은 짧을수록 좋으니까요.

예시:

list → lst.
userAgent → ua.
browser → brsr.
등등…
모든 걸 줄여서 당신의 코드를 읽을 가치가 있는 직감이 뛰어난 개발자만 유지보수를 담당 할 수 있게 해 놓읍시다.

위 문서는 "이렇게 해라 !"가 아니라, "이를 지양하자 !"라는 것으로 작성된 문서 내용입니다. 😊
물론 oAuth(Open Authorization), sms(Short Message Service) 와 같이 내용이 길어서 통상적으로 줄임말을 사용하는 경우도 있기는 하기에 무조건 풀 텍스트를 사용하자 라는 차원은 아님을 전달드립니다. 😊


function Email_focus_out(e) {
Copy link
Collaborator

@kiJu2 kiJu2 Dec 31, 2024

Choose a reason for hiding this comment

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

(제안) 함수명은 동사로 작성되며, 변수/함수명은 카멜케이스로 작성되는게 일반적이예요 😊

Suggested change
function Email_focus_out(e) {
function handleFocusOutEmailInput(e) {

일반적으로 변수는 명사, 함수는 동사로 지어요.
boolean의 경우 isValidEmail와 같이 is, are, has로 시작하기도 합니다. =)

함수의 경우 다음과 같은 단어들이 접두사가 될 수 있어요:

  • get
  • fetch
  • push
  • update
  • create
  • calculate
  • set
  • 등등 ...

일반적인 네이밍 컨벤션 보기

let input = e.target.value;
tag_delete(0);
if (!email_check(input)) {
e.target.classList.add("input_red_border");
const text = document.createElement("a");
if (input == "") {
text.textContent = "이메일을 입력해주세요";
Error_message[0].prepend(text);
} else {
text.textContent = "잘못된 이메일 형식 입니다.";
Error_message[0].prepend(text);
}
} else {
e.target.classList.remove("input_red_border");
}
}

//비밀번호 함수
function Password_focus_out(e, x) {
let input = e.target.value;
tag_delete(x);
if (!password_checked(input)) {
e.target.classList.add("input_red_border");
const text = document.createElement("a");
text.textContent =
input === ""
? "비밀번호를 입력해주세요"
: "비밀번호를 8자 이상 입력해주세요";
Error_message[x].prepend(text);
} else {
e.target.classList.remove("input_red_border");
}
}
Comment on lines +56 to +70
Copy link
Collaborator

@kiJu2 kiJu2 Dec 31, 2024

Choose a reason for hiding this comment

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

여기도 마찬가지로 카멜케이스, 동사, 그리고 줄임말을 방지하면 다음과 같이 적용해볼 수 있어요 😊

Suggested change
function Password_focus_out(e, x) {
let input = e.target.value;
tag_delete(x);
if (!password_checked(input)) {
e.target.classList.add("input_red_border");
const text = document.createElement("a");
text.textContent =
input === ""
? "비밀번호를 입력해주세요"
: "비밀번호를 8자 이상 입력해주세요";
Error_message[x].prepend(text);
} else {
e.target.classList.remove("input_red_border");
}
}
function handleFocusOutPasswordInput(event, errorMessageIndex) {
let input = event.target.value;
tag_delete(errorMessageIndex);
if (!password_checked(input)) {
event.target.classList.add("input_red_border");
const text = document.createElement("a");
text.textContent =
input === ""
? "비밀번호를 입력해주세요"
: "비밀번호를 8자 이상 입력해주세요";
Error_message[errorMessageIndex].prepend(text);
} else {
event.target.classList.remove("input_red_border");
}
}


//버튼 함수
function Button_inactive(e) {
switch (email_check(Email.value) && password_checked(password.value)) {
case true:
Btn.disabled = false;

break;
case false:
Btn.disabled = true;

break;
}
Comment on lines +74 to +83
Copy link
Collaborator

@kiJu2 kiJu2 Dec 31, 2024

Choose a reason for hiding this comment

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

다음과 같이 조건문을 거치지 않고 코드를 간결하게 작성할 수 있습니다 !

Suggested change
switch (email_check(Email.value) && password_checked(password.value)) {
case true:
Btn.disabled = false;
break;
case false:
Btn.disabled = true;
break;
}
Btn.disabled = !(email_check(Email.value) && password_checked(password.value));
}

}
//패스워드 숨김 핸들러 함수
function Password_hide(e) {
if (password.type == "password") {
password.type = "text";
e.target.classList.remove("fa-eye-slash");
e.target.classList.add("fa-eye");
} else {
password.type = "password";
e.target.classList.remove("fa-eye");
e.target.classList.add("fa-eye-slash");
}
}
//이벤트 핸들러 등록
password.addEventListener("focusout", Password_focus_out);
Email.addEventListener("focusout", Email_focus_out);
password.addEventListener("focusout", (e) => Password_focus_out(e, 1));
eyes.addEventListener("click", Password_hide);

Input.forEach((input) => {
input.addEventListener("change", Button_inactive);
});
Loading
Loading