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 ( +
+

{message}

+
+ ); +} 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 ( + + ); + }; + 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 ? "생성 중.. " : "생성하기"}