🔥 Improve: List 컴포넌트 내부에서 Blank 렌더링

src/components/List/RowContainer/index.tsx

@@ -1,5 +1,7 @@
+import Blank from "../../fallback/Blank";
 import { PropsWithChildren } from "react";
 import { cn } from "../../../lib/utils";
+import { hasValidChildren } from "../../../lib/node.utils";
 
 type RowContainerProps = {
   row: number;
@@ -11,6 +13,10 @@ export default function RowContainer({
   className,
   children,
 }: RowContainerProps) {
+  if (!hasValidChildren(children)) {
+    return <Blank />;
+  }
+
   return (
     <div className={cn(`grid grid-rows-${row}`, className)}>{children}</div>
   );

src/components/List/index.stories.tsx

@@ -23,6 +23,20 @@ export const Default = {
   ),
 };
 
+export const Blank = {
+  render: () => (
+    <List>
+      <List.Header totalCount={47} label="책" />
+      <List.ColumnContainer headers={headers} row={5} />
+      <List.RowContainer row={10}>
+        {no_books.map((book) => (
+          <ListItemStory key={book.id} {...book} />
+        ))}
+      </List.RowContainer>
+    </List>
+  ),
+};
+
 type BookItemType = {
   id: string;
   title: string;
@@ -105,6 +119,8 @@ const books: BookItemType[] = [
   },
 ];
 
+const no_books: BookItemType[] = [];
+
 const ListItemStory = ({ id, title, author, publisher, etc }: BookItemType) => {
   return (
     <div className="grid grid-cols-5">

src/lib/node.spec.tsx

@@ -0,0 +1,11 @@
+import { hasValidChildren } from "./node.utils";
+
+test("return true for valid children case", () => {
+  const children = [<div key="1">Valid</div>, "Text"];
+  expect(hasValidChildren(children)).toBe(true);
+});
+
+test("return false for invalid or empty children case", () => {
+  const children = [null, undefined, false];
+  expect(hasValidChildren(children)).toBe(false);
+});

src/lib/node.utils.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+export function hasValidChildren(children: React.ReactNode): boolean {
+  return React.Children.toArray(children).some(
+    (child) =>
+      React.isValidElement(child) ||
+      typeof child === "string" ||
+      typeof child === "number"
+  );
+}

src/pages/user/List.tsx

@@ -80,11 +80,9 @@ const UserListContent = () => {
       </List.Header>
       <List.ColumnContainer headers={userListColumns} row={5} />
       <List.RowContainer row={10}>
-        {!data.users || data.users.length === 0 ? (
-          <Blank />
-        ) : (
-          data.users.map((user) => <UserListItem key={user.id} {...user} />)
-        )}
+        {data.users.map((user) => (
+          <UserListItem key={user.id} {...user} />
+        ))}
       </List.RowContainer>
       <Pagination
         totalPages={data.totalPage}