Merge pull request #39 from mojimojicorp/feat/#36/header

[feat] #36 header button을 url에 따라 조정

README.md

@@ -1,35 +1,35 @@
-<h1 align="center">Welcome to MojimojiMemoji 👋</h1>
-<p align="center">
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
-  <a href="#" target="_blank">
-    <img alt="License: ISC" src="https://img.shields.io/badge/License-ISC-yellow.svg" />
-  </a>
-  <img alt="language count" src="https://img.shields.io/github/languages/count/sewonkimm/MojimojiMemoji" />
-  <img alt="top language" src="https://img.shields.io/github/languages/top/sewonkimm/MojimojiMemoji" />
-</p>
-<p align="center">
-    <img alt="icon" src="https://user-images.githubusercontent.com/30452963/79701905-c56e2480-82db-11ea-8272-0689437f6045.png" />
-</p>
-<p align="center">
-    웨일 브라우저 확장앱🐋 모지모지메모지📝
-</p>
-
-## Install🔮
-
-```sh
-yarn install
-```
-
-## Usage🥁
-
-```sh
-yarn start
-```
-
-## Show your support✨
-
-Give a ⭐️ if this project helped you!
-
----
-
-_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
+<h1 align="center">Welcome to MojimojiMemoji 👋</h1>
+<p align="center">
+  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
+  <a href="#" target="_blank">
+    <img alt="License: ISC" src="https://img.shields.io/badge/License-ISC-yellow.svg" />
+  </a>
+  <img alt="language count" src="https://img.shields.io/github/languages/count/sewonkimm/MojimojiMemoji" />
+  <img alt="top language" src="https://img.shields.io/github/languages/top/sewonkimm/MojimojiMemoji" />
+</p>
+<p align="center">
+    <img alt="icon" src="https://user-images.githubusercontent.com/30452963/79701905-c56e2480-82db-11ea-8272-0689437f6045.png" />
+</p>
+<p align="center">
+    웨일 브라우저 확장앱🐋 모지모지메모지📝
+</p>
+
+## Install🔮
+
+```sh
+yarn install
+```
+
+## Usage🥁
+
+```sh
+yarn start
+```
+
+## Show your support✨
+
+Give a ⭐️ if this project helped you!
+
+---
+
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

app/src/components/Folder/index.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-
-import styles from './styles.scss';
-
-type FolderProps = {
-  color: string
-};
-
-const Folder = (props: FolderProps) => {
-  const { color } = props;
-
-  return (
-    <div className={styles.folder_container}>
-      <div className={styles.folder_header} style={{ backgroundColor:color }} />
-      <div className={styles.folder_body} style={{ backgroundColor:color }} />
-    </div>
-  );
-};
-
-Folder.defaultProps = {
-  color: '#ffc928'
-};
-
-export default Folder;
+import React from 'react';
+
+import styles from './styles.scss';
+
+type FolderProps = {
+  color: string
+};
+
+const Folder = (props: FolderProps) => {
+  const { color } = props;
+
+  return (
+    <div className={styles.folder_container}>
+      <div className={styles.folder_header} style={{ backgroundColor:color }} />
+      <div className={styles.folder_body} style={{ backgroundColor:color }} />
+    </div>
+  );
+};
+
+Folder.defaultProps = {
+  color: '#ffc928'
+};
+
+export default Folder;

app/src/components/Folder/styles.scss

@@ -1,37 +1,37 @@
-.folder_container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100px;
-  height: 80px;
-
-  .folder_header {
-    position: absolute;
-    top: 5px;
-    left: 10px;
-    width: 30px;
-    height: 30px;
-    background-color: #ffc928;
-    border-radius: 10px 0px 0px 0px;
-
-    &:after {
-      position: absolute;
-      top: 6.5px;
-      left: 15px;
-      width: 30px;
-      height: 30px;
-      transform: rotateZ(45deg);
-      background-color: inherit;
-      content:'';
-    }
-  }
-
-  .folder_body {
-    position: absolute;
-    width: 80px;
-    height: 50px;
-    background-color: #ffc928;
-    border-radius: 10px;
-  }
+.folder_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100px;
+  height: 80px;
+
+  .folder_header {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    width: 30px;
+    height: 30px;
+    background-color: #ffc928;
+    border-radius: 10px 0px 0px 0px;
+
+    &:after {
+      position: absolute;
+      top: 6.5px;
+      left: 15px;
+      width: 30px;
+      height: 30px;
+      transform: rotateZ(45deg);
+      background-color: inherit;
+      content:'';
+    }
+  }
+
+  .folder_body {
+    position: absolute;
+    width: 80px;
+    height: 50px;
+    background-color: #ffc928;
+    border-radius: 10px;
+  }
 }

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

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

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

@@ -1,16 +1,16 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'buttons': string;
-  'color': string;
-  'color_btn': string;
-  'color_picker': string;
-  'delete_btn': string;
-  'delete_icon': string;
-  'folder_setting': string;
-  'picker': string;
-  'rename_btn': string;
-  'rename_icon': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttons': string;
+  'color': string;
+  'color_btn': string;
+  'color_picker': string;
+  'delete_btn': string;
+  'delete_icon': string;
+  'folder_setting': string;
+  'picker': string;
+  'rename_btn': string;
+  'rename_icon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

app/src/components/Header/index.tsx

@@ -1,19 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
 import styles from './styles.scss';
 
-const Header = () => {
+import FolderSetting from '../../components/FolderSetting';
+import MemoSetting from '../../components/MemoSetting';
+
+type HeaderProps = {
+  hasSelectBtn?: boolean;
+  hasLogoutBtn?: boolean;
+  hasSaveBtn?: boolean;
+  hasBackBtn?: boolean;
+};
+
+const Header = ({
+  hasSelectBtn,
+  hasLogoutBtn,
+  hasSaveBtn,
+  hasBackBtn,
+}: HeaderProps) => {
+  const handleSelectBtnClick = () => {
+    setIsSelecting(!isSelecting);
+  };
+
+  const [isSelecting, setIsSelecting] = useState(false);
+
   return (
-    <div className={styles.header}>
-      <div className={styles.home_btn_div}>
-        <div className={styles.home_btn} />
-      </div>
-
-      <div className={styles.select_btn} />
-      <div className={styles.select_btn_active} />
-      <div className={styles.logout_btn} />
-      <div className={styles.save_btn} />
-      <div className={styles.back_btn} />
-    </div>
+    <>
+      <header className={styles.header}>
+        <div className={styles.home_btn_div}>
+          <button className={styles.home_btn} type="button" />
+        </div>
+
+        {hasSelectBtn && (
+          <button
+            className={classNames(
+              styles.select_btn,
+              isSelecting ? styles.active : ''
+            )}
+            onClick={handleSelectBtnClick}
+          />
+        )}
+        {hasSaveBtn && <button className={styles.save_btn} />}
+        {hasLogoutBtn && <button className={styles.logout_btn} />}
+        {hasBackBtn && <button className={styles.back_btn} />}
+      </header>
+
+      {isSelecting && hasLogoutBtn && <FolderSetting />}
+      {isSelecting && hasBackBtn && <MemoSetting />}
+    </>
   );
 };