diff --git a/.gitignore b/.gitignore
index ff66e8b..a7fa7cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
+.yarn
# local env files
.env*.local
diff --git a/.yarnrc.yml b/.yarnrc.yml
new file mode 100644
index 0000000..3186f3f
--- /dev/null
+++ b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/components/Room.tsx b/components/Room.tsx
index 7b08726..1e61ea7 100644
--- a/components/Room.tsx
+++ b/components/Room.tsx
@@ -1,26 +1,49 @@
-import Image from "next/image";
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { useMediaQuery } from '@react-hook/media-query';
-export default function Room() {
- return (
- //
+const Room = () => {
+ const [isClient, setIsClient] = useState(false);
+ const isLargeScreen = useMediaQuery('(min-width: 1000px)');
+
+ useEffect(() => {
+ setIsClient(true);
+ }, []);
+
+ if (!isClient) {
+ return null;
+ }
+
+ return (
+
+ {isLargeScreen && (
+
+
+
+ )}
+
- );
-}
+
+