fix: problems when instance list is long

GBSWHS · Aug 22, 2023 · edc36ef · edc36ef
1 parent af6129f
commit edc36ef
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 28 deletions.
diff --git a/src/components/InstanceTable/index.tsx b/src/components/InstanceTable/index.tsx
@@ -135,9 +135,10 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
   }
 
   return (
-    <>
+    <div className={style.content}>
       <section className={style.instanceTable}>
         <Table
+          stickyHeader
           variant="full-page"
           columnDisplay={[
             { id: '카테고리', visible: true },
@@ -196,7 +197,7 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
                   </Button>
                 </div>
               ),
-              width: '550px'
+              width: '700px'
             },
             {
               id: '상태',
@@ -284,7 +285,7 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
         instance={event}
         instanceAction={dispatch}
         uuid={uuid} />
-    </>
+    </div>
   )
 }
 

diff --git a/src/components/InstanceTable/style.module.scss b/src/components/InstanceTable/style.module.scss
@@ -1,21 +1,28 @@
-.instanceTable {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  scroll-snap-type: both mandatory;
+.content {
+  height: calc(100% - 45px);
+  overflow-x: hidden;
 
-  table {
-    width: 2850px !important;
-    scroll-snap-type: both mandatory !important;
-    font-size: 16px;
-  }
-
-  > div, > div > div {
-    height: 100%;
-  }
-
-  > div > div > div > div:nth-child(2) {
-    position: absolute !important;
+  .instanceTable {
+    display: flex;
+    width: 100%;
+    height: calc(100% - 20px);
+    overflow: hidden;
+    scroll-snap-type: both mandatory;
+    overflow: auto;
+
+    table {
+      width: 3000px !important;
+      scroll-snap-type: both mandatory !important;
+      font-size: 16px;
+    }
+
+    > div, > div > div {
+      height: 100%;
+    }
+
+    > div > div > div > div:nth-child(2) {
+      position: fixed !important;
+      bottom: 20px !important;
+    }
   }
 }
diff --git a/src/components/Modal/style.module.scss b/src/components/Modal/style.module.scss
@@ -8,20 +8,20 @@
   justify-content: center;
   align-items: center;
 
-  z-index: 50;
+  z-index: 900;
 
   .background {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #00000050;
     backdrop-filter: blur(3px);
-    z-index: 55;
+    z-index: 950;
   }
 
   .content {
     position: relative;
-    z-index: 60;
+    z-index: 1000;
     background-color: white;
     width: 100%;
     max-width: 500px;

diff --git a/src/components/TableControl/index.tsx b/src/components/TableControl/index.tsx
@@ -38,14 +38,14 @@ const TableControl: FC<Props> = ({ max, prices, title }) => {
     <>
       <div className={style.tableControl}>
         <h1>{title}</h1>
-        <p>총 <b>{prices ?? '...'}</b>$/월</p>
+        <p>총 <b>{prices?.toFixed(2) ?? '...'}</b>$/월</p>
 
         <div className={style.pageBtns}>
           <button className={style.pageBtn} disabled={isPrevDisabled} onClick={onPrevClick}>
             <img src="/assets/icon/prev.svg" alt="Previous" />
           </button>
 
-          <b>{page + 1}</b>
+          <b>{page + 1}{max < 1 ? '' : `/${max}`}</b>
 
           <button className={style.pageBtn} disabled={isNextDisabled} onClick={onNextClick}>
             <img src="/assets/icon/next.svg" alt="Next" />

diff --git a/src/pages/Instances.tsx b/src/pages/Instances.tsx
@@ -19,7 +19,7 @@ const Instances: FC = () => {
   const fetchData = async (): Promise<void> => {
     setIsLoading(true)
 
-    const res = await axios(`/api/instances?take=10&skip=${parseInt(page) * 10}`, {
+    const res = await axios(`/api/instances?take=20&skip=${parseInt(page) * 10}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json'

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -22,7 +22,7 @@ const Search: FC = () => {
     setIsLoading(true)
     console.log(search)
 
-    const res = await axios(`/api/instances/search?take=10&skip=${parseInt(page) * 10}&query=${search ?? ''}`, {
+    const res = await axios(`/api/instances/search?take=20&skip=${parseInt(page) * 10}&query=${search ?? ''}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json'