diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index 849f6a69..90ece4da 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -18,6 +18,8 @@ import Button from "@/components/common/button/Button";
 import ChartLegend from "@/components/common/chart/ChartLegend";
 import Drawer from "@/components/common/drawer/Drawer";
 import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu";
+import ChartErrorFallback from "@/components/common/error/ChartErrorFallback";
+import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
 import { Skeleton } from "@/components/common/skeleton/Skeleton";
 import TimelinePeriodSelector from "@/components/timeline/TimelinePeriodSelector";
 
@@ -367,13 +369,24 @@ export default function TimelinePerformancePanel({
                 disableNext={!canGoNext}
               />
             </div>
-            <TimelineDailyTrendChart
-              dailyTrend={slicedTrend}
-              metric={chartMetric}
-              viewUnit={viewUnit}
-              rangeStart={chartRangeStart}
-              rangeEnd={chartRangeEnd}
-            />
+            <ErrorBoundary
+              FallbackComponent={ChartErrorFallback}
+              resetKeys={[
+                slicedTrend,
+                chartMetric,
+                viewUnit,
+                chartRangeEnd,
+                chartRangeStart,
+              ]}
+            >
+              <TimelineDailyTrendChart
+                dailyTrend={slicedTrend}
+                metric={chartMetric}
+                viewUnit={viewUnit}
+                rangeStart={chartRangeStart}
+                rangeEnd={chartRangeEnd}
+              />
+            </ErrorBoundary>
           </div>
         </section>
 
diff --git a/src/pages/dashboard/timeline/Timeline.tsx b/src/pages/dashboard/timeline/Timeline.tsx
index ca5b4117..077c7279 100644
--- a/src/pages/dashboard/timeline/Timeline.tsx
+++ b/src/pages/dashboard/timeline/Timeline.tsx
@@ -22,6 +22,8 @@ import { useTimelineDetail } from "@/hooks/timeline/useTimelineDetail";
 import { useTimelineList } from "@/hooks/timeline/useTimelineList";
 
 import Button from "@/components/common/button/Button";
+import AreaErrorFallback from "@/components/common/error/AreaErrorFallback";
+import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
 import Modal from "@/components/common/modal/Modal";
 import ModalContent from "@/components/common/modal/ModalContent";
 import TimelineSkeleton from "@/components/timeline/skeleton/TimelineSkeleton";
@@ -279,115 +281,121 @@ export default function Timeline() {
       className="flex w-full min-w-0 flex-col"
       style={{ height: TIMELINE_PAGE_HEIGHT }}
     >
-      <div className="flex min-h-0 flex-1 w-full min-w-0 flex-col rounded-2xl border border-surface-400/70 bg-surface-100">
-        <div className="flex shrink-0 flex-col gap-4 border-b border-surface-400/80 px-5 py-5">
-          <div className="flex items-center justify-between gap-8">
-            <TimelineStatusLegend className="min-w-0 flex-1" />
-            <Button
-              type="button"
-              size="small"
-              variant="custom"
-              onClick={() => setIsCreateOpen(true)}
-              leftIcon={
-                <PlusIcon
-                  className="h-4 w-4 shrink-0 text-primary-500"
-                  aria-hidden
-                />
-              }
-              className={twMerge(
-                "h-10 shrink-0 rounded-2xl px-4",
-                "bg-primary-400/20 text-primary-500",
-                "font-body2 shadow-Soft",
-                "transition-ui-smooth hover:bg-primary-500/30",
-              )}
-            >
-              타임라인 생성
-            </Button>
-          </div>
-
-          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
-            <TimelineViewUnitSegment
-              viewUnit={viewUnit}
-              onViewUnitChange={handleViewUnitChange}
-              className="justify-self-start"
-            />
-            <TimelinePeriodNav
-              periodLabel={periodLabel}
-              onPrevPeriod={handlePrevPeriod}
-              onNextPeriod={handleNextPeriod}
-              onGoToToday={handleGoToToday}
-              className="justify-self-center"
-            />
-            <div className="flex items-center justify-self-end gap-3">
-              <span
-                className={TOOLBAR_ACTION_CLASS}
-                title="준비 중"
-                aria-disabled
-              >
-                <SortIcon className="h-4 w-4" />
-                Sort
-              </span>
-              <span
-                className={TOOLBAR_ACTION_CLASS}
-                title="준비 중"
-                aria-disabled
+      <ErrorBoundary
+        FallbackComponent={AreaErrorFallback}
+        resetKeys={[timelineList, viewUnit, periodIndex]}
+      >
+        <div className="flex min-h-0 flex-1 w-full min-w-0 flex-col rounded-2xl border border-surface-400/70 bg-surface-100">
+          <div className="flex shrink-0 flex-col gap-4 border-b border-surface-400/80 px-5 py-5">
+            <div className="flex items-center justify-between gap-8">
+              <TimelineStatusLegend className="min-w-0 flex-1" />
+              <Button
+                type="button"
+                size="small"
+                variant="custom"
+                onClick={() => setIsCreateOpen(true)}
+                leftIcon={
+                  <PlusIcon
+                    className="h-4 w-4 shrink-0 text-primary-500"
+                    aria-hidden
+                  />
+                }
+                className={twMerge(
+                  "h-10 shrink-0 rounded-2xl px-4",
+                  "bg-primary-400/20 text-primary-500",
+                  "font-body2 shadow-Soft",
+                  "transition-ui-smooth hover:bg-primary-500/30",
+                )}
               >
-                <FilterIcon className="h-4 w-4" />
-                Filter
-              </span>
+                타임라인 생성
+              </Button>
+            </div>
+
+            <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
+              <TimelineViewUnitSegment
+                viewUnit={viewUnit}
+                onViewUnitChange={handleViewUnitChange}
+                className="justify-self-start"
+              />
+              <TimelinePeriodNav
+                periodLabel={periodLabel}
+                onPrevPeriod={handlePrevPeriod}
+                onNextPeriod={handleNextPeriod}
+                onGoToToday={handleGoToToday}
+                className="justify-self-center"
+              />
+              <div className="flex items-center justify-self-end gap-3">
+                <span
+                  className={TOOLBAR_ACTION_CLASS}
+                  title="준비 중"
+                  aria-disabled
+                >
+                  <SortIcon className="h-4 w-4" />
+                  Sort
+                </span>
+                <span
+                  className={TOOLBAR_ACTION_CLASS}
+                  title="준비 중"
+                  aria-disabled
+                >
+                  <FilterIcon className="h-4 w-4" />
+                  Filter
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-        {hasNoTimelines ? (
-          <TimelineEmptyState onCreate={() => setIsCreateOpen(true)} />
-        ) : (
-          <div
-            ref={scrollRef}
-            className="flex min-h-0 w-full flex-1 flex-col overflow-auto"
-          >
+          {hasNoTimelines ? (
+            <TimelineEmptyState onCreate={() => setIsCreateOpen(true)} />
+          ) : (
             <div
-              style={{ width: totalWidth, minHeight: "100%" }}
-              className="flex min-h-full flex-1 flex-col"
+              ref={scrollRef}
+              className="flex min-h-0 w-full flex-1 flex-col overflow-auto"
             >
-              <TimelineAxis
-                columns={columns}
-                colWidth={colWidth}
-                className="sticky top-0"
-              />
-              {hasNoVisibleBars ? (
-                <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-6 py-16 text-center">
-                  <p className="font-heading4 text-text-title">
-                    이 기간에 표시할 타임라인이 없어요
-                  </p>
-                  <p className="max-w-sm font-body2 text-text-muted">
-                    다른 기간으로 이동하거나 보기 단위를 변경해 보세요
-                  </p>
-                </div>
-              ) : (
-                <TimelineGrid
+              <div
+                style={{ width: totalWidth, minHeight: "100%" }}
+                className="flex min-h-full flex-1 flex-col"
+              >
+                <TimelineAxis
                   columns={columns}
-                  rowCount={maxRow}
                   colWidth={colWidth}
-                >
-                  {bars.map((bar) => (
-                    <TimelineBar
-                      key={`${viewUnit}-${bar.id}`}
-                      bar={bar}
-                      colWidth={colWidth}
-                      isSelected={selectedBarId === bar.id && isPanelOpen}
-                      onBarClick={handleBarClick}
-                      onEdit={() => handleEditTimeline(bar.id)}
-                      onDelete={() =>
-                        handleDeleteTimeline({ id: bar.id, name: bar.title })
-                      }
-                    />
-                  ))}
-                </TimelineGrid>
-              )}
+                  className="sticky top-0"
+                />
+                {hasNoVisibleBars ? (
+                  <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-6 py-16 text-center">
+                    <p className="font-heading4 text-text-title">
+                      이 기간에 표시할 타임라인이 없어요
+                    </p>
+                    <p className="max-w-sm font-body2 text-text-muted">
+                      다른 기간으로 이동하거나 보기 단위를 변경해 보세요
+                    </p>
+                  </div>
+                ) : (
+                  <TimelineGrid
+                    columns={columns}
+                    rowCount={maxRow}
+                    colWidth={colWidth}
+                  >
+                    {bars.map((bar) => (
+                      <TimelineBar
+                        key={`${viewUnit}-${bar.id}`}
+                        bar={bar}
+                        colWidth={colWidth}
+                        isSelected={selectedBarId === bar.id && isPanelOpen}
+                        onBarClick={handleBarClick}
+                        onEdit={() => handleEditTimeline(bar.id)}
+                        onDelete={() =>
+                          handleDeleteTimeline({ id: bar.id, name: bar.title })
+                        }
+                      />
+                    ))}
+                  </TimelineGrid>
+                )}
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      </ErrorBoundary>
+
       {/* 생성 */}
       <TimelineCreateModal
         isOpen={isCreateOpen}
diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx
index cc0d2966..a3b0eca3 100644
--- a/src/pages/setting/Setting.tsx
+++ b/src/pages/setting/Setting.tsx
@@ -13,6 +13,8 @@ import { useUpdateMasterNotificationSettings } from "@/hooks/setting/useUpdateMa
 import { useUpdateOrgNotificationSettings } from "@/hooks/setting/useUpdateOrgNotificationSettings";
 
 import Button from "@/components/common/button/Button";
+import AreaErrorFallback from "@/components/common/error/AreaErrorFallback";
+import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
 import NotificationSection from "@/components/setting/NotificationSection";
 import PasswordSection from "@/components/setting/PasswordSection";
 import PasswordSectionSkeleton from "@/components/setting/PasswordSectionSkeleton";
@@ -633,83 +635,92 @@ export default function Setting() {
             </Button>
           </div>
         ) : (
-          <NotificationSection
-            email={draftProfile.email}
-            masterEnabled={draftOrgNotif.masterEnabled}
-            onMasterEnabledChange={(value) => {
-              if (!value) {
+          <ErrorBoundary
+            FallbackComponent={AreaErrorFallback}
+            resetKeys={[draftOrgNotif, draftChannel, draftWorkspaceNotif]}
+          >
+            <NotificationSection
+              email={draftProfile.email}
+              masterEnabled={draftOrgNotif.masterEnabled}
+              onMasterEnabledChange={(value) => {
+                if (!value) {
+                  setDraftOrgNotif((prev) => ({
+                    ...prev,
+                    masterEnabled: false,
+                    slackEnabled: false,
+                    discordEnabled: false,
+                  }));
+                  setDraftChannel({ browserPush: false, emailNotif: false });
+                  setDraftWorkspaceNotif({
+                    clickAlarm: false,
+                    weeklyReport: false,
+                  });
+                  return;
+                }
                 setDraftOrgNotif((prev) => ({
                   ...prev,
-                  masterEnabled: false,
-                  slackEnabled: false,
-                  discordEnabled: false,
+                  masterEnabled: true,
+                  slackEnabled:
+                    prev.slackConnected && savedOrgNotif.slackEnabled,
+                  discordEnabled:
+                    prev.discordConnected && savedOrgNotif.discordEnabled,
                 }));
-                setDraftChannel({ browserPush: false, emailNotif: false });
-                setDraftWorkspaceNotif({
-                  clickAlarm: false,
-                  weeklyReport: false,
-                });
-                return;
+                setDraftChannel(savedChannel);
+                setDraftWorkspaceNotif(savedWorkspaceNotif);
+              }}
+              browserPush={draftChannel.browserPush}
+              emailNotif={draftChannel.emailNotif}
+              onBrowserPushChange={(value) =>
+                setDraftChannel((prev) => ({ ...prev, browserPush: value }))
               }
-              setDraftOrgNotif((prev) => ({
-                ...prev,
-                masterEnabled: true,
-                slackEnabled: prev.slackConnected && savedOrgNotif.slackEnabled,
-                discordEnabled:
-                  prev.discordConnected && savedOrgNotif.discordEnabled,
-              }));
-              setDraftChannel(savedChannel);
-              setDraftWorkspaceNotif(savedWorkspaceNotif);
-            }}
-            browserPush={draftChannel.browserPush}
-            emailNotif={draftChannel.emailNotif}
-            onBrowserPushChange={(value) =>
-              setDraftChannel((prev) => ({ ...prev, browserPush: value }))
-            }
-            onEmailNotifChange={(value) =>
-              setDraftChannel((prev) => ({ ...prev, emailNotif: value }))
-            }
-            slackEnabled={draftOrgNotif.slackEnabled}
-            slackConnected={draftOrgNotif.slackConnected}
-            slackWebhookUrl={slackWebhookUrl}
-            slackWebhookError={slackWebhookError}
-            onSlackWebhookUrlChange={(value) => {
-              setSlackWebhookUrl(value);
-              if (slackWebhookError) setSlackWebhookError("");
-            }}
-            onSlackEnabledChange={(value) =>
-              setDraftOrgNotif((prev) => ({ ...prev, slackEnabled: value }))
-            }
-            onConnectSlack={handleConnectSlack}
-            onDisconnectSlack={handleDisconnectSlack}
-            discordEnabled={draftOrgNotif.discordEnabled}
-            discordConnected={draftOrgNotif.discordConnected}
-            discordWebhookUrl={discordWebhookUrl}
-            discordWebhookError={discordWebhookError}
-            onDiscordWebhookUrlChange={(value) => {
-              setDiscordWebhookUrl(value);
-              if (discordWebhookError) setDiscordWebhookError("");
-            }}
-            onDiscordEnabledChange={(value) =>
-              setDraftOrgNotif((prev) => ({ ...prev, discordEnabled: value }))
-            }
-            onConnectDiscord={handleConnectDiscord}
-            onDisconnectDiscord={handleDisconnectDiscord}
-            workspaceName={currentWorkspaceName}
-            clickAlarm={draftWorkspaceNotif.clickAlarm}
-            weeklyReport={draftWorkspaceNotif.weeklyReport}
-            onClickAlarmChange={(value) =>
-              setDraftWorkspaceNotif((prev) => ({ ...prev, clickAlarm: value }))
-            }
-            onWeeklyReportChange={(value) =>
-              setDraftWorkspaceNotif((prev) => ({
-                ...prev,
-                weeklyReport: value,
-              }))
-            }
-            workspaceNotifiDisabled={workspaceNotifiDisabled}
-            pendingOrgAction={pendingOrgAction}
-          />
+              onEmailNotifChange={(value) =>
+                setDraftChannel((prev) => ({ ...prev, emailNotif: value }))
+              }
+              slackEnabled={draftOrgNotif.slackEnabled}
+              slackConnected={draftOrgNotif.slackConnected}
+              slackWebhookUrl={slackWebhookUrl}
+              slackWebhookError={slackWebhookError}
+              onSlackWebhookUrlChange={(value) => {
+                setSlackWebhookUrl(value);
+                if (slackWebhookError) setSlackWebhookError("");
+              }}
+              onSlackEnabledChange={(value) =>
+                setDraftOrgNotif((prev) => ({ ...prev, slackEnabled: value }))
+              }
+              onConnectSlack={handleConnectSlack}
+              onDisconnectSlack={handleDisconnectSlack}
+              discordEnabled={draftOrgNotif.discordEnabled}
+              discordConnected={draftOrgNotif.discordConnected}
+              discordWebhookUrl={discordWebhookUrl}
+              discordWebhookError={discordWebhookError}
+              onDiscordWebhookUrlChange={(value) => {
+                setDiscordWebhookUrl(value);
+                if (discordWebhookError) setDiscordWebhookError("");
+              }}
+              onDiscordEnabledChange={(value) =>
+                setDraftOrgNotif((prev) => ({ ...prev, discordEnabled: value }))
+              }
+              onConnectDiscord={handleConnectDiscord}
+              onDisconnectDiscord={handleDisconnectDiscord}
+              workspaceName={currentWorkspaceName}
+              clickAlarm={draftWorkspaceNotif.clickAlarm}
+              weeklyReport={draftWorkspaceNotif.weeklyReport}
+              onClickAlarmChange={(value) =>
+                setDraftWorkspaceNotif((prev) => ({
+                  ...prev,
+                  clickAlarm: value,
+                }))
+              }
+              onWeeklyReportChange={(value) =>
+                setDraftWorkspaceNotif((prev) => ({
+                  ...prev,
+                  weeklyReport: value,
+                }))
+              }
+              workspaceNotifiDisabled={workspaceNotifiDisabled}
+              pendingOrgAction={pendingOrgAction}
+            />
+          </ErrorBoundary>
         )}
       </div>
 
diff --git a/src/pages/workspace/MemberManagement.tsx b/src/pages/workspace/MemberManagement.tsx
index 985a5bfc..6094667c 100644
--- a/src/pages/workspace/MemberManagement.tsx
+++ b/src/pages/workspace/MemberManagement.tsx
@@ -14,6 +14,8 @@ import { useCoreMutation, useCoreQuery } from "@/hooks/customQuery";
 import { useNotificationMembers } from "@/hooks/setting/useNotificationMembers";
 import { useUpdateNotificationMembers } from "@/hooks/setting/useUpdateNotificationMembers";
 
+import AreaErrorFallback from "@/components/common/error/AreaErrorFallback";
+import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
 import DeleteMemberModal from "@/components/workspace/DeleteMemberModal";
 import MemberList from "@/components/workspace/MemberList";
 import MemberManagementLoading from "@/components/workspace/MemberManagementLoading";
@@ -339,36 +341,41 @@ export default function MemberManagement() {
 
   return (
     <section className="w-full min-w-0 flex flex-col gap-8">
-      <div className="flex w-full min-w-0 flex-col gap-8">
-        <MemberList
-          orgId={orgId}
-          members={members}
-          pendingMembers={pendingMembers}
-          totalCount={totalCount}
-          onRoleChange={handleRoleChange}
-          onDeleteClick={openDeleteMember}
-          isFetchingNextPage={membersQuery.isFetchingNextPage}
-          observerRef={observerRef}
-          notificationReceiveByEmail={notificationReceiveByEmail}
-          isNotificationLoading={
-            notificationMembersQuery.isLoading ||
-            notificationMembersQuery.isFetchingNextPage
-          }
-          isNotificationError={notificationMembersQuery.isError}
-          onReceiveToggle={handleReceiveToggle}
-          updatingMemberId={updatingMemberId}
-        />
-
-        <PermissionTable />
-
-        <DeleteMemberModal
-          isOpen={isDeleteModalOpen}
-          onClose={closeDeleteMember}
-          member={selectedDeleteMember}
-          onConfirm={handleDeleteMember}
-          isLoading={deleteMemberMutation.isPending}
-        />
-      </div>
+      <ErrorBoundary
+        FallbackComponent={AreaErrorFallback}
+        resetKeys={[members, pendingMembers]}
+      >
+        <div className="flex w-full min-w-0 flex-col gap-8">
+          <MemberList
+            orgId={orgId}
+            members={members}
+            pendingMembers={pendingMembers}
+            totalCount={totalCount}
+            onRoleChange={handleRoleChange}
+            onDeleteClick={openDeleteMember}
+            isFetchingNextPage={membersQuery.isFetchingNextPage}
+            observerRef={observerRef}
+            notificationReceiveByEmail={notificationReceiveByEmail}
+            isNotificationLoading={
+              notificationMembersQuery.isLoading ||
+              notificationMembersQuery.isFetchingNextPage
+            }
+            isNotificationError={notificationMembersQuery.isError}
+            onReceiveToggle={handleReceiveToggle}
+            updatingMemberId={updatingMemberId}
+          />
+
+          <PermissionTable />
+
+          <DeleteMemberModal
+            isOpen={isDeleteModalOpen}
+            onClose={closeDeleteMember}
+            member={selectedDeleteMember}
+            onConfirm={handleDeleteMember}
+            isLoading={deleteMemberMutation.isPending}
+          />
+        </div>
+      </ErrorBoundary>
     </section>
   );
 }
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index e4d4c732..6db5c093 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -13,6 +13,8 @@ import type { TCreateOrgRequest } from "@/types/workspace/workspace";
 import { useCoreMutation, useCoreQuery } from "@/hooks/customQuery";
 
 import Button from "@/components/common/button/Button";
+import AreaErrorFallback from "@/components/common/error/AreaErrorFallback";
+import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
 import Input from "@/components/common/input/Input";
 import Modal from "@/components/common/modal/Modal";
 import TextareaField from "@/components/common/textarea/TextareaField";
@@ -211,8 +213,12 @@ export default function WorkspacePage() {
           <span className="hidden tablet:inline">생성하기</span>
         </Button>
       </div>
-
-      {renderWorkspaceContent()}
+      <ErrorBoundary
+        FallbackComponent={AreaErrorFallback}
+        resetKeys={[workspaces]}
+      >
+        {renderWorkspaceContent()}
+      </ErrorBoundary>
 
       <Modal isOpen={createOpen} onClose={onCloseCreate} size="md" padding="lg">
         <div className="flex flex-col items-start pr-10 px-2 tablet:px-0">
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index f7c7c049..eb19dbba 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -6,6 +6,8 @@ import { useCoreMutation, useCoreQuery } from "@/hooks/customQuery";
 
 import Button from "@/components/common/button/Button";
 import Card from "@/components/common/card/Card";
+import AreaErrorFallback from "@/components/common/error/AreaErrorFallback";
+import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
 import Input from "@/components/common/input/Input";
 import Modal from "@/components/common/modal/Modal";
 import ModalContent from "@/components/common/modal/ModalContent";
@@ -203,165 +205,170 @@ export default function WorkspaceSetting() {
         </Card>
       )}
       {!loading && !errorMsg && (
-        <>
-          <Card className="p-8">
-            <div className="mt-9 flex flex-row gap-12 items-start tablet:flex-col tablet:gap-8">
-              <div className="flex w-60 shrink-0 flex-col items-center tablet:w-full">
-                <div className="mb-3 ml-1 w-full select-none font-body1 text-text-title tablet:text-center">
-                  로고 이미지
-                </div>
-                <input
-                  ref={fileRef}
-                  type="file"
-                  accept="image/jpeg,image/jpg,image/png,image/webp"
-                  className="hidden"
-                  onChange={onPickLogo}
-                />
-                <button
-                  type="button"
-                  onClick={openFilePicker}
-                  disabled={!isAdmin || saving || deleting}
-                  aria-label="로고 이미지 업로드 또는 변경"
-                  className="flex h-60 w-60 cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-surface-400 bg-surface-200 outline-none transition-colors hover:bg-surface-300/70 focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:cursor-not-allowed disabled:opacity-50 tablet:h-46 tablet:w-46"
-                >
-                  {logoPreview ? (
-                    <img
-                      src={logoPreview}
-                      alt=""
-                      className="h-full w-full object-cover rounded-lg"
-                    />
-                  ) : resolvedLogoUrl ? (
-                    <img
-                      src={resolvedLogoUrl}
-                      alt=""
-                      className="h-full w-full object-cover rounded-lg"
-                      onError={() => {
-                        setImageError(true);
-                      }}
-                    />
-                  ) : (
-                    <BuildingIcon
-                      aria-hidden="true"
-                      className="h-11 w-11 text-text-placeholder"
-                    />
-                  )}
-                </button>
-                <div className="flex gap-2 mt-4 justify-center">
-                  <Button
-                    variant="custom"
+        <ErrorBoundary
+          FallbackComponent={AreaErrorFallback}
+          resetKeys={[detail]}
+        >
+          <>
+            <Card className="p-8">
+              <div className="mt-9 flex flex-row gap-12 items-start tablet:flex-col tablet:gap-8">
+                <div className="flex w-60 shrink-0 flex-col items-center tablet:w-full">
+                  <div className="mb-3 ml-1 w-full select-none font-body1 text-text-title tablet:text-center">
+                    로고 이미지
+                  </div>
+                  <input
+                    ref={fileRef}
+                    type="file"
+                    accept="image/jpeg,image/jpg,image/png,image/webp"
+                    className="hidden"
+                    onChange={onPickLogo}
+                  />
+                  <button
                     type="button"
-                    className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-surface-100"
                     onClick={openFilePicker}
-                    aria-label="로고 이미지 업로드 버튼"
                     disabled={!isAdmin || saving || deleting}
+                    aria-label="로고 이미지 업로드 또는 변경"
+                    className="flex h-60 w-60 cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-surface-400 bg-surface-200 outline-none transition-colors hover:bg-surface-300/70 focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:cursor-not-allowed disabled:opacity-50 tablet:h-46 tablet:w-46"
+                  >
+                    {logoPreview ? (
+                      <img
+                        src={logoPreview}
+                        alt=""
+                        className="h-full w-full object-cover rounded-lg"
+                      />
+                    ) : resolvedLogoUrl ? (
+                      <img
+                        src={resolvedLogoUrl}
+                        alt=""
+                        className="h-full w-full object-cover rounded-lg"
+                        onError={() => {
+                          setImageError(true);
+                        }}
+                      />
+                    ) : (
+                      <BuildingIcon
+                        aria-hidden="true"
+                        className="h-11 w-11 text-text-placeholder"
+                      />
+                    )}
+                  </button>
+                  <div className="flex gap-2 mt-4 justify-center">
+                    <Button
+                      variant="custom"
+                      type="button"
+                      className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-surface-100"
+                      onClick={openFilePicker}
+                      aria-label="로고 이미지 업로드 버튼"
+                      disabled={!isAdmin || saving || deleting}
+                    >
+                      업로드
+                    </Button>
+                    <Button
+                      variant="custom"
+                      type="button"
+                      className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-surface-100"
+                      onClick={onResetLogo}
+                      aria-label="로고 이미지 초기화 버튼"
+                      disabled={!isAdmin || saving || deleting}
+                    >
+                      초기화
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 w-full space-y-6">
+                  <Input
+                    label="워크스페이스명"
+                    value={name}
+                    placeholder="조직의 이름 또는 워크스페이스 이름을 입력해주세요"
+                    onChange={(e) => setName(e.target.value)}
+                    disabled={!isAdmin || saving || deleting}
+                  />
+                  <TextareaField
+                    id="workspace-setting-desc"
+                    label="워크스페이스 설명"
+                    placeholder="워크스페이스에 대한 설명을 입력해주세요"
+                    value={desc}
+                    onChange={(e) => setDesc(e.target.value)}
+                    minRows={4}
+                    className="min-h-90"
+                    disabled={!isAdmin || saving || deleting}
+                  />
+                </div>
+              </div>
+              {isAdmin && (
+                <div className="mt-6 flex flex-wrap items-center justify-end gap-3 tablet:flex-col tablet:items-stretch">
+                  <Button
+                    type="button"
+                    variant="dangerSoft"
+                    size="big"
+                    onClick={openDeleteModal}
+                    disabled={saving || deleting}
+                    className="w-auto tablet:w-full"
                   >
-                    업로드
+                    워크스페이스 삭제
                   </Button>
                   <Button
-                    variant="custom"
+                    size="big"
+                    variant="primary"
                     type="button"
-                    className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-surface-100"
-                    onClick={onResetLogo}
-                    aria-label="로고 이미지 초기화 버튼"
-                    disabled={!isAdmin || saving || deleting}
+                    onClick={onSave}
+                    disabled={!name.trim() || saving || deleting}
+                    aria-label="변경사항 저장하기"
+                    className="w-auto tablet:w-full"
                   >
-                    초기화
+                    {saving ? "저장 중.." : "변경사항 저장하기"}
                   </Button>
                 </div>
-              </div>
-              <div className="flex-1 w-full space-y-6">
-                <Input
-                  label="워크스페이스명"
-                  value={name}
-                  placeholder="조직의 이름 또는 워크스페이스 이름을 입력해주세요"
-                  onChange={(e) => setName(e.target.value)}
-                  disabled={!isAdmin || saving || deleting}
-                />
-                <TextareaField
-                  id="workspace-setting-desc"
-                  label="워크스페이스 설명"
-                  placeholder="워크스페이스에 대한 설명을 입력해주세요"
-                  value={desc}
-                  onChange={(e) => setDesc(e.target.value)}
-                  minRows={4}
-                  className="min-h-90"
-                  disabled={!isAdmin || saving || deleting}
-                />
-              </div>
-            </div>
-            {isAdmin && (
-              <div className="mt-6 flex flex-wrap items-center justify-end gap-3 tablet:flex-col tablet:items-stretch">
-                <Button
-                  type="button"
-                  variant="dangerSoft"
-                  size="big"
-                  onClick={openDeleteModal}
-                  disabled={saving || deleting}
-                  className="w-auto tablet:w-full"
-                >
-                  워크스페이스 삭제
-                </Button>
-                <Button
-                  size="big"
-                  variant="primary"
-                  type="button"
-                  onClick={onSave}
-                  disabled={!name.trim() || saving || deleting}
-                  aria-label="변경사항 저장하기"
-                  className="w-auto tablet:w-full"
-                >
-                  {saving ? "저장 중.." : "변경사항 저장하기"}
-                </Button>
-              </div>
-            )}
-          </Card>
+              )}
+            </Card>
 
-          <Modal
-            isOpen={deleteOpen}
-            onClose={() => {
-              if (!deleting) {
-                setDeleteOpen(false);
-                setDeleteNameSnapshot("");
-                setDeleteConfirmInput("");
-              }
-            }}
-            title="워크스페이스를 삭제할게요"
-            size="lg"
-            disableOverlayClick={deleting}
-          >
-            <ModalContent
-              icon={
-                <WarnIcon
-                  className="h-7 w-7 text-info-red"
-                  aria-hidden="true"
-                />
-              }
-              title="워크스페이스를 삭제할게요"
-              description={
-                <>
-                  <p>
-                    삭제하면 연결된 모든 데이터가 사라지고, 다시 되돌릴 수
-                    없어요.
-                  </p>
-                  <p className="mt-2.5">
-                    아래 워크스페이스 이름을 그대로 입력해 주세요.
-                  </p>
-                </>
-              }
-              confirmMatchSubheading={false}
-              confirmMatchText={deleteNameSnapshot}
-              confirmInput={deleteConfirmInput}
-              onConfirmInputChange={setDeleteConfirmInput}
-              confirmMatchInputPlaceholder="워크스페이스 이름"
-              buttonText="영구 삭제"
-              onConfirm={() => {
-                void onDelete();
+            <Modal
+              isOpen={deleteOpen}
+              onClose={() => {
+                if (!deleting) {
+                  setDeleteOpen(false);
+                  setDeleteNameSnapshot("");
+                  setDeleteConfirmInput("");
+                }
               }}
-              isLoading={deleting}
-              variant="danger"
-            />
-          </Modal>
-        </>
+              title="워크스페이스를 삭제할게요"
+              size="lg"
+              disableOverlayClick={deleting}
+            >
+              <ModalContent
+                icon={
+                  <WarnIcon
+                    className="h-7 w-7 text-info-red"
+                    aria-hidden="true"
+                  />
+                }
+                title="워크스페이스를 삭제할게요"
+                description={
+                  <>
+                    <p>
+                      삭제하면 연결된 모든 데이터가 사라지고, 다시 되돌릴 수
+                      없어요.
+                    </p>
+                    <p className="mt-2.5">
+                      아래 워크스페이스 이름을 그대로 입력해 주세요.
+                    </p>
+                  </>
+                }
+                confirmMatchSubheading={false}
+                confirmMatchText={deleteNameSnapshot}
+                confirmInput={deleteConfirmInput}
+                onConfirmInputChange={setDeleteConfirmInput}
+                confirmMatchInputPlaceholder="워크스페이스 이름"
+                buttonText="영구 삭제"
+                onConfirm={() => {
+                  void onDelete();
+                }}
+                isLoading={deleting}
+                variant="danger"
+              />
+            </Modal>
+          </>
+        </ErrorBoundary>
       )}
     </section>
   );