-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
diff --git a/src/main.tsx b/src/main.tsx
index 47e3869b..b5ec4d28 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,4 @@
import { createRoot } from "react-dom/client";
-import "../public/reset.css";
import "../public/common.css";
import "./index.css";
import App from "./App.jsx";
diff --git a/src/pages/Login_SignupPage/LoginPage.tsx b/src/pages/Login_SignupPage/LoginPage.tsx
new file mode 100644
index 00000000..8edbe62c
--- /dev/null
+++ b/src/pages/Login_SignupPage/LoginPage.tsx
@@ -0,0 +1,115 @@
+import logo from "@/assets/logo/logo.svg";
+import { Link, useNavigate } from "react-router-dom";
+import FieldUncontrolled from "./components/FieldUncontrolled";
+import SocialLogin from "./components/SocialLogin";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import {
+ validateEmail,
+ validatePassword,
+ validatePasswordCheck,
+} from "@/utils/validations";
+
+export interface ILoginData {
+ email: string;
+ password: string;
+}
+
+export const fieldMap = {
+ email: {
+ id: "email",
+ label: "이메일",
+ type: "email",
+ placeholder: "이메일을 입력해주세요",
+ validator: validateEmail,
+ },
+ nickname: {
+ id: "nickname",
+ label: "닉네임",
+ type: "text",
+ placeholder: "닉네임을 입력해주세요",
+ },
+ password: {
+ id: "password",
+ label: "비밀번호",
+ type: "password",
+ placeholder: "비밀번호를 입력해주세요",
+ validator: validatePassword,
+ },
+ passwordCheck: {
+ id: "passwordCheck",
+ label: "비밀번호 확인",
+ type: "password",
+ placeholder: "비밀번호를 다시 입력해주세요",
+ validator: validatePasswordCheck,
+ },
+} as const;
+
+const LoginPage = () => {
+ const [isValidating, setIsValidating] = useState(false);
+ const [hasError, setHasError] = useState
(true);
+ const loginData = useRef({ email: "", password: "" });
+ const isMount = useRef(true);
+ const navigate = useNavigate();
+ const commonFieldProps = {
+ formData: loginData.current,
+ validationTrigger: isValidating,
+ onCheckValidating: setIsValidating,
+ errorSetter: setHasError,
+ };
+
+ const handleStartValidation = () => {
+ //검증 시작할 때 hasError->false, 각 필드에서 하나라도 에러있으면 true
+ setIsValidating(true);
+ setHasError(false);
+ };
+
+ useEffect(() => {
+ if (isMount.current) {
+ isMount.current = false;
+ return;
+ }
+
+ if (isValidating || hasError === true) {
+ return;
+ }
+
+ navigate("/");
+ }, [isValidating, hasError]);
+
+ return (
+
+
+ 
+
+
+
+
+
+
+ 판다마켓이 처음이신가요?
+
+ 회원가입
+
+
+
+ );
+};
+
+export default LoginPage;
diff --git a/src/pages/Login_SignupPage/SignupPage.tsx b/src/pages/Login_SignupPage/SignupPage.tsx
new file mode 100644
index 00000000..c9157972
--- /dev/null
+++ b/src/pages/Login_SignupPage/SignupPage.tsx
@@ -0,0 +1,93 @@
+import logo from "@/assets/logo/logo.svg";
+import { Link, useNavigate } from "react-router-dom";
+import FieldUncontrolled from "./components/FieldUncontrolled";
+import SocialLogin from "./components/SocialLogin";
+import { fieldMap } from "./LoginPage";
+import { useEffect, useRef, useState } from "react";
+import { type ILoginData } from "./LoginPage";
+import clsx from "clsx";
+
+interface ISignupData extends ILoginData {
+ nickname: string;
+ passwordCheck: string;
+}
+
+const SignupPage = () => {
+ const [isValidating, setIsValidating] = useState(false);
+ const [hasError, setHasError] = useState(true);
+ const signupData = useRef({
+ email: "",
+ nickname: "",
+ password: "",
+ passwordCheck: "",
+ });
+ const isMount = useRef(true);
+ const navigate = useNavigate();
+ const commonFieldProps = {
+ formData: signupData.current,
+ validationTrigger: isValidating,
+ onCheckValidating: setIsValidating,
+ errorSetter: setHasError,
+ };
+
+ const handleStartValidation = () => {
+ //검증 시작할 때 hasError->false, 각 필드에서 하나라도 에러있으면 true
+ setIsValidating(true);
+ setHasError(false);
+ };
+
+ useEffect(() => {
+ if (isMount.current) {
+ isMount.current = false;
+ return;
+ }
+
+ if (isValidating || hasError === true) {
+ return;
+ }
+
+ navigate("/login");
+ }, [isValidating, hasError]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ 이미 회원이신가요?
+
+ 로그인
+
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/src/pages/Login_SignupPage/components/FieldUncontrolled.tsx b/src/pages/Login_SignupPage/components/FieldUncontrolled.tsx
new file mode 100644
index 00000000..f060036b
--- /dev/null
+++ b/src/pages/Login_SignupPage/components/FieldUncontrolled.tsx
@@ -0,0 +1,155 @@
+import visibilityOn from "@/assets/icons/ic_visibility_on.svg";
+import visibilityOff from "@/assets/icons/ic_visibility_off.svg";
+import isEmpty from "@/utils/isEmpty";
+import { type ILoginData } from "../LoginPage";
+import React, { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+
+type SingleParamValidator = (value: string) => {
+ isValid: boolean;
+ errorMsg: string | null;
+};
+type TwoParamValidator = (
+ value: string,
+ comparisonValue: string | undefined
+) => { isValid: boolean; errorMsg: string | null };
+
+interface Props {
+ id: string;
+ label: string;
+ type: "email" | "text" | "password";
+ placeholder: string;
+ validator?: SingleParamValidator | TwoParamValidator;
+ formData: ILoginData;
+ validationTrigger: boolean;
+ onCheckValidating: React.Dispatch>;
+ errorSetter: React.Dispatch>;
+ //비밀번호 확인을 위한 비밀번호 값
+ comparisonValue?: string;
+}
+
+const FieldUncontrolled = ({
+ id,
+ label,
+ type,
+ placeholder,
+ validator,
+ formData,
+ validationTrigger,
+ onCheckValidating,
+ errorSetter,
+ comparisonValue,
+}: Props) => {
+ const [errorMsg, setErrorMsg] = useState(null);
+ const [isVisibilityOn, setIsVisibilityOn] = useState(false);
+ const inputRef = useRef(null);
+ const isMount = useRef(true);
+ const isPassword = type === "password";
+
+ const handleChangeValue = () => {
+ if (id in formData && inputRef.current) {
+ formData[id as keyof ILoginData] = inputRef.current?.value;
+ }
+ };
+
+ useEffect(() => {
+ if (isMount.current) {
+ isMount.current = false;
+ return;
+ }
+
+ //의존성 배열에 다른 것을 포함시키면서 trigger가 true일 때에만 실행하도록
+ if (!validationTrigger) {
+ return;
+ }
+
+ const value = inputRef.current!.value;
+
+ if (isEmpty(value)) {
+ errorSetter(true);
+ setErrorMsg(placeholder);
+ onCheckValidating(false);
+ return;
+ }
+
+ if (validator && id === "passwordCheck") {
+ const { isValid, errorMsg } = validator(value, comparisonValue);
+
+ if (!isValid) {
+ errorSetter(true);
+ setErrorMsg(errorMsg);
+ onCheckValidating(false);
+ return;
+ }
+ } else if (validator) {
+ const { isValid, errorMsg } = (validator as SingleParamValidator)(value);
+
+ if (!isValid) {
+ errorSetter(true);
+ setErrorMsg(errorMsg);
+ onCheckValidating(false);
+ return;
+ }
+ }
+
+ setErrorMsg(null);
+ onCheckValidating(false);
+ }, [validationTrigger, isEmpty, validator]);
+
+ return (
+
+
+
+
{
+ setErrorMsg(null);
+ }}
+ />
+ {isPassword ? (
+
+ ) : undefined}
+
+ {errorMsg ? (
+
+ {errorMsg}
+
+ ) : undefined}
+
+ 간편 로그인하기
+
+
+
+
+
+
+ 믿을 수 있는
+
+ 판다마켓 중고 거래
+
+
+
+
+
+ 일상의 모든 물건을
+ 거래해보세요
+
+
+
+
+
+
+
+
+
+ {keyword}
+
+
+ {title}
+
+
+ {description}
+
+