refactor: 로딩상태일 때 스피너 추가

Author: seueooo

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

@@ -7,7 +7,7 @@ import RevealMotion from "@/shared/ui/motion/reveal-motion";
 import ShakeYMotion from "@/shared/ui/motion/shakeY-motion";
 import PopupConfirmLetter from "@/shared/ui/popup/popup-confirm-letter";
 import PopupWarningLetter from "@/shared/ui/popup/popup-warning-letter";
-
+import { PulseLoader } from "react-spinners";
 import { useWriteLetter } from "@/shared/api/mutations/letter";
 import type { CapsuleDetailRes } from "@/shared/types/api/capsule";
 import type { WriteLetterReq } from "@/shared/types/api/letter";
@@ -123,9 +123,9 @@ const WriteModal = ({
           <button 
             type="submit" 
             className={styles.title} 
-            disabled={isPending || isUploading}
+            disabled={(isPending || isUploading)}
           >
-            {isPending ? "제출 중..." : isUploading ? "업로드 중..." : "편지담기"}
+            {(isPending || isUploading) ? <PulseLoader color="#FFFFFF" size={5}/> : '편지담기'}
           </button>
         </div>
 

app/(sub)/capsule-detail/_components/write-modal/write-modal.css.ts

@@ -69,6 +69,9 @@ export const content = style({
 });
 
 export const title = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
   ...themeVars.text.B1,
   color: themeVars.color.purple[10],
   margin: 0,