Reorganize frontend and install Craco to alias modules (#190)

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

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { isDefined } from '@/utils/type-guards/isDefined';
+
+import { Panel } from '../../Panel';
+import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
+import { rightDrawerPageState } from '../states/rightDrawerPageState';
+
+import { RightDrawerRouter } from './RightDrawerRouter';
+
+const StyledRightDrawer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 300px;
+  margin-left: ${(props) => props.theme.spacing(2)};
+`;
+
+export function RightDrawer() {
+  const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+  const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
+
+  if (!isRightDrawerOpen || !isDefined(rightDrawerPage)) {
+    return <></>;
+  }
+
+  return (
+    <StyledRightDrawer>
+      <Panel>
+        <RightDrawerRouter />
+      </Panel>
+    </StyledRightDrawer>
+  );
+}

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

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const RightDrawerBody = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  padding: 8px;
+`;

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

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

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

@@ -0,0 +1,16 @@
+import { useRecoilState } from 'recoil';
+
+import { RightDrawerComments } from '@/comments/components/comments/RightDrawerComments';
+import { isDefined } from '@/utils/type-guards/isDefined';
+
+import { rightDrawerPageState } from '../states/rightDrawerPageState';
+
+export function RightDrawerRouter() {
+  const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
+
+  if (!isDefined(rightDrawerPage)) {
+    return <></>;
+  }
+
+  return rightDrawerPage === 'comments' ? <RightDrawerComments /> : <></>;
+}

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

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+
+import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
+
+const StyledRightDrawerTopBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 13px;
+  color: ${(props) => props.theme.text60};
+  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
+`;
+
+const StyledTopBarTitle = styled.div`
+  align-items: center;
+  font-weight: 500;
+`;
+
+export function RightDrawerTopBar({
+  title,
+}: {
+  title: string | null | undefined;
+}) {
+  return (
+    <StyledRightDrawerTopBar>
+      <StyledTopBarTitle>{title}</StyledTopBarTitle>
+      <RightDrawerTopBarCloseButton />
+    </StyledRightDrawerTopBar>
+  );
+}

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -0,0 +1,38 @@
+import { FaTimes } from 'react-icons/fa';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
+
+const StyledButton = styled.button`
+  height: 24px;
+  width: 24px;
+  border: 1px solid ${(props) => props.theme.lightBorder};
+  background: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+
+  border-radius: 4px;
+
+  transition: ${(props) => props.theme.clickableElementBackgroundTransition};
+  &:hover {
+    background: ${(props) => props.theme.clickableElementBackgroundHover};
+  }
+`;
+
+export function RightDrawerTopBarCloseButton() {
+  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+
+  function handleButtonClick() {
+    setIsRightDrawerOpen(false);
+  }
+
+  return (
+    <StyledButton onClick={handleButtonClick}>
+      <FaTimes />
+    </StyledButton>
+  );
+}

front/src/modules/ui/layout/right-drawer/hooks/useOpenRightDrawer.ts

@@ -1,4 +1,5 @@
 import { useRecoilState } from 'recoil';
+
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPage } from '../types/RightDrawerPage';

front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts

@@ -1,4 +1,5 @@
 import { atom } from 'recoil';
+
 import { RightDrawerPage } from '../types/RightDrawerPage';
 
 export const rightDrawerPageState = atom<RightDrawerPage | null>({