✨ feat: width 브레이커 추가 (#43)

Author: Honghyeonji

apps/client/src/pages/HomePage/HomePage.tsx

@@ -1,4 +1,4 @@
-import { Banner, HomeHeader, WorkspaceModal, WorkspaceSection } from '@/widgets';
+import { Banner, HomeHeader, WidthBreaker, WorkspaceModal, WorkspaceSection } from '@/widgets';
 import { useClassBlockStore, useLoadingStore, useWorkspaceStore } from '@/shared/store';
 
 import { Loading } from '@/shared/ui';
@@ -29,6 +29,7 @@ export const HomePage = () => {
         <WorkspaceSection />
         <WorkspaceModal />
       </div>
+      <WidthBreaker />
     </>
   );
 };

apps/client/src/widgets/common/WidthBreaker/WidthBreaker.tsx

@@ -0,0 +1,19 @@
+import { useWindowSize } from '@/shared/hooks';
+
+export const WidthBreaker = () => {
+  const { screenWidth } = useWindowSize();
+
+  return (
+    <>
+      {screenWidth < 1230 ? (
+        <div className="fixed inset-0 z-50 flex h-full w-full items-center justify-center bg-gray-50/70 backdrop-blur-sm">
+          <span className="text-bold-lg text-gray-950">
+            PC 환경(너비 1230px 이상)에서만 접근 가능한 서비스입니다.
+          </span>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};

apps/client/src/widgets/index.ts

@@ -18,3 +18,5 @@ export { CssPropsSelectBox } from './workspace/css/CssPropsSelectBox/CssPropsSel
 export { CssOptionItemList } from './workspace/css/CssOptionItemList/CssOptionItemList';
 export { CssPropsSelectBoxHeader } from './workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader';
 export { ImageTagModal } from './workspace/ImageTagModal/ImageTagModal';
+
+export { WidthBreaker } from './common/WidthBreaker/WidthBreaker';