[Refact] #36 header button loading

1. 화면이 2번 렌더링 되는 것을 줄이기 위해 useEffect 제거
2. 가독성을 향상하기 위해 state 사용을 제거하고 props로 값을 넘겨주는
방식으로 구조를 변경

app/src/components/Header/index.tsx

@@ -1,45 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import styles from './styles.scss';
 
-export interface Props {
-  path: string;
-}
-
-const Header = ({ path }: Props) => {
-  const [select, setSelect] = useState(false);
-  const [logout, setLogout] = useState(false);
-  const [save, setSave] = useState(false);
-  const [back, setBack] = useState(false);
+type HeaderProps = {
+  hasSelectBtn?: boolean,
+  hasLogoutBtn?: boolean,
+  hasSaveBtn?: boolean,
+  hasBackBtn?: boolean,
+};
 
-  useEffect(() => {
-    if (path == 'folder-list') {
-      setSelect(true);
-      setLogout(true);
-      setSave(false);
-      setBack(false);
-    } else if (path === 'memo-list') {
-      setSelect(true);
-      setLogout(false);
-      setSave(false);
-      setBack(true);
-    } else if (path === 'memo-edit') {
-      setSelect(false);
-      setLogout(false);
-      setSave(true);
-      setBack(true);
-    }
-  });
+const Header = ({ hasSelectBtn, hasLogoutBtn, hasSaveBtn, hasBackBtn  }: HeaderProps) => {
 
   return (
     <div className={styles.header}>
       <div className={styles.home_btn_div}>
         <div className={styles.home_btn} />
       </div>
 
-      {select ? <div className={styles.select_btn} /> : null}
-      {save ? <div className={styles.save_btn} /> : null}
-      {logout ? <div className={styles.logout_btn} /> : null}
-      {back ? <div className={styles.back_btn} /> : null}
+      { hasSelectBtn && <div className={styles.select_btn} /> }
+      { hasSaveBtn && <div className={styles.save_btn} /> }
+      { hasLogoutBtn && <div className={styles.logout_btn} /> }
+      { hasBackBtn && <div className={styles.back_btn} /> }
     </div>
   );
 };

app/src/components/Header/styles.scss

@@ -1,3 +1,5 @@
+// mixin 활용해 중복되는 부분 제거
+
 .header {
   display: flex;
   justify-content: start;

app/src/containers/FolderListPage/index.tsx

@@ -7,7 +7,7 @@ import FolderSetting from '../../components/FolderSetting';
 const FolderListPage = () => {
   return (
     <>
-      <Header path="folder-list" />
+      <Header hasSelectBtn={true} hasLogoutBtn={true}/>
       <FolderSetting />
       <div className={styles.folder_container}>
         <div className={styles.folder_list}>

app/src/containers/MemoEditPage/index.tsx

@@ -6,7 +6,8 @@ import styles from './styles.scss';
 const MemoEditPage = () => {
   return (
     <div className={styles.edit_container}>
-      <Header path="memo-edit" />
+      <Header hasSaveBtn={true} hasBackBtn={true} />
+
       <div className={styles.toolbar}>
         <div className={styles.bold} />
         <div className={styles.italic} />

app/src/containers/MemoListPage/index.tsx

@@ -6,7 +6,7 @@ import MemoSetting from '../../components/MemoSetting';
 const MemoListPage = () => {
   return (
     <>
-      <Header path="memo-list" />
+      <Header hasSelectBtn={true} hasBackBtn={true} />
       <MemoSetting />
 
       <div className={styles.memo_list_container}>