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

jjanie00 · 2025-05-19T07:54:43Z

🔗 이슈 번호

Closes #177

📋 작업 사항

로그인 화면에서 “비밀번호를 잊으셨나요?” 버튼 클릭 시 모달 오픈
이메일 입력 후 ‘링크 보내기’ 클릭 시 비밀번호 재설정 메일 전송

🔧 구현 흐름

1.	ResetPasswordLinkModal에서 이메일 입력 → form 제출 (onSubmit)
2.	handleEmailValidation() 실행 → 유효한 이메일일 경우 setRequestBody()로 상태 저장
3.	requestBody 상태 변경 감지 시 Modal.tsx의 useEffect()에서 onRequest() 실행
4.	handleSendResetPasswordLink()를 통해 POST /{teamId}/user/send-reset-password-email 호출

⚒️ 공통 모달 기능 확장

•	Modal.tsx에 <form> 기반 제출 기능 추가
•	options.button.formId를 활용해 <form>과 <Button>을 연결
•	form 제출 시 requestBody 상태 갱신 → useEffect() 내에서 onRequest() 실행
•	 **함수형 컴포넌트(IIFE) 모달**을 받을 수 있도록 타입 확장
•	기존 JSX 객체 전달 방식의 한계 (폼 제출 시점과 렌더링 시점 차이) 를 보완해 동적 렌더링 및 상태 변경이 가능하도록 확장

응답 처리

요청 응답에 따라 토스트 및 에러 로그 메시지 분기 처리
- 비밀번호 재설정 요청 성공 시 토스트 메시지 및 모달 종료 처리
- 요청 실패 시 toast.error 로 사용자 알림 추가 및 에러 로그 메시지 한글 출력, /signup 으로 리다이렉션

📷 스크린샷

https://github.com/user-attachments/assets/79c94a85-f778-416c-8348-21d0544ff6e6
https://github.com/user-attachments/assets/78df77f1-a9de-471c-ba96-a67c17c4d6cd

📢 공유 사항

기존 모달 구조를 유지하면서, formId 와 requestBody state 에 따라 동작하는 로직을 중심으로 확장하였습니다.
추후 다른 모달에서도 기반 제출 기능을 유연하게 재사용할 수 있도록 구조를 개선했습니다 (form attribute 사용)
IIFE 로 모달을 넘기는 방식은, 제출 시점의 최신 상태 반영을 위한 변경입니다.
이메일 유효성 검사는 handleEmailValidation( ) 에서 실행됩니다. MVP 기능 완료 후, 추가할 예정입니다.

📚 참고 자료

<button> 의 form attribute

…d 필드 추가

- 요청 성공시 toast.success 및 closeModal 호출 - 요청 실패 시 toast.error 로 사용자 알림 추가 - 에러 로그 메시지를 한글로 명확히 출력

github-actions · 2025-05-19T07:56:09Z

✅ Preview Deployment
🔗 https://coworkers-diz3cgyrg-hyeonjirohs-projects.vercel.app

github-actions · 2025-05-19T08:02:03Z

✅ Preview Deployment
🔗 https://coworkers-8u07vm1lp-hyeonjirohs-projects.vercel.app

github-actions · 2025-05-19T09:39:39Z

✅ Preview Deployment
🔗 https://coworkers-3px61lff0-hyeonjirohs-projects.vercel.app

… 가 호출되지 않는 문제 해결

…rd-flow

github-actions · 2025-05-21T02:40:32Z

✅ Preview Deployment
🔗 https://coworkers-pdqjysq6x-hyeonjirohs-projects.vercel.app

ARON-Y

수고하셨습니다 해명님!😎

- 기존 방법 사용 시, onClick 후 모달이 닫혀 onSubmit 이벤트가 실행되지 않는 이슈 - <form> 요소 존재 시, 직접 submit 이벤트를 트리거하도록 확장

- openPasswordResetModal 에서 subscribe 사용을 위한 미들웨어 적용

- form 태그 내부에서 직접 유효성 검사 및 requestBody 설정, 모달 닫힘 기능 구현 - 외부 콜백 onRequest 로직을 내부에서 처리 (기존 onClick 과 onSubmit 과의 타이밍 이슈 해결) - useModalStore 의 subscribe 기반 API 호출 구조와 연동

…리거 구현

github-actions · 2025-05-21T12:09:15Z

✅ Preview Deployment
🔗 https://coworkers-a20n3crf3-hyeonjirohs-projects.vercel.app

hyeonjiroh · 2025-05-21T12:15:56Z

src/components/common/Modal/index.tsx

+        button?.onRequest?.(requestBody);
+        closeModal();
+        isSubmittedRef.current = false;
+        console.log('handleRequest 실행');


이 부분은 디버깅을 위한 console.log일까요?? 그렇다면 나중에 지워주시면 좋을 것 같습니다!

jjanie00 · 2025-05-21T12:16:13Z

src/components/common/Modal/index.tsx

  const isModalOpen = Boolean(title || content);

+  // 폼 제출 시도 여부를 추적하는 플래그
+  const isSubmittedRef = useRef(false);


수정 이후 <form> 태그에서도 해당 ref 는 사용하고 있지 않은 상황이라, 추후 삭제해도 괜찮을 것 같습니다 ~!

hyeonjiroh · 2025-05-21T12:24:34Z

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

+          toast.error('존재하지 않는 이메일입니다. 회원가입을 먼저 해주세요.');
+          router.push('/signup');


사용자가 가입되지 않은 이메일을 입력한 경우 회원가입 페이지로 리다이렉트 하는 것도 좋다고 생각하지만, 만약 회원가입한 유저가 이메일을 잘못 입력한 경우 매번 회원가입 페이지로 이동하게 된다면 조금 피로도가 생길 것 같기도 합니다..!
회원가입 페이지로 리다이렉트 없이 존재하지 않는 이메일이라는 에러 토스트만 띄워줘도 괜찮지 않을까 생각합니다!

의견 감사합니다! 다음 PR에서 반영하겠습니다 ~!

hyeonjiroh · 2025-05-21T12:26:33Z

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

+                number: 2,
+                text: '링크 보내기',
+                // 기존 모달 컴포넌트의 onRequest 호출 방식과의 일관성을 위해 빈 함수 전달
+                onRequest: () => {},


이번에 모달 컴포넌트를 확장하기 전에 onRequest를 필수로 해놨는데, 해명님이 사용하신 form 태그에서 onSubmit으로 제출하는 경우에는 onRequest가 따로 필요 없군요...! 나중에 해당 onRequest 옵션은 옵셔널로 바꿀까요?

흠 저도 이 부분을 고민하긴 했는데, 다른 모달 컴포넌트 일관성을 고려했을 때는 남겨둬도 좋을 것 같아요. onRequest 가 기존 모달 컴포넌트들에서는 필수 콜백함수이기도 하고요 ! 현지님 생각은 어떠신가요?

해명님 말씀처럼 기존 모달들, 특히 폼이 없는 모달들의 경우에는 필수로 있어야 되겠네요..! 그럼 우선은 필수로 해놓는 걸로 합시다~! 의견 감사합니다!

hyeonjiroh

모달 안에서 form 태그의 onSubmit을 사용하는 부분을 미처 생각하지 못하고 구현했는데, 대신 확장해주셔서 감사합니다...! 무사히 해결되어서 다행입니다!! 정말 고생 많으셨어요!! 👍

jjanie00 added 9 commits May 17, 2025 09:02

feat: ResetPasswordLinkModal IIFE 로 호출되도록 변경 / options.button 에 formI…

d9c55b0

…d 필드 추가

feat: form 태그에 id 추가 / 폼 제출 시 requestBody 설정

32ef02b

feat: IIFE 호출방식에 따른 타이밍 제어 / Modal 버튼에 formId 기반 form 연결 로직 추가

ac18ce5

feat: 모달 IIFE 호출 지원을 위한 타입 확장 / formId 처리 로직 추가

9db5472

chore(useModalStore): 주석 변경

c47aaf1

chore: handleEmailValidation 으로 이메일 유효성 검사 함수명 수정

9bb4e6d

feat: requestBody 설정 및 비밀번호 재설정 이메일 api 호출

af0f46e

feat: 비밀번호 재설정 요청 성공 시 토스트 메시지 및 모달 종료 처리

dbcdcc4

- 요청 성공시 toast.success 및 closeModal 호출 - 요청 실패 시 toast.error 로 사용자 알림 추가 - 에러 로그 메시지를 한글로 명확히 출력

feat: 204 error 한글 토스트 메시지로 변환 및 signup 으로 리다이렉트

48f626a

jjanie00 linked an issue May 19, 2025 that may be closed by this pull request

[feat] 비밀번호 재설정 모달 연결 및 리다이렉션 구현 #177

Closed

5 tasks

hyeonjiroh assigned jjanie00 May 19, 2025

hyeonjiroh requested review from ARON-Y and hyeonjiroh May 19, 2025 07:54

chore: 불필요한 closeModal import 삭제

7479f1e

refactor: PasswordResetRequestModal 로 컴포넌트명 수정

41fa164

jjanie00 added 4 commits May 21, 2025 11:03

refactor: handleEmailValidation 로직 onRequest 내부로 이동

3c585b2

refactor: 유효성 검사 함수 이동에 따라 onSubmit 내부에서 해당 함수 호출 삭제

372717b

fix(Modal.tsx): useEffect 내부 로직 handleRequest 내부로 이동시켜 taskList에서 api…

d6b21e3

… 가 호출되지 않는 문제 해결

Merge remote-tracking branch 'origin/dev' into feat/#177/reset-passwo…

734fa9e

…rd-flow

ARON-Y previously approved these changes May 21, 2025

View reviewed changes

jjanie00 added 6 commits May 21, 2025 12:46

feat: subscribe 사용해 requestBody 상태 구독 추가

f758015

refactor: OpenPasswordResetModal 로 컴포넌트명 변경에 따른 import 문 수정

395f1a8

refactor: form 존재 여부에 따른 handleRequest 함수 분기 처리

205486a

- 기존 방법 사용 시, onClick 후 모달이 닫혀 onSubmit 이벤트가 실행되지 않는 이슈 - <form> 요소 존재 시, 직접 submit 이벤트를 트리거하도록 확장

refactor(useModalStore): subscribeWithSelector 미들웨어 도입으로 모달 상태 구독 방식 개선

0be972f

- openPasswordResetModal 에서 subscribe 사용을 위한 미들웨어 적용

feat(OpenPasswordResetModal): useEffect 내 requestBody 구독을 통한 api 호출 트…

90b1fc4

…리거 구현

jjanie00 dismissed ARON-Y’s stale review via 90b1fc4 May 21, 2025 12:07

jjanie00 requested a review from ARON-Y May 21, 2025 12:10

hyeonjiroh reviewed May 21, 2025

View reviewed changes

jjanie00 commented May 21, 2025

View reviewed changes

jjanie00 requested a review from hyeonjiroh May 21, 2025 12:16

hyeonjiroh reviewed May 21, 2025

View reviewed changes

hyeonjiroh approved these changes May 21, 2025

View reviewed changes

ARON-Y approved these changes May 21, 2025

View reviewed changes

ARON-Y merged commit a22d7f2 into dev May 21, 2025
1 check passed

ARON-Y deleted the feat/#177/reset-password-flow branch May 21, 2025 13:59

		toast.error('존재하지 않는 이메일입니다. 회원가입을 먼저 해주세요.');
		router.push('/signup');

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

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

Uh oh!

Conversation

jjanie00 commented May 19, 2025

🔗 이슈 번호

📋 작업 사항

🔧 구현 흐름

⚒️ 공통 모달 기능 확장

응답 처리

📷 스크린샷

📢 공유 사항

📚 참고 자료

Uh oh!

github-actions bot commented May 19, 2025

Uh oh!

github-actions bot commented May 19, 2025

Uh oh!

github-actions bot commented May 19, 2025

Uh oh!

github-actions bot commented May 21, 2025

Uh oh!

ARON-Y left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 21, 2025

Uh oh!

hyeonjiroh May 21, 2025

Choose a reason for hiding this comment

Uh oh!

jjanie00 May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hyeonjiroh May 21, 2025

Choose a reason for hiding this comment

Uh oh!

jjanie00 May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hyeonjiroh May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jjanie00 May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hyeonjiroh May 21, 2025

Choose a reason for hiding this comment

Uh oh!

hyeonjiroh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hyeonjiroh May 21, 2025 •

edited

Loading