From b1fc44a9e627560c2f2315d709d59acc4cb3886a Mon Sep 17 00:00:00 2001
From: Honghyeonji <hyeonji8436@gmail.com>
Date: Tue, 25 Mar 2025 15:36:01 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20width=20=EB=B8=8C=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=BB=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/pages/HomePage/HomePage.tsx   |  3 ++-
 .../common/WidthBreaker/WidthBreaker.tsx      | 19 +++++++++++++++++++
 apps/client/src/widgets/index.ts              |  2 ++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/widgets/common/WidthBreaker/WidthBreaker.tsx

diff --git a/apps/client/src/pages/HomePage/HomePage.tsx b/apps/client/src/pages/HomePage/HomePage.tsx
index 2f7a462..42b4ab9 100644
--- a/apps/client/src/pages/HomePage/HomePage.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/apps/client/src/widgets/common/WidthBreaker/WidthBreaker.tsx b/apps/client/src/widgets/common/WidthBreaker/WidthBreaker.tsx
new file mode 100644
index 0000000..53ab9dc
--- /dev/null
+++ b/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>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
diff --git a/apps/client/src/widgets/index.ts b/apps/client/src/widgets/index.ts
index b4ddcd0..6e6781c 100644
--- a/apps/client/src/widgets/index.ts
+++ b/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';