Merge pull request #391 from belltalion/fix-landing-bench

Fix landing bench

Author: belltalion

apps/landing/src/app/Bench.tsx

@@ -1,5 +1,6 @@
-import { Box, Flex, Text, VStack } from '@devup-ui/react'
+import { Flex, Text, VStack } from '@devup-ui/react'
 
+import { BenchBox } from './BenchBox'
 import { DevupUICard } from './DevupUICard'
 import { OtherCard } from './OtherCard'
 
@@ -86,10 +87,7 @@ export function Bench() {
         <Flex display={[null, null, null, null, 'none']}>
           <DevupUICard />
         </Flex>
-        <Box
-          overflow={['auto', null, null, null, 'visible']}
-          scrollbarWidth="none"
-        >
+        <BenchBox>
           <Flex
             alignItems="flex-end"
             flexWrap={[null, null, null, null, 'wrap']}
@@ -105,7 +103,7 @@ export function Bench() {
               <OtherCard key={item.title} {...item} />
             ))}
           </Flex>
-        </Box>
+        </BenchBox>
       </VStack>
     </VStack>
   )

apps/landing/src/app/BenchBox.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { Box } from '@devup-ui/react'
+import { useRef } from 'react'
+import { useCallback, useState } from 'react'
+import { ReactNode } from 'react'
+
+interface BenchBoxProps {
+  children: ReactNode
+}
+export function BenchBox({ children }: BenchBoxProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [startX, setStartX] = useState(0)
+  const [scrollLeft, setScrollLeft] = useState(0)
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!scrollRef.current) return
+
+    setIsDragging(true)
+    setStartX(e.pageX - scrollRef.current.offsetLeft)
+    setScrollLeft(scrollRef.current.scrollLeft)
+    scrollRef.current.style.cursor = 'grabbing'
+    scrollRef.current.style.userSelect = 'none'
+  }, [])
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging || !scrollRef.current) return
+
+      e.preventDefault()
+      const x = e.pageX - scrollRef.current.offsetLeft
+      const walk = (x - startX) * 2 // 스크롤 속도 조절
+      scrollRef.current.scrollLeft = scrollLeft - walk
+    },
+    [isDragging, startX, scrollLeft],
+  )
+
+  const handleMouseUp = useCallback(() => {
+    if (!scrollRef.current) return
+
+    setIsDragging(false)
+    scrollRef.current.style.cursor = 'grab'
+    scrollRef.current.style.userSelect = 'auto'
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    if (!scrollRef.current) return
+
+    setIsDragging(false)
+    scrollRef.current.style.cursor = 'grab'
+    scrollRef.current.style.userSelect = 'auto'
+  }, [])
+
+  return (
+    <Box
+      ref={scrollRef}
+      WebkitOverflowScrolling="touch"
+      cursor={['grab', null, null, null, 'default']}
+      onMouseDown={handleMouseDown}
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      overflow={['auto', null, null, null, 'visible']}
+      scrollbarWidth="none"
+    >
+      {children}
+    </Box>
+  )
+}

apps/landing/src/app/OtherCard.tsx

@@ -25,6 +25,7 @@ export function OtherCard({
       gap={['20px', null, '40px']}
       h={[null, null, null, null, '318px']}
       justifyContent="space-between"
+      maxW={[null, null, null, null, '300px']}
       minW={[null, null, '240px', null, 'none']}
       p={[6, null, '30px']}
     >