QA: 나머지 qa 반영 (#188)

* feat: 드롭다운 여닫을 때 애니메이션 추가

* refactor: 칩의 size prop 제거

* feat: 드롭다운 애니메이션 추가

* refactor: card-container 모바일 화면 간격 조정

* refactor: 좋아요 mutation 실행 후 쿼리키 무효화되도록 수정

* refactor: qa 반영

* feat: 로딩화면 2초동안 보여지도록 수정

* refactor: intro step에서, 제목을 입력하지 않으면 버튼이 disabled 되도록 수정

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

* refactor: 열림 애니메이션 타이밍 일치되도록 수정

Author: seueooo

app/(main)/explore/_components/card-container/card-container.css.ts

@@ -2,8 +2,8 @@ import { style } from "@vanilla-extract/css";
 
 export const cardContainer = style({
   display: "grid",
-  gap: "1.2rem",
-  rowGap: "3.2rem",
+  gap: "0.8rem",
+  rowGap: "2.4rem",
   width: "100%",
   padding: "1.6rem",
   paddingTop: "2.3rem",
@@ -17,6 +17,8 @@ export const cardContainer = style({
     },
     "(min-width: 1024px)": {
       gridTemplateColumns: "repeat(4, 1fr)",
+      gap: "1.2rem",
+      rowGap: "3.2rem",
     },
   },
 });

app/(main)/my-capsule/_components/card-container/card-container.css.ts

@@ -2,8 +2,9 @@ import { style } from "@vanilla-extract/css";
 
 export const cardContainer = style({
   display: "grid",
-  gap: "1.2rem",
-  rowGap: "3.2rem",
+
+  gap: "0.8rem",
+  rowGap: "2.4rem",
   width: "100%",
   padding: "1.6rem",
   paddingTop: "2.3rem",
@@ -18,6 +19,8 @@ export const cardContainer = style({
     },
     "(min-width: 1024px)": {
       gridTemplateColumns: "repeat(4, 1fr)",
+      gap: "1.2rem",
+      rowGap: "3.2rem",
     },
   },
 });

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

@@ -42,11 +42,6 @@ export default function Modal({
 
   if (!isOpen) return null;
 
-  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
 
   const contentStyles = fullScreenOnMobile
     ? `${styles.content} ${contentClassName || ""}`
@@ -55,7 +50,6 @@ export default function Modal({
   return createPortal(
     <div
       className={`${styles.overlay} ${overlayClassName || ""}`}
-      onClick={handleOverlayClick}
       onKeyDown={(event) => {
         if (
           (event.key === "Enter" || event.key === " ") &&

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

@@ -7,8 +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 SprinkleContainer from "@/shared/ui/sprinkle-container";
-
+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";
@@ -49,7 +48,7 @@ const WriteModal = ({
       capsuleId: capsuleData.result.id.toString(),
       content: "",
       from: "",
-      objectKeys: "",
+      objectKey: "",
     },
   });
 
@@ -65,7 +64,7 @@ const WriteModal = ({
 
   const { uploadedImageUrl, handleImageUpload, removeImage, isUploading } =
     useImageUpload({
-      onObjectKeyChange: (value) => setValue("objectKeys", value),
+      onObjectKeyChange: (value) => setValue("objectKey", value),
     });
 
   // 모달이 열릴 때마다 폼 초기화
@@ -75,7 +74,7 @@ const WriteModal = ({
         capsuleId: capsuleData.result.id.toString(),
         content: "",
         from: "",
-        objectKeys: "",
+        objectKey: "",
       });
       if (uploadedImageUrl) {
         removeImage();
@@ -124,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,

app/(sub)/create-capsule/_components/steps/intro-step/index.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 const IntroStep = ({ handleNextStep }: Props) => {
-  const { control, getValues } = useFormContext();
+  const { control} = useFormContext();
 
   const { field: titleField } = useController({
     name: "title",
@@ -27,11 +27,6 @@ const IntroStep = ({ handleNextStep }: Props) => {
   });
 
   const handleClickNext = () => {
-    const title = getValues("title");
-    if (!title?.trim()) {
-      alert("타임캡슐 이름을 입력해주세요.");
-      return;
-    }
     handleNextStep("date");
   };
 
@@ -80,7 +75,7 @@ const IntroStep = ({ handleNextStep }: Props) => {
       </RevealMotion>
       <RevealMotion delay={1.2}>
         <div className={styles.buttonContainer}>
-          <Button variant="primary" text="다음" onClick={handleClickNext} />
+          <Button variant="primary" text="다음" onClick={handleClickNext} disabled={!titleField.value?.trim()} />
         </div>
       </RevealMotion>
     </main>

app/(sub)/create-capsule/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { useCreateCapsule } from "@/shared/api/mutations/capsule";
-import { Suspense, useState } from "react";
-
+import { Suspense, useState, useEffect } from "react";
 import CreateCapsuleLoading from "@/app/(sub)/create-capsule/_components/create-capsule-loading";
 import { useFunnel } from "@/shared/hooks/use-funnel";
 import type { CreateCapsuleReq } from "@/shared/types/api/capsule";
@@ -33,8 +32,9 @@ interface CapsuleInfo {
 const CreateCapsule = () => {
   const { Funnel, Step, setStep, step } = useFunnel();
   const [capsuleInfo, setCapsuleInfo] = useState<CapsuleInfo | null>(null);
+  const [showLoading, setShowLoading] = useState(false);
   const { open } = useOverlay();
-
+  
   const { mutate: createCapsuleMutate, isPending } = useCreateCapsule();
 
   const defaultOpenDate = getDate(14);
@@ -71,12 +71,25 @@ const CreateCapsule = () => {
           id: res.result.id,
           inviteCode: res.result.inviteCode,
         });
-        setStep("complete");
       },
     });
   };
 
-  if (isPending) {
+  // 로딩 화면 2초 동안 지속
+  useEffect(() => {
+    if (isPending) {
+      setShowLoading(true);
+    } else if (showLoading && !isPending) {
+      const timer = setTimeout(() => {
+        setShowLoading(false);
+        setStep("complete");
+      }, 2000);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [isPending, showLoading]);
+
+  if (showLoading) {
     return <CreateCapsuleLoading />;
   }
 

app/(sub)/search/_components/card-container/card-container.css.ts

@@ -2,8 +2,8 @@ import { style } from "@vanilla-extract/css";
 
 export const cardContainer = style({
   display: "grid",
-  gap: "1.2rem",
-  rowGap: "3.2rem",
+  gap: "0.8rem",
+  rowGap: "2.4rem",
   width: "100%",
   padding: "1.6rem",
   paddingTop: "2.3rem",
@@ -16,6 +16,8 @@ export const cardContainer = style({
       gridTemplateColumns: "repeat(3, 1fr)",
     },
     "(min-width: 1024px)": {
+      gap: "1.2rem",
+      rowGap: "3.2rem",
       gridTemplateColumns: "repeat(4, 1fr)",
     },
   },

shared/api/mutations/capsule.ts

@@ -9,12 +9,16 @@ import { useQueryClient } from "@tanstack/react-query";
 import { apiClient } from "../api-client";
 
 export const useCreateCapsule = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (data: CreateCapsuleReq): Promise<CreateCapsuleRes> => {
       return await apiClient.post<CreateCapsuleRes>(ENDPOINTS.CREATE_CAPSULE, {
         json: data,
       });
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() });
+    },
   });
 };
 
@@ -27,32 +31,21 @@ export const useLikeToggle = () => {
       } else {
         await apiClient.put(ENDPOINTS.LIKE_TOGGLE(id));
       }
-      return id;
     },
-    onSuccess: (id: string) => {
-      queryClient.invalidateQueries({
-        queryKey: capsuleQueryKeys.detail(id),
-      });
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() });
     },
   });
 };
 
 export const useLeaveCapsule = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (id: string) => {
-      await apiClient.delete(ENDPOINTS.LEAVE_CAPSULE(id));
-      return id;
+    mutationFn: (id: string) => {
+      return apiClient.delete(ENDPOINTS.LEAVE_CAPSULE(id));
     },
-    onSuccess: async (id: string) => {
-      await Promise.all([
-        queryClient.invalidateQueries({
-          queryKey: capsuleQueryKeys.detail(id),
-        }),
-        queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.lists() }),
-        queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.my() }),
-        queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() }),
-      ]);
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: capsuleQueryKeys.all() });
     },
   });
 };

shared/types/api/letter.ts

@@ -32,6 +32,6 @@ export interface LetterListRes {
 export interface WriteLetterReq {
   capsuleId: string;
   content: string;
-  objectKeys: string;
+  objectKey: string;
   from: string;
 }