chore: 프로필 탭의 모든 요소가 드래그 할 수 없도록 수정

woowacourse-teams · Dec 27, 2024 · 86806d1 · 86806d1
1 parent 799d3d6
commit 86806d1
Showing 1 changed file with 30 additions and 27 deletions.
diff --git a/frontend/src/components/profile/ProfileTab/index.tsx b/frontend/src/components/profile/ProfileTab/index.tsx
@@ -1,3 +1,4 @@
+import UndraggableWrapper from '@/components/common/UndraggableWrapper';
 import { ProfileTabElement } from '@/types/profile';
 
 import * as S from './styles';
@@ -9,33 +10,35 @@ interface ProfileTabProps {
 const ProfileTab = ({ items }: ProfileTabProps) => {
   return (
     <S.ProfileTabContainer>
-      {items.map((item, index) => {
-        switch (item.elementType) {
-          case 'readonly':
-            return (
-              <S.ReadonlyItemWrapper
-                key={`${item.elementType}_${index}`}
-                $isDisplayedOnlyMobile={item.isDisplayedOnlyMobile}
-              >
-                {item.content}
-              </S.ReadonlyItemWrapper>
-            );
-          case 'action':
-            return (
-              <S.ActionItemWrapper
-                key={`${item.elementType}_${index}`}
-                onClick={item.handleClick}
-                $isDisplayedOnlyMobile={item.isDisplayedOnlyMobile}
-              >
-                {item.content}
-              </S.ActionItemWrapper>
-            );
-          case 'divider':
-            return (
-              <S.Divider key={`${item.elementType}_${index}`} $isDisplayedOnlyMobile={item.isDisplayedOnlyMobile} />
-            );
-        }
-      })}
+      <UndraggableWrapper>
+        {items.map((item, index) => {
+          switch (item.elementType) {
+            case 'readonly':
+              return (
+                <S.ReadonlyItemWrapper
+                  key={`${item.elementType}_${index}`}
+                  $isDisplayedOnlyMobile={item.isDisplayedOnlyMobile}
+                >
+                  {item.content}
+                </S.ReadonlyItemWrapper>
+              );
+            case 'action':
+              return (
+                <S.ActionItemWrapper
+                  key={`${item.elementType}_${index}`}
+                  onClick={item.handleClick}
+                  $isDisplayedOnlyMobile={item.isDisplayedOnlyMobile}
+                >
+                  {item.content}
+                </S.ActionItemWrapper>
+              );
+            case 'divider':
+              return (
+                <S.Divider key={`${item.elementType}_${index}`} $isDisplayedOnlyMobile={item.isDisplayedOnlyMobile} />
+              );
+          }
+        })}
+      </UndraggableWrapper>
     </S.ProfileTabContainer>
   );
 };