diff --git a/src/components/workspace/WorkspaceEmptyState.tsx b/src/components/workspace/WorkspaceEmptyState.tsx
new file mode 100644
index 00000000..9826b3ae
--- /dev/null
+++ b/src/components/workspace/WorkspaceEmptyState.tsx
@@ -0,0 +1,13 @@
+interface IWorkspaceEmptyStateProps {
+ message: string;
+}
+
+export default function WorkspaceEmptyState({
+ message,
+}: IWorkspaceEmptyStateProps) {
+ return (
+
+ );
+}
diff --git a/src/components/workspace/WorkspaceListError.tsx b/src/components/workspace/WorkspaceListError.tsx
new file mode 100644
index 00000000..029c2a3a
--- /dev/null
+++ b/src/components/workspace/WorkspaceListError.tsx
@@ -0,0 +1,23 @@
+import Button from "../common/button/Button";
+
+interface IWorkspaceListErrorProps {
+ message: string;
+ onRetry: () => void;
+}
+
+export default function WorkspaceListError({
+ message,
+ onRetry,
+}: IWorkspaceListErrorProps) {
+ return (
+
+
{message}
+
+
+ );
+}
diff --git a/src/components/workspace/WorkspaceListLoading.tsx b/src/components/workspace/WorkspaceListLoading.tsx
new file mode 100644
index 00000000..9eecf294
--- /dev/null
+++ b/src/components/workspace/WorkspaceListLoading.tsx
@@ -0,0 +1,13 @@
+export default function WorkspaceListLoading() {
+ return (
+
+
+ 워크스페이스 목록을 불러오는 중입니다.
+
+
+ );
+}
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index c55ca643..fb99be2e 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -10,6 +10,9 @@ import Input from "@/components/common/input/Input";
import Modal from "@/components/common/modal/Modal";
import TextareaField from "@/components/common/textarea/TextareaField";
import WorkspaceCard from "@/components/workspace/WorkspaceCard";
+import WorkspaceEmptyState from "@/components/workspace/WorkspaceEmptyState";
+import WorkspaceListError from "@/components/workspace/WorkspaceListError";
+import WorkspaceListLoading from "@/components/workspace/WorkspaceListLoading";
import { createWorkspace, getMyWorkspaces } from "@/api/workspace/org";
import EditContainIcon from "@/assets/icon/workspace/edit-contained.svg?react";
@@ -41,7 +44,7 @@ export default function WorkspacePage() {
setCreateOpen(false);
},
});
- const listLoading = workspacesQuery.isLoading || workspacesQuery.isFetching;
+ const isListLoading = workspacesQuery.isLoading;
const listErrorMsg = workspacesQuery.isError
? getAxiosMessage(
workspacesQuery.error,
@@ -49,7 +52,7 @@ export default function WorkspacePage() {
)
: null;
- const creating = createWorkspaceMutation.isPending;
+ const isCreating = createWorkspaceMutation.isPending;
const createErrorMsg = createWorkspaceMutation.isError
? getAxiosMessage(
createWorkspaceMutation.error,
@@ -122,6 +125,38 @@ export default function WorkspacePage() {
createWorkspaceMutation.mutate({ name, description, logoUrl: null });
};
+ const renderWorkspaceContent = () => {
+ if (isListLoading) {
+ return ;
+ }
+ if (listErrorMsg) {
+ return (
+ workspacesQuery.refetch()}
+ />
+ );
+ }
+ if (filtered.length === 0) {
+ return (
+
+ );
+ }
+ return (
+
+ {filtered.map((w) => (
+
+ ))}
+
+ );
+ };
+
return (
@@ -152,41 +187,7 @@ export default function WorkspacePage() {
- {listLoading && (
-
- )}
- {!listLoading && listErrorMsg && (
-
-
{listErrorMsg}
-
-
- )}
- {!listLoading && !listErrorMsg && (
-
- {filtered.map((w) => (
-
- ))}
- {filtered.length === 0 && (
- -
-
- 워크스페이스가 없습니다.
-
-
- )}
-
- )}
+ {renderWorkspaceContent()}
@@ -234,7 +235,7 @@ export default function WorkspacePage() {
placeholder="조직의 이름을 입력하세요."
value={newName}
onChange={(e) => setNewName(e.target.value)}
- disabled={creating}
+ disabled={isCreating}
/>
setNewDesc(e.target.value)}
- disabled={creating}
+ disabled={isCreating}
/>
{createErrorMsg && (
{createErrorMsg}
@@ -251,11 +252,11 @@ export default function WorkspacePage() {
size="big"
variant="primary"
onClick={onSubmitCreate}
- disabled={!newName.trim() || creating}
+ disabled={!newName.trim() || isCreating}
className="mx-auto px-10 mt-10"
type="button"
>
- {creating ? "생성 중.. " : "생성하기"}
+ {isCreating ? "생성 중.. " : "생성하기"}