new framwork

client/src/hooks/useScreen.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { useMediaQuery } from '@chakra-ui/react';
+
+interface Props {
+  defaultIsPc?: boolean;
+}
+
+export function useScreen(data?: Props) {
+  const { defaultIsPc = false } = data || {};
+  const [isPc] = useMediaQuery('(min-width: 900px)', {
+    ssr: true,
+    fallback: defaultIsPc
+  });
+
+  return {
+    isPc,
+    mediaLgMd: useMemo(() => (isPc ? 'lg' : 'md'), [isPc]),
+    mediaMdSm: useMemo(() => (isPc ? 'md' : 'sm'), [isPc]),
+    media: (pc: any, phone: any) => (isPc ? pc : phone)
+  };
+}