feat(Feed): MyFeed Page 퍼블리싱

Close #54
nolmungshemung · Feb 18, 2022 · 12dfb14 · 12dfb14
1 parent 3cd7e73
commit 12dfb14
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 43 deletions.
diff --git a/components/common/Pagination.tsx b/components/common/Pagination.tsx
@@ -7,9 +7,26 @@ type PaginationProps = {
   setPage: (page: number) => void;
 };
 
-const StyledPageButton = styled('button', {
-  '&.currentPage': {
-    fontWeight: 'bold',
+const StyeldPagination = styled('nav', {
+  width: '40rem',
+  textAlign: 'center',
+  '& button': {
+    width: '$space$sp-32',
+    height: '$space$sp-32',
+    margin: '0 $sp-04',
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: '#999999',
+    padding: '0',
+    cursor: 'pointer',
+    '&.current-page': {
+      fontWeight: '$bold',
+      color: '$black',
+      textDecoration: 'underline',
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+    },
   },
 });
 
@@ -43,39 +60,37 @@ export function Pagination({
   };
 
   return (
-    <>
-      <nav>
-        <button onClick={() => setPage(1)} disabled={currentPage === 1}>
-          &lt;&lt;
-        </button>
-        <button
-          onClick={() => setPage(currentPage - 1)}
-          disabled={currentPage === 1}
-        >
-          &lt;
-        </button>
-        {pagesArray().map((targetPage) => (
-          <StyledPageButton
-            key={targetPage}
-            onClick={() => setPage(targetPage)}
-            className={targetPage === currentPage ? 'currentPage' : ''}
-          >
-            {targetPage}
-          </StyledPageButton>
-        ))}
-        <button
-          onClick={() => setPage(currentPage + 1)}
-          disabled={currentPage === totalPages}
-        >
-          &gt;
-        </button>
+    <StyeldPagination>
+      <button onClick={() => setPage(1)} disabled={currentPage === 1}>
+        &lt;&lt;
+      </button>
+      <button
+        onClick={() => setPage(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        &lt;
+      </button>
+      {pagesArray().map((page) => (
         <button
-          onClick={() => setPage(totalPages)}
-          disabled={currentPage === totalPages}
+          key={page}
+          onClick={() => setPage(page)}
+          className={page === currentPage ? 'current-page' : ''}
         >
-          &gt;&gt;
+          {page}
         </button>
-      </nav>
-    </>
+      ))}
+      <button
+        onClick={() => setPage(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        &gt;
+      </button>
+      <button
+        onClick={() => setPage(totalPages)}
+        disabled={currentPage === totalPages}
+      >
+        &gt;&gt;
+      </button>
+    </StyeldPagination>
   );
 }
diff --git a/pages/myfeed.tsx b/pages/myfeed.tsx
@@ -60,20 +60,25 @@ const MyFeed = function ({ feedParams }: MyFeedProps) {
             gridArea: 'top',
             position: 'relative',
             display: 'flex',
-            justifyContent: 'center',
+            alignItems: 'center',
             width: '100%',
             height: '5.375rem',
             paddingTop: '$sp-50',
+            '& .page-title': {
+              marginLeft: '45vw',
+            },
           }}
         >
-          <span>
+          <span className="page-title">
             {data?.data.writer.writerName ?? 'XXX'} 작가님의 피드입니다
           </span>
           <Button
+            size="lg"
             color="primary"
             outline="none"
             css={{
               cursor: 'pointer',
+              marginLeft: '23vw',
             }}
             onClick={onWritingClick}
           >
@@ -85,10 +90,10 @@ const MyFeed = function ({ feedParams }: MyFeedProps) {
             gridArea: 'contents',
             display: 'grid',
             gridTemplateColumns: 'repeat(4, 1fr)',
-            gridTemplateRows: 'repeat(5, 1fr)',
             columnGap: '$sp-24',
             rowGap: '$sp-16',
             marginTop: '$sp-32',
+            height: 'calc(100% - 5.375rem - 4rem)',
           }}
         >
           {isLoading ? (
@@ -106,14 +111,21 @@ const MyFeed = function ({ feedParams }: MyFeedProps) {
         <Box
           css={{
             gridArea: 'pagination',
+            width: '100%',
+            padding: '1rem 0',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
-          <Pagination
-            totalPages={data?.data.paging.totalPages ?? 1}
-            displayAmount={DEFAULT_SHOW_PAGENATION_COUNT}
-            currentPage={page.page}
-            setPage={handleSetPage}
-          />
+          {data && (
+            <Pagination
+              totalPages={data?.data.paging.totalPages}
+              displayAmount={DEFAULT_SHOW_PAGENATION_COUNT}
+              currentPage={page.page}
+              setPage={handleSetPage}
+            />
+          )}
         </Box>
       </Box>
     </>