feat: 출연진 팀 순서 변경 기능 구현

Nexters · Nov 12, 2024 · 9e30416 · 9e30416
1 parent 49bc28f
commit 9e30416
Show file tree

Hide file tree

Showing 12 changed files with 423 additions and 91 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -29,6 +29,8 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.50.0",

diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
@@ -3,6 +3,8 @@ import './index.css';
 
 import { QueryClientProvider } from '@boolti/api';
 import { BooltiUIProvider } from '@boolti/ui';
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 import { setDefaultOptions } from 'date-fns';
 import { ko } from 'date-fns/locale';
 import {
@@ -155,7 +157,9 @@ const routes: RouteObject[] = [
       <QueryClientProvider>
         <BooltiUIProvider>
           <LazyMotion features={domAnimation}>
-            <Outlet />
+            <DndProvider backend={HTML5Backend}>
+              <Outlet />
+            </DndProvider>
           </LazyMotion>
         </BooltiUIProvider>
       </QueryClientProvider>

diff --git a/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts b/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts
@@ -18,15 +18,32 @@ const Header = styled.div`
   align-items: center;
   border-radius: 8px 8px 0px 0px;
   border: 1px solid ${({ theme }) => theme.palette.grey.g20};
-  color: ${({ theme }) => theme.palette.grey.g90};
-  ${({ theme }) => theme.typo.sh2};
   padding: 24px 28px;
 
   &:last-child {
     border-radius: 8px;
   }
 `;
 
+const HeaderNameWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`
+
+const Handle = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.palette.grey.g40};
+  cursor: move;
+`
+
+const Name = styled.span`
+  color: ${({ theme }) => theme.palette.grey.g90};
+  ${({ theme }) => theme.typo.sh2};
+`;
+
 const EditButton = styled(Button)`
   padding: 13px 18px;
   & > svg {
@@ -118,6 +135,9 @@ const CollapseButton = styled.button`
 export default {
   Container,
   Header,
+  HeaderNameWrapper,
+  Handle,
+  Name,
   Cast,
   CollapseButton,
   EditButton,