Merge pull request #52 from team-Ollie/17-feature-Signup-API

17 feature signup api

apis/auth.ts

@@ -0,0 +1,81 @@
+import client from "./client";
+
+export const SignIn = async (userData: {
+  loginId: string;
+  password: string;
+}) => {
+  try {
+    const response = await client.post(
+      "/users/login",
+      {
+        loginId: userData.loginId,
+        password: userData.password,
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    if (error.response) {
+      // 200 이외
+      console.error("서버 응답 오류:", error.response.data);
+    } else if (error.request) {
+      // 요청이 전송되었으나 응답을 받지 못한 경우
+      console.error("응답 없음:", error.request);
+    } else {
+      // 요청을 설정하는 도중에 발생한 오류
+      console.error("요청 설정 오류:", error.message);
+    }
+    throw error;
+  }
+};
+
+export interface userProps {
+  loginId: string;
+  password: string;
+  nickname: string;
+  identifier: string;
+  centerIdx: number;
+}
+
+export const SignUp = async (userData: userProps) => {
+  try {
+    const response = await client.post("/users/signup", {
+      loginId: userData.loginId,
+      password: userData.password,
+      nickname: userData.nickname,
+      identifier: userData.identifier,
+      centerIdx: userData.centerIdx,
+    });
+    return response.data;
+  } catch (error) {
+    if (error.response) {
+      console.error();
+    }
+    throw error;
+  }
+};
+
+export type centerProps = {
+  centerIdx: number;
+  name: string;
+};
+
+export interface getCenterListBody {
+  ceterList: centerProps[];
+}
+
+export const getCenterList = async () => {
+  try {
+    const response = await client.get("/users/signupView");
+    return response.data.result.ceterList;
+  } catch (error) {
+    if (error.response) {
+      console.error(error.response);
+    }
+    throw error;
+  }
+};

apis/hooks/auth.ts

@@ -0,0 +1,31 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { SignUp, getCenterList, userProps } from "../auth";
+import { useRouter } from "next/router";
+
+function useGetCenterList() {
+  const { data } = useQuery({
+    queryKey: ["getCenterList"],
+    queryFn: getCenterList,
+  });
+  return { data };
+}
+
+function useSignUp(userData: userProps) {
+  const router = useRouter();
+
+  const { mutate } = useMutation({
+    mutationKey: ["signUp"],
+    mutationFn: () => SignUp(userData),
+    onSuccess: () => {
+      router.push("/login");
+    },
+    onError: (error: Error) => {
+      window.alert("다시 회원가입해주세요.");
+      router.push("/main");
+    },
+  });
+
+  return { mutate };
+}
+
+export { useGetCenterList, useSignUp };

components/auth/AuthInput.tsx

@@ -0,0 +1,56 @@
+import { ChangeEvent, HTMLInputTypeAttribute, forwardRef } from "react";
+
+export interface TextInputProps {
+  className?: string;
+  value: string;
+  isError?: boolean;
+  errorText?: string;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  name: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  maxLength?: number;
+}
+
+const AuthInput = forwardRef<HTMLInputElement, TextInputProps>(
+  (
+    {
+      className = "",
+      value,
+      isError,
+      placeholder = "",
+      errorText,
+      type = "text",
+      name,
+      onChange,
+      maxLength = 10,
+    },
+    ref,
+  ) => {
+    return (
+      <div className="w-full relative">
+        <div
+          className={`${className} rounded-xl border border-solid  ${
+            isError ? "border-red-500" : "border-semantic-grey-2"
+          } rounded-lg p-2`}
+        >
+          <input
+            type={type}
+            name={name}
+            className="w-full outline-none border-none h4 placeholder:text-grey-400 pl-1"
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            required
+          />
+        </div>
+        {isError && (
+          <div className="text-red-500 h5 px-2 absolute">{errorText}</div>
+        )}
+      </div>
+    );
+  },
+);
+
+export default AuthInput;

components/calendar/CalendarModal.tsx

@@ -72,7 +72,7 @@ interface TextProps {
   addExpBack?: string;
 }
 
-function TextLine({
+export function TextLine({
   title,
   className,
   children,

pages/login.tsx

@@ -1,14 +1,16 @@
 import HeadFunction from "@/components/HeadFunction";
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useCallback, useRef } from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
 import Button from "@/components/Button";
 import LogoLetterIcon from "@/public/svgs/LogoLetter.svg";
 import { useMutation } from "@tanstack/react-query";
-import { ResponseBody, setTokenFromLocalStorage } from "@/apis/client";
-import { SignIn } from "@/apis/auth";
+import { setTokenFromLocalStorage } from "@/apis/client";
+
 import { atom, useAtom } from "jotai";
 import { centerNameAtom, isAdminAtom } from "@/utils/atom";
+import AuthInput from "@/components/auth/AuthInput";
+import { SignIn } from "@/apis/auth";
 
 interface userProps {
   loginId: string;
@@ -62,7 +64,7 @@ const Login: NextPage = () => {
       alert("로그인에 성공하였습니다");
     },
     onError: (error) => {
-      alert("로그인에 실패하였습니다");
+      alert("아이디나 비밀번호가 틀렸습니다.");
     },
   });
 
@@ -75,30 +77,27 @@ const Login: NextPage = () => {
       >
         <LogoLetterIcon />
         <div className="flex flex-col gap-3">
-          <input
+          <AuthInput
             placeholder="아이디를 입력하세요"
             name="loginId"
             ref={idInputRef}
             value={userInfo.loginId}
             onChange={onChange}
-            required
-            className="h-[3rem] w-[19.5rem] rounded-xl border border-solid border-semantic-grey-2 pl-[1rem]"
           />
 
-          <input
+          <AuthInput
             placeholder="비밀번호를 입력하세요"
+            type="password"
             name="password"
             ref={pwInputRef}
             value={userInfo.password}
             onChange={onChange}
-            required
-            className="h-[3rem] w-[19.5rem] rounded-xl border border-solid border-semantic-grey-2 pl-[1rem]"
           />
         </div>
-        <button type="submit" className="w-full">
+        <button type="submit" className="w-[20rem]">
           <Button
             text="로그인"
-            style="w-full bg-main-100 py-[0.8rem] h2 text-grey-700"
+            style="w-full bg-main-100 py-[0.6rem] text-grey-700"
             onClick={() => {}}
           />
         </button>

pages/main.tsx

@@ -7,17 +7,17 @@ const OnBoardingMain: NextPage = () => {
   const router = useRouter();
 
   return (
-    <div className="flex flex-col w-full h-screen justify-center items-center">
-      <SplashIcon />
+    <div className="flex flex-col w-full h-full justify-center items-center">
+      <SplashIcon className="mb-6" />
       <div className="flex w-[80%] flex-col h-fit absolute gap-[0.5rem] bottom-12">
         <Button
           text="회원가입"
-          style="w-full bg-main-100 py-[0.8rem] h2 text-grey-700"
+          style="w-full bg-main-100 py-[0.6rem] h2 text-grey-700"
           onClick={() => router.push("./signup")}
         />
         <Button
           text="로그인"
-          style="w-full bg-main-100 py-[0.8rem] h2 text-grey-700"
+          style="w-full bg-main-100 py-[0.6rem] h2 text-grey-700"
           onClick={() => router.push("./login")}
         />
       </div>