Merge pull request kookmin-sw#98 from i-soj-ng/master

Add Favicon

beginner-gain-client/src/components/screen/reset-password/index.tsx

@@ -5,32 +5,47 @@ import Input from "@/components/internal/common/Input";
 import BigButton from "@/components/internal/common/BigButton";
 import Header from "@/components/layout/Header";
 import EmailModal from "@/components/internal/modal/EmailModal";
+import MiniModal from "@/components/internal/modal/MiniModal";
 
-import { initPassword } from "@/server/user";
+import { emailValid, initPassword } from "@/server/user";
 import { AxiosResponse } from "axios";
 
 const Screen = () => {
   const [email, setEmail] = useState<string>('');
   const [openModal, setOpenModal] = useState<boolean>(false);
+  const [openMiniModal, setOpenMiniModal] = useState<boolean>(false);
+  const [isRightEmail, setIsRightEmail] = useState<boolean>(true);
 
   const isButtonActive = Boolean(email);
 
+  const emailValidMutation = useMutation({
+    mutationFn: (email : string) => {
+      return emailValid(email);
+    },
+    onSuccess(data : AxiosResponse) {
+      const result = data.data.isAvailable;
+      setIsRightEmail(!result);
+    },
+    onError(err) {
+    },
+  });
+
   const initPasswordMutation = useMutation({
     mutationFn: (email: string) => {
       return initPassword(email);
     },
     onError(err) {
-      console.log(err.response.data.statusCode);
+      setOpenMiniModal(true);
     },
     onSuccess(data: AxiosResponse) {
       setOpenModal(true);
     }
   });
 
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
-    console.log(email);
-  }
+    emailValidMutation.mutate(e.target.value);
+  };
 
   const handleClickSendButton = async () => {
     initPasswordMutation.mutate(email);
@@ -48,10 +63,16 @@ const Screen = () => {
             <div className="mb-8">
               <Input
                 placeholder={"이메일을 입력하세요"}
-                value={email}
                 name="email"
-                handleInputChange={handleEmailChange}
+                value={email}
+                setValue={setEmail}
+                handleInputChange={handleInputChange}
               />
+              {!isRightEmail &&
+                <p className="text-xxs text-red-600 mt-1">
+                  회원 가입 시 사용한 이메일을 입력하세요.
+                </p>
+              }
             </div>
             <div className="text-xs font-medium">
               <BigButton
@@ -74,6 +95,14 @@ const Screen = () => {
           closeModal={() => setOpenModal(false)}
         />
       }
+      {openMiniModal &&
+        <MiniModal
+          title="이메일 전송에 실패했습니다."
+          content="이메일을 확인한 뒤, 다시 시도해 주세요."
+          button="확인"
+          handleButtonClick={() => setOpenMiniModal(false)}
+        />
+      }
     </div>
   );
 };

beginner-gain-client/src/middleware.ts

@@ -14,3 +14,5 @@ export async function middleware(request: NextRequest) {
 export const config = {
   matcher: ["/make-boilerplate/:path*", "/my-boilerplate"]
 };
+
+

beginner-gain-client/src/pages/_app.tsx

@@ -4,12 +4,14 @@ import ComponentWrapper from "@/components/layout/ComponentWrapper";
 import {useState} from "react";
 import {Hydrate, QueryClient, QueryClientProvider} from "react-query";
 import {RecoilRoot, RecoilEnv} from "recoil";
+import Head from 'next/head';
 
 RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false
 
 const App = ({ Component, pageProps }: AppProps) => {
   const [queryClient] = useState(()=> new QueryClient());
   return <>
+    <link rel="icon" href="/favicon.ico" sizes="any" />
     <QueryClientProvider client={queryClient}>
       <Hydrate state={pageProps.dehydrateState}>
         <RecoilRoot>