Refact: Add card on drag

peer-42seoul · Feb 14, 2024 · ebeff9f · ebeff9f
1 parent 627c570
commit ebeff9f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/src/app/showcase/page.tsx b/src/app/showcase/page.tsx
@@ -15,6 +15,7 @@ import ShowcasePCLayout from './panel/ShowcasePc/ShowcasePcLayout'
 const Showcase = () => {
   const [page, setPage] = useState<number>(1)
   const [cardList, setCardList] = useState<Array<ICardData>>([])
+  const [draggedCardList, setDraggedCardList] = useState<ICardData[]>([])
   const { isPc } = useMedia()
   const { isLogin } = useAuthStore()
   const axiosWithAuth = useAxiosWithAuth()
@@ -35,6 +36,11 @@ const Showcase = () => {
   }, [isLoading, data?.content])
 
   const removeCard = (recruit_id: number) => {
+    setDraggedCardList((prev: ICardData[]) => {
+      prev.push(cardList[cardList.length - 1])
+      return prev
+    })
+    draggedCardList[draggedCardList.length - 1].hasBeenRemoved = true
     setCardList((prev: ICardData[]) => {
       return prev.filter((card) => card.id !== recruit_id)
     })
@@ -43,6 +49,20 @@ const Showcase = () => {
     }
   }
 
+  const addCard = () => {
+    if (draggedCardList.length === 0) return
+    setCardList((prev: ICardData[]) => {
+      prev.push(draggedCardList[draggedCardList.length - 1])
+      if (cardList.length > 1) prev[prev.length - 2].hasBeenRemoved = false
+      return prev
+    })
+    setDraggedCardList((prev: ICardData[]) => {
+      return prev.filter(
+        (card) => card.id !== draggedCardList[draggedCardList.length - 1].id,
+      )
+    })
+  }
+
   let message: string = ''
 
   if (!isLoading && !cardList.length) message = '쇼케이스 끝!'
@@ -66,6 +86,7 @@ const Showcase = () => {
       cardList={cardList}
       removeCard={removeCard}
       message={message}
+      addCard={addCard}
     />
   )
 }

diff --git a/src/app/showcase/panel/CardContainer.tsx b/src/app/showcase/panel/CardContainer.tsx
@@ -12,10 +12,12 @@ const CardContainer = ({
   cardList,
   removeCard,
   message,
+  addCard,
 }: {
   cardList: Array<ICardData>
   removeCard: (recruit_id: number) => void
   message: string
+  addCard?: () => void
 }) => {
   const { isPc } = useMedia()
   return (
@@ -51,7 +53,11 @@ const CardContainer = ({
         }}
       >
         {!message ? (
-          <CardStack cardList={cardList} removeCard={removeCard} />
+          <CardStack
+            cardList={cardList}
+            removeCard={removeCard}
+            addCard={addCard}
+          />
         ) : (
           <Typography variant="CaptionEmphasis">{message}</Typography>
         )}

diff --git a/src/app/showcase/panel/CardStack.tsx b/src/app/showcase/panel/CardStack.tsx
@@ -18,9 +18,11 @@ enum ESwipeDirection {
 const CardStack = ({
   cardList,
   removeCard,
+  addCard,
 }: {
   cardList: Array<ICardData>
   removeCard: (recruit_id: number) => void
+  addCard?: () => void
 }) => {
   const [dragged, setDragged] = useState(false)
   const { isPc } = useMedia()
@@ -36,7 +38,9 @@ const CardStack = ({
       checkDragDirection(info.offset.x, info.offset.y) !== ESwipeDirection.up
     ) {
       setDragged(false)
-
+      if (addCard) {
+        addCard()
+      }
       return
     }
     removeCard(recruit_id)
@@ -90,6 +94,9 @@ const CardStack = ({
                 initial={{
                   scale: 0.8,
                   opacity: 0,
+                  ...(card.hasBeenRemoved && {
+                    y: -500,
+                  }),
                 }}
                 animate={{
                   scale: i === cardList.length - 1 ? 1 : 0.8,
@@ -99,14 +106,14 @@ const CardStack = ({
                 exit={{ opacity: 0, y: -500 }}
                 drag
                 dragSnapToOrigin
-                whileDrag={{ scale: 1.2 }}
-                dragElastic={1}
+                dragElastic={0.5}
                 dragConstraints={{
-                  left: 0,
+                  top: 0,
                   right: 0,
+                  left: 0,
                   bottom: 0,
                 }}
-                dragTransition={{ bounceStiffness: 300, bounceDamping: 50 }}
+                dragTransition={{ bounceStiffness: 250, bounceDamping: 50 }}
                 onDragStart={() => setDragged(true)}
                 onDragEnd={(e: any, info: any) =>
                   handleDragEnd(e, info, card.id)

diff --git a/src/app/showcase/panel/types.ts b/src/app/showcase/panel/types.ts
@@ -16,4 +16,5 @@ export interface ICardData {
   teamLogo: string | null
   start: Date
   end: Date
+  hasBeenRemoved?: boolean
 }