refactor: packages/common 하위의 apis, schemas, utils, contexts, hooks namespace 제거

Author: earthyoung

apps/pyconkr-admin/src/components/elements/admin_signin_guard.tsx

@@ -1,4 +1,4 @@
-import * as Common from "@frontend/common";
+import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import * as React from "react";
@@ -9,8 +9,8 @@ import { addSnackbar } from "../../utils/snackbar";
 export const BackendAdminSignInGuard: React.FC<{ children: React.ReactNode }> = ErrorBoundary.with(
   { fallback: <>로그인 정보를 불러오는 중 문제가 발생했습니다.</> },
   Suspense.with({ fallback: <CircularProgress /> }, ({ children }) => {
-    const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-    const { data } = Common.Hooks.BackendAdminAPI.useSignedInUserQuery(backendAdminAPIClient);
+    const backendAdminAPIClient = useBackendAdminClient();
+    const { data } = useSignedInUserQuery(backendAdminAPIClient);
 
     if (!data) {
       addSnackbar("로그인 후 이용해주세요.", "error");

apps/pyconkr-admin/src/components/layouts/admin_editor.tsx

@@ -1,4 +1,7 @@
-import * as Common from "@frontend/common";
+import { Components } from "@frontend/common";
+import { useBackendAdminClient, useCreateMutation, useRemoveMutation, useSchemaQuery, useUpdateMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { filterPropertiesByLanguageInJsonSchema, filterReadOnlyPropertiesInJsonSchema, filterWritablePropertiesInJsonSchema } from "@frontend/common/src/utils";
+import { retrieve } from "@frontend/common/src/apis/admin_api";
 import { Add, Close, Delete, Edit } from "@mui/icons-material";
 import {
   Box,
@@ -132,7 +135,7 @@ const fieldPropsToSelectedProps = (props: FieldProps): OutlinedSelectProps & { d
 };
 
 const M2MSelect: Field = ErrorBoundary.with(
-  { fallback: Common.Components.ErrorFallback },
+  { fallback: Components.ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, (props) => {
     const selectable = (props.schema.items as JSONSchema7).oneOf as DescriptedEnum[];
     const selectableListObj: DescriptedEnumObject = selectable.reduce((a, i) => ({ ...a, [i.const]: i }), {} as DescriptedEnumObject);
@@ -168,7 +171,7 @@ const MDRendererContainer = styled(Box)(({ theme }) => ({
 }));
 
 const MDEditorField: Field = ErrorBoundary.with(
-  { fallback: Common.Components.ErrorFallback },
+  { fallback: Components.ErrorFallback },
   ({ disabled, formData, name, onChange: rawOnChange }) => {
     const [valueState, setValueState] = React.useState<string | undefined>(formData?.toString() || "");
     const onChange = (value?: string) => {
@@ -180,10 +183,10 @@ const MDEditorField: Field = ErrorBoundary.with(
         <Typography variant="subtitle2" component="legend" children={name} />
         <Stack direction="row" spacing={2} sx={{ width: "100%", height: "100%", minHeight: "100%", maxHeight: "100%", flexGrow: 1, py: 2 }}>
           <Box sx={{ width: "50%", maxWidth: "50%" }}>
-            <Common.Components.MarkdownEditor disabled={disabled} name={name} value={valueState} onChange={onChange} extraCommands={[]} />
+            <Components.MarkdownEditor disabled={disabled} name={name} value={valueState} onChange={onChange} extraCommands={[]} />
           </Box>
           <MDRendererContainer>
-            <Common.Components.MDXRenderer text={valueState || ""} format="md" />
+            <Components.MDXRenderer text={valueState || ""} format="md" />
           </MDRendererContainer>
         </Stack>
       </MUIStyledFieldset>
@@ -234,7 +237,7 @@ const ReadOnlyValueField: React.FC<{
         )}
         {fieldState.blob.type.startsWith("application/json") && fieldState.blobText && (
           <Box sx={{ maxWidth: "600px", overflow: "auto" }}>
-            <Common.Components.LottieDebugPanel data={JSON.parse(fieldState.blobText)} />
+            <Components.LottieDebugPanel data={JSON.parse(fieldState.blobText)} />
           </Box>
         )}
         <a href={value as string}>링크</a>
@@ -251,7 +254,7 @@ type InnerAdminEditorStateType = {
 };
 
 const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = ErrorBoundary.with(
-  { fallback: Common.Components.ErrorFallback },
+  { fallback: Components.ErrorFallback },
   Suspense.with(
     { fallback: <CircularProgress /> },
     ({
@@ -275,18 +278,18 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
         tab: 0,
         formData: undefined,
       });
-      const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-      const { data: schemaInfo } = Common.Hooks.BackendAdminAPI.useSchemaQuery(backendAdminClient, app, resource);
+      const backendAdminClient = useBackendAdminClient();
+      const { data: schemaInfo } = useSchemaQuery(backendAdminClient, app, resource);
 
       const setTab = (_: React.SyntheticEvent, tab: number) => setEditorState((ps) => ({ ...ps, tab }));
       const setFormData = (formData?: Record<string, string>) => setEditorState((ps) => ({ ...ps, formData }));
       const appendFormDataState = (data?: Record<string, string>) => setEditorState((ps) => ({ ...ps, formData: { ...ps.formData, ...data } }));
       const selectedLanguage = editorState.tab === 0 ? "ko" : "en";
       const notSelectedLanguage = editorState.tab === 0 ? "en" : "ko";
 
-      const createMutation = Common.Hooks.BackendAdminAPI.useCreateMutation<Record<string, string>>(backendAdminClient, app, resource);
-      const modifyMutation = Common.Hooks.BackendAdminAPI.useUpdateMutation<Record<string, string>>(backendAdminClient, app, resource, id || "");
-      const deleteMutation = Common.Hooks.BackendAdminAPI.useRemoveMutation(backendAdminClient, app, resource, id || "undefined");
+      const createMutation = useCreateMutation<Record<string, string>>(backendAdminClient, app, resource);
+      const modifyMutation = useUpdateMutation<Record<string, string>>(backendAdminClient, app, resource, id || "");
+      const deleteMutation = useRemoveMutation(backendAdminClient, app, resource, id || "undefined");
       const submitMutation = id ? modifyMutation : createMutation;
 
       React.useEffect(() => {
@@ -296,7 +299,7 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
             return;
           }
 
-          const initialData = await Common.BackendAdminAPIs.retrieve<Record<string, string>>(backendAdminClient, app, resource, id)();
+          const initialData = await retrieve<Record<string, string>>(backendAdminClient, app, resource, id)();
           setFormData({ ...initialData, ...context });
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -344,13 +347,13 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
           .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {} as RJSFSchema);
       }
 
-      const writableSchema = Common.Utils.filterPropertiesByLanguageInJsonSchema(
-        Common.Utils.filterWritablePropertiesInJsonSchema(schemaInfo.schema),
+      const writableSchema = filterPropertiesByLanguageInJsonSchema(
+        filterWritablePropertiesInJsonSchema(schemaInfo.schema),
         schemaInfo.translation_fields,
         selectedLanguage
       );
-      const readOnlySchema = Common.Utils.filterPropertiesByLanguageInJsonSchema(
-        Common.Utils.filterReadOnlyPropertiesInJsonSchema(schemaInfo.schema),
+      const readOnlySchema = filterPropertiesByLanguageInJsonSchema(
+        filterReadOnlyPropertiesInJsonSchema(schemaInfo.schema),
         schemaInfo.translation_fields,
         selectedLanguage
       );

apps/pyconkr-admin/src/components/layouts/admin_list.tsx

@@ -1,4 +1,5 @@
-import * as Common from "@frontend/common";
+import { Components } from "@frontend/common";
+import { useBackendAdminClient, useListQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { Add } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
@@ -23,11 +24,11 @@ type ListRowType = {
 };
 
 const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
-  { fallback: Common.Components.ErrorFallback },
+  { fallback: Components.ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ app, resource, hideCreatedAt, hideUpdatedAt, hideCreateNew }) => {
     const navigate = useNavigate();
-    const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-    const listQuery = Common.Hooks.BackendAdminAPI.useListQuery<ListRowType>(backendAdminClient, app, resource);
+    const backendAdminClient = useBackendAdminClient();
+    const listQuery = useListQuery<ListRowType>(backendAdminClient, app, resource);
 
     return (
       <Stack sx={{ flexGrow: 1, width: "100%", minHeight: "100%" }}>

apps/pyconkr-admin/src/components/pages/account/account.tsx

@@ -1,14 +1,15 @@
-import * as Common from "@frontend/common";
+import { Components } from "@frontend/common";
+import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import * as React from "react";
 import { Navigate } from "react-router-dom";
 
 export const AccountRedirectPage: React.FC = ErrorBoundary.with(
-  { fallback: Common.Components.ErrorFallback },
+  { fallback: Components.ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
-    const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-    const { data } = Common.Hooks.BackendAdminAPI.useSignedInUserQuery(backendAdminAPIClient);
+    const backendAdminAPIClient = useBackendAdminClient();
+    const { data } = useSignedInUserQuery(backendAdminAPIClient);
 
     return data ? <Navigate to="/account/manage" replace /> : <Navigate to="/account/sign-in" replace />;
   })

apps/pyconkr-admin/src/components/pages/account/manage.tsx

@@ -1,4 +1,6 @@
-import * as Common from "@frontend/common";
+import { useBackendAdminClient, useChangePasswordMutation, useSignOutMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { getFormValue, isFormValid } from "@frontend/common/src/utils";
+import { me } from "@frontend/common/src/apis/admin_api";
 import { Logout } from "@mui/icons-material";
 import { Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
 import * as React from "react";
@@ -16,9 +18,9 @@ export const AccountManagementPage: React.FC = () => {
   const changePasswordFormRef = React.useRef<HTMLFormElement>(null);
   const [pageState, setPageState] = React.useState<{ tab: number }>({ tab: 0 });
   const navigate = useNavigate();
-  const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-  const signOutMutation = Common.Hooks.BackendAdminAPI.useSignOutMutation(backendAdminAPIClient);
-  const changePasswordMutation = Common.Hooks.BackendAdminAPI.useChangePasswordMutation(backendAdminAPIClient);
+  const backendAdminAPIClient = useBackendAdminClient();
+  const signOutMutation = useSignOutMutation(backendAdminAPIClient);
+  const changePasswordMutation = useChangePasswordMutation(backendAdminAPIClient);
 
   const setTab = (_: React.SyntheticEvent, tab: number) => setPageState((ps) => ({ ...ps, tab }));
 
@@ -37,12 +39,12 @@ export const AccountManagementPage: React.FC = () => {
     event.stopPropagation();
 
     const form = changePasswordFormRef.current;
-    if (!Common.Utils.isFormValid(form)) {
+    if (!isFormValid(form)) {
       addSnackbar("폼에 오류가 있습니다. 다시 확인해주세요.", "error");
       return;
     }
 
-    const formData = Common.Utils.getFormValue<ChangePasswordFormType>({ form });
+    const formData = getFormValue<ChangePasswordFormType>({ form });
     if (formData.new_password !== formData.new_password_confirm) {
       addSnackbar("새 비밀번호와 확인 비밀번호가 일치하지 않습니다.", "error");
       return;
@@ -59,7 +61,7 @@ export const AccountManagementPage: React.FC = () => {
 
   React.useEffect(() => {
     (async () => {
-      const userInfo = await Common.BackendAdminAPIs.me(backendAdminAPIClient)();
+      const userInfo = await me(backendAdminAPIClient)();
       if (!userInfo) {
         addSnackbar("로그아웃 상태입니다!", "error");
         navigate("/");

apps/pyconkr-admin/src/components/pages/account/sign_in.tsx

@@ -1,4 +1,6 @@
-import * as Common from "@frontend/common";
+import { useBackendAdminClient, useSignInMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { getFormValue } from "@frontend/common/src/utils";
+import { me } from "@frontend/common/src/apis/admin_api";
 import { Login } from "@mui/icons-material";
 import { Button, Stack, TextField, Typography } from "@mui/material";
 import * as React from "react";
@@ -16,14 +18,14 @@ export const SignInPage: React.FC = () => {
   const [pageState, setPageState] = React.useState<PageStateType>({ userJustSignedIn: false });
   const setUserJustSignedIn = () => setPageState((ps) => ({ ...ps, userJustSignedIn: true }));
 
-  const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-  const signInMutation = Common.Hooks.BackendAdminAPI.useSignInMutation(backendAdminAPIClient);
+  const backendAdminAPIClient = useBackendAdminClient();
+  const signInMutation = useSignInMutation(backendAdminAPIClient);
 
   const handleSignIn = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!formRef.current) return;
 
-    const formData = Common.Utils.getFormValue<{
+    const formData = getFormValue<{
       identity: string;
       password: string;
     }>({ form: formRef.current });
@@ -41,7 +43,7 @@ export const SignInPage: React.FC = () => {
     (async () => {
       if (pageState.userJustSignedIn) return;
 
-      const userInfo = await Common.BackendAdminAPIs.me(backendAdminAPIClient)();
+      const userInfo = await me(backendAdminAPIClient)();
       if (userInfo) {
         addSnackbar(`이미 ${userInfo.username}님으로 로그인되어 있습니다!`, "success");
         navigate("/");

apps/pyconkr-admin/src/components/pages/file/upload.tsx

@@ -1,4 +1,4 @@
-import * as Common from "@frontend/common";
+import { useBackendAdminClient, useUploadPublicFileMutation } from "@frontend/common/src/hooks/useAdminAPI";
 import { CloudUpload, PermMedia } from "@mui/icons-material";
 import { Box, Button, Input, Stack, Typography } from "@mui/material";
 import * as React from "react";
@@ -25,8 +25,8 @@ const InnerPublicFileUploadPage: React.FC = () => {
   });
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const fileDragBoxRef = React.useRef<HTMLDivElement>(null);
-  const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
-  const uploadPublicFileMutation = Common.Hooks.BackendAdminAPI.useUploadPublicFileMutation(backendAdminClient);
+  const backendAdminClient = useBackendAdminClient();
+  const uploadPublicFileMutation = useUploadPublicFileMutation(backendAdminClient);
 
   const forceRerender = React.useCallback(
     () =>