From 4695225fafecf7b575a41951379d581007f27815 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Fri, 26 Sep 2025 16:31:38 +0900
Subject: [PATCH 1/2] Fix landing bench

---
 apps/landing/src/app/Bench.tsx     | 10 ++---
 apps/landing/src/app/BenchBox.tsx  | 72 ++++++++++++++++++++++++++++++
 apps/landing/src/app/OtherCard.tsx |  1 +
 3 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 apps/landing/src/app/BenchBox.tsx

diff --git a/apps/landing/src/app/Bench.tsx b/apps/landing/src/app/Bench.tsx
index d5014d12..5514a7ee 100644
--- a/apps/landing/src/app/Bench.tsx
+++ b/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>
   )
diff --git a/apps/landing/src/app/BenchBox.tsx b/apps/landing/src/app/BenchBox.tsx
new file mode 100644
index 00000000..55f8a0c8
--- /dev/null
+++ b/apps/landing/src/app/BenchBox.tsx
@@ -0,0 +1,72 @@
+'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}
+      cursor={['grab', null, null, null, 'default']}
+      onMouseDown={handleMouseDown}
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      overflow={['auto', null, null, null, 'visible']}
+      scrollbarWidth="none"
+      style={{
+        WebkitOverflowScrolling: 'touch', // iOS에서 부드러운 스크롤
+      }}
+    >
+      {children}
+    </Box>
+  )
+}
diff --git a/apps/landing/src/app/OtherCard.tsx b/apps/landing/src/app/OtherCard.tsx
index 6b3cacf1..d7f7d7e6 100644
--- a/apps/landing/src/app/OtherCard.tsx
+++ b/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']}
     >

From 5f8050cee895e8cb721bb0396094b4b2979ac751 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Fri, 26 Sep 2025 16:36:40 +0900
Subject: [PATCH 2/2] Fix landing bench

---
 apps/landing/src/app/BenchBox.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/landing/src/app/BenchBox.tsx b/apps/landing/src/app/BenchBox.tsx
index 55f8a0c8..1d0fe242 100644
--- a/apps/landing/src/app/BenchBox.tsx
+++ b/apps/landing/src/app/BenchBox.tsx
@@ -55,6 +55,7 @@ export function BenchBox({ children }: BenchBoxProps) {
   return (
     <Box
       ref={scrollRef}
+      WebkitOverflowScrolling="touch"
       cursor={['grab', null, null, null, 'default']}
       onMouseDown={handleMouseDown}
       onMouseLeave={handleMouseLeave}
@@ -62,9 +63,6 @@ export function BenchBox({ children }: BenchBoxProps) {
       onMouseUp={handleMouseUp}
       overflow={['auto', null, null, null, 'visible']}
       scrollbarWidth="none"
-      style={{
-        WebkitOverflowScrolling: 'touch', // iOS에서 부드러운 스크롤
-      }}
     >
       {children}
     </Box>