Merge pull request #28 from mojimojicorp/feat/#14/memoListUI

Feat #14 memo list page 메모추가 버튼 추가, memo edit page 아이콘 수정

app/manifest.json

@@ -1,18 +1,18 @@
-{
-  "manifest_version": 2,
-  "name": "MojimojiMemoji",
-  "version": "1.0.0",
-
-  "description": "나만의 메모를 할 수 있는 메모지 어플",
-  "icons": {
-    "16": "src/images/icon_64x64.png"
-  },
-
-  "sidebar_action": {
-    "default_page": "index.html",
-    "default_icon": {
-      "16": "src/images/icon_64x64.png"
-    },
-    "default_title": "모지모지 메모지"
-  }
-}
+{
+  "manifest_version": 2,
+  "name": "MojimojiMemoji",
+  "version": "1.0.0",
+
+  "description": "나만의 메모를 할 수 있는 메모지 어플",
+  "icons": {
+    "16": "src/images/icon_64x64.png"
+  },
+
+  "sidebar_action": {
+    "default_page": "index.html",
+    "default_icon": {
+      "16": "src/images/icon_64x64.png"
+    },
+    "default_title": "모지모지 메모지"
+  }
+}

app/src/components/Header/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import styles from './styles.scss';
-import homeBtn from '../../images/icon_64x64.png';
-import backBtn from '../../images/header/back_btn.png';
-import logoutBtn from '../../images/header/logout_btn.png';
-
-const Header = () => {
-  return (
-    <div className={styles.header}>
-      <img src={homeBtn} alt="" className={styles.homeBtn} />
-      <img src={logoutBtn} alt="" />
-      <img src={backBtn} alt="" className={styles.backBtn} />
-    </div>
-  );
-};
-
-export default Header;
+import React from 'react';
+import styles from './styles.scss';
+import homeBtn from '../../images/icon_64x64.png';
+import backBtn from '../../images/header/back_btn.png';
+import logoutBtn from '../../images/header/logout_btn.png';
+
+const Header = () => {
+  return (
+    <div className={styles.header}>
+      <img src={homeBtn} alt="" className={styles.homeBtn} />
+      <img src={logoutBtn} alt="" />
+      <img src={backBtn} alt="" className={styles.backBtn} />
+    </div>
+  );
+};
+
+export default Header;

app/src/components/Header/styles.scss

@@ -1,23 +1,24 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  height: 9vh;
-  margin-bottom: 3px;
-  padding: 10px 20px;
-  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;
-}
-
-.homeBtn {
-  height: 64px;
-}
-
-.backBtn {
-  display: none;
-}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 97px;
+  margin-bottom: 3px;
+  padding: 0 20px;
+  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;
+  top: 0;
+
+  background: #fafafa;
+}
+
+.homeBtn {
+  height: 64px;
+}
+
+.backBtn {
+  display: none;
+}

app/src/components/Header/styles.scss.d.ts

@@ -1,9 +1,9 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'backBtn': string;
-  'header': string;
-  'homeBtn': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'backBtn': string;
+  'header': string;
+  'homeBtn': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

app/src/containers/App/styles.scss

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

app/src/containers/App/styles.scss.d.ts

@@ -1,7 +1,7 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'App': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'App': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

app/src/containers/FolderListPage/index.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import styles from './styles.scss';
-import folder from '../../images/body/folder_btn.png';
-import addBtn from '../../images/body/add_btn.png';
-import Header from '../../components/Header';
-
-const FolderListPage = () => {
-  return (
-    <>
-      <Header />
-      <div className={styles.folderList}>
-        <div className={styles.folder}>
-          <img src={folder} alt="" />
-          <div className="title">새 폴더</div>
-        </div>
-
-        <div className={styles.folder}>
-          <img src={folder} alt="" />
-          <div className="title">새 폴더</div>
-        </div>
-
-        <div className={styles.folder}>
-          <img src={folder} alt="" />
-          <div className="title">새 폴더</div>
-        </div>
-
-        <div className={styles.folder}>
-          <img src={folder} alt="" />
-          <div className="title">새 폴더</div>
-        </div>
-
-        <div className={styles.folder}>
-          <img src={addBtn} alt="" />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default FolderListPage;
+import React from 'react';
+import styles from './styles.scss';
+import folder from '../../images/body/folder_btn.png';
+import addBtn from '../../images/body/add_btn.png';
+import Header from '../../components/Header';
+
+const FolderListPage = () => {
+  return (
+    <>
+      <Header />
+      <div className={styles.folderList}>
+        <div className={styles.folder}>
+          <img src={folder} alt="" />
+          <div className="title">새 폴더</div>
+        </div>
+
+        <div className={styles.folder}>
+          <img src={folder} alt="" />
+          <div className="title">새 폴더</div>
+        </div>
+
+        <div className={styles.folder}>
+          <img src={folder} alt="" />
+          <div className="title">새 폴더</div>
+        </div>
+
+        <div className={styles.folder}>
+          <img src={folder} alt="" />
+          <div className="title">새 폴더</div>
+        </div>
+
+        <div className={styles.folder}>
+          <img src={addBtn} alt="" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FolderListPage;

app/src/containers/FolderListPage/styles.scss

@@ -1,27 +1,27 @@
-.folderList {
-  display: grid;
-  grid-template-columns: repeat(3, 3fr);
-  justify-content: space-between;
-  align-items: center;
-
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
-
-  background-color: #ffffff;
-
-  .folder {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 1.3rem;
-    font-weight: 500;
-    text-align: center;
-
-    div {
-      margin-top: -20px;
-    }
-  }
-}
+.folderList {
+  display: grid;
+  grid-template-columns: repeat(3, 3fr);
+  justify-content: space-between;
+  align-items: center;
+
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+
+  background-color: #ffffff;
+
+  .folder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.3rem;
+    font-weight: 500;
+    text-align: center;
+
+    div {
+      margin-top: -20px;
+    }
+  }
+}

app/src/containers/FolderListPage/styles.scss.d.ts

@@ -1,8 +1,8 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'folder': string;
-  'folderList': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'folder': string;
+  'folderList': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

app/src/containers/LoginPage/index.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-
-import styles from './styles.scss';
-import logo from '../../images/body/logo_618x618.png';
-import naverLoginBtn from '../../images/body/naverLogin_btn.png';
-
-const LoginPage = () => {
-  return (
-    <div className={styles.background}>
-      <div className={styles.content}>
-        <div className={styles.logo}>
-          <img src={logo} alt="" />
-        </div>
-        <div className={styles.title}>
-          <span>모지모지 메모지</span>
-        </div>
-        <div className={styles.login_btn}>
-          <img src={naverLoginBtn} alt="" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginPage;
+import React from 'react';
+
+import styles from './styles.scss';
+import logo from '../../images/body/logo_618x618.png';
+import naverLoginBtn from '../../images/body/naverLogin_btn.png';
+
+const LoginPage = () => {
+  return (
+    <div className={styles.background}>
+      <div className={styles.content}>
+        <div className={styles.logo}>
+          <img src={logo} alt="" />
+        </div>
+        <div className={styles.title}>
+          <span>모지모지 메모지</span>
+        </div>
+        <div className={styles.login_btn}>
+          <img src={naverLoginBtn} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;