Merge branch 'develop' of https://github.com/f-lab-edu/eungeori into …

…feat/calender

src/app/auth/common/inputUI.tsx

@@ -0,0 +1,30 @@
+import { inputStyle } from "@/app/components/common/input.css";
+import { pink80 } from "@/app/styles/colors.css";
+import { caption, regular } from "@/app/styles/font.css";
+import { paddingSprinkles } from "@/app/styles/padding.css";
+import { HTMLInputTypeAttribute } from "react";
+import { UseFormRegister } from "react-hook-form";
+
+type InputUiProps = {
+  text: string;
+  type?: HTMLInputTypeAttribute;
+  maxLegnth: number;
+  register: ReturnType<UseFormRegister<any>>;
+  errorMessage: string | undefined;
+};
+
+const FormInputUI = ({ text, type, maxLegnth, register, errorMessage }: InputUiProps) => {
+  return (
+    <div>
+      <p className={`${caption} ${regular} ${paddingSprinkles({ paddingBottom: "s4" })}`}>
+        {text}
+        <span className={`${pink80}`}>*</span>
+      </p>
+      <input placeholder={text} className={inputStyle} {...register} maxLength={maxLegnth} type={type} />
+
+      <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>{errorMessage}</p>
+    </div>
+  );
+};
+
+export default FormInputUI;

src/app/login/components/loginForm.tsx → src/app/auth/login/components/loginForm.tsx

@@ -1,8 +1,6 @@
 import { flexSprinklesFc } from "@/app/components/common/utils/flex";
-import { gray300, pink80 } from "@/app/styles/colors.css";
-import { inputStyle } from "@/app/styles/common/input.css";
-import { caption, caption2 } from "@/app/styles/font.css";
-import { paddingSprinkles } from "@/app/styles/padding.css";
+import { gray300 } from "@/app/styles/colors.css";
+import { caption2 } from "@/app/styles/font.css";
 import { formBox } from "../styles/login.css";
 import { useRouter } from "next/navigation";
 
@@ -12,11 +10,12 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { pointer, buttonOutLine } from "@/app/styles/global.css";
 
-import { useAuth } from "../hook";
+import { useLogin } from "../hook";
+import FormInputUI from "../../common/inputUI";
 
 const LoginForm = () => {
   const router = useRouter();
-  const { onLoginSubmit } = useAuth();
+  const { onLoginSubmit } = useLogin();
 
   const {
     register,
@@ -35,26 +34,20 @@ const LoginForm = () => {
     <>
       <form className={formBox} onSubmit={handleSubmit(onLoginSubmit)}>
         <div className={flexSprinklesFc({ flexDirection: "column", gap: "8px" })} style={{ width: "95%" }}>
-          <div>
-            <input className={inputStyle} placeholder="아이디" {...register("id")} maxLength={10} />
+          <FormInputUI
+            text="아이디"
+            maxLegnth={10}
+            register={register("id")}
+            errorMessage={errors.id?.message}
+          />
 
-            <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>
-              {errors.id?.message}
-            </p>
-          </div>
-
-          <div>
-            <input
-              className={inputStyle}
-              placeholder="비밀번호"
-              {...register("password")}
-              type="password"
-              maxLength={12}
-            />
-            <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>
-              {errors.password?.message}
-            </p>
-          </div>
+          <FormInputUI
+            text="비밀번호"
+            type="password"
+            maxLegnth={12}
+            register={register("password")}
+            errorMessage={errors.password?.message}
+          />
         </div>
       </form>
 

src/app/login/components/loginPopup.tsx → src/app/auth/login/components/loginPopup.tsx

@@ -1,12 +1,12 @@
 import Button from "@/app/components/common/Button";
 import Popup from "@/app/components/common/Popup";
-import { useLoginUiStore } from "@/app/store/login/loginStore";
+import { usePopupStore } from "@/app/store/popup/PopupStore";
 import { colors } from "@/app/styles/colors.css";
 
 const LoginPopup = () => {
-  const { setLoginMessage, setIsLoginPopup } = useLoginUiStore();
-  const loginMessageState = useLoginUiStore((state) => state.loginMessage);
-  const isLoginPopupState = useLoginUiStore((state) => state.isLoginPopup);
+  const { setIsPopup, setMessage } = usePopupStore();
+  const loginMessageState = usePopupStore((state) => state.message);
+  const isLoginPopupState = usePopupStore((state) => state.isPopup);
   return (
     <>
       {isLoginPopupState && (
@@ -16,8 +16,8 @@ const LoginPopup = () => {
             background={colors.primary}
             color={colors.white}
             onClick={() => {
-              setIsLoginPopup(false);
-              setLoginMessage("");
+              setIsPopup(false);
+              setMessage("");
             }}
           />
         </Popup>

src/app/auth/login/hook/index.ts

@@ -0,0 +1 @@
+export { useLogin } from "./useLogin";

src/app/login/hook/useAuth.ts → src/app/auth/login/hook/useLogin.ts

@@ -1,18 +1,19 @@
-import { useLoginUiStore } from "@/app/store/login/loginStore";
+import { usePopupStore } from "@/app/store/popup/PopupStore";
 import { LocalStorage } from "@/app/types/localStorageSchema";
 import { signinSchema } from "@/app/types/signinSchema";
 import { useRouter } from "next/navigation";
 import { z } from "zod";
 
-export const useAuth = () => {
+export const useLogin = () => {
   const router = useRouter();
 
-  const { setLoginMessage, setIsLoginPopup } = useLoginUiStore();
+  const setIsPopupState = usePopupStore((state) => state.setIsPopup);
+  const setMessageState = usePopupStore((state) => state.setMessage);
 
   const onLoginSubmit = (data: z.infer<typeof signinSchema>) => {
     if (!data) {
-      setLoginMessage("가입된 정보를 확인해주세요.");
-      setIsLoginPopup(true);
+      setMessageState("가입된 정보를 확인해주세요.");
+      setIsPopupState(true);
       return;
     }
 
@@ -22,14 +23,14 @@ export const useAuth = () => {
     const getAuthInfo = signupStorage.get();
 
     if (!getAuthInfo) {
-      setLoginMessage("회원가입을 진행해주세요.");
-      setIsLoginPopup(true);
+      setMessageState("회원가입을 진행해주세요.");
+      setIsPopupState(true);
       return;
     }
 
     if (getAuthInfo.id !== data.id || getAuthInfo.password !== data.password) {
-      setLoginMessage("아이디, 비밀번호를 확인해주세요.");
-      setIsLoginPopup(true);
+      setMessageState("아이디, 비밀번호를 확인해주세요.");
+      setIsPopupState(true);
       return;
     }
 

src/app/login/loginPage.tsx → src/app/auth/login/loginPage.tsx

@@ -2,10 +2,10 @@
 
 import Image from "next/image";
 import Logo from "@svgs/logo.svg";
-import { flexSprinklesFc } from "../components/common/utils/flex";
 import { loginWrapper, loginLogo, loginTextBox, loginHeading, loginCaption } from "./styles/login.css";
 import LoginForm from "./components/loginForm";
 import LoginPopup from "./components/loginPopup";
+import { flexSprinklesFc } from "@/app/components/common/utils/flex";
 
 export default function LoginPage() {
   const logoClassName = flexSprinklesFc({

src/app/auth/signup/components/signupForm.tsx

@@ -0,0 +1,80 @@
+import Button from "@/app/components/common/Button";
+import { flexSprinklesFc } from "@/app/components/common/utils/flex";
+import { colors } from "@/app/styles/colors.css";
+import { signupSchema } from "@/app/types/signupSchema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useSignup } from "../hook";
+import FormInputUI from "../../common/inputUI";
+
+const SignupForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<z.infer<typeof signupSchema>>({
+    resolver: zodResolver(signupSchema),
+    mode: "onChange",
+    defaultValues: {
+      id: "",
+      password: "",
+      confirmPassword: "",
+      nickname: "",
+    },
+  });
+
+  const { onSignupSubmit } = useSignup();
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSignupSubmit)}
+      className={flexSprinklesFc({ flexDirection: "column", gap: "32px" })}
+    >
+      <div className={flexSprinklesFc({ flexDirection: "column", gap: "8px" })}>
+        <FormInputUI
+          text="아이디"
+          maxLegnth={10}
+          register={register("id")}
+          errorMessage={errors.id?.message}
+        />
+
+        <FormInputUI
+          text="비밀번호"
+          type="password"
+          maxLegnth={12}
+          register={register("password")}
+          errorMessage={errors.password?.message}
+        />
+
+        <FormInputUI
+          text="비밀번호 확인"
+          type="password"
+          maxLegnth={12}
+          register={register("confirmPassword")}
+          errorMessage={errors.confirmPassword?.message}
+        />
+
+        <FormInputUI
+          text="닉네임"
+          maxLegnth={12}
+          register={register("nickname")}
+          errorMessage={errors.nickname?.message}
+        />
+      </div>
+
+      <div>
+        <Button
+          text="가입하기"
+          width="100%"
+          background={isValid ? colors.point : colors.gray200}
+          color={colors.white}
+          fontSize="12px"
+          disabled={!isValid}
+        />
+      </div>
+    </form>
+  );
+};
+
+export default SignupForm;

src/app/auth/signup/components/signupPopup.tsx

@@ -0,0 +1,46 @@
+import Button from "@/app/components/common/Button";
+import Popup from "@/app/components/common/Popup";
+import { usePopupStore } from "@/app/store/popup/PopupStore";
+import { colors } from "@/app/styles/colors.css";
+import { useRouter } from "next/navigation";
+
+const messageRoute: Record<string, string | null> = {
+  "이미 존재하는 회원입니다.": null,
+  "이미 존재하는 닉네임입니다.": null,
+  "회원가입이 완료됐습니다.": "/",
+};
+
+const SignupPopup = () => {
+  const router = useRouter();
+  const signupMessageState = usePopupStore((state) => state.message);
+  const signupPopupState = usePopupStore((state) => state.isPopup);
+  const setSignupPopupState = usePopupStore((state) => state.setIsPopup);
+
+  const onClick = () => {
+    const route = signupMessageState ? messageRoute[signupMessageState] : null;
+
+    if (route) {
+      setSignupPopupState(false);
+      router.push(route);
+    } else {
+      setSignupPopupState(false);
+    }
+  };
+  return (
+    <div>
+      {signupPopupState && (
+        <Popup text={signupMessageState}>
+          <Button
+            width="115px"
+            text="확인"
+            onClick={onClick}
+            color={colors.white}
+            background={colors.primary}
+          />
+        </Popup>
+      )}
+    </div>
+  );
+};
+
+export default SignupPopup;

src/app/auth/signup/hook/index.ts

@@ -0,0 +1 @@
+export { useSignup } from "./useSignup";

src/app/auth/signup/hook/useSignup.ts

@@ -0,0 +1,33 @@
+import { usePopupStore } from "@/app/store/popup/PopupStore";
+import { LocalStorage } from "@/app/types/localStorageSchema";
+import { signupSchema } from "@/app/types/signupSchema";
+import { z } from "zod";
+
+export const useSignup = () => {
+  const setIsPopupState = usePopupStore((state) => state.setIsPopup);
+  const setMessageState = usePopupStore((state) => state.setMessage);
+
+  const onSignupSubmit = (data: z.infer<typeof signupSchema>) => {
+    const signupStorage = new LocalStorage("signup");
+
+    if (data.id === signupStorage.get()?.id) {
+      setIsPopupState(true);
+      setMessageState("이미 존재하는 회원입니다.");
+      return;
+    }
+
+    if (data.nickname === signupStorage.get()?.nickname) {
+      setIsPopupState(true);
+      setMessageState("이미 존재하는 닉네임입니다.");
+      return;
+    }
+
+    if (data) {
+      setIsPopupState(true);
+      setMessageState("회원가입이 완료됐습니다.");
+      signupStorage.set(data);
+    }
+  };
+
+  return { onSignupSubmit };
+};