[D-TP] DnD 기능 되살리기

package.json

@@ -53,7 +53,7 @@
     "react-cookie": "^6.1.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
-    "react-grid-layout": "^1.4.3",
+    "react-grid-layout": "^1.4.4",
     "react-hook-form": "^7.45.4",
     "react-slick": "^0.29.0",
     "react-spring": "^9.7.3",

src/app/teams/[id]/page.tsx

@@ -7,7 +7,7 @@ import TeamInfoContainer from './panel/TeamInfoContainer'
 import CuButton from '@/components/CuButton'
 import { useEffect, useState } from 'react'
 import CuCircularProgress from '@/components/CuCircularProgress'
-import ForbiddenDolphin from '@/components/WorkingDolphin'
+import TeamDnD from '@/app/teams/[id]/panel/TeamDnD'
 
 const TeamsPage = ({ params }: { params: { id: string } }) => {
   const [isClient, setIsClient] = useState(false)
@@ -34,19 +34,19 @@ const TeamsPage = ({ params }: { params: { id: string } }) => {
       />
       <TeamInfoContainer id={Number(id)} />
       {/*준비중 메세지*/}
-      <Stack
-        width={'100%'}
-        height={'100%'}
-        alignItems={'center'}
-        justifyContent={'center'}
-        sx={{
-          borderRadius: '1rem',
-          backgroundColor: 'background.secondary',
-        }}
-      >
-        <ForbiddenDolphin message="메인 팀페이지는 준비중입니다!" />
-      </Stack>
-      {/* <TeamDnD id={id} /> */}
+      {/*<Stack*/}
+      {/*  width={'100%'}*/}
+      {/*  height={'100%'}*/}
+      {/*  alignItems={'center'}*/}
+      {/*  justifyContent={'center'}*/}
+      {/*  sx={{*/}
+      {/*    borderRadius: '1rem',*/}
+      {/*    backgroundColor: 'background.secondary',*/}
+      {/*  }}*/}
+      {/*>*/}
+      {/*  <ForbiddenDolphin message="메인 팀페이지는 준비중입니다!" />*/}
+      {/*</Stack>*/}
+      <TeamDnD id={id} />
     </Stack>
   )
 }

src/app/teams/[id]/panel/SelectedWidget.tsx

@@ -1,13 +1,12 @@
 import { SizeType, WidgetType } from '@/types/ITeamDnDLayout'
 import React from 'react'
 import BoardWidget from '@/app/teams/[id]/panel/widgets/BoardWidget'
-import TmpBoardWidget from '@/app/teams/[id]/panel/widgets/TmpBoardWidget'
-import CalenderWidget from '@/app/teams/[id]/panel/widgets/CalenderWidget'
-import TmpAttendWidget from '@/app/teams/[id]/panel/widgets/TmpAttendWidget'
+// import TmpBoardWidget from '@/app/teams/[id]/panel/widgets/TmpBoardWidget'
+// import CalenderWidget from '@/app/teams/[id]/panel/widgets/CalenderWidget'
+// import TmpAttendWidget from '@/app/teams/[id]/panel/widgets/TmpAttendWidget'
 import TextWidget from '@/app/teams/[id]/panel/widgets/TextWidget'
 import ImageWidget from '@/app/teams/[id]/panel/widgets/ImageWidget'
-import TmpLinkWidget from '@/app/teams/[id]/panel/widgets/TmpLinkWidget'
-
+// import TmpLinkWidget from '@/app/teams/[id]/panel/widgets/TmpLinkWidget'
 
 /* widget 가져오기 */
 const SelectedWidget = ({
@@ -24,18 +23,18 @@ const SelectedWidget = ({
   switch (type) {
     case 'notice':
       return <BoardWidget size={wgSize} />
-    case 'board':
-      return <TmpBoardWidget data={wgData} size={wgSize} />
-    case 'calender':
-      return <CalenderWidget data={wgData} size={wgSize} />
-    case 'attendance':
-      return <TmpAttendWidget data={wgData} size={wgSize}  />
+    // case 'board':
+    //   return <TmpBoardWidget data={wgData} size={wgSize} />
+    // case 'calender':
+    //   return <CalenderWidget data={wgData} size={wgSize} />
+    // case 'attendance':
+    //   return <TmpAttendWidget data={wgData} size={wgSize}  />
     case 'text':
       return <TextWidget data={wgData} size={wgSize} wgKey={wgKey} />
     case 'image':
       return <ImageWidget data={wgData} size={wgSize} wgKey={wgKey} />
-    case 'linkTable':
-      return <TmpLinkWidget data={wgData} size={wgSize} wgKey={wgKey} />
+    // case 'linkTable':
+    //   return <TmpLinkWidget data={wgData} size={wgSize} wgKey={wgKey} />
     default:
       return <></>
   }

src/app/teams/[id]/panel/TeamDnD.tsx

@@ -13,6 +13,7 @@ import useDnDStore from '@/states/useDnDStore'
 import { useParams } from 'next/navigation'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import NoDataDolphin from '@/components/NoDataDolphin'
+import useMedia from '@/hook/useMedia'
 
 export const sizeRatio = {
   S: { w: 1, h: 1 },
@@ -21,8 +22,8 @@ export const sizeRatio = {
 }
 
 const TeamDnD = ({ id }: { id: string }) => {
-  const { setStoredWidgets, setTeamId } = useDnDStore()
-  const [edit, setEdit] = useState(false)
+  const { setStoredWidgets, setTeamId, edit } = useDnDStore()
+  const { isOverTablet } = useMedia()
   const [type, setType] = useState<WidgetType>('text')
   const [droppingItem, setDroppingItem] = useState<
     ReactGridLayout.CoreProps['droppingItem']
@@ -75,11 +76,9 @@ const TeamDnD = ({ id }: { id: string }) => {
         size={size}
         isDropping={isDropping}
         droppingItem={droppingItem}
-        edit={edit}
-        setEdit={setEdit}
       >
         {/*툴 박스 리스트*/}
-        {edit && (
+        {edit && isOverTablet && (
           <WidgetList
             setIsDropping={setIsDropping}
             setType={setType}

src/app/teams/[id]/panel/WidgetList.tsx

@@ -33,7 +33,7 @@ const WidgetList = ({
   setSize,
   setDroppingItem,
 }: ITeamDnDWidgetListProps) => {
-  const { isPc, isTablet } = useMedia()
+  const { isPc, isOverTablet } = useMedia()
   /* 툴 박스의 사이즈 관리 */
   const [toolSize, setToolSize] = useState<IToolSizeType>({
     notice: 'S',
@@ -47,17 +47,18 @@ const WidgetList = ({
 
   const typeList: WidgetType[] = [
     'notice',
-    'board',
-    'calender',
-    'attendance',
+    // 'board',
+    // 'calender',
+    // 'attendance',
     'text',
     'image',
-    'linkTable',
+    // 'linkTable',
   ]
 
   /* drag 시작 시 호출 */
   const onDragStart = useCallback(
     (e: any, wgType: WidgetType) => {
+      console.log('onDragStart')
       setIsDropping(true)
       setType(wgType)
       setSize(toolSize[wgType] ?? 'S')
@@ -76,7 +77,7 @@ const WidgetList = ({
     dots: true,
     infinite: true,
     speed: 500,
-    slidesToShow: isTablet ? 2 : isPc ? 3 : 1,
+    slidesToShow: isPc ? 3 : isOverTablet ? 2 : 1,
     slidesToScroll: 1,
   }
 
@@ -160,6 +161,7 @@ const WidgetList = ({
                       unselectable="on"
                       onDragStart={(e) => onDragStart(e, typeValue)}
                       onDragEnd={() => {
+                        console.log('onDragEnd')
                         setIsDropping(false)
                       }}
                     >

src/app/teams/[id]/panel/WidgetUpdate.tsx

@@ -6,25 +6,23 @@ import React, { useCallback, useState } from 'react'
 import useAxiosWithAuth from '@/api/config'
 import { IWidget } from '@/types/ITeamDnDLayout'
 import useDnDStore from '@/states/useDnDStore'
+import useMedia from '@/hook/useMedia'
 
 interface IWidgetUpdateProps {
-  edit: boolean
-  setEdit: (edit: boolean) => void
   layouts: IWidget[]
   isCreate: boolean
   cancelAction: () => void
 }
 
 const WidgetUpdate = ({
-  edit,
-  setEdit,
   layouts,
   isCreate,
   cancelAction,
 }: IWidgetUpdateProps) => {
   const [modalOpen, setModalOpen] = useState(false)
   const axiosInstance = useAxiosWithAuth()
-  const { teamId } = useDnDStore()
+  const { teamId, edit, setEdit } = useDnDStore()
+  const { isOverTablet } = useMedia()
 
   /* 변경된 팀페이지 위젯 request */
   const handleSave = useCallback(async () => {
@@ -75,41 +73,43 @@ const WidgetUpdate = ({
         }}
         content={'팀페이지를 저장하시겠습니까?'}
       />
-      <BrowserView>
-        {/* 팀페이지 수정 버튼 */}
-        <Stack
-          alignItems={'center'}
-          direction={'row'}
-          spacing={1}
-          justifyContent={'flex-end'}
-        >
-          {edit && (
+      {isOverTablet && (
+        <BrowserView>
+          {/* 팀페이지 수정 버튼 */}
+          <Stack
+            alignItems={'center'}
+            direction={'row'}
+            spacing={1}
+            justifyContent={'flex-end'}
+          >
+            {edit && (
+              <CuButton
+                TypographyProps={{
+                  variant: 'Body2Emphasis',
+                }}
+                message={'취소'}
+                action={() => {
+                  // 취소 시 최초의 widget 상태로 되돌림
+                  cancelAction()
+                  setEdit(!edit)
+                }}
+                variant={'outlined'}
+              />
+            )}
             <CuButton
+              message={edit ? '저장' : '팀페이지 수정'}
               TypographyProps={{
                 variant: 'Body2Emphasis',
               }}
-              message={'취소'}
               action={() => {
-                // 취소 시 최초의 widget 상태로 되돌림
-                cancelAction()
+                if (edit) return setModalOpen(true)
                 setEdit(!edit)
               }}
-              variant={'outlined'}
+              variant={edit ? 'contained' : 'text'}
             />
-          )}
-          <CuButton
-            message={edit ? '저장' : '팀페이지 수정'}
-            TypographyProps={{
-              variant: 'Body2Emphasis',
-            }}
-            action={() => {
-              if (edit) return setModalOpen(true)
-              setEdit(!edit)
-            }}
-            variant={edit ? 'contained' : 'text'}
-          />
-        </Stack>
-      </BrowserView>
+          </Stack>
+        </BrowserView>
+      )}
     </Box>
   )
 }