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

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

@@ -0,0 +1,91 @@
+'use client';
+
+import ResetPasswordModal from '@/components/common/Modal/content/ResetPasswordModal';
+import { postResetPasswordToEmail } from '@/lib/apis/user';
+import { ResetPasswordToEmailBody } from '@/lib/apis/user/type';
+import { useModalStore } from '@/store/useModalStore';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+
+export default function OpenPasswordResetModal({ ...props }) {
+  const { openModal } = useModalStore();
+  const router = useRouter();
+
+  useEffect(() => {
+    const unsubscribe = useModalStore.subscribe(
+      (state) => state.requestBody, // selector
+      // listener
+      (newRequestBody) => {
+        if (!newRequestBody) return;
+        const { email } = newRequestBody as { email: string };
+
+        if (!email) return;
+
+        const requestBody = {
+          email,
+          redirectUrl: `${window.location.origin}/`,
+        };
+        handleSendResetPasswordLink(requestBody);
+      }
+    );
+    return () => {
+      unsubscribe(); // 언마운트, 구독 해제
+    };
+  }, []);
+
+  // 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 호출 방식과의 일관성을 위해 빈 함수 전달
+                onRequest: () => {},
+              },
+            },
+
+            (() => <ResetPasswordModal />)()
+          );
+        }}
+        {...props}
+      >
+        비밀번호를 잊으셨나요?
+      </button>
+    </div>
+  );
+}

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

@@ -1,6 +1,5 @@
 'use client';
 
-import ForgotPasswordButton from '@/app/(auth)/login/_components/LoginForm/ForgotPasswordButton';
 import InputWithLabel from '@/components/auth/InputWithLabel';
 import Button from '@/components/common/Button';
 import { signIn } from '@/lib/apis/auth';
@@ -17,6 +16,7 @@ import Cookies from 'js-cookie';
 import { z } from 'zod';
 import { useRouter } from 'next/navigation';
 import { InputType } from '@/components/auth/type';
+import OpenPasswordResetModal from '@/app/(auth)/login/_components/LoginForm/OpenPasswordResetModal';
 
 // schema
 const inputEmptySchema = z.object({
@@ -205,7 +205,7 @@ export default function LoginForm() {
         />
       </div>
 
-      <ForgotPasswordButton />
+      <OpenPasswordResetModal />
 
       <Button
         size="lg"

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

@@ -0,0 +1,36 @@
+'use client';
+
+import InputBase from '@/components/common/Input/InputBase';
+import { useModalStore } from '@/store/useModalStore';
+import { validateEmail } from '@/utils/inputValidation';
+import { useRef } from 'react';
+
+export default function ResetPasswordModal() {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { setRequestBody, closeModal } = useModalStore.getState();
+
+  return (
+    <form
+      id="reset-password-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+
+        // 유효성 검사
+        const email = inputRef.current?.value.trim();
+        if (!email || !validateEmail(email)) return;
+
+        const requestBody = { email };
+        setRequestBody(requestBody); // 상태 변경, useEffect 에서 api 호출 위해 필요
+
+        // options.button?.onRequest?.(requestBody);
+        closeModal();
+      }}
+    >
+      <InputBase
+        ref={inputRef}
+        placeholder="이메일을 입력하세요."
+        defaultValue="" // 초기값 설정
+      />
+    </form>
+  );
+}

src/components/common/Modal/index.tsx

@@ -17,19 +17,43 @@ 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;
-
+  // button 클릭 시 실행되는 함수 (form 존재 여부에 따른 분기 처리 )
   const handleRequest = () => {
-    button?.onRequest?.(requestBody);
-    closeModal();
+    isSubmittedRef.current = true;
+
+    // 기존 모달 흐름
+    if (!formId) {
+      if (isSubmittedRef.current) {
+        button?.onRequest?.(requestBody);
+        closeModal();
+        isSubmittedRef.current = false;
+        console.log('handleRequest 실행');
+        return;
+      }
+    }
+
+    // formId 존재 (브라우저 submit 트리거)
+    const form = document.getElementById(
+      formId as string
+    ) as HTMLFormElement | null;
+    if (form) {
+      form.requestSubmit(); // 폼 제출만 담당
+    }
+    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 +106,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 +127,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

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { ReactNode } from 'react';
+import { subscribeWithSelector } from 'zustand/middleware';
 
 interface ModalOptions {
   variant?: 'default' | 'danger' | 'taskForm';
@@ -9,33 +10,47 @@ 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;
 }
 
-export const useModalStore = create<ModalState>((set) => ({
-  options: {},
-  content: null,
-  requestBody: null,
-  setRequestBody: (body) => set({ requestBody: body }),
-  isButtonDisabled: false,
-  setIsButtonDisabled: (isButtonDisabled) => set({ isButtonDisabled }),
-  openModal: (options, content) => set({ options, content }),
-  closeModal: () =>
-    set({
-      options: {},
-      content: null,
-      requestBody: null,
-      isButtonDisabled: false,
-    }),
-}));
+export const useModalStore = create<
+  ModalState,
+  [['zustand/subscribeWithSelector', never]]
+>(
+  subscribeWithSelector((set) => ({
+    options: {},
+    content: null,
+    requestBody: null,
+    setRequestBody: (body) => set({ requestBody: body }),
+    isButtonDisabled: false,
+    setIsButtonDisabled: (isButtonDisabled) => set({ isButtonDisabled }),
+    openModal: (options, content) => {
+      const resolvedContent =
+        typeof content === 'function' ? content() : content; // 함수형 content 처리 (IIFE)
+      set({ options, content: resolvedContent });
+    },
+
+    closeModal: () =>
+      set({
+        options: {},
+        content: null,
+        requestBody: null,
+        isButtonDisabled: false,
+      }),
+  }))
+);