Merge pull request #512 from meowzip/reese

feat: enhance DatePicker and BottomSheet components with improved touch handling

Author: reeseo3o

src/components/common/DatePicker.tsx

@@ -1,19 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Picker from '../ui/picker/Picker';
 
-const years = Array.from({ length: 5 }, (_, i) => 2021 + i);
-const months = Array.from({ length: 12 }, (_, i) => `${i + 1}월`);
-const days = Array.from({ length: 31 }, (_, i) => `${i + 1}일`);
-
 type DatePickerProps = {
   onSelectedChange: (selected: string) => void;
 };
 
 const DatePicker = ({ onSelectedChange }: DatePickerProps) => {
   const today = new Date();
-  const initialYear = today.getFullYear();
-  const initialMonth = `${today.getMonth() + 1}월`; // JavaScript months are 0-based
-  const initialDay = `${today.getDate()}일`;
+  const currentYear = today.getFullYear();
+  const currentMonth = today.getMonth() + 1;
+  const currentDay = today.getDate();
+
+  const years = Array.from({ length: 5 }, (_, i) => currentYear - 2 + i);
+  const months = Array.from({ length: 12 }, (_, i) => `${i + 1}월`);
+  const days = Array.from({ length: 31 }, (_, i) => `${i + 1}일`);
+
+  const initialYear = currentYear;
+  const initialMonth = `${currentMonth}월`;
+  const initialDay = `${currentDay}일`;
 
   const [selectedYear, setSelectedYear] = useState<string | number>(
     initialYear
@@ -22,6 +26,15 @@ const DatePicker = ({ onSelectedChange }: DatePickerProps) => {
     initialMonth
   );
   const [selectedDay, setSelectedDay] = useState<string | number>(initialDay);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsReady(true);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
 
   const handleYearChange = (year: string | number) => {
     setSelectedYear(year);
@@ -37,22 +50,62 @@ const DatePicker = ({ onSelectedChange }: DatePickerProps) => {
 
   return (
     <div className="flex flex-col items-center rounded-lg bg-white">
-      <div className="flex items-center justify-center gap-[9px] self-stretch px-4 pb-8 pt-4">
-        <Picker
-          list={years}
-          onSelectedChange={handleYearChange}
-          initialSelected={initialYear}
-        />
-        <Picker
-          list={months}
-          onSelectedChange={handleMonthChange}
-          initialSelected={initialMonth}
-        />
-        <Picker
-          list={days}
-          onSelectedChange={handleDayChange}
-          initialSelected={initialDay}
-        />
+      <div
+        className="flex items-start justify-center gap-[9px] self-stretch px-4 pb-8 pt-4"
+        style={{
+          height: '180px',
+          alignItems: 'flex-start'
+        }}
+      >
+        {isReady && (
+          <>
+            <div
+              style={{
+                flex: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'flex-start'
+              }}
+            >
+              <Picker
+                key="year-picker"
+                list={years}
+                onSelectedChange={handleYearChange}
+                initialSelected={initialYear}
+              />
+            </div>
+            <div
+              style={{
+                flex: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'flex-start'
+              }}
+            >
+              <Picker
+                key="month-picker"
+                list={months}
+                onSelectedChange={handleMonthChange}
+                initialSelected={initialMonth}
+              />
+            </div>
+            <div
+              style={{
+                flex: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'flex-start'
+              }}
+            >
+              <Picker
+                key="day-picker"
+                list={days}
+                onSelectedChange={handleDayChange}
+                initialSelected={initialDay}
+              />
+            </div>
+          </>
+        )}
       </div>
       <div className="flex h-12 w-full flex-1 items-start justify-center gap-2 self-stretch px-4">
         <button

src/components/ui/BottomSheet.tsx

@@ -6,7 +6,8 @@ import {
   AnimatePresence,
   useMotionValue,
   useTransform,
-  MotionProps
+  MotionProps,
+  PanInfo
 } from 'framer-motion';
 
 interface BottomSheetProps extends MotionProps {
@@ -32,20 +33,43 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   const [windowHeight, setWindowHeight] = useState<number>(0);
 
   useEffect(() => {
-    setWindowHeight(window.innerHeight);
+    const updateHeight = () => {
+      setWindowHeight(window.innerHeight);
+    };
+
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    window.addEventListener('orientationchange', updateHeight);
+
+    return () => {
+      window.removeEventListener('resize', updateHeight);
+      window.removeEventListener('orientationchange', updateHeight);
+    };
   }, []);
 
   const initialHeightValue = windowHeight * 0.2;
   const y = useMotionValue(initialHeightValue);
   const bottomSheetRef = useRef<HTMLDivElement>(null);
+  const dragHandleRef = useRef<HTMLDivElement>(null);
 
   const handleDragEnd = (
     event: MouseEvent | TouchEvent | PointerEvent,
-    info: { velocity: { y: number } }
+    info: PanInfo
   ) => {
     const threshold = windowHeight * 0.25;
     const closeThreshold = windowHeight * 0.7;
     const endY = y.get();
+    const velocity = info.velocity.y;
+
+    if (velocity > 500) {
+      setIsVisible(false);
+      return;
+    }
+
+    if (velocity < -500) {
+      y.set(0);
+      return;
+    }
 
     if (endY < threshold) {
       y.set(0);
@@ -67,6 +91,35 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (
+        bottomSheetRef.current &&
+        !bottomSheetRef.current.contains(e.target as Node)
+      ) {
+        e.preventDefault();
+      }
+    };
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+        e.stopPropagation();
+      }
+    };
+
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchstart', handleTouchStart, {
+      passive: false
+    });
+
+    return () => {
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, [isVisible]);
+
   return (
     <>
       {isVisible && (
@@ -86,8 +139,9 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
             animate={{
               y: initialHeightValue,
               transition: {
-                type: 'tween',
-                ease: 'easeOut',
+                type: 'spring',
+                damping: 30,
+                stiffness: 300,
                 duration: 0.3
               }
             }}
@@ -99,24 +153,48 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
                 duration: 0.3
               }
             }}
-            {...(!disableDrag && {
-              drag: 'y',
-              dragConstraints: { top: 0 },
-              onDragEnd: handleDragEnd
-            })}
-            style={{ y, height: bottomSheetHeight }}
-            className={`fixed inset-x-0 bottom-0 z-50 mx-auto max-w-[640px] rounded-tl-3xl rounded-tr-3xl bg-white shadow-lg ${
+            style={{
+              y,
+              height: bottomSheetHeight
+            }}
+            className={`fixed inset-x-0 bottom-0 z-50 mx-auto flex max-w-[640px] flex-col rounded-tl-3xl rounded-tr-3xl bg-white shadow-lg ${
               overflow ? overflow : 'overflow-hidden'
             }`}
             {...props}
           >
-            {topBar && (
-              <div className="topBar relative text-center">
-                <div className="drag-bar mx-auto my-2 h-1 w-10 rounded-full bg-gray-300" />
-                {topBar}
-              </div>
-            )}
-            {children}
+            <motion.div
+              ref={dragHandleRef}
+              {...(!disableDrag && {
+                drag: 'y',
+                dragConstraints: {
+                  top: -windowHeight * 0.5,
+                  bottom: windowHeight * 0.7
+                },
+                dragElastic: 0.1,
+                onDragEnd: handleDragEnd,
+                whileDrag: { cursor: 'grabbing' }
+              })}
+              className="relative cursor-grab active:cursor-grabbing"
+              style={{ touchAction: disableDrag ? 'auto' : 'none' }}
+            >
+              <div className="drag-bar mx-auto my-2 h-1 w-10 rounded-full bg-gray-300" />
+              {topBar && (
+                <div className="topBar relative pb-2 text-center">{topBar}</div>
+              )}
+            </motion.div>
+
+            {/* 컨텐츠 영역 - 스크롤 가능하지만 드래그 불가 */}
+            <div
+              className={`flex-1 ${overflow ? overflow : 'overflow-y-auto'}`}
+              style={{
+                touchAction: 'pan-y', // 세로 스크롤만 허용
+                WebkitOverflowScrolling: 'touch' // iOS 스크롤 최적화
+              }}
+              onTouchMove={e => e.stopPropagation()}
+              onTouchStart={e => e.stopPropagation()}
+            >
+              {children}
+            </div>
           </motion.div>
         )}
       </AnimatePresence>

src/components/ui/picker/List.tsx

@@ -1,19 +1,53 @@
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 
 interface ListProps {
   children: React.ReactNode;
-  onScroll: () => void;
+  onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
 }
 const List = forwardRef(
-  ({ children, onScroll }: ListProps, ref: React.Ref<HTMLUListElement>) => (
-    <ul
-      ref={ref}
-      onScroll={onScroll}
-      className="scrollbar-none relative m-0 h-36 w-full list-none overflow-hidden overflow-y-scroll p-0 scrollbar-hide"
-    >
-      {children}
-    </ul>
-  )
+  ({ children, onScroll }: ListProps, ref: React.Ref<HTMLUListElement>) => {
+    useEffect(() => {
+      const handleTouchMove = (e: TouchEvent) => {
+        e.stopPropagation();
+      };
+
+      const handleTouchStart = (e: TouchEvent) => {
+        e.stopPropagation();
+      };
+
+      const currentRef = (ref as React.RefObject<HTMLUListElement>)?.current;
+
+      if (currentRef) {
+        currentRef.addEventListener('touchmove', handleTouchMove, {
+          passive: true
+        });
+        currentRef.addEventListener('touchstart', handleTouchStart, {
+          passive: true
+        });
+
+        return () => {
+          currentRef.removeEventListener('touchmove', handleTouchMove);
+          currentRef.removeEventListener('touchstart', handleTouchStart);
+        };
+      }
+    }, [ref]);
+
+    return (
+      <ul
+        ref={ref}
+        onScroll={onScroll}
+        className="scrollbar-none relative m-0 h-36 w-full list-none overflow-hidden overflow-y-scroll p-0 scrollbar-hide"
+        style={{
+          touchAction: 'pan-y',
+          WebkitOverflowScrolling: 'touch'
+        }}
+        onTouchMove={e => e.stopPropagation()}
+        onTouchStart={e => e.stopPropagation()}
+      >
+        {children}
+      </ul>
+    );
+  }
 );
 
 List.displayName = 'List';

src/components/ui/picker/ListCenter.tsx

@@ -1,3 +1,11 @@
-const ListCenter = () => <div className="sticky top-12 h-12"></div>;
+const ListCenter = () => (
+  <div
+    className="pointer-events-none absolute inset-x-0 top-12 z-10 h-12 border-y border-gray-200 bg-transparent"
+    style={{
+      top: '48px',
+      height: '48px'
+    }}
+  />
+);
 
 export default ListCenter;

src/components/ui/picker/ListItem.tsx

@@ -8,7 +8,7 @@ const ListItem = forwardRef(
   ({ children, isSelected }: ListItemProps, ref: React.Ref<HTMLLIElement>) => (
     <li
       ref={ref}
-      className={`flex h-12 items-center justify-center ${isSelected ? 'flex h-10 items-center justify-center self-stretch rounded-lg bg-gr-50 font-semibold opacity-100' : 'opacity-40'}`}
+      className={`flex h-12 items-center justify-center px-[2rem] ${isSelected ? 'self-stretch rounded-lg bg-gr-50 font-semibold opacity-100' : 'opacity-40'}`}
     >
       {children}
     </li>