[김선혜] week6

utils/accessToken.js

@@ -0,0 +1,9 @@
+const getAccessToken = () => {
+	return localStorage.getItem("accessToken");
+};
+
+const setAccessToken = (accessToken) => {
+	localStorage.setItem("accessToken", accessToken);
+};
+
+export { getAccessToken, setAccessToken };

utils/apiClient.js

@@ -0,0 +1,19 @@
+import { BASE_URL } from "./constants.js";
+
+export const fetchClient = async ({ url, method, body }) => {
+	try {
+		const response = await fetch(`${BASE_URL}/${url}`, {
+			method,
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(body),
+		});
+
+		if (response.status !== 200) {
+			throw new Error(response.status);
+		}
+	} catch (error) {
+		throw error;
+	}
+};

utils/authorize.js

@@ -0,0 +1,131 @@
+import {
+	USERS,
+	EMAIL_PATTERN,
+	PASSWORD_PATTERN,
+	FOLDER_PAGE_PATH,
+} from "/utils/constants.js";
+
+import { fetchClient } from "./apiClient.js";
+
+import { getAccessToken, setAccessToken } from "./accessToken.js";
+
+function goToFolderPage() {
+	location.href = FOLDER_PAGE_PATH;
+}
+
+function getIsFilledEmail(email) {
+	if (email !== "") {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function getIsValidEmail(email) {
+	if (EMAIL_PATTERN.test(email)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function getIsFilledPassword(password) {
+	if (password !== "") {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function getIsValidPassword(password) {
+	if (PASSWORD_PATTERN.test(password)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function getIsCorrectPassword(password) {
+	if (password === USERS[0].password) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function getIsFilledConfirmPassword(confirmPassword) {
+	if (confirmPassword !== "") {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function getIsConfirmedConfirmPassword(
+	confirmPassword,
+	passwordInputElementValue
+) {
+	if (confirmPassword === passwordInputElementValue) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+const redirectIfSignedIn = () => {
+	if (getAccessToken()) {
+		goToFolderPage();
+	}
+};
+
+const signIn = async (email, password) => {
+	const response = await fetchClient({
+		url: "sign-in",
+		method: "POST",
+		body: { email, password },
+	});
+	const result = await response.json();
+	const accessToken = result.data.accessToken;
+	setAccessToken(accessToken);
+	redirectIfSignedIn();
+};
+
+const getIsNewEmail = async (email) => {
+	try {
+		await fetchClient({
+			url: "check-email",
+			method: "POST",
+			body: { email },
+		});
+		return true;
+	} catch {
+		return false;
+	}
+};
+
+const signUp = async (email, password) => {
+	const response = await fetchClient({
+		url: "sign-up",
+		method: "POST",
+		body: { email, password },
+	});
+	const result = await response.json();
+	const accessToken = result.data.accessToken;
+	setAccessToken(accessToken);
+	redirectIfSignedIn();
+};
+
+export {
+	goToFolderPage,
+	getIsFilledEmail,
+	getIsValidEmail,
+	getIsFilledPassword,
+	getIsValidPassword,
+	getIsCorrectPassword,
+	getIsFilledConfirmPassword,
+	getIsConfirmedConfirmPassword,
+	signIn,
+	getIsNewEmail,
+	signUp,
+	redirectIfSignedIn,
+};

utils/auth.js → utils/constants.js

@@ -1,5 +1,4 @@
-/* 비밀번호 토글 */
-// 상수
+// 로그인, 회원가입 폼 비밀번호 토글
 const PASSWORD_TOGGLE_CONSTANT = {
 	visible: {
 		inputType: "text",
@@ -13,18 +12,7 @@ const PASSWORD_TOGGLE_CONSTANT = {
 	},
 };
 
-// DOM 요소
-const passwordToggleElement = document.querySelector(".auth__toggle-password");
-
-// 함수
-function getPasswordVisibility(inputType) {
-	return inputType === "password"
-		? PASSWORD_TOGGLE_CONSTANT.visible
-		: PASSWORD_TOGGLE_CONSTANT.invisible;
-}
-
-/* 유효성 검사 */
-// 상수
+// 로그인, 회원가입
 const USERS = [
 	{
 		email: "test@codeit.com",
@@ -43,34 +31,40 @@ const AUTH_HINT = {
 	password: {
 		default: "",
 		isNotFilled: "비밀번호를 입력해주세요.",
-		isNotExists: "비밀번호를 변경해주세요.",
+		isNotCorrect: "비밀번호를 변경해주세요.",
 		isNotValidated: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.",
 		isNotConfirmed: "비밀번호가 일치하지 않아요.",
 	},
 };
 
 const EMAIL_PATTERN = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
 
+const PASSWORD_PATTERN = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
+
 const INPUT_STATUS = {
 	default: "default",
 	isNotFilled: "isNotFilled",
 	isNotValidated: "isNotValidated",
 	isExists: "isExists",
 	isNotExists: "isNotExists",
 	isNotConfirmed: "isNotConfirmed",
+	isNotCorrect: "isNotCorrect",
 };
 
 const INPUT_HINT_CLASSNAME = "auth__input--hint";
 
 const FOLDER_PAGE_PATH = "/pages/forder.html";
 
+const BASE_URL = "https://bootcamp-api.codeit.kr/api";
+
 export {
-	passwordToggleElement,
-	getPasswordVisibility,
+	PASSWORD_TOGGLE_CONSTANT,
 	USERS,
 	AUTH_HINT,
 	EMAIL_PATTERN,
+	PASSWORD_PATTERN,
 	INPUT_STATUS,
 	INPUT_HINT_CLASSNAME,
 	FOLDER_PAGE_PATH,
+	BASE_URL,
 };

utils/getPasswordVisibility.js

@@ -0,0 +1,9 @@
+import { PASSWORD_TOGGLE_CONSTANT } from "/utils/constants.js";
+
+function getPasswordVisibility(inputType) {
+	return inputType === "password"
+		? PASSWORD_TOGGLE_CONSTANT.visible
+		: PASSWORD_TOGGLE_CONSTANT.invisible;
+}
+
+export { getPasswordVisibility };

utils/signin.js

@@ -1,16 +1,31 @@
 import {
-	passwordToggleElement,
-	getPasswordVisibility,
-	USERS,
+	goToFolderPage,
+	getIsFilledEmail,
+	getIsValidEmail,
+	getIsFilledPassword,
+	signIn,
+} from "/utils/authorize.js";
+
+import {
 	AUTH_HINT,
-	EMAIL_PATTERN,
 	INPUT_STATUS,
 	INPUT_HINT_CLASSNAME,
-	FOLDER_PAGE_PATH,
-} from "/utils/auth.js";
+} from "/utils/constants.js";
+
+import { getAccessToken } from "/utils/accessToken.js";
+
+import { getPasswordVisibility } from "./getPasswordVisibility.js";
+
+/* 로그인 상태로 접근 시 리다이렉트 */
+(function () {
+	if (getAccessToken()) {
+		goToFolderPage();
+	}
+})();
 
 /* 비밀번호 토글 */
-// 이벤트 핸들러
+const passwordToggleElement = document.querySelector(".auth__toggle-password");
+
 passwordToggleElement.addEventListener("click", () => {
 	const passwordInput = document.querySelector(".auth__input-password");
 	const passwordIcon = document.querySelector(".auth__icon-password");
@@ -23,14 +38,12 @@ passwordToggleElement.addEventListener("click", () => {
 });
 
 /* 유효성 검사 */
-// DOM 요소
 const emailInputElement = document.querySelector(".auth__input-email");
 const passwordInputElement = document.querySelector(".auth__input-password");
 const emailHintElement = document.querySelector(".auth__email-hint");
 const passwordHintElement = document.querySelector(".auth__password-hint");
 const signinButtonElement = document.querySelector(".signin__button");
 
-// 함수
 function changeEmailHint(hintType) {
 	if (emailHintElement.innerText === AUTH_HINT.email[hintType]) return; // 이전 상태와 바꾸려는 상태가 동일할 경우 리턴
 	emailHintElement.innerText = AUTH_HINT.email[hintType];
@@ -53,11 +66,10 @@ function changePasswordHint(hintType) {
 	}
 }
 
-// 함수
 function checkEmailFocusout(email) {
-	if (email === "") {
+	if (!getIsFilledEmail(email)) {
 		changeEmailHint(INPUT_STATUS.isNotFilled);
-	} else if (!EMAIL_PATTERN.test(email)) {
+	} else if (!getIsValidEmail(email)) {
 		changeEmailHint(INPUT_STATUS.isNotValidated);
 	} else {
 		changeEmailHint(INPUT_STATUS.default);
@@ -72,47 +84,33 @@ function checkPasswordFocusout(password) {
 	}
 }
 
-function getIsUserEmail(email) {
-	if (email === "") {
+function getIsCompleteEmail(email) {
+	if (!getIsFilledEmail(email)) {
 		changeEmailHint(INPUT_STATUS.isNotFilled);
 		return false;
-	} else if (!EMAIL_PATTERN.test(email)) {
+	} else if (!getIsValidEmail(email)) {
 		changeEmailHint(INPUT_STATUS.isNotValidated);
 		return false;
-	} else if (email !== USERS[0].email) {
-		changeEmailHint(INPUT_STATUS.isNotExists);
-		return false;
 	} else {
 		changeEmailHint(INPUT_STATUS.default);
 		return true;
 	}
 }
 
-function getIsUserPassword(password) {
-	if (password === "") {
+function getIsCompletePassword(password) {
+	if (!getIsFilledPassword(password)) {
 		changePasswordHint(INPUT_STATUS.isNotFilled);
 		return false;
-	} else if (password !== USERS[0].password) {
-		changePasswordHint(INPUT_STATUS.isNotExists);
-		return false;
 	} else {
 		changePasswordHint(INPUT_STATUS.default);
 		return true;
 	}
 }
-
-function signinSuccess() {
-	location.href = FOLDER_PAGE_PATH;
-}
-
 function clickSignin(email, password) {
-	const isUserEmail = getIsUserEmail(email);
-	if (!isUserEmail) return checkPasswordFocusout(password); // TODO 유저 이메일이 아닌경우 비밀번호 입력 여부만 검사하고 리턴
-	const isUserPassword = getIsUserPassword(password);
-	if (isUserEmail && isUserPassword) signinSuccess();
+	if (getIsCompleteEmail(email) && getIsCompletePassword(password))
+		signIn(email, password);
 }
 
-// 이벤트 핸들러 등록
 emailInputElement.addEventListener("focusout", (e) => {
 	checkEmailFocusout(e.target.value);
 });