Merge pull request #1016 from minjeong9919/part3-김민정-week15

api/api.ts

@@ -1,44 +1,59 @@
 const BASE_URL = "https://bootcamp-api.codeit.kr/api/";
 
-export const getFolderInfo = async () => {
+const fetchJson = async (url: string) => {
   try {
-    const response = await fetch(`${BASE_URL}sample/folder`);
-    const result = await response.json(); // 재사용성을 위해 response.json()으로 끝맺는게 좋음
+    const response = await fetch(url);
+    const result = await response.json();
     return result;
   } catch (error) {
     console.log(error);
   }
 };
 
-export const getUserInfo = async () => {
+const fetchPOSTJson = async (url: string, data: any) => {
   try {
-    const response = await fetch(`${BASE_URL}sample/user`);
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
     const result = await response.json();
     return result;
   } catch (error) {
     console.log(error);
   }
 };
 
+export const getFolderInfo = async () => {
+  const url = `${BASE_URL}sample/folder`;
+  return await fetchJson(url);
+};
+
+export const getUserInfo = async () => {
+  const url = `${BASE_URL}sample/user`;
+  return await fetchJson(url);
+};
+
 export const getFolderList = async () => {
-  try {
-    const response = await fetch(`${BASE_URL}users/1/folders`);
-    const result = await response.json(); // 재사용성을 위해 response.json()으로 끝맺는게 좋음
-    // console.log(result);
-    return result;
-  } catch (error) {
-    console.log(error);
-  }
+  const url = `${BASE_URL}users/1/folders`;
+  return fetchJson(url);
 };
+
 export const getAllLinkData = async (id: string) => {
   const url = id
     ? `${BASE_URL}users/1/folders/${id}`
     : `${BASE_URL}users/1/links`;
-  try {
-    const response = await fetch(url);
-    const result = await response.json(); // 재사용성을 위해 response.json()으로 끝맺는게 좋음
-    return result;
-  } catch (error) {
-    console.log(error);
-  }
+  return fetchJson(url);
+};
+
+export const postSignIn = async (data: any) => {
+  const url = `${BASE_URL}sign-in`;
+  return fetchPOSTJson(url, data);
+};
+
+export const postCheckDuplicationEmail = async (data: any) => {
+  const url = `${BASE_URL}check-email`;
+  return fetchPOSTJson(url, data);
 };

components/SignInUp/EmailPwdInput.tsx

@@ -0,0 +1,228 @@
+import { useState, useEffect, ChangeEvent, KeyboardEvent } from "react";
+import styled from "styled-components";
+import Image from "next/image";
+import eyeoff from "@/assets/icons/eye-off.png";
+import eyeon from "@/assets/icons/eye-on.png";
+import { changeInputBorderColor } from "@/utils/commonSigninupFunc";
+import {
+  emailInputValidationcheck,
+  loginPasswordInputValidationcheck,
+  signInPasswordInputValidationcheck,
+  emailDuplicationCheck,
+} from "@/utils/validation";
+import { ERROR_MESSAGE } from "@/constants/errorMessage";
+import INPUT_STATUS from "@/constants/inputStatus";
+
+type EmailPwdInputPropsType = {
+  title: string;
+  type: string;
+  valueType: string;
+  isEyeIcon?: boolean;
+  setEmailValue?: React.Dispatch<React.SetStateAction<string>>;
+  emailValue?: string | "";
+  setPasswordValue?: React.Dispatch<React.SetStateAction<string | undefined>>;
+  passwordValue?: string | undefined;
+  onEnterButtonClick: () => void;
+  loginStatus?: string;
+  signInStatus?: string;
+  setIsEmailValid?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPasswordValid?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPasswordConfirmValid?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const EmailPwdInput = ({
+  title,
+  type,
+  valueType,
+  isEyeIcon,
+  setEmailValue,
+  emailValue,
+  setPasswordValue,
+  passwordValue,
+  onEnterButtonClick,
+  loginStatus,
+  signInStatus,
+  setIsEmailValid,
+  setIsPasswordValid,
+  setIsPasswordConfirmValid,
+}: EmailPwdInputPropsType) => {
+  const INPUT_STATUS_VALUE = {
+    default: "default",
+    error: "error",
+  };
+  const [inputStatus, setInputStatus] = useState("default");
+  const [inputErrorMessage, setInputErrorMessage] = useState("");
+
+  const [isViewPassword, setIsViewPassword] = useState(false);
+
+  const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    if (valueType === "email") {
+      setEmailValue?.(inputValue);
+    } else if (valueType === "password") {
+      setPasswordValue?.(inputValue);
+    }
+  };
+
+  const setInputStatusAndErrorMessage = (status: "valid" | ErrorType) => {
+    status === "valid"
+      ? setInputStatus(INPUT_STATUS_VALUE.default)
+      : (setInputStatus(INPUT_STATUS_VALUE.error),
+        setInputErrorMessage(status.message));
+  };
+
+  const onInputFocusOutHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+
+    switch (valueType) {
+      case "email":
+        emailInputFocusOutHandler(inputValue);
+        break;
+      case "password": {
+        passwordInputFocusOutHandler(inputValue);
+        break;
+      }
+      case "password2":
+        passwordConfirmInputFocusOutHandler(inputValue);
+        break;
+      default:
+        null;
+    }
+  };
+
+  const emailInputFocusOutHandler = async (email: string) => {
+    const emailInputStatus = emailInputValidationcheck(email);
+    setInputStatusAndErrorMessage(emailInputStatus);
+    if (emailInputStatus === "valid") {
+      setIsEmailValid?.(true);
+      if (signInStatus) {
+        const isDuplicateEmail = await emailDuplicationCheck(email);
+        isDuplicateEmail &&
+          setInputStatusAndErrorMessage(INPUT_STATUS.inUseEmail);
+      }
+    } else {
+      setIsEmailValid?.(false);
+    }
+  };
+
+  const passwordInputFocusOutHandler = async (password: string) => {
+    let passwordInputStatus;
+    if (loginStatus) {
+      passwordInputStatus = loginPasswordInputValidationcheck(password);
+    } else {
+      passwordInputStatus = signInPasswordInputValidationcheck(password);
+    }
+    setInputStatusAndErrorMessage(passwordInputStatus);
+    passwordInputStatus === "valid"
+      ? setIsPasswordValid?.(true)
+      : setIsPasswordValid?.(false);
+  };
+
+  const passwordConfirmInputFocusOutHandler = async (password2: string) => {
+    const passwordInputStatus = signInPasswordInputValidationcheck(
+      passwordValue,
+      password2
+    );
+    setInputStatusAndErrorMessage(passwordInputStatus);
+    passwordInputStatus === "valid"
+      ? setIsPasswordConfirmValid?.(true)
+      : setIsPasswordConfirmValid?.(false);
+  };
+
+  useEffect(() => {
+    if (loginStatus === "fail") {
+      valueType === "email"
+        ? (setInputStatus(INPUT_STATUS_VALUE.error),
+          setInputErrorMessage(ERROR_MESSAGE.email.check))
+        : (setInputStatus(INPUT_STATUS_VALUE.error),
+          setInputErrorMessage(ERROR_MESSAGE.password.check));
+    }
+  }, [loginStatus]);
+
+  const onInputFocusHandler = () => {
+    setInputStatus("writing");
+  };
+
+  const KeyEventHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    const inputElement = e.target as HTMLInputElement;
+    if (e.key === "Enter") {
+      onEnterButtonClick();
+      inputElement.blur();
+    }
+  };
+
+  return (
+    <InputDiv>
+      <p>{title}</p>
+      <EmailPasswordInput
+        type={isViewPassword ? "text" : type}
+        status={inputStatus}
+        onKeyDown={KeyEventHandler}
+        onChange={onInputChangeHandler}
+        onBlur={onInputFocusOutHandler}
+        onFocus={onInputFocusHandler}
+      />
+      {isEyeIcon && (
+        <EyeIconDiv
+          onClick={() => {
+            setIsViewPassword(!isViewPassword);
+          }}
+        >
+          <Image src={isViewPassword ? eyeon : eyeoff} alt="eye_off_icon" />
+        </EyeIconDiv>
+      )}
+      {inputStatus === "error" && (
+        <ErrorMessageDiv>{inputErrorMessage}</ErrorMessageDiv>
+      )}
+    </InputDiv>
+  );
+};
+
+type ErrorType =
+  | {
+      errorName: string;
+      type: string;
+      message: string;
+    }
+  | "valid";
+
+const InputDiv = styled.div`
+  width: 100%;
+  margin-bottom: 24px;
+  position: relative;
+`;
+const EmailPasswordInput = styled.input<{ status: string }>`
+  width: 100%;
+  padding: 18px 15px;
+  border: ${({ status }) =>
+    `1px solid ${changeInputBorderColor(status) ?? "var(--Grey_300)"}`};
+  border-radius: 8px;
+  outline: none;
+  margin-top: 12px;
+
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+`;
+
+const EyeIconDiv = styled.div`
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 53px;
+  right: 16px;
+  cursor: pointer;
+`;
+
+const ErrorMessageDiv = styled.div`
+  color: var(--Red);
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-top: 6px;
+`;
+export default EmailPwdInput;

components/common/BlueButton.tsx

@@ -21,7 +21,7 @@ export const BlueButton = ({
       color={COLORS.White}
       fontSize={fontSize}
       radius={radius}
-      onClick={() => (onBtnHandle ? onBtnHandle() : null)}
+      onClick={onBtnHandle}
     >
       {text}
     </Button>