feat: 메뉴 react-draggble

DDD-Community · Feb 25, 2024 · 6049721 · 6049721
1 parent df95bf3
commit 6049721
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-draggable": "^4.4.6",
     "react-error-boundary": "^4.0.12",
     "recoil": "^0.7.7",
     "swiper": "^11.0.6"

diff --git a/src/components/organisms/IngredientModal.tsx b/src/components/organisms/IngredientModal.tsx
@@ -76,7 +76,9 @@ const IngredientModal: React.FC<{
     reqBody?.location,
   );
 
-  const [isInFreezer, setIsInFreezer] = useState(false);
+  const [isInFreezer, setIsInFreezer] = useState(
+    reqBody?.location === 'REFRIGERATION',
+  );
 
   const toggleIsInFreezer: () => void = () => {
     setIsInFreezer((prev) => !prev);

diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx
@@ -11,6 +11,8 @@ import {
   ModalContent,
   useDisclosure,
 } from '@chakra-ui/react';
+import Draggable from 'react-draggable';
+import type { DraggableEvent } from 'react-draggable';
 
 const FridgePage: NextPage = () => {
   const [ingredientId, setIngredientId] = useState<null | number>(null);
@@ -24,6 +26,25 @@ const FridgePage: NextPage = () => {
 
   const data = useGetIngredientList();
 
+  const [scrollX, setScrollX] = useState(0);
+
+  const containerWidth = 1400;
+  const maxScrollX = containerWidth - window.innerWidth;
+
+  const handleDrag = (
+    e: DraggableEvent,
+    { deltaX }: { deltaX: number },
+  ): void => {
+    const newScrollX = scrollX - deltaX;
+    if (newScrollX > maxScrollX) {
+      setScrollX(maxScrollX);
+    } else if (newScrollX < maxScrollX) {
+      setScrollX(0);
+    } else {
+      setScrollX(newScrollX);
+    }
+  };
+
   return (
     <>
       {isOpenIngredientModal && (
@@ -54,22 +75,30 @@ const FridgePage: NextPage = () => {
       <div className={'pt-[52px] min-h-screen'}>
         <Header headerTitle={'식자재 추가'} />
         <main
-          className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1 gap-[18px]`}
+          className={`flex flex-col min-h-screen p-20 bg-gray1 gap-[18px] relative`}
         >
-          <section className="flex gap-[10px] flex-wrap">
-            {['전체', ...(data?.map((item) => item.category) as string[])].map(
-              (category) => (
-                <div
-                  key={category}
-                  onClick={() => {
-                    setCurrentCategory(category);
-                  }}
-                  className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`}
-                >
-                  {category}
-                </div>
-              ),
-            )}
+          <section className="overflow-hidden relative">
+            <Draggable axis="x" onDrag={handleDrag}>
+              <div
+                className="flex gap-[10px]"
+                style={{ transform: `translateX(${scrollX}px)` }}
+              >
+                {['전체', ...(data?.map((item) => item.category) ?? [])].map(
+                  (category) => (
+                    <div
+                      key={category}
+                      onClick={() => {
+                        setCurrentCategory(category);
+                      }}
+                      className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`}
+                      style={{ whiteSpace: 'nowrap' }}
+                    >
+                      {category}
+                    </div>
+                  ),
+                )}
+              </div>
+            </Draggable>
           </section>
           {data?.map((items) => (
             <Container key={items.category} className="bg-white">

diff --git a/yarn.lock b/yarn.lock
@@ -5613,6 +5613,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -10100,6 +10105,14 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-draggable@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
 react-element-to-jsx-string@^15.0.0:
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"