From f778ef134a290c3ff2e09c90449a341a5226a5e0 Mon Sep 17 00:00:00 2001
From: Daegyeom Ha <combbm@gmail.com>
Date: Tue, 3 Dec 2024 10:42:52 +0900
Subject: [PATCH 1/2] fix: fix ignore button click issue in `LinkModal`

---
 src/components/Dialogs/LinkModal.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Dialogs/LinkModal.tsx b/src/components/Dialogs/LinkModal.tsx
index 2c249ad..901bd0a 100644
--- a/src/components/Dialogs/LinkModal.tsx
+++ b/src/components/Dialogs/LinkModal.tsx
@@ -19,9 +19,9 @@ import {
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { RiArrowRightLine, RiDeleteBin2Line, RiMenuLine } from '@remixicon/react';
-import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import Colors from '../../styles/Colors';
 import { SchemaType } from '../../types/type-util';
 import { Space } from '../Space';
@@ -98,6 +98,16 @@ const LinkModal: React.FC<LinkModalProps> = ({ modalController, dataId }) => {
     isClosable: true,
     position: 'top-left'
   });
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
 
   const fetchData = useCallback(
     async (id: number) => {
@@ -197,7 +207,7 @@ const LinkModal: React.FC<LinkModalProps> = ({ modalController, dataId }) => {
           <Space y={10} />
           <Divider />
           <Space y={10} />
-          <DndContext onDragEnd={onChangeData}>
+          <DndContext onDragEnd={onChangeData} sensors={sensors}>
             <SortableContext items={data.map((i) => i.id.toString())}>
               <LinkList>
                 {fields.map((field, index) => (

From 552cdecb6869cecf0138d092579149759e4f1cf0 Mon Sep 17 00:00:00 2001
From: Daegyeom Ha <combbm@gmail.com>
Date: Tue, 3 Dec 2024 11:20:16 +0900
Subject: [PATCH 2/2] feat: add blur option in `next/image`

---
 src/components/Dialogs/ImageDetailModal.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Dialogs/ImageDetailModal.tsx b/src/components/Dialogs/ImageDetailModal.tsx
index 7e34563..459f0d3 100644
--- a/src/components/Dialogs/ImageDetailModal.tsx
+++ b/src/components/Dialogs/ImageDetailModal.tsx
@@ -36,7 +36,14 @@ const ImageDetailModal: React.FC<ImageDetailModalProps> = ({ modalController, im
       <ModalOverlay />
       <StyledModalContent>
         <ModalBody>
-          <StyledImage src={image.url} alt={image.alt} width={1024} height={768} />
+          <StyledImage
+            src={image.url}
+            alt={image.alt}
+            width={1024}
+            height={768}
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP0rAcAARcAyjleRTkAAAAASUVORK5CYII="
+          />
           <ImageLabel>{image.alt}</ImageLabel>
         </ModalBody>
       </StyledModalContent>