Fix: 모달 닫힘 경고 팝업 뜨도록 수정 및 esc props 전달

[seung365]

📌 Summary

• [Fix]: write modal에서 경고 팝업 안뜨는 현상 수정 #196

📚 Tasks

• 모달 닫힘 경고 팝업 뜨도록 수정
• modal esc props 전달

👀 To Reviewer

아무 내용도 없을땐 popup이 뜨지 않고 바로 닫히도록 하였습니다. 또한 write-modal의 경우 esc로 닫히지 않게 했습니다.

📸 Screenshot

2025-08-22.11.48.20.mov

Summary by CodeRabbit

• New Features

  • 편지 작성 모달에 서버 제출 기능과 로딩 표시를 추가했습니다. 성공/실패 처리 및 제출 전 경고 흐름을 지원합니다.
  • 경고 팝업에 돌아가기 동작을 추가하여 폼 초기화 및 이미지 제거 후 닫을 수 있습니다.
  • 모달의 기본 동작을 개선해 오버레이 클릭으로 닫기가 기본 활성화되었습니다.

• Bug Fixes

  • 작성 모달에서 ESC/오버레이로의 오작동 닫힘을 방지했습니다(명시적 버튼/성공 시에만 닫힘).
  • 경고 팝업 버튼 클릭 시 이벤트 버블링으로 인한 의도치 않은 동작을 방지했습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
time-capsule	Ready	Preview	Comment	Aug 22, 2025 2:53pm

[coderabbitai]

Walkthrough

모달 공통 컴포넌트에 closeOnEsc 옵션을 추가하고 오버레이 클릭 기본값을 true로 변경했습니다. 작성 모달은 API 뮤테이션을 연동하고 ESC/오버레이로 닫힘을 비활성화했습니다. 경고 팝업은 onGoBack 훅을 추가해 되돌리기 동작을 커스터마이즈했습니다. 상세 모달에서는 불필요한 closeOnOverlayClick 지정이 제거되었습니다.

Changes

Cohort / File(s)	Change Summary
Modal 동작 옵션 추가/기본값 변경 app/(sub)/capsule-detail/_components/modal/index.tsx	closeOnEsc?: boolean 추가(기본 true). 오버레이 클릭 기본값을 true로 변경. ESC 핸들러는 isOpen && closeOnEsc일 때만 작동. keydown 리스너는 열림+허용 시에만 등록.
작성 모달: API 연동 및 닫힘 가드 app/(sub)/capsule-detail/_components/write-modal/index.tsx	useWriteLetter 뮤테이션 연동, 성공/에러 처리 및 로딩 상태 반영. ESC/오버레이 닫힘 비활성화. 미작성 경고 흐름 추가: 내용 있으면 경고 팝업, 아니면 바로 닫기. onGoBack으로 폼/이미지 리셋 후 닫기. 버튼 로딩 표시 통합. 타입에 CapsuleDetailRes, WriteLetterReq 사용.
경고 팝업 확장 shared/ui/popup/popup-warning-letter/index.tsx	onGoBack?: () => void 추가. "돌아가기"가 제공 시 이를 호출, 아니면 이전 닫기 동작. "계속 쓰기" 클릭 시 이벤트 버블링 방지 후 confirm 호출.
상세 모달: 오버레이 옵션 제거 app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/letter-detail-modal/index.tsx	closeOnOverlayClick={true} 제거로 기본 동작에 따름. 다른 prop/렌더링 변화 없음.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as 사용자
  participant WM as WriteModal
  participant MU as useWriteLetter(뮤테이션)
  participant PW as PopupWarningLetter
  participant M as Modal

  U->>WM: 닫기 클릭
  WM->>WM: 내용/보낸이/이미지 여부 확인
  alt 변경사항 존재
    WM->>PW: 경고 팝업 열기
    U->>PW: 돌아가기 클릭
    PW-->>WM: onGoBack()
    WM->>WM: 폼/이미지 리셋
    WM->>M: onClose()
  else 변경사항 없음
    WM->>M: onClose()
  end

  U->>WM: 제출 클릭
  WM->>MU: mutate({ capsuleId, content, from, objectKey })
  MU-->>WM: 성공
  WM->>M: onClose()
  MU-->>WM: 실패
  WM->>WM: 에러 처리(버튼 로딩 해제)

Loading

sequenceDiagram
  autonumber
  actor U as 사용자
  participant M as Modal

  Note over M: 공통 Modal 동작
  U->>M: ESC 키
  alt closeOnEsc=true AND isOpen
    M->>M: onClose()
  else closeOnEsc=false
    M-->>U: 무시
  end

  U->>M: 오버레이 클릭
  alt closeOnOverlayClick=true
    M->>M: onClose()
  else
    M-->>U: 무시
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/write-modal-popup/#196

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

This pull request (commit b327515) has been deployed to Vercel ▲ - View GitHub Actions Workflow Logs

Name	Link
🌐 Unique	https://time-capsule-ice6c9g7f-hs-projects-b4a69d5f.vercel.app
🔍 Inspect	https://vercel.com/hs-projects-b4a69d5f/time-capsule/HKq5hFPtnE4w8RZaxhqP7kAVBSqk

[github-actions]

🚀 Storybook 배포

📖 Storybook: https://683d91ab23651aa0b399e435-agewjsicic.chromatic.com/
🔗 Chromatic Build: https://www.chromatic.com/build?appId=683d91ab23651aa0b399e435&number=222
✅ Status: success

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/(sub)/capsule-detail/_components/modal/index.tsx (1)

65-72: Enter/Space로 오버레이 닫힘이 closeOnOverlayClick 설정을 무시합니다

onKeyDown에서 Enter/Space 입력 시 closeOnOverlayClick이 false여도 닫히는 버그가 있습니다. 쓰기 모달처럼 오버레이 닫힘을 비활성화한 화면에서 키보드 조작으로 닫히는 문제가 생길 수 있어요. prop를 존중하도록 수정이 필요합니다. 스페이스 스크롤 방지를 위해 preventDefault()도 권장합니다.

-      onKeyDown={(event) => {
-        if (
-          (event.key === "Enter" || event.key === " ") &&
-          event.target === event.currentTarget
-        ) {
-          onClose();
-        }
-      }}
+      onKeyDown={(event) => {
+        if (event.target !== event.currentTarget) return;
+        if ((event.key === "Enter" || event.key === " ") && closeOnOverlayClick) {
+          event.preventDefault();
+          onClose();
+        }
+      }}

🧹 Nitpick comments (7)

shared/ui/popup/popup-warning-letter/index.tsx (2)

30-41: 버튼 type 명시로 의도치 않은 submit 방지

Popup가 폼 문맥 내에서 재사용될 가능성을 고려하면 버튼에 type="button"을 명시하는 것이 안전합니다.

-        <Popup.Button onClick={onGoBack || close} className={styles.content}>
+        <Popup.Button type="button" onClick={onGoBack || close} className={styles.content}>
           돌아가기
         </Popup.Button>
-        <Popup.Button
+        <Popup.Button
+          type="button"
           className={styles.continueButton}
           onClick={(e) => {
             e.stopPropagation();
             confirm();
           }}
         >

---

9-10: onGoBack의 책임 명확화 또는 방어 로직 추가 검토

현재는 onGoBack이 전달되면 팝업을 닫는 책임까지 호출자에게 있습니다. 다른 사용처에서 onGoBack이 상태만 리셋하고 팝업 닫기를 누락하는 실수를 방지하려면, 컴포넌트 레벨에서 항상 닫히도록 방어하는 방법을 고려해주세요(중복 호출이어도 idempotent라면 안전).

-        <Popup.Button onClick={onGoBack || close} className={styles.content}>
+        <Popup.Button
+          type="button"
+          onClick={() => {
+            onGoBack?.();
+            close();
+          }}
+          className={styles.content}
+        >

Also applies to: 16-17, 30-33

app/(sub)/capsule-detail/_components/modal/index.tsx (1)

40-46: body scroll lock 원복 시 기존 스타일 보존 제안

unset으로 고정 해제 시 기존 값이 덮여 의도치 않은 스크롤 상태가 될 수 있습니다(다중 모달/외부 스타일 개입). 이전 값을 저장해 정확히 복구하는 방식을 권장합니다.

적용 예시(일부 발췌):

-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
@@
 export default function Modal({
@@
 }: ModalProps) {
+  const prevOverflowRef = useRef<string>();
   useEffect(() => {
@@
-    if (isOpen) {
+    if (isOpen) {
+      prevOverflowRef.current = document.body.style.overflow;
       if (closeOnEsc) {
         document.addEventListener("keydown", handleEscapeKey);
       }
       document.body.style.overflow = "hidden";
     }
@@
     return () => {
       document.removeEventListener("keydown", handleEscapeKey);
-      document.body.style.overflow = "unset";
+      document.body.style.overflow =
+        prevOverflowRef.current ?? "";
     };
   }, [isOpen, onClose, closeOnEsc]);

app/(sub)/capsule-detail/_components/write-modal/index.tsx (4)

115-121: 제출 중에는 닫기 버튼도 비활성화 권장

이중 액션/경합을 줄이려면 isPending || isUploading 동안 닫기 버튼도 비활성화하는 것이 UX/안정성에 유리합니다.

-            <button
+            <button
               type="button"
               className={styles.closeButton}
-              onClick={handleCloseWithWarning}
+              onClick={handleCloseWithWarning}
+              disabled={isPending || isUploading}
             >

---

70-76: alert 대신 일관된 UI 컴포넌트 사용 제안

브라우저 alert는 UI 톤 앤 매너를 해치고 제어가 어렵습니다. 기존 팝업/토스트 컴포넌트를 재사용하는 방식으로 교체를 권장합니다.

---

86-91: 에러 사용자 피드백 추가 필요

onError에서 콘솔 로깅만 하면 사용자는 실패를 인지하기 어렵습니다. 토스트/다이얼로그로 오류 사유를 안내해주세요(네트워크/서버 메시지 매핑).

---

239-261: 경고 팝업과의 연동 전반적으로 좋습니다 — reset 간소화 제안

상태 초기화 후 닫기까지의 플로우가 자연스럽습니다. 폼 초기값이 이미 useForm의 defaultValues로 정의되어 있으므로, 아래처럼 reset()만 호출해 중복을 줄일 수 있습니다.

           onGoBack={() => {
             setIsWarningOpen(false);
-            reset({
-              capsuleId: capsuleData.result.id.toString(),
-              content: "",
-              from: "",
-              objectKey: "",
-            });
+            reset();
             if (uploadedImageUrl) {
               removeImage();
             }
             onClose();
           }}

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 43f93f1 and b327515.

📒 Files selected for processing (4)

• app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/letter-detail-modal/index.tsx (0 hunks)
• app/(sub)/capsule-detail/_components/modal/index.tsx (2 hunks)
• app/(sub)/capsule-detail/_components/write-modal/index.tsx (5 hunks)
• shared/ui/popup/popup-warning-letter/index.tsx (2 hunks)

💤 Files with no reviewable changes (1)

• app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/letter-detail-modal/index.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

app/(sub)/capsule-detail/_components/write-modal/index.tsx (1)

app/(sub)/capsule-detail/_components/modal/index.tsx (1)

• Modal (19-83)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: test
• GitHub Check: deploy
• GitHub Check: storybook-deploy

🔇 Additional comments (5)

shared/ui/popup/popup-warning-letter/index.tsx (1)

33-39: 버블링 차단으로 상위 닫힘 트리거 방지, 좋습니다

e.stopPropagation()으로 상위 오버레이/모달 클릭 핸들러가 실행되지 않도록 한 점이 의도에 부합합니다.

app/(sub)/capsule-detail/_components/modal/index.tsx (1)

29-40: ESC 핸들러 조건부 바인딩/클린업 적절함

closeOnEsc에 따라 리스너를 바인딩하고, 이펙트 클린업에서 항상 제거하는 방식은 안전합니다. deps에 closeOnEsc 포함한 점도 좋습니다.

Also applies to: 47-47

app/(sub)/capsule-detail/_components/write-modal/index.tsx (3)

93-104: 내용 유무에 따른 경고 팝업 분기, 의도 정확합니다

stopPropagation()으로 모달 외부 닫힘 트리거를 차단하고, 실제 변경사항(본문/보내는 사람/이미지) 존재 시에만 경고를 띄우는 로직이 깔끔합니다.

---

107-113: 모달 잠금 설정(L1) OK — ESC/오버레이 닫힘 비활성화

쓰기 모달의 특성상 닫힘을 제한한 설정이 합리적입니다. 단, 현재 Modal의 오버레이 onKeyDown이 Enter/Space에서 closeOnOverlayClick을 무시하는 버그가 있으니(별도 코멘트 참고) 해당 수정이 반영되어야 완전한 잠금이 보장됩니다.

---

127-131: 로더 처리 및 비활성화 상태 연동 적절함

전송/업로드 상태에 따라 스피너와 비활성화 처리하는 흐름이 명확합니다.