QA: 추가 QA 반영 (#200)

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

* fix: 편지 담기 reset 추가

* style: grid-layout 모바일 view 수정

Author: seung365

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/grid-layout/grid-layout.css.ts

@@ -3,17 +3,21 @@ import { style } from "@vanilla-extract/css";
 
 export const container = style({
   width: "100vw",
-  padding: "2rem",
   maxWidth: "120rem",
+  padding: "0.8rem",
+  ...screen.md({
+    padding: "1.6rem",
+  }),
 });
 
 export const grid = style({
   display: "grid",
   gridTemplateColumns: "repeat(auto-fill, minmax(16.4rem, 1fr))",
-  gap: "2.8rem 1.2rem",
   margin: "0 auto",
   maxWidth: "120rem",
+  gap: "2.4rem 0.8rem",
   ...screen.md({
     gridTemplateColumns: "repeat(auto-fill, minmax(24rem, 1fr))",
+    gap: "2.8rem 1.2rem",
   }),
 });

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

@@ -80,6 +80,15 @@ const WriteModal = ({
     writeLetterMutate(data, {
       onSuccess: () => {
         setIsConfirmOpen(false);
+        reset({
+          capsuleId: capsuleData.result.id.toString(),
+          content: "",
+          from: "",
+          objectKey: "",
+        });
+        if (uploadedImageUrl) {
+          removeImage();
+        }
         onClose();
         onSuccess();
       },