[Feat] #7 메모 수정 페이지 UI 추가

src/components/Header/styles.scss

@@ -9,6 +9,8 @@
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12);
   border-radius: 2px;
 
+  position: sticky;
+
   background: #fafafa;
 }
 

src/containers/App/index.tsx

@@ -3,13 +3,14 @@ import styles from './styles.scss';
 import Header from '../../components/Header';
 import FolderList from '../../components/FolderList';
 import MemoList from '../../components/MemoList';
+import MemoEditPage from '../MemoEditPage';
 
 const App = () => {
-  return <div className={styles.App}>
-    <Header />
-    {/* <FolderList /> */}
-    <MemoList />
-         </div>;
+  return (
+    <div className={styles.App}>
+      <MemoEditPage />
+    </div>
+  );
 };
 
 export default App;

src/containers/App/styles.scss

@@ -1,14 +1,18 @@
-$font-color: blue;
-
-body {
+html, body {
+  height: 100%;
   margin: 0;
   padding: 0;
 
   font-family: NanumSquare;
+
+  body > div {
+    height: 100%;
+  }
 }
 
 .App {
   width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
 }

src/containers/MemoEditPage/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Header from '../../components/Header';
+import styles from './styles.scss';
+
+import bold from '../../images/edit/bold.png';
+import ialic from '../../images/edit/italic.png';
+import image from '../../images/edit/image.png';
+import align from '../../images/edit/align.png';
+import link from '../../images/edit/link.png';
+import removeline from '../../images/edit/removeline.png';
+import underline from '../../images/edit/underline.png';
+import divider from '../../images/edit/divider.png';
+import table from '../../images/edit/table.png';
+import logo from '../../images/icon_64x64.png';
+import folder from '../../images/body/folder_btn.png';
+
+const MemoEditPage = () => {
+  return (
+    <div className={styles.edit_container}>
+      <Header />
+      <div className={styles.toolbar}>
+        <div className={styles.bold}>
+          <img src={bold} alt="bold" />
+        </div>
+        <div className={styles.italic}>
+          <img src={ialic} alt="ialic" />
+        </div>
+        <div className={styles.underline}>
+          <img src={underline} alt="underline" />
+        </div>
+        <div className={styles.removeline}>
+          <img src={removeline} alt="removeline" />
+        </div>
+        <div className={styles.divider}>
+          <img src={divider} alt="divider" />
+        </div>
+        <div className={styles.align}>
+          <img src={align} alt="align" />
+        </div>
+        <div className={styles.divider}>
+          <img src={divider} alt="divider" />
+        </div>
+        <div>
+          <img src={link} alt="link" />
+        </div>
+        <div>
+          <img src={image} alt="imagefile" />
+        </div>
+        <div>
+          <img src={table} alt="table" />
+        </div>
+        <div className={styles.logo}>
+          <img src={logo} alt="logo" />
+        </div>
+        <div className={styles.folder}>
+          <img src={folder} alt="folder" />
+        </div>
+      </div>
+      <div className={styles.edit_area} />
+    </div>
+  );
+};
+
+export default MemoEditPage;

src/containers/MemoEditPage/styles.scss

@@ -0,0 +1,87 @@
+.edit_container {
+  width: 100%;
+  height: 100%;
+
+  background-color: #FFF1A6;
+
+  .toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 7px 10px;
+    padding-top: 10px;
+    box-sizing: border-box;
+    margin-top: -5px;
+
+    width: 100%;
+
+    background-color: #EEEEEE;
+
+    div {
+      margin: 5px 8px;
+      cursor: pointer;
+    }
+
+    .bold {
+      width: 13px;
+      img {
+        width: 100%;
+      }
+    }
+
+    .italic {
+      padding-bottom: 1px;
+      width: 13px;
+      img {
+        width: 100%;
+        opacity: 54%;
+      }
+    }
+
+    .underline {
+      margin-top: 7px;
+      width: 13px;
+      img {
+        width: 100%;
+        opacity: 54%;
+      }
+    }
+
+    .removeline {
+      width: 18px;
+      img {
+        width: 100%;
+      }
+    }
+
+    .divider {
+      width: 1px;
+      cursor: none;
+    }
+
+    .align {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+
+    .logo {
+      width: 25px;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .folder {
+      width: 25px;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .edit_area {
+    width: 100%;    
+  }
+}

src/containers/MemoEditPage/styles.scss.d.ts

@@ -0,0 +1,17 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'align': string;
+  'bold': string;
+  'divider': string;
+  'edit_area': string;
+  'edit_container': string;
+  'folder': string;
+  'italic': string;
+  'logo': string;
+  'removeline': string;
+  'toolbar': string;
+  'underline': string;
+}
+export const cssExports: CssExports;
+export default cssExports;