+
+ );
+}
+
+function AppShell() {
+ const auth = useAuthSession();
+ const protectedRouteApiClient = useMemo(
+ () =>
+ createApiClient({
+ getToken: () => authSessionStorage.read()?.token ?? null,
+ clearSession: () => auth.clearSession(sessionExpiredNotice),
+ onAuthExpired: () => replaceWith(routePaths.login),
+ }),
+ [auth],
+ );
+ const location = useBrowserLocation();
+ const [routeError, setRouteError] = useState
+
+ 본문으로 건너뛰기
+
+
+
+ {isMobileMenuOpen ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+ AI 캐릭터 관리자
-ACCESS DENIED
+접근 권한이 없습니다
+ADMIN 권한이 확인되지 않아 요청한 화면을 열 수 없습니다.
+ + 로그인으로 이동 + +
+
+ {routeError === null ? null : (
+ AI CHARACTER ADMIN
++ AI 캐릭터 +
+캐릭터 목록과 생성 흐름은 Phase 2에서 연결합니다.
++ {routeError} +
+ )} +AI CHARACTER ADMIN
+관리자 로그인
+ADMIN 계정으로 로그인하세요.
++ {notice} +
+ )} + +{auth.session === null ? "보호 콘텐츠 없음" : "보호 콘텐츠"}
+ {auth.session?.token ?? "토큰 없음"}
+ {loginFailed ? 로그인 거부
: null} + {auth.loginNotice === null ? null :{auth.loginNotice}
} + + +공유 콘텐츠
+- 모바일 슬롯
+
+
+
+ );
+}
diff --git a/src/shared/ui/file-field.tsx b/src/shared/ui/file-field.tsx
new file mode 100644
index 0000000..63572e6
--- /dev/null
+++ b/src/shared/ui/file-field.tsx
@@ -0,0 +1,48 @@
+import { useId, useRef } from "react";
+
+export type FileFieldProps = {
+ readonly accept: string;
+ readonly acceptDescription: string;
+ readonly description?: string;
+ readonly error?: string;
+ readonly label: string;
+ readonly onChange: (file: File | null) => void;
+ readonly value: File | null;
+};
+
+export function FileField({ accept, acceptDescription, description, error, label, onChange, value }: FileFieldProps) {
+ const inputId = useId();
+ const descriptionId = useId();
+ const acceptId = useId();
+ const errorId = useId();
+ const inputRef = useRef
+
+ {title}
+{impactDescription}
+
+
+
+
+
+
+ {description === undefined ? null :
+ );
+}
diff --git a/src/shared/ui/icon-only-action.tsx b/src/shared/ui/icon-only-action.tsx
new file mode 100644
index 0000000..815cb06
--- /dev/null
+++ b/src/shared/ui/icon-only-action.tsx
@@ -0,0 +1,24 @@
+import { useId } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type IconOnlyActionProps = Omit{description}
} +{acceptDescription}
+ +
+ {value === null ? "선택된 파일 없음" : value.name}
+ {value === null ? null : (
+
+ )}
+
+ {error === undefined ? null : {error}
} +
+
+
+
+ );
+}
diff --git a/src/shared/ui/page-state.tsx b/src/shared/ui/page-state.tsx
new file mode 100644
index 0000000..495c9b8
--- /dev/null
+++ b/src/shared/ui/page-state.tsx
@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+
+type LoadingPageStateProps = {
+ readonly description?: string;
+ readonly state: "loading";
+ readonly title: string;
+};
+
+type EmptyPageStateProps = {
+ readonly description?: string;
+ readonly state: "empty";
+ readonly title: string;
+};
+
+type ErrorPageStateProps = {
+ readonly description?: string;
+ readonly onRetry?: () => void;
+ readonly state: "error";
+ readonly title: string;
+};
+
+type ContentPageStateProps = {
+ readonly children: ReactNode;
+ readonly state: "content";
+};
+
+export type PageStateProps = LoadingPageStateProps | EmptyPageStateProps | ErrorPageStateProps | ContentPageStateProps;
+
+function assertNever(value: never): never {
+ throw new Error(`Unhandled page state: ${String(value)}`);
+}
+
+export function PageState(props: PageStateProps) {
+ switch (props.state) {
+ case "content":
+ return <>{props.children};
+ case "loading":
+ return (
+
+
+ 이미지 crop
+버튼, 범위 입력, 방향키로 위치와 확대를 조정한 뒤 적용합니다.
+
+ 
+
+ 예상 결과 {outputSize.width} × {outputSize.height}px
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.title}
+ {props.description === undefined ? null :{props.description}
} +{props.title}
+ {props.description === undefined ? null :{props.description}
} +{props.title}
+ {props.description === undefined ? null :{props.description}
} + {props.onRetry === undefined ? null : ( + + )} +{desktop}
+ {mobile}
+
+
+ onSearchChange(event.currentTarget.value)} type="search" value={search} />
+
+ {filters === undefined ? null : {filters}
}
+
+
+
+
+ ) : null}
+
+ );
+}
diff --git a/src/shared/ui/upload-progress.tsx b/src/shared/ui/upload-progress.tsx
new file mode 100644
index 0000000..8676b50
--- /dev/null
+++ b/src/shared/ui/upload-progress.tsx
@@ -0,0 +1,39 @@
+const STATUS_LABEL = {
+ canceled: "취소됨",
+ error: "업로드 실패",
+ idle: "대기 중",
+ success: "업로드 완료",
+ uploading: "업로드 중",
+} as const;
+
+export type UploadProgressStatus = keyof typeof STATUS_LABEL;
+
+export type UploadProgressProps = {
+ readonly fileName?: string;
+ readonly onCancel?: () => void;
+ readonly onRetry?: () => void;
+ readonly progress: number;
+ readonly status: UploadProgressStatus;
+};
+
+export function UploadProgress({ fileName, onCancel, onRetry, progress, status }: UploadProgressProps) {
+ const safeProgress = Math.min(100, Math.max(0, Math.round(progress)));
+
+ return (
+
+
+ {title}
+{impactDescription}
+
+
+
+
+
+
+
+ {fileName === undefined ? null :
+ {fileName}
} +{STATUS_LABEL[status]}
+
+ {onCancel === undefined ? null : }
+ {onRetry === undefined ? null : }
+
+
+
+
+