Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/right-drawer/components/RightDrawer.tsx

@@ -5,14 +5,14 @@ import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import {
   ClickOutsideMode,
   useListenClickOutside,
-} from '@/ui/hooks/useListenClickOutside';
+} from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isDefined } from '~/utils/isDefined';
 
-import { useScopedHotkeys } from '../../hotkey/hooks/useScopedHotkeys';
 import { leftNavbarWidth } from '../../navbar/constants';
 import { useRightDrawer } from '../hooks/useRightDrawer';
 import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';

front/src/modules/ui/right-drawer/components/RightDrawerBody.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-export const RightDrawerBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: calc(
-    100vh - ${({ theme }) => theme.spacing(14)} - 1px
-  ); // (-1 for border)
-  overflow: auto;
-  position: relative;
-`;

front/src/modules/ui/right-drawer/components/RightDrawerPage.tsx

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-
-export const RightDrawerPage = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-`;

front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx

@@ -1,28 +1,55 @@
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
 import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
 import { RightDrawerTimeline } from '@/activities/right-drawer/components/RightDrawerTimeline';
-import { isDefined } from '~/utils/isDefined';
 
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
 
+import { RightDrawerTopBar } from './RightDrawerTopBar';
+
+const RightDrawerPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+
+const RightDrawerBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(
+    100vh - ${({ theme }) => theme.spacing(14)} - 1px
+  ); // (-1 for border)
+  overflow: auto;
+  position: relative;
+`;
+
 export function RightDrawerRouter() {
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
 
-  if (!isDefined(rightDrawerPage)) {
-    return <></>;
-  }
+  let page = <></>;
 
   switch (rightDrawerPage) {
     case RightDrawerPages.Timeline:
-      return <RightDrawerTimeline />;
+      page = <RightDrawerTimeline />;
+      break;
     case RightDrawerPages.CreateActivity:
-      return <RightDrawerCreateActivity />;
+      page = <RightDrawerCreateActivity />;
+      break;
     case RightDrawerPages.EditActivity:
-      return <RightDrawerEditActivity />;
+      page = <RightDrawerEditActivity />;
+      break;
     default:
-      return <></>;
+      break;
   }
+
+  return (
+    <RightDrawerPage>
+      <RightDrawerTopBar />
+      <RightDrawerBody>{page}</RightDrawerBody>
+    </RightDrawerPage>
+  );
 }

front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 import { RightDrawerTopBarExpandButton } from './RightDrawerTopBarExpandButton';