Feat : drag & drop 연습

backend/src/service/UserHasWorkspaceService.ts

@@ -1,8 +1,8 @@
 import { StatusCodes } from 'http-status-codes';
 import { Request, Response } from 'express';
 import { getCustomRepository } from 'typeorm';
-import axios from 'axios';
 import UserHasWorkspaceRepository from '../repository/UserHasWorkspaceRepository';
+import UserRepository from '../repository/UserRepository';
 import FileRepository from '../repository/FileRepository';
 
 const { BAD_REQUEST, OK } = StatusCodes;
@@ -81,10 +81,9 @@ export async function updateUserHasWorkspace(req: Request, res: Response) {
       userHasWorkspaceById,
     );
 
-    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-    axios.put(`http://${process.env.HOST}:${process.env.PORT}/api/users/${userId}`, {
-      theme: userHasWorkspaceById.theme,
-    });
+    const userById = await getCustomRepository(UserRepository).findOneOrFail(Number(userId));
+    userById.theme = userHasWorkspaceById.theme ?? userById.theme;
+    await getCustomRepository(UserRepository).save(userById);
 
     return res.status(OK).json({ userHasWorkspace });
   } catch (e) {

frontend/src/components/atoms/DraggableDiv/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useSetRecoilState } from 'recoil';
+import { widthSizeState } from '@state/workspace';
+
+import Container from './styles';
+
+const DraggableDiv = (): JSX.Element => {
+  const setWidthSize = useSetRecoilState(widthSizeState);
+
+  const dragEventHandler = (e: React.DragEvent) => {
+    const { target } = e;
+    const { parentNode } = target;
+
+    const parentBox = parentNode.getBoundingClientRect();
+    setWidthSize(Math.max(47, (e.clientX / parentBox.width) * 100 + 1));
+  };
+
+  return <Container draggable="true" onDragEnd={dragEventHandler} />;
+};
+
+export default DraggableDiv;

frontend/src/components/atoms/DraggableDiv/styles.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  height: 95vh;
+  color: #f8f8f8;
+  border-left: 2px solid #fff;
+  border-right: 1.5px solid #f8f8f8;
+
+  &: hover {
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+  }
+`;
+
+export default Container;

frontend/src/components/organisms/BrowseChannelList/styles.ts

@@ -13,6 +13,8 @@ export const Container = styled.div<Props>`
     if (width) return `${width}vw`;
     return '95%';
   }};
+  min-width: 10vw;
+
   flex-direction: column;
 `;
 

frontend/src/components/organisms/PreferenceModal/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { preferenceModalState } from '@state/modal';
+import { PREFERENCE_MODAL_STATUS } from '@enum/index';
 import PreferenceMenuContent from './PreferenceMenuContent';
 import AboutUs from './AboutUs/AboutUs';
 import ThemeSelect from './ThemeSelect';
@@ -14,22 +15,27 @@ import {
   RowDiv,
 } from './styles';
 
-const selectedContent = ({ isClicked }: { isClicked: number }): JSX.Element => {
-  switch (isClicked) {
-    case 1:
+const { ABOUT, THEME, OUT } = PREFERENCE_MODAL_STATUS;
+
+const selectedContent = ({
+  currentPreferenceStatus,
+}: {
+  currentPreferenceStatus: number;
+}): JSX.Element => {
+  switch (currentPreferenceStatus) {
+    case ABOUT:
       return <AboutUs />;
-    case 2:
+    case THEME:
       return <ThemeSelect />;
-    case 3:
-      return <WorkspaceOut />;
+    case OUT:
     default:
       return <WorkspaceOut />;
   }
 };
 
 const PreferenceModal = (): JSX.Element => {
   const [isOpen, setIsOpen] = useRecoilState(preferenceModalState);
-  const [isClicked, setClick] = useState<number>(1);
+  const [currentPreferenceStatus, setClick] = useState<number>(ABOUT);
 
   return (
     <StyledModal isOpen={isOpen} onClose={() => setIsOpen(false)} zIndex={100}>
@@ -38,27 +44,27 @@ const PreferenceModal = (): JSX.Element => {
         <RowDiv>
           <MenuContainer>
             <StyledDivLists
-              isClicked={isClicked}
-              index={1}
-              onClick={() => setClick(1)}
+              isClicked={currentPreferenceStatus}
+              index={ABOUT}
+              onClick={() => setClick(ABOUT)}
               text="About us"
             />
             <StyledDivLists
-              isClicked={isClicked}
-              index={2}
-              onClick={() => setClick(2)}
+              isClicked={currentPreferenceStatus}
+              index={THEME}
+              onClick={() => setClick(THEME)}
               text="테마 설정"
             />
             <StyledDivLists
-              isClicked={isClicked}
-              index={3}
+              isClicked={currentPreferenceStatus}
+              index={OUT}
               color="red"
-              onClick={() => setClick(3)}
+              onClick={() => setClick(OUT)}
               text="워크스페이스 탈퇴"
             />
           </MenuContainer>
           <PreferenceMenuContent>
-            {selectedContent({ isClicked })}
+            {selectedContent({ currentPreferenceStatus })}
           </PreferenceMenuContent>
         </RowDiv>
       </Container>

frontend/src/components/organisms/WorkspaceListContent/index.tsx

@@ -2,15 +2,14 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { useHistory } from 'react-router-dom';
-import axios from 'axios';
 import LabeledDefaultButton from '@atoms/LabeledDefaultButton';
 import AsyncBranch from '@molecules/AsyncBranch';
-import API from '@global/api';
 import useInfinityScroll from '@hook/useInfinityPage';
 import wavingHandImage from '@global/image/wavingHandFromSlack.gif';
 import userState from '@state/user';
 import { Workspace } from '@global/type';
 import { queryFlatMap } from '@global/util/reactQueryUtil';
+import { getWorkspaceLists } from '@global/api/workspace';
 import {
   HelloLabel,
   StyledLabel,
@@ -32,7 +31,7 @@ const WorkSpaceLists = (workspaces: Workspace[]) => {
   return workspaces.map(
     ({ id, name, count, fileId }: Workspace & { count: number }) => {
       return (
-        <StyledDiv key={`workspacelist${id}`}>
+        <StyledDiv key={`${id}`}>
           <StyledSelectWorkspace
             firstLabelContent={name}
             content={count}
@@ -50,16 +49,6 @@ const WorkSpaceLists = (workspaces: Workspace[]) => {
   );
 };
 
-async function getWorkspaceLists({ pageParam = 0 }) {
-  const { data } = await axios.get(API.get.workspace.user, {
-    params: {
-      page: pageParam,
-    },
-  });
-
-  return data;
-}
-
 const WorkspaceList = () => {
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfinityScroll('workspacelists', getWorkspaceLists);

frontend/src/components/templates/Workspace/index.tsx

@@ -1,8 +1,9 @@
-import React, { ReactNode, Suspense, useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import React, { ReactNode, useEffect, useState } from 'react';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useParams } from 'react-router-dom';
 import { useQueryClient } from 'react-query';
 import { io } from 'socket.io-client';
+import DraggableDiv from '@atoms/DraggableDiv';
 import WorkspaceHeader from '@organisms/WorkspaceHeader';
 import WorkspaceSidebar from '@organisms/WorkspaceSidebar';
 import CreateChannelModal from '@organisms/CreateChannelModal';
@@ -39,7 +40,6 @@ const WorkspaceTemplate = ({ children }: Props): JSX.Element => {
   const channelTopicModal = useRecoilValue(channelTopicModalState);
   const preferenceModal = useRecoilValue(preferenceModalState);
   const userProfileModal = useRecoilValue(userProfileModalState);
-
   const { isOpened } = useRecoilValue(replyToggleState);
 
   const { workspaceId }: { workspaceId: string } = useParams();
@@ -87,6 +87,7 @@ const WorkspaceTemplate = ({ children }: Props): JSX.Element => {
       <RowDiv>
         <WorkspaceSidebar />
         {children}
+        {isOpened && <DraggableDiv />}
         {isOpened && <ReplyBar />}
       </RowDiv>
       {channelCreateModal && <CreateChannelModal />}

frontend/src/enum/index.ts

@@ -21,3 +21,5 @@ export const CHANNELTYPE = {
   1: '🔒',
   0: '#',
 } as const;
+
+export const PREFERENCE_MODAL_STATUS = { ABOUT: 1, THEME: 2, OUT: 3 };

frontend/src/global/api/workspace/index.tsx

@@ -16,3 +16,13 @@ export const getUserHasWorkspace = async (
 
   return res.data.userHasWorkspace;
 };
+
+export const getWorkspaceLists = async ({ pageParam = 0 }) => {
+  const { data } = await axios.get(API.get.workspace.user, {
+    params: {
+      page: pageParam,
+    },
+  });
+
+  return data;
+};

frontend/src/state/workspace/index.ts

@@ -2,13 +2,13 @@ import { Message } from '@global/type';
 import { atom, selector } from 'recoil';
 
 const PAGEVW = 100;
-const OPENSIZE = 82;
+const WORKSPACE_SIZE = 82;
 const SIDEBARSIZE = 18;
-const CLOSEDSIZE = 61;
+const CLOSEDSIZE = 21;
 
-export const sizestate = atom<number>({
-  key: 'sizeState',
-  default: OPENSIZE,
+export const widthSizeState = atom<number>({
+  key: 'widthSizeState',
+  default: WORKSPACE_SIZE,
 });
 
 export interface IreplyToggle {
@@ -30,10 +30,9 @@ export const mainWorkspaceSizeState = selector<number>({
   key: 'mainWorkspaceSizeState',
   get: ({ get }) => {
     const { isOpened } = get(replyToggleState);
-    const OPENEDSIZE = get(sizestate);
-
-    if (isOpened) return CLOSEDSIZE;
-    return OPENEDSIZE;
+    const OPENEDSIZE = get(widthSizeState);
+    if (isOpened) return OPENEDSIZE - CLOSEDSIZE;
+    return WORKSPACE_SIZE;
   },
 });