[feat, refactor] #177 ResetPasswordModal, OpenPasswordModal, Modal.tsx, useModalStore: 비밀번호 재설정 모달 구현 / Modal, useModalStore: form 제출 기능 확장 및 IIFE 지원 / 상태 구독 기반 API 호출 처리

src/app/(auth)/login/_components/LoginForm/PasswordResetRequestModal.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import ResetPasswordLinkModal from '@/components/common/Modal/content/ResetPasswordLinkModal';
+import { postResetPasswordToEmail } from '@/lib/apis/user';
+import { ResetPasswordToEmailBody } from '@/lib/apis/user/type';
+import { useModalStore } from '@/store/useModalStore';
+import { validateEmail } from '@/utils/inputValidation';
+import { useRouter } from 'next/navigation';
+import { useRef } from 'react';
+import { toast } from 'react-toastify';
+
+export default function ForgotPasswordButton({ ...props }) {
+  const { openModal } = useModalStore();
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { setRequestBody } = useModalStore();
+
+  // send reset password link
+  const handleSendResetPasswordLink = async (
+    requestBody: ResetPasswordToEmailBody
+  ) => {
+    try {
+      const response = await postResetPasswordToEmail({ body: requestBody });
+
+      if (!response) {
+        throw new Error('204 : No Content');
+      }
+      toast.success('비밀번호 재설정 링크가 전송되었습니다.');
+    } catch (error) {
+      if (error instanceof Error) {
+        const errorMessage = error.message;
+
+        // 존재하지 않는 유저 : User not found
+        if (errorMessage.includes('User not found')) {
+          toast.error('존재하지 않는 이메일입니다. 회원가입을 먼저 해주세요.');
+          router.push('/signup');
+        } else {
+          toast.error(`Error : ${error}`);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="mt-3 mb-10 flex justify-end">
+      <button
+        className="leading-normal font-medium text-emerald-500 underline"
+        type="button"
+        onClick={() => {
+          openModal(
+            {
+              title: '비밀번호 재설정',
+              description: '비밀번호 재설정 링크를 보내드립니다.',
+              button: {
+                formId: 'reset-password-form', // formId 연결
+                number: 2,
+                text: '링크 보내기',
+                onRequest: () => {
+                  // 이메일 유효성 검사
+                  const email = inputRef.current?.value.trim();
+                  if (!email) return;
+                  if (validateEmail(email)) {
+                    setRequestBody({ email });
+                  }
+
+                  // const { email } = newBody as { email: string };
+
+                  const requestBodyApi: ResetPasswordToEmailBody = {
+                    email,
+                    redirectUrl: `${window.location.origin}/`,
+                  };
+
+                  console.log('requestBody:', requestBodyApi); // x
+                  handleSendResetPasswordLink(requestBodyApi);
+                },
+              },
+            },
+
+            (() => <ResetPasswordLinkModal />)()
+          );
+        }}
+        {...props}
+      >
+        비밀번호를 잊으셨나요?
+      </button>
+    </div>
+  );
+}

src/app/(auth)/login/_components/LoginForm/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import ForgotPasswordButton from '@/app/(auth)/login/_components/LoginForm/ForgotPasswordButton';
+import PasswordResetRequestModal from '@/app/(auth)/login/_components/LoginForm/PasswordResetRequestModal';
 import InputWithLabel from '@/components/auth/InputWithLabel';
 import Button from '@/components/common/Button';
 import { signIn } from '@/lib/apis/auth';
@@ -205,7 +205,7 @@ export default function LoginForm() {
         />
       </div>
 
-      <ForgotPasswordButton />
+      <PasswordResetRequestModal />
 
       <Button
         size="lg"

src/components/common/Modal/content/ResetPasswordLinkModal/index.tsx

@@ -1,9 +1,23 @@
+'use client';
+
 import InputBase from '@/components/common/Input/InputBase';
+import { useRef } from 'react';
 
 export default function ResetPasswordLinkModal() {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
-    <div>
-      <InputBase placeholder="이메일을 입력하세요." />
-    </div>
+    <form
+      id="reset-password-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <InputBase
+        ref={inputRef}
+        placeholder="이메일을 입력하세요."
+        defaultValue="" // 초기값 설정
+      />
+    </form>
   );
 }

src/components/common/Modal/index.tsx

@@ -17,19 +17,30 @@ export default function Modal() {
     closeModal,
   } = useModalStore();
 
+  const formId = button?.formId; // formId 추출
   const modalRef = useRef<HTMLDivElement>(null);
   const isModalOpen = Boolean(title || content);
 
+  // 폼 제출 시도 여부를 추적하는 플래그
+  const isSubmittedRef = useRef(false);
+
   useClosePopup(modalRef, closeModal);
   useLockBackgroundScroll(isModalOpen);
 
-  if (!isModalOpen) return null;
-
+  // ResetPasswordModal IIFE 호출에 따라 onRequest 실행 시점 조절을 위한 타이밍 처리
   const handleRequest = () => {
-    button?.onRequest?.(requestBody);
-    closeModal();
+    isSubmittedRef.current = true;
+    console.log('handleRequest');
+    if (isSubmittedRef.current) {
+      button?.onRequest?.(requestBody);
+      console.log('handleRequest 실행');
+      closeModal();
+      isSubmittedRef.current = false;
+    }
   };
 
+  if (!isModalOpen) return null;
+
   return (
     <div className="tablet:items-center fixed inset-0 z-80 flex h-full w-full items-end justify-center bg-black/50">
       <div
@@ -82,7 +93,11 @@ export default function Modal() {
                 )}
               </div>
             )}
-            {content && <div className="overflow-y-auto">{content}</div>}
+            {content && (
+              <div className="overflow-y-auto">
+                {typeof content === 'function' ? content() : content}
+              </div>
+            )}
           </div>
         </div>
         <div className="flex gap-2">
@@ -99,6 +114,7 @@ export default function Modal() {
             </Button>
           )}
           <Button
+            {...(formId ? { form: formId } : {})} // formId 존재 여부에 따라 form 속성 추가
             variant="primary"
             styleType={variant === 'danger' ? 'danger' : 'filled'}
             className="flex-1"

src/store/useModalStore.ts

@@ -9,17 +9,21 @@ interface ModalOptions {
     number: 1 | 2;
     text: string;
     onRequest: (body?: unknown) => void;
+    formId?: string; // 외부 form 과 연결하기 위한 HTML form 속성
   };
 }
 
 interface ModalState {
   options: ModalOptions;
-  content: ReactNode | null;
+  content: ReactNode | (() => ReactNode) | null;
   requestBody: unknown;
   setRequestBody: (body: unknown) => void;
   isButtonDisabled: boolean;
   setIsButtonDisabled: (isValid: boolean) => void;
-  openModal: (options: ModalOptions, content?: ReactNode) => void;
+  openModal: (
+    options: ModalOptions,
+    content?: ReactNode | (() => ReactNode) // 함수형 컴포넌트 호출(IIFE) 지원 위한 타입 확장
+  ) => void;
   closeModal: () => void;
 }
 
@@ -30,7 +34,11 @@ export const useModalStore = create<ModalState>((set) => ({
   setRequestBody: (body) => set({ requestBody: body }),
   isButtonDisabled: false,
   setIsButtonDisabled: (isButtonDisabled) => set({ isButtonDisabled }),
-  openModal: (options, content) => set({ options, content }),
+  openModal: (options, content) => {
+    const resolvedContent = typeof content === 'function' ? content() : content; // 함수형 content 처리 (IIFE)
+    set({ options, content: resolvedContent });
+  },
+
   closeModal: () =>
     set({
       options: {},