fix(apps/web): dnd관련 리펙토링에 따른 수정

YAPP-Github · Feb 9, 2025 · 4c91a3c · 4c91a3c
1 parent bd1eed0
commit 4c91a3c
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 37 deletions.
diff --git a/.../compounds/ContentItem/ContentItem.css.ts → ...components/ContentItem/ContentItem.css.ts b/.../compounds/ContentItem/ContentItem.css.ts → ...components/ContentItem/ContentItem.css.ts
diff --git a/...ler/compounds/ContentItem/ContentItem.tsx → ...]/_components/ContentItem/ContentItem.tsx b/...ler/compounds/ContentItem/ContentItem.tsx → ...]/_components/ContentItem/ContentItem.tsx
@@ -57,7 +57,7 @@ export const ContentItem = forwardRef<HTMLDivElement, ContentItemProps>(
       onModify,
       className,
       isLoading,
-      isSelected = 'false',
+      isSelected = false,
       ...props
     },
     ref

diff --git a/...web/src/app/(prompt)/edit/[agentId]/[postGroupId]/_components/EditContent/EditContent.tsx b/...web/src/app/(prompt)/edit/[agentId]/[postGroupId]/_components/EditContent/EditContent.tsx
@@ -227,7 +227,6 @@ export function EditContent({ agentId, postGroupId }: EditPageParams) {
                   getItemsByStatus(POST_STATUS.READY_TO_UPLOAD).map((item) => (
                     <DndController.Item id={item.id} key={item.id}>
                       <ContentItem
-                        key={item.id}
                         summary={item.summary}
                         updatedAt={item.updatedAt}
                         onRemove={() => handleDeletePost(item.id)}

diff --git a/.../app/(prompt)/edit/[agentId]/[postGroupId]/detail/_components/EditSidebar/EditSidebar.tsx b/.../app/(prompt)/edit/[agentId]/[postGroupId]/detail/_components/EditSidebar/EditSidebar.tsx
@@ -32,6 +32,7 @@ import { Modal } from '@repo/ui/Modal';
 import { useDeletePostMutation } from '@web/store/mutation/useDeletePostMutation';
 import { DetailPageContext } from '../../EditDetail';
 import { DragGuide } from '../DragGuide/DragGuide';
+import { ContentItem } from '@web/components/common/DNDController/compounds';
 
 function EditSidebarContent() {
   const modal = useModal();
@@ -157,17 +158,17 @@ function EditSidebarContent() {
                         <SkeletonContentItem key={item.id} />
                       ))}
                     {getItemsByStatus(POST_STATUS.GENERATED).map((item) => (
-                      <DndController.Item
-                        key={item.id}
-                        id={item.id}
-                        summary={item.summary}
-                        updatedAt={item.updatedAt}
-                        onRemove={() => handleDeletePost(item.id)}
-                        onModify={() => {}}
-                        onClick={() => handleClick(item.id)}
-                        isSelected={Number(postParam) === item.id}
-                        isLoading={loadingPosts.includes(item.id)}
-                      />
+                      <DndController.Item id={item.id} key={item.id}>
+                        <ContentItem
+                          summary={item.summary}
+                          updatedAt={item.updatedAt}
+                          onRemove={() => handleDeletePost(item.id)}
+                          onModify={() => {}}
+                          onClick={() => handleClick(item.id)}
+                          isSelected={Number(postParam) === item.id}
+                          isLoading={loadingPosts.includes(item.id)}
+                        />
+                      </DndController.Item>
                     ))}
                   </DndController.SortableList>
                 ) : (
@@ -197,17 +198,17 @@ function EditSidebarContent() {
                     )}
                   >
                     {getItemsByStatus(POST_STATUS.EDITING).map((item) => (
-                      <DndController.Item
-                        key={item.id}
-                        id={item.id}
-                        summary={item.summary}
-                        updatedAt={item.updatedAt}
-                        onRemove={() => handleDeletePost(item.id)}
-                        onModify={() => {}}
-                        onClick={() => handleClick(item.id)}
-                        isSelected={Number(postParam) === item.id}
-                        isLoading={loadingPosts.includes(item.id)}
-                      />
+                      <DndController.Item id={item.id} key={item.id}>
+                        <ContentItem
+                          summary={item.summary}
+                          updatedAt={item.updatedAt}
+                          onRemove={() => handleDeletePost(item.id)}
+                          onModify={() => {}}
+                          onClick={() => handleClick(item.id)}
+                          isSelected={Number(postParam) === item.id}
+                          isLoading={loadingPosts.includes(item.id)}
+                        />
+                      </DndController.Item>
                     ))}
                   </DndController.SortableList>
                 ) : (
@@ -238,17 +239,17 @@ function EditSidebarContent() {
                   >
                     {getItemsByStatus(POST_STATUS.READY_TO_UPLOAD).map(
                       (item) => (
-                        <DndController.Item
-                          key={item.id}
-                          id={item.id}
-                          summary={item.summary}
-                          updatedAt={item.updatedAt}
-                          onRemove={() => handleDeletePost(item.id)}
-                          onModify={() => {}}
-                          onClick={() => handleClick(item.id)}
-                          isSelected={Number(postParam) === item.id}
-                          isLoading={loadingPosts.includes(item.id)}
-                        />
+                        <DndController.Item id={item.id} key={item.id}>
+                          <ContentItem
+                            summary={item.summary}
+                            updatedAt={item.updatedAt}
+                            onRemove={() => handleDeletePost(item.id)}
+                            onModify={() => {}}
+                            onClick={() => handleClick(item.id)}
+                            isSelected={Number(postParam) === item.id}
+                            isLoading={loadingPosts.includes(item.id)}
+                          />
+                        </DndController.Item>
                       )
                     )}
                   </DndController.SortableList>
@@ -316,6 +317,12 @@ export function EditSidebar() {
 
         modifyPosts(updatedItems);
       }}
+      renderDragOverlay={(activeItem) => (
+        <ContentItem
+          summary={activeItem.summary}
+          updatedAt={activeItem.updatedAt}
+        />
+      )}
     >
       <EditSidebarContent />
     </DndController>

diff --git a/.../src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/TableRow/TableRow.tsx b/.../src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/TableRow/TableRow.tsx
@@ -1,7 +1,7 @@
 import {
   ContentItem,
   ContentItemProps,
-} from '@web/components/common/DNDController/compounds/ContentItem/ContentItem';
+} from '@web/app/(prompt)/edit/[agentId]/[postGroupId]/_components/ContentItem/ContentItem';
 import * as style from './TableRow.css';
 import { Post } from '@web/types';
 import { Column } from '../ScheduleTable/types';

diff --git a/apps/web/src/components/common/DNDController/compounds/index.ts b/apps/web/src/components/common/DNDController/compounds/index.ts
@@ -1,3 +1,3 @@
-export { ContentItem } from './ContentItem/ContentItem';
+export { ContentItem } from '../../../../app/(prompt)/edit/[agentId]/[postGroupId]/_components/ContentItem/ContentItem';
 export { DraggableItem } from './DraggableItem/DraggableItem';
 export { DroppableContent } from './DroppableContent/DroppableContent';