refactor(mentor): api 통신 개선

Author: HaydenDevK

utils/api.js

@@ -0,0 +1,22 @@
+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);
+		}
+
+		const data = await response.json();
+		return data;
+	} catch (error) {
+		throw error;
+	}
+};

utils/apiClient.js

@@ -6,6 +6,8 @@ import {
 	FOLDER_PAGE_PATH,
 } from "/utils/constants.js";
 
+import { fetchClient } from "./apiClient.js";
+
 // 비밀번호 토글
 function getPasswordVisibility(inputType) {
 	return inputType === "password"
@@ -77,6 +79,36 @@ function getIsConfirmedConfirmPassword(
 	}
 }
 
+const signIn = (email, password) => {
+	const result = fetchClient({
+		url: "sign-in",
+		method: "POST",
+		body: { email, password },
+	});
+	const accessToken = result.data.accessToken;
+	window.localStorage.setItem("accessToken", accessToken);
+	goToFolderPage();
+};
+
+const getIsNewEmail = (email) => {
+	fetchClient({
+		url: "check-email",
+		method: "POST",
+		body: { email },
+	});
+};
+
+const signUp = (email, password) => {
+	const result = fetchClient({
+		url: "sign-up",
+		method: "POST",
+		body: { email, password },
+	});
+	const accessToken = result.data.accessToken;
+	window.localStorage.setItem("accessToken", accessToken);
+	goToFolderPage();
+};
+
 export {
 	getPasswordVisibility,
 	goToFolderPage,
@@ -87,4 +119,7 @@ export {
 	getIsCorrectPassword,
 	getIsFilledConfirmPassword,
 	getIsConfirmedConfirmPassword,
+	signIn,
+	getIsNewEmail,
+	signUp,
 };

utils/auth.js renamed to utils/authorize.js

@@ -4,16 +4,15 @@ import {
 	getIsFilledEmail,
 	getIsValidEmail,
 	getIsFilledPassword,
-} from "/utils/auth.js";
+	signIn,
+} from "/utils/authorize.js";
 
 import {
 	AUTH_HINT,
 	INPUT_STATUS,
 	INPUT_HINT_CLASSNAME,
 } from "/utils/constants.js";
 
-import { signIn } from "./api.js";
-
 /* 로그인 상태로 접근 시 리다이렉트 */
 (function () {
 	const accessToken = localStorage.getItem("accessToken");
@@ -106,10 +105,9 @@ function getIsCompletePassword(password) {
 		return true;
 	}
 }
-
-async function clickSignin(email, password) {
+function clickSignin(email, password) {
 	if (getIsCompleteEmail(email) && getIsCompletePassword(password))
-		await signIn({ email, password });
+		signIn(email, password);
 }
 
 emailInputElement.addEventListener("focusout", (e) => {

utils/signin.js

@@ -7,18 +7,16 @@ import {
 	getIsValidPassword,
 	getIsFilledConfirmPassword,
 	getIsConfirmedConfirmPassword,
-} from "/utils/auth.js";
+	signUp,
+	getIsNewEmail,
+} from "/utils/authorize.js";
 
 import {
 	AUTH_HINT,
 	INPUT_STATUS,
 	INPUT_HINT_CLASSNAME,
 } from "/utils/constants.js";
 
-import { signUp } from "./api.js";
-
-import { getIsNewEmail } from "/utils/api.js";
-
 /* 로그인 상태로 접근 시 리다이렉트 */
 (function () {
 	const accessToken = localStorage.getItem("accessToken");
@@ -105,8 +103,8 @@ function changePasswordConfirmHint(hintType) {
 	}
 }
 
-async function checkEmailFocusout(email) {
-	const isNewEmail = await getIsNewEmail(email);
+function checkEmailFocusout(email) {
+	const isNewEmail = getIsNewEmail(email);
 
 	if (!getIsFilledEmail(email)) {
 		changeEmailHint(INPUT_STATUS.isNotFilled);
@@ -141,8 +139,8 @@ function checkPasswordConfirmFocusout(confirmPassword) {
 	}
 }
 
-async function getIsCompleteEmail(email) {
-	const isNewEmail = await getIsNewEmail(email);
+function getIsCompleteEmail(email) {
+	const isNewEmail = getIsNewEmail(email);
 
 	if (!getIsFilledEmail(email)) {
 		changeEmailHint(INPUT_STATUS.isNotFilled);
@@ -186,13 +184,13 @@ function getIsConfirmedPassword(confirmPassword) {
 	}
 }
 
-async function clickSignup({ email, password, confirmPassword }) {
+function clickSignup({ email, password, confirmPassword }) {
 	if (
 		getIsCompleteEmail(email) &&
 		getIsCompletePassword(password) &&
 		getIsConfirmedPassword(confirmPassword)
 	)
-		await signUp({ email, password });
+		signUp({ email, password });
 }
 
 emailInputElement.addEventListener("focusout", (e) => {
@@ -207,14 +205,6 @@ confirmPasswordInputElement.addEventListener("focusout", (e) => {
 	checkPasswordConfirmFocusout(e.target.value);
 });
 
-emailInputElement.addEventListener("focusout", (e) => {
-	checkEmailFocusout(e.target.value);
-});
-
-passwordInputElement.addEventListener("focusout", (e) => {
-	checkPasswordFocusout(e.target.value);
-});
-
 signupButtonElement.addEventListener("click", (e) => {
 	e.preventDefault();
 	clickSignup({