refactor(mentor): api 통신 개선

Author: HaydenDevK

utils/api.js

@@ -0,0 +1,21 @@
+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);
+		} else {
+			return response;
+		}
+	} 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,43 @@ function getIsConfirmedConfirmPassword(
 	}
 }
 
+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;
+	window.localStorage.setItem("accessToken", accessToken);
+	goToFolderPage();
+};
+
+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;
+	window.localStorage.setItem("accessToken", accessToken);
+	goToFolderPage();
+};
+
 export {
 	getPasswordVisibility,
 	goToFolderPage,
@@ -87,4 +126,7 @@ export {
 	getIsCorrectPassword,
 	getIsFilledConfirmPassword,
 	getIsConfirmedConfirmPassword,
+	signIn,
+	getIsNewEmail,
+	signUp,
 };

utils/auth.js utils/authorize.jsutils/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");
@@ -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({