Fix: 배포 전 이슈를 해결한다 (#85)

* fix: cameCase 에러를 고친다

* fix: 컴포넌트 key값을 추가한다

* fix: 배포를 위해 `window.confirm`로 바꾼다

Author: guesung

packages/web/src/app/memos/components/MemoGrid.tsx

@@ -73,12 +73,12 @@ export default function MemoGrid() {
       }}>
       {items.map((item, index) => (
         <motion.div
+          key={item.key}
           initial={{ opacity: 0, y: 20, scale: 0.8 }}
           animate={{ opacity: 1, y: 0, scale: 1 }}
           transition={{ duration: 0.3, delay: index < 5 ? 0 : Math.min(index * 0.05, 0.5) }}>
           <MemoItem
             data-grid-groupkey={item.groupKey}
-            key={item.key}
             memo={memoList.at(item.key)}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
@@ -99,15 +99,10 @@ function MemoItem({ isHovered, memo, ...props }: MemoItemProps) {
   if (!memo) return null;
   const { mutate: mutateMemoDelete } = useMemoDeleteMutation();
 
-  const handleDeleteConfirmClick = async () => {
-    mutateMemoDelete(memo.id);
-    toast.success('삭제가 완료되었습니다.');
-  };
-
   const handleDeleteClick = () => {
-    const modalEl = document.getElementById(MEMO_DELETE_MODAL_ID) as HTMLDialogElement;
-    if (!modalEl) return;
-    modalEl.showModal();
+    const answer = window.confirm('정말로 메모를 삭제하시겠습니까? 복구는 불가능합니다.');
+    if (!answer) return;
+    mutateMemoDelete(memo.id);
   };
 
   return (
@@ -140,7 +135,6 @@ function MemoItem({ isHovered, memo, ...props }: MemoItemProps) {
           ''
         )}
       </div>
-      <MemoDeleteModal onMemoDeleteConfirmClick={handleDeleteConfirmClick} />
     </div>
   );
 }

packages/web/src/app/memos/components/MemoRefresh.tsx

@@ -28,9 +28,9 @@ export default function MemoRefresh({ ...props }: MemoRefreshProps) {
       <path
         d="M21 3V8M21 8H16M21 8L18 5.29168C16.4077 3.86656 14.3051 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.2832 21 19.8675 18.008 20.777 14"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </motion.svg>
   );