chore: file structure

src/components/section/Card.tsx

@@ -17,7 +17,7 @@ export interface ItemsProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   isDragged?: boolean
   isOverlay?: boolean
-  listeners?: SyntheticListenerMap
+  handleListeners?: SyntheticListenerMap
 }
 
 interface NewsCardProps {
@@ -31,7 +31,7 @@ interface Query {
   query: UseQueryResult<SourceInfo, Error>
 }
 
-export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, isOverlay, listeners, style, ...props }, dndRef) => {
+export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, isOverlay, handleListeners, style, ...props }, dndRef) => {
   const ref = useRef<HTMLDivElement>(null)
   const { ref: inViewRef, inView } = useInView({
     threshold: 0,
@@ -48,14 +48,13 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
         isDragged && "op-50",
         isOverlay ? "bg-glass" : "",
       )}
-      key={id}
       style={{
         transformOrigin: "50% 50%",
         ...style,
       }}
       {...props}
     >
-      <NewsCard id={id} inView={inView} isOverlay={isOverlay} handleListeners={listeners} />
+      <NewsCard id={id} inView={inView} isOverlay={isOverlay} handleListeners={handleListeners} />
     </div>
   )
 })

src/components/section/Dnd.tsx

@@ -66,8 +66,7 @@ export function Dnd() {
   )
 }
 
-function SortableCardWrapper(props: ItemsProps) {
-  const { id } = props
+function SortableCardWrapper({ id, ...props }: ItemsProps) {
   const {
     isDragging,
     attributes,
@@ -79,15 +78,16 @@ function SortableCardWrapper(props: ItemsProps) {
 
   const style = {
     transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
+    transition,
   }
 
   return (
     <CardWrapper
       ref={setNodeRef}
+      id={id}
       style={style}
       isDragged={isDragging}
-      listeners={listeners}
+      handleListeners={listeners}
       {...attributes}
       {...props}
     />