Merge pull request #18 from danggin/feature/chat

♻️ refactor: 모달 리팩토링 - 키보드 이벤트 함수 memoization, UI 구조 리팩토링

Author: danggin

src/api/userAuthApi.ts

@@ -22,6 +22,10 @@ export interface ISignUpResponse {
   userNickname: string;
 }
 
+export interface IEmailCheckResponse {
+  available: boolean;
+}
+
 export const loginUser = async (logInfo: {
   userEmail: string;
   password: string;
@@ -75,10 +79,30 @@ export const signUpUser = async (
         "Content-Type": "application/json",
       },
     });
-    console.log(response);
     return response.data;
-  } catch (err) {
-    console.log(err);
+  } catch (error) {
+    console.log(error);
     throw new Error("회원가입에 실패했습니다.");
   }
 };
+
+export const emailCheck = async (variables: {
+  userEmail: string;
+}): Promise<IEmailCheckResponse> => {
+  try {
+    const response = await instance.post<IEmailCheckResponse>(
+      "/user/email/check",
+      variables,
+      {
+        withCredentials: true,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw new Error("이메일 중복체크에 실패했습니다.");
+  }
+};

src/components/form/Form.tsx

@@ -1,11 +1,11 @@
 import * as S from "./ChattingStyle";
 import ChatInputBox from "../../chatInput/ChatInputBox";
 
-export default function ChattingBox() {
+export default function ChattingBox({ socket }: { socket: any }) {
   return (
     <S.chat>
       <S.chatInputBoxContainer>
-        <ChatInputBox />
+        <ChatInputBox socket={socket} />
       </S.chatInputBoxContainer>
     </S.chat>
   );

src/components/ui/card/chatting/Chatting.tsx

@@ -1,20 +1,17 @@
 import Button from "../button/Button";
 import * as S from "./chatInputStyle";
-import { useSocketStore } from "@store/useSocketStore";
 import { useEffect } from "react";
 // import { useParams } from "react-router-dom";
 
-export default function ChatInputBox() {
-  const { socket } = useSocketStore();
-
+export default function ChatInputBox({ socket }: { socket: any }) {
   useEffect(() => {
     if (!socket) {
       console.error("Socket is not connected.");
       return;
     }
   }, []);
 
-  console.log("🚀 Socket:", socket);
+  console.log("🚀 Socket: ", socket);
 
   //   const [message, setMessage] = useState("");
   //   const params = useParams();

src/components/ui/chatInput/ChatInputBox.tsx

@@ -1,60 +1,53 @@
 import ModalPortal from "./ModalPortal";
-import { useModalStore } from "../../../store/useModalStore";
+import { useModalStore } from "@store/useModalStore";
 import { Inside, ModalFrame, Overlay } from "./modalStyle";
-import { useEffect } from "react";
+import { useEffect, useCallback, useRef } from "react";
 import { useModal } from "@hooks/useModal";
 import { modalComponents } from "./modalComponent";
 
 export default function Modal() {
   const { showModal, currentModal, modalColor } = useModalStore();
   const { closeModal } = useModal();
+  const scrollYRef = useRef(0);
 
-  if (!showModal) return null;
+  if (!showModal || !currentModal) return null;
 
   useEffect(() => {
-    document.body.style.cssText = `
-      position: fixed; 
-      top: -${window.scrollY}px;
-      overflow-y: scroll;
-      width: 100%;`;
+    scrollYRef.current = window.scrollY;
+    document.body.style.overflow = "hidden";
+
     return () => {
-      const scrollY = document.body.style.top;
-      document.body.style.cssText = "";
-      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
+      document.body.style.overflow = "auto";
+      window.scrollTo(0, scrollYRef.current);
     };
   }, []);
 
-  useEffect(() => {
-    const onKeydownEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        closeModal();
-      }
-    };
+  const onKeydownEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeModal();
+    },
+    [closeModal],
+  );
 
+  useEffect(() => {
     document.addEventListener("keydown", onKeydownEscape);
 
     return () => {
       document.removeEventListener("keydown", onKeydownEscape);
     };
-  }, [closeModal]);
+  }, [onKeydownEscape]);
 
   return (
     <ModalPortal>
       <ModalFrame onClick={closeModal}>
-        {modalColor === "white" ? (
-          <Overlay onClick={closeModal}>
-            <Inside onClick={(e) => e.stopPropagation()} styleKey={modalColor}>
-              {currentModal ? modalComponents[currentModal] : null}
-            </Inside>
-          </Overlay>
-        ) : (
+        <Overlay modalColor={modalColor}>
           <Inside
             onClick={(e) => e.stopPropagation()}
             styleKey={modalColor as "white" | "blue"}
           >
-            {currentModal ? modalComponents[currentModal] : null}
+            {modalComponents[currentModal]}
           </Inside>
-        )}
+        </Overlay>
       </ModalFrame>
     </ModalPortal>
   );

src/components/ui/modal/Modal.tsx

@@ -33,14 +33,15 @@ export const ModalFrame = styled.div`
   inset: 0;
 `;
 
-export const Overlay = styled.div`
+export const Overlay = styled.div<{ modalColor: string }>`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: ${({ modalColor }) =>
+    modalColor === "white" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0)"};
 `;
 
 export const Inside = styled.div<{ styleKey: keyof typeof modalStyles }>`

src/components/ui/modal/modalStyle.ts

@@ -7,9 +7,11 @@ import {
   outGameRoom,
 } from "../api/gameRoomApi";
 import {
+  IEmailCheckResponse,
   ILoginResponse,
   ISignUpResponse,
   ISignUpVariables,
+  emailCheck,
   loginUser,
   signUpUser,
 } from "../api/userAuthApi";
@@ -106,3 +108,17 @@ export const useSignUpSubmitMutation = () => {
     },
   });
 };
+
+export const useEmailCheckSubmitMutation = () => {
+  return useMutation<IEmailCheckResponse, Error, { userEmail: string }>(
+    emailCheck,
+    {
+      onSuccess: (data) => {
+        console.log(data);
+      },
+      onError: (error) => {
+        console.log(error.message);
+      },
+    },
+  );
+};

src/hooks/useMutation.tsx

@@ -389,7 +389,7 @@ export default function GameRoom() {
         >
           상대 플레이어
         </OtherProfileCard>
-        <ChattingBox />
+        <ChattingBox socket={socket} />
       </S.leftContainer>
       <S.centerContainer>
         <S.otherPlayerDeck></S.otherPlayerDeck>

src/pages/game/GameRoom.tsx

@@ -1,4 +1,3 @@
-import Form from "@components/form/Form";
 import SignUpStep from "./SignUpStep";
 import { useFunnel } from "@hooks/useFunnel";
 import {
@@ -9,8 +8,9 @@ import {
   StepBasic,
   Stepper,
 } from "./SignUpStyle";
-import { SubmitHandler } from "react-hook-form";
-import { signUpSchema } from "./schema";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signUpSchema, schema } from "./schema";
 import { useSignUpSubmitMutation } from "@hooks/useMutation";
 import { useNavigate } from "react-router-dom";
 
@@ -20,6 +20,18 @@ export default function SignUp() {
   const { Funnel, Step, setStep, currentStep } = useFunnel(steps[0]);
   const mutation = useSignUpSubmitMutation();
   const navigate = useNavigate();
+  const methods = useForm<signUpSchema>({
+    resolver: zodResolver(schema),
+    mode: "onBlur",
+    shouldUnregister: true,
+    defaultValues: {
+      userEmail: "",
+      password: "",
+      passwordConfirm: "",
+      userNickname: "",
+      profileImage: [],
+    },
+  });
 
   const nextClickHandler = (targetStep: string) => {
     setStep(targetStep);
@@ -29,10 +41,10 @@ export default function SignUp() {
     setStep(targetStep);
   };
 
-  const onSubmit: SubmitHandler<signUpSchema> = async (data) => {
+  const onClickSubmit = async (data: signUpSchema) => {
     const { passwordConfirm, profileImage, ...formData } = data;
 
-    const result = mutation.mutate(formData);
+    const result = await mutation.mutate(formData);
     console.log(result);
 
     navigate("/user/signup/finish");
@@ -55,19 +67,8 @@ export default function SignUp() {
             </>
           )}
         </Stepper>
-        <Form<FormData>
-          onSubmit={onSubmit}
-          formOptions={{
-            defaultValues: {
-              userEmail: "",
-              password: "",
-              passwordConfirm: "",
-              userNickname: "",
-              profileImage: [""],
-            },
-          }}
-        >
-          <FormWrapper>
+        <FormProvider {...methods}>
+          <FormWrapper onSubmit={methods.handleSubmit(onClickSubmit)}>
             <SignUpStep
               steps={steps}
               nextClickHandler={nextClickHandler}
@@ -76,7 +77,7 @@ export default function SignUp() {
               Step={Step}
             />
           </FormWrapper>
-        </Form>
+        </FormProvider>
       </SignUpSection>
     </>
   );

src/pages/user/signUp/SignUp.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import heartImg from "../../../assets/images/icon_heart.svg";
 import Button from "../../../components/ui/button/Button";
 
-import { HeartImage, Message, Welcome, Wrapper } from "./finishStyle";
+import { HeartImage, Message, Welcome, Wrapper } from "./SignUpFinishStyle";
 
 export default function SignUpFinish() {
   const navigate = useNavigate();