Feat : Created Skeleton of ItemListPage

Changed BookmarkPage to ItemListPage s.t.
the template can be re-used to render other pages as well

Resolves : #33

Author: holymollyhao

frontend/components/environment/Main/Main.js

@@ -55,7 +55,7 @@ export default function Main({ location }) {
             <Route path="/item" component={RoutingPage} />
             <Route path="/account" component={RoutingPage} />
             <Route path="/user" component={RoutingPage} />
-            <Route path="/bookmark" component={RoutingPage} />
+            <Route path="/leftpane" component={RoutingPage} />
 
             {/* 404 Fallback page */}
             <Route path="/error">

frontend/components/organisms/LeftPane/LeftPane.js

@@ -53,7 +53,7 @@ export default function LeftPane() {
           <ListSubheader className="leftpane-label"> 내 문서 </ListSubheader>
           <ListItem disableGutters sx={{ py: 0 }}>
             <ListItemButton disableGutters sx={{ py: 0 }}>
-              <MenuItem value={{ title: '북마크', link: '/bookmark' }} />
+              <MenuItem value={{ title: '북마크', link: '/leftpane/bookmarks' }} />
             </ListItemButton>
           </ListItem>
           <ListItem disableGutters sx={{ py: 0 }}>
@@ -63,7 +63,7 @@ export default function LeftPane() {
           </ListItem>
           <ListItem disableGutters sx={{ py: 0 }}>
             <ListItemButton disableGutters sx={{ py: 0 }}>
-              <MenuItem value={{ title: '내가 작성한 문서', link: '/' }} />
+              <MenuItem value={{ title: '내가 작성한 문서', link: '/leftpane/myitems' }} />
             </ListItemButton>
           </ListItem>
           <ListItem disableGutters sx={{ py: 0 }}>

frontend/components/pages/BookmarkPage/index.js

@@ -1,68 +1,90 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router';
 import R from 'ramda';
 
 import HorizontalHeader from '_organisms/HorizontalHeader';
 import HorizontalContent from '_organisms/HorizontalContent';
 import PromiseItemArray from '_utils/promiseArray';
 import { snakeToCamelCase } from 'json-style-converter/es5';
 import { getItemByItemId } from '_api/item';
+import { object } from 'prop-types';
 
-export default function BookmarkPage() {
+export default function ItemListPage() {
   const { user } = useSelector(R.pick(['user']));
-  const [bookmarkObjects, setBookmarkObjects] = useState({ cabinet: [], document: [], card: [] });
+  const { userItem } = useSelector(R.pick(['userItem']));
+  const [title, setTitle] = useState('');
+  const [itemObjects, setItemObjects] = useState({ cabinet: [], document: [], card: [] });
   const [loading, setLoading] = useState(true);
-  const bookmarkArrays = user.bookmarks;
+  const { path } = useParams();
 
   useEffect(() => {
-    Promise.all(bookmarkArrays.map((elem) => getItemByItemId(elem))).then((objectArray) => {
+    let array;
+    switch (path) {
+      case 'bookmarks':
+        setTitle('북마크');
+        array = user.bookmarks;
+        break;
+      case 'myitems':
+        setTitle('내가 작성한 문서');
+        array = userItem;
+        break;
+      default:
+        array = [];
+    }
+    Promise.all(array.map((elem) => {
+      if (typeof elem === 'object') {
+        return elem;
+      }
+      return getItemByItemId(elem);
+    })).then((objectArray) => {
       const camelObjectArray = snakeToCamelCase(objectArray);
-      setBookmarkObjects({
+      setItemObjects({
         cabinet: camelObjectArray.filter((elem) => elem.type === 'cabinet'),
         document: camelObjectArray.filter((elem) => elem.type === 'document'),
         card: camelObjectArray.filter((elem) => elem.type === 'card'),
       });
       setLoading(false);
     });
-  }, []);
+  }, [path, user]);
 
   return !loading && (
     <div className="recommend-page">
       <div className="recommend-page-header">
-        북마크
+        {title}
       </div>
       <div className="recommend-container">
 
         {
-            (bookmarkObjects.cabinet === [])
-              ? '북마크가 없습니다.'
+            (itemObjects.cabinet.length === 0)
+              ? ''
               : (
                 <div className="recommend-block">
                   <HorizontalHeader type="cabinet" />
                   <hr />
-                  <HorizontalContent type="cabinet" cardArray={bookmarkObjects.cabinet} />
+                  <HorizontalContent type="cabinet" cardArray={itemObjects.cabinet} />
                 </div>
               )
         }
         {
-            (bookmarkObjects.document === [])
-              ? '북마크가 없습니다.'
+            (itemObjects.document.length === 0)
+              ? ''
               : (
                 <div className="recommend-block">
                   <HorizontalHeader type="document" />
                   <hr />
-                  <HorizontalContent type="document" cardArray={bookmarkObjects.document} />
+                  <HorizontalContent type="document" cardArray={itemObjects.document} />
                 </div>
               )
         }
         {
-            (bookmarkObjects.card === [])
-              ? '북마크가 없습니다.'
+            (itemObjects.card.length === 0)
+              ? ''
               : (
                 <div className="recommend-block">
                   <HorizontalHeader type="card" />
                   <hr />
-                  <HorizontalContent type="card" cardArray={bookmarkObjects.card} />
+                  <HorizontalContent type="card" cardArray={itemObjects.card} />
                 </div>
               )
         }

…nents/pages/BookmarkPage/BookmarkPage.js …nents/pages/ItemListPage/ItemListPage.jsfrontend/components/pages/BookmarkPage/BookmarkPage.js renamed to frontend/components/pages/ItemListPage/ItemListPage.js frontend/components/pages/BookmarkPage/BookmarkPage.js renamed to frontend/components/pages/ItemListPage/ItemListPage.js

@@ -0,0 +1,3 @@
+import BookmarkPage from './ItemListPage';
+
+export default BookmarkPage;

frontend/components/pages/ItemListPage/index.js

@@ -12,7 +12,7 @@ import ProfilePage from '_pages/ProfilePage';
 import RecoveryPage from '_pages/RecoveryPage';
 import SearchPage from '_pages/SearchPage';
 import TestPage from '_pages/TestPage';
-import BookmarkPage from '_pages/BookmarkPage';
+import ItemListPage from '_pages/ItemListPage';
 import { attemptGetGroup } from '_thunks/group';
 import { attemptLoadItems } from '_thunks/item';
 
@@ -57,8 +57,8 @@ export default function RoutingPage() {
             {/* Search Page */}
             <Route path="/search/:searchQuery" component={SearchPage} />
 
-            {/* Bookmark Page */}
-            <Route path="/bookmark" component={BookmarkPage} />
+            {/* LeftPane Pages */}
+            <Route path="/leftpane/:path" component={ItemListPage} />
 
             {/* Item Page */}
             <Route path="/create" component={EditorPage} />