Merge branch 'dev-frontend' of https://github.com/boostcamp-2020/Project18-C-Bootion into feat/106

Author: YiSoJeong

frontend/src/assets/toggle-default.svg

@@ -20,7 +20,7 @@ const isGridOrColumn = (block: Block): boolean =>
 
 const blockContentCSS = css`
   display: flex;
-  align-items: center;
+  align-items: stretch;
 `;
 const editableDivCSS = (block: Block): SerializedStyles => css`
   margin: 5;

frontend/src/assets/toggle-down.svg

@@ -19,13 +19,13 @@ const buttonCss = (): SerializedStyles => css`
   }
 `;
 
-function HeaderButton({ children, handleClick }: any): JSX.Element {
+function HeaderButton({ children, clickHandler }: any): JSX.Element {
   return (
     <div
       role="button"
       css={buttonCss()}
-      onClick={handleClick}
-      onKeyUp={handleClick}
+      onClick={clickHandler}
+      onKeyUp={clickHandler}
       tabIndex={0}
     >
       {children}

frontend/src/components/atoms/BlockContent/BlockContent.tsx

@@ -16,7 +16,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 const isGridOrColumn = (block: Block): boolean =>
   block.type === BlockType.GRID || block.type === BlockType.COLUMN;
 
-const blockCss = (): SerializedStyles => css`
+const blockCss = css`
   width: 100%;
   max-width: 1000px;
   margin-top: 3px;
@@ -41,7 +41,7 @@ function BlockComponent({ blockDTO }: { blockDTO: Block }): JSX.Element {
   const blockRef: any = blockRefState[blockDTO.id];
 
   return (
-    <div css={blockCss()}>
+    <div css={blockCss}>
       <div
         css={{ position: 'relative' }}
         onMouseEnter={() => setHoverId(blockDTO.id)}

frontend/src/components/atoms/HeaderButton/HeaderButton.tsx

@@ -3,8 +3,10 @@
 import { jsx, css } from '@emotion/react';
 
 import { BlockComponent } from '@components/molecules';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { pageState, blockMapState } from '@/stores';
+import { Suspense, useEffect } from 'react';
+import { readBlockMap } from '@/utils';
 
 const wrapperCss = () => css`
   padding-left: calc(96px + env(safe-area-inset-left));
@@ -16,13 +18,22 @@ const wrapperCss = () => css`
 
 function Editor(): JSX.Element {
   const page = useRecoilValue(pageState);
-  const blockMap = useRecoilValue(blockMapState);
+  // const blockMap = useRecoilValue(blockMapState);
+  const [blockMap, setBlockMap] = useRecoilState(blockMapState);
+
+  useEffect(() => {
+    (async () => {
+      setBlockMap((await readBlockMap(page.id)).blockMap);
+    })();
+  }, [page, setBlockMap]);
 
   return (
     <div css={wrapperCss()}>
-      {blockMap[page.rootId].childIdList.map((blockId: string) => (
-        <BlockComponent key={blockId} blockDTO={blockMap[blockId]} />
-      ))}
+      <Suspense fallback={<div>로딩 중...</div>}>
+        {blockMap[page.rootId].childIdList.map((blockId: string) => (
+          <BlockComponent key={blockId} blockDTO={blockMap[blockId]} />
+        ))}
+      </Suspense>
     </div>
   );
 }

frontend/src/components/molecules/BlockComponent/BlockComponent.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as Dots } from '@assets/dots.svg';
 import { ReactComponent as Check } from '@assets/check.svg';
 import { HeaderLink, HeaderButton } from '@components/atoms';
 import { useRecoilValue } from 'recoil';
-import { selectedPageState, staticMenuToggleState } from '@/stores';
+import { pageState, staticMenuToggleState } from '@/stores';
 
 const headerCss = () => css`
   width: 100%;
@@ -38,7 +38,7 @@ interface Props {}
 
 function Header({}: Props): JSX.Element {
   const staticMenuToggle = useRecoilValue(staticMenuToggleState);
-  const selectedPage = useRecoilValue(selectedPageState);
+  const selectedPage = useRecoilValue(pageState);
 
   return (
     <div css={headerCss()}>

frontend/src/components/molecules/Editor/Editor.tsx

@@ -5,12 +5,13 @@ import { Suspense } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import {
+  blockMapState,
   hoveredMenuToggleState,
   pagesState,
-  selectedPageState,
+  pageState,
   staticMenuToggleState,
 } from '@/stores';
-import { createPage } from '@/utils';
+import { createPage, readBlockMap } from '@/utils';
 import { HeaderButton } from '@atoms/index';
 import { ReactComponent as DoubleChevronLeft } from '@assets/doubleChevronLeft.svg';
 import { ReactComponent as PlusPage } from '@assets/plusPage.svg';
@@ -42,37 +43,36 @@ const buttonsCss = () => css`
   line-height: 1.2;
   font-size: 14px;
   flex-grow: 0;
-  margin-right: 8px;
+  margin-right: 14px;
   min-width: 0;
 `;
-const plusCss = () => css`
-  margin-right: 5px;
+const plusCss = (staticMenuToggle: boolean) => css`
+  margin-right: ${staticMenuToggle ? 5 : 0}px;
   border: 1px solid rgba(55, 53, 47, 0.16);
   border-radius: 3px;
 `;
 
-interface Props {}
-
-function Menu({}: Props): JSX.Element {
+function Menu(): JSX.Element {
   const [pages, setPages] = useRecoilState(pagesState);
-  const setSelectedPage = useSetRecoilState(selectedPageState);
+  const setSelectedPage = useSetRecoilState(pageState);
   const [staticMenuToggle, setStaticMenuToggle] = useRecoilState(
     staticMenuToggleState,
   );
   const [hoveredMenuToggle, setHoveredMenuToggle] = useRecoilState(
     hoveredMenuToggleState,
   );
+  const setBlockMap = useSetRecoilState(blockMapState);
 
-  const handleCreatingPage = () => {
-    const doFetch = async () => {
-      const { pages: updated, page: created } = await createPage();
-      setPages(updated);
-      setSelectedPage(created);
-    };
-    doFetch();
+  const CreatingPageHandler = async () => {
+    const { pages: updated, page: created } = await createPage();
+    const { blockMap } = await readBlockMap(created.id);
+    console.log({ blockMap });
+    setBlockMap(blockMap);
+    setPages(updated);
+    setSelectedPage(created);
   };
 
-  const handleClickClose = () => {
+  const clickCloseHandler = () => {
     setStaticMenuToggle(false);
     setHoveredMenuToggle(false);
   };
@@ -81,13 +81,13 @@ function Menu({}: Props): JSX.Element {
     <div css={wrapperCss(staticMenuToggle)}>
       {hoveredMenuToggle && (
         <div css={buttonsCss()}>
-          <div css={plusCss()}>
-            <HeaderButton handleClick={handleCreatingPage}>
+          <div css={plusCss(staticMenuToggle)}>
+            <HeaderButton clickHandler={CreatingPageHandler}>
               <PlusPage />
             </HeaderButton>
           </div>
           {staticMenuToggle && (
-            <HeaderButton handleClick={handleClickClose}>
+            <HeaderButton clickHandler={clickCloseHandler}>
               <DoubleChevronLeft />
             </HeaderButton>
           )}
@@ -96,7 +96,7 @@ function Menu({}: Props): JSX.Element {
       <div css={workspaceCss()}>WORKSPACE</div>
       <Suspense fallback={<div>Loading...</div>}>
         {pages.map((page) => (
-          <MenuItem page={page} />
+          <MenuItem key={page.id} page={page} />
         ))}
       </Suspense>
     </div>

frontend/src/components/molecules/Header/Header.tsx

@@ -1,31 +1,33 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { css, jsx } from '@emotion/react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import { useState } from 'react';
 
 import { Page } from '@/schemes';
-import { selectedPageState } from '@/stores';
+import { blockMapState, pagesState, pageState } from '@/stores';
 import { HeaderButton } from '@atoms/index';
 import { ReactComponent as Trash } from '@assets/trash.svg';
+import { deletePage, readBlockMap, refreshPages } from '@/utils';
 
-const itemCss = (isHovered: boolean) => css`
+const itemWrapperCss = () => css`
+  position: relative;
   align-items: center;
+  cursor: pointer;
+`;
+const itemCss = (isHovered: boolean) => css`
   min-height: 27px;
   padding: 2px 14px;
   padding-right: ${isHovered ? 8 : 14}px;
-  cursor: pointer;
   background: ${isHovered ? 'rgba(55, 53, 47, 0.08)' : 'inherit'};
 `;
 const selectedItemCss = (isHovered: boolean) => css`
-  align-items: center;
   min-height: 27px;
   padding: 2px 14px;
   padding-right: ${isHovered ? 8 : 14}px;
   background: ${isHovered
     ? 'rgba(55, 53, 47, 0.16)'
     : 'rgba(55, 53, 47, 0.08)'};
-  cursor: pointer;
 `;
 const titleCss = () => css`
   color: rgb(55, 53, 47);
@@ -37,40 +39,63 @@ const titleCss = () => css`
   text-overflow: ellipsis;
 `;
 const trashCss = () => css`
-  float: right;
+  position: absolute;
+  top: 2px;
+  right: 13px;
 `;
 
 interface Props {
   page: Page;
 }
 
 function MenuItem({ page }: Props): JSX.Element {
-  const [selectedPage, setSelectedPage] = useRecoilState(selectedPageState);
+  const [selectedPage, setSelectedPage] = useRecoilState(pageState);
   const [hoverToggle, setHoverToggle] = useState(false);
+  const setPages = useSetRecoilState(pagesState);
+  const setBlockMap = useSetRecoilState(blockMapState);
+
+  const selectPageHandler = async () => {
+    setBlockMap((await readBlockMap(page.id)).blockMap);
+    setSelectedPage(page);
+  };
+
+  const deletePageHandler = async () => {
+    await deletePage(page.id);
+    const pages = await refreshPages();
 
-  const handleDeletePage = () => {};
+    if (page.id === selectedPage.id) {
+      const nextSelectedPage = pages[0];
+      setBlockMap((await readBlockMap(nextSelectedPage.id)).blockMap);
+      setSelectedPage(nextSelectedPage);
+    }
+    setPages(pages);
+  };
 
   return (
     <div
-      key={page.id}
-      css={
-        selectedPage.id === page.id
-          ? selectedItemCss(hoverToggle)
-          : itemCss(hoverToggle)
-      }
-      onClick={() => setSelectedPage(page)}
-      onKeyUp={() => setSelectedPage(page)}
+      css={itemWrapperCss()}
       onMouseEnter={() => setHoverToggle(true)}
       onMouseLeave={() => setHoverToggle(false)}
     >
+      <div
+        key={page.id}
+        css={
+          selectedPage.id === page.id
+            ? selectedItemCss(hoverToggle)
+            : itemCss(hoverToggle)
+        }
+        onClick={selectPageHandler}
+        onKeyUp={selectPageHandler}
+      >
+        <div css={titleCss()}>{page.title || 'Untitled'}</div>
+      </div>
       {hoverToggle && (
         <div css={trashCss()}>
-          <HeaderButton handleClick={handleDeletePage}>
+          <HeaderButton clickHandler={deletePageHandler}>
             <Trash />
           </HeaderButton>
         </div>
       )}
-      <div css={titleCss()}>{page.title || 'Untitled'}</div>
     </div>
   );
 }

frontend/src/components/molecules/Menu/Menu.tsx

@@ -3,9 +3,9 @@
 import { jsx, css } from '@emotion/react';
 
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { pagesState, selectedPageState } from '@/stores';
+import { pagesState, pageState } from '@/stores';
 import { ChangeEvent, useEffect, useRef } from 'react';
-import { debounce, readPages, updatePage } from '@/utils';
+import { debounce, refreshPages, updatePage } from '@/utils';
 import { Page } from '@/schemes';
 
 const wrapperCss = () => css`
@@ -48,15 +48,18 @@ const titleCss = () => css`
 `;
 
 function Title(): JSX.Element {
-  const [selectedPage, setSelectedPage] = useRecoilState(selectedPageState);
+  const [selectedPage, setSelectedPage] = useRecoilState(pageState);
   const setPages = useSetRecoilState(pagesState);
   const caretRef = useRef(0);
   const updateSelectedPage = useRef(
-    debounce(async (updatedPage: Page) => {
+    debounce(async (page: Page) => {
       caretRef.current = window.getSelection().focusOffset;
 
-      setSelectedPage(await updatePage(updatedPage));
-      setPages(await readPages());
+      const { page: updatedPage } = await updatePage(page);
+      const updatedPages = await refreshPages();
+
+      setSelectedPage(updatedPage);
+      setPages(updatedPages);
     }, 300),
   ).current;
 

frontend/src/components/molecules/MenuItem/MenuItem.tsx

@@ -51,7 +51,7 @@ function HeaderMenu(): JSX.Element {
       onMouseEnter={() => setHoveredMenuToggle(true)}
       onMouseLeave={() => setHoveredMenuToggle(false)}
     >
-      <HeaderButton handleClick={() => setStaticMenuToggle(!staticMenuToggle)}>
+      <HeaderButton clickHandler={() => setStaticMenuToggle(!staticMenuToggle)}>
         {staticMenuToggle ||
           (!hoveredMenuToggle ? <HamburgerMenu /> : <DoubleChevronRight />)}
       </HeaderButton>