Merge pull request #111 from boostcamp-2020/feat/110

List타입 스타일 수정

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

@@ -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/BlockContent/BlockContent.tsx

@@ -13,15 +13,22 @@ export const regex: { [key: string]: RegExp } = {
   quote: /^\|\s[^\s.]*/gm,
 };
 
+const divCSS = css`
+  margin: 0px 4px;
+  font-size: 18px;
+  color: inherit;
+  height: 100%;
+`;
+
 export const listComponent: { [key: string]: any } = {
-  bulletedlist: <span>•</span>,
-  numberedlist: <span> 1. </span>,
+  bulletedlist: <div css={divCSS}>•</div>,
+  numberedlist: <div css={divCSS}> 1. </div>,
   togglelist: (
-    <span>
+    <div css={divCSS}>
       <Toggle />
-    </span>
+    </div>
   ),
-  quote: <span>▕</span>,
+  quote: <div css={divCSS}>▕</div>,
 };
 
 export const fontSize: { [key: string]: string } = {
@@ -35,4 +42,5 @@ export const placeHolder: { [key: string]: string } = {
   heading1: 'Heading 1',
   heading2: 'Heading 2',
   heading3: 'Heading 3',
+  quote: 'Empty quote',
 };