diff --git a/frontend/techpick/src/components/PickListViewer/DraggablePickListViewer.tsx b/frontend/techpick/src/components/PickListViewer/DraggablePickListViewer.tsx
index e850c965e..81c2b66fb 100644
--- a/frontend/techpick/src/components/PickListViewer/DraggablePickListViewer.tsx
+++ b/frontend/techpick/src/components/PickListViewer/DraggablePickListViewer.tsx
@@ -1,22 +1,24 @@
import type { ReactNode } from 'react';
import { PickDnDCard } from './PickDnDCard';
import { PickDnDCardListLayout } from './PickDnDCardListLayout';
+import { PickDndRecord } from './PickDndRecord';
+import { PickDndRecordListLayout } from './PickDndRecordListLayout';
import type {
PickViewItemComponentProps,
PickViewItemListLayoutComponentProps,
} from './PickListViewer';
-import type { PickInfoType } from '@/types';
+import type { PickInfoType, PickRenderModeType } from '@/types';
export function DraggablePickListViewer({
pickList,
- viewType = 'card',
+ viewType = 'list',
folderId,
}: PickListViewerProps) {
const { PickViewItemComponent, PickViewItemListLayoutComponent } =
DND_PICK_LIST_VIEW_TEMPLATES[viewType];
return (
-
+
{pickList.map((pickInfo) => (
))}
@@ -27,24 +29,23 @@ export function DraggablePickListViewer({
interface PickListViewerProps {
pickList: PickInfoType[];
folderId: number;
- viewType?: DnDViewTemplateType;
+ viewType?: PickRenderModeType;
}
const DND_PICK_LIST_VIEW_TEMPLATES: Record<
- DnDViewTemplateType,
+ PickRenderModeType,
DnDViewTemplateValueType
> = {
card: {
PickViewItemComponent: PickDnDCard,
PickViewItemListLayoutComponent: PickDnDCardListLayout,
},
+ list: {
+ PickViewItemComponent: PickDndRecord,
+ PickViewItemListLayoutComponent: PickDndRecordListLayout,
+ },
};
-/**
- * @description DnDViewTemplateType은 Drag&Drop이 가능한 UI 중 무엇을 보여줄지 나타냅니다. ex) card, list
- */
-type DnDViewTemplateType = 'card';
-
interface DnDViewTemplateValueType {
PickViewItemListLayoutComponent: (
props: PickViewDnDItemListLayoutComponentProps
@@ -53,6 +54,9 @@ interface DnDViewTemplateValueType {
}
export type PickViewDnDItemListLayoutComponentProps =
- PickViewItemListLayoutComponentProps<{ folderId: number }>;
+ PickViewItemListLayoutComponentProps<{
+ folderId: number;
+ viewType: PickRenderModeType;
+ }>;
export type PickViewDnDItemComponentProps = PickViewItemComponentProps;
diff --git a/frontend/techpick/src/components/PickListViewer/PickDnDCardListLayout.tsx b/frontend/techpick/src/components/PickListViewer/PickDnDCardListLayout.tsx
index 49d77d37a..a1cf7b8e3 100644
--- a/frontend/techpick/src/components/PickListViewer/PickDnDCardListLayout.tsx
+++ b/frontend/techpick/src/components/PickListViewer/PickDnDCardListLayout.tsx
@@ -6,11 +6,12 @@ import { PickListSortableContext } from './PickListSortableContext';
export function PickDnDCardListLayout({
children,
+ viewType,
folderId,
}: PickViewDnDItemListLayoutComponentProps) {
return (
diff --git a/frontend/techpick/src/components/PickListViewer/PickDndRecord.tsx b/frontend/techpick/src/components/PickListViewer/PickDndRecord.tsx
new file mode 100644
index 000000000..59f85f174
--- /dev/null
+++ b/frontend/techpick/src/components/PickListViewer/PickDndRecord.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { MouseEvent, useCallback, type CSSProperties } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { usePickStore } from '@/stores';
+import { isSelectionActive } from '@/utils';
+import {
+ isActiveDraggingItemStyle,
+ selectedDragItemStyle,
+} from './pickDnDCard.css';
+import { getSelectedPickRange } from './pickDnDCard.util';
+import { PickRecord } from './PickRecord';
+import type { PickViewDnDItemComponentProps } from './PickListViewer';
+
+export function PickDndRecord({ pickInfo }: PickViewDnDItemComponentProps) {
+ const {
+ selectedPickIdList,
+ selectSinglePick,
+ getOrderedPickIdListByFolderId,
+ focusPickId,
+ setSelectedPickIdList,
+ isDragging,
+ } = usePickStore();
+ const { linkInfo, id: pickId, parentFolderId } = pickInfo;
+ const { url } = linkInfo;
+ const isSelected = selectedPickIdList.includes(pickId);
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging: isActiveDragging,
+ } = useSortable({
+ id: pickId,
+ data: {
+ id: pickId,
+ type: 'pick',
+ parentFolderId: parentFolderId,
+ },
+ });
+ const pickElementId = `pickId-${pickId}`;
+
+ const style: CSSProperties = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ opacity: 1,
+ };
+
+ const openUrl = useCallback(() => {
+ window.open(url, '_blank');
+ }, [url]);
+
+ const handleShiftSelect = (parentFolderId: number, pickId: number) => {
+ if (!focusPickId) {
+ return;
+ }
+
+ // 새로운 선택된 배열 만들기.
+ const orderedPickIdList = getOrderedPickIdListByFolderId(parentFolderId);
+
+ const newSelectedPickIdList = getSelectedPickRange({
+ orderedPickIdList,
+ startPickId: focusPickId,
+ endPickId: pickId,
+ });
+
+ setSelectedPickIdList(newSelectedPickIdList);
+ };
+
+ const handleClick = (
+ pickId: number,
+ event: MouseEvent
+ ) => {
+ if (event.shiftKey && isSelectionActive(selectedPickIdList.length)) {
+ event.preventDefault();
+ handleShiftSelect(parentFolderId, pickId);
+ return;
+ }
+
+ selectSinglePick(pickId);
+ };
+
+ if (isDragging && isSelected && !isActiveDragging) {
+ return null;
+ }
+
+ return (
+ <>
+
+
handleClick(pickId, event)}
+ id={pickElementId}
+ >
+
+
+
{children}