fix: tablescroll css 수정

harigari · Jan 5, 2024 · 5f38893 · 5f38893
1 parent 620fe38
commit 5f38893
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 29 deletions.
diff --git a/components/Table/TableList/TableList.module.css b/components/Table/TableList/TableList.module.css
@@ -53,6 +53,16 @@
   margin-left: 2rem;
 }
 
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 6rem 0;
+  font-size: 1.8rem;
+  color: var(--gray40);
+}
+
 @media screen and (max-width: 767px) {
   .row {
     font-size: 1.4rem;

diff --git a/components/Table/TableList/TableList.tsx b/components/Table/TableList/TableList.tsx
@@ -194,6 +194,18 @@ const TableList = ({ data, tableIndex, setData, myRef }: TableListProps) => {
         Array(row - data.length)
           .fill("")
           .map((v, i) => <li className={styles.row} key={i}></li>)} */}
+      {data.length === 0 ? (
+        <div className={styles.empty}>
+          <Image
+            width={100}
+            height={100}
+            priority
+            src="/icons/icon-noinvite-dashboard.svg"
+            alt="초대 내역이 없습니다."
+          />
+          <p>초대 내역이 없습니다.</p>
+        </div>
+      ) : null}
       <p ref={myRef}></p>
     </ul>
   );

diff --git a/components/Table/TablePagination/TablePagination.module.css b/components/Table/TablePagination/TablePagination.module.css
@@ -49,16 +49,6 @@
   background-color: var(--gray30);
 }
 
-.empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 10rem 0;
-  font-size: 1.8rem;
-  color: var(--gray40);
-}
-
 @media screen and (max-width: 767px) {
   .title__text {
     font-size: 2rem;

diff --git a/components/Table/TableScroll/TableScroll.tsx b/components/Table/TableScroll/TableScroll.tsx
@@ -97,26 +97,13 @@ const TableScroll = ({ title, type, tableIndex, invite = false, search = false }
       </div>
 
       {isOpen ? (
-        data.length === 0 ? (
-          <div className={styles.empty}>
-            <Image
-              width={100}
-              height={100}
-              priority
-              src="/icons/icon-noinvite-dashboard.svg"
-              alt="초대 내역이 없습니다."
-            />
-            <p>초대 내역이 없습니다.</p>
-          </div>
-        ) : (
-          <>
-            {search && <SearchInput setKeyword={setKeyword} />}
-            <TableIndex data={rowData} tableIndex={tableIndex} invite={invite} />
-            <TableList data={rowData} setData={setData} tableIndex={tableIndex} myRef={myRef} />
-            <HideButton isOpen={isOpen} setIsOpen={setIsOpen} />
-          </>
-        )
+        <>
+          {search && <SearchInput setKeyword={setKeyword} />}
+          <TableIndex data={rowData} tableIndex={tableIndex} invite={invite} />
+          <TableList data={rowData} setData={setData} tableIndex={tableIndex} myRef={myRef} />
+        </>
       ) : null}
+      <HideButton isOpen={isOpen} setIsOpen={setIsOpen} />
     </article>
   );
 };