...

src/app/layout.tsx

@@ -4,8 +4,6 @@ import "./globals.css";
 import type { Viewport } from 'next'
 import Link from "next/link";
 import Image from "next/image";
-import { ModalStackContainer } from "rc-modal-sheet";
-import { motion } from "motion/react";
 
 export const viewport: Viewport = {
   width: 'device-width',

src/app/word-board/WordBoard.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { BOARD_WIDTH, TEXT_WIDTH, BOARD_HEIGHT, TEXT_SIZE } from "@/constants";
+import { BOARD_WIDTH, TEXT_WIDTH, BOARD_HEIGHT, TEXT_SIZE } from "@/config/word-board-config";
 import { Word } from "@/interfaces";
-import { Dispatch, SetStateAction, useEffect } from "react";
+import { Dispatch, SetStateAction } from "react";
 
 export default function WordBoard(
-    { words, setWords, selectWord }: {
+    { words, selectWord }: {
         words: [
             {
                 word: string,

src/app/word-board/page.tsx

@@ -3,7 +3,7 @@ import WordBoard from "@/app/word-board/WordBoard";
 import Button from "../../components/Button";
 import { KeyboardEvent, useRef, useState } from "react";
 import { Word } from "@/interfaces";
-import { BOARD_WIDTH, TEXT_WIDTH, BOARD_HEIGHT, TEXT_SIZE } from "@/constants";
+import { BOARD_WIDTH, TEXT_WIDTH, BOARD_HEIGHT, TEXT_SIZE } from "@/config/word-board-config";
 import { inspect } from "@/utils";
 
 export default function Home() {

src/config/word-board-config.ts

@@ -0,0 +1,4 @@
+export const BOARD_WIDTH = window.innerWidth * 0.68;
+export const BOARD_HEIGHT = window.innerHeight * 0.68;
+export const TEXT_SIZE = 30;
+export const TEXT_WIDTH = TEXT_SIZE * 0.6;

src/constants.ts

@@ -1,4 +0,0 @@
-export const BOARD_WIDTH = 800;
-export const BOARD_HEIGHT = 500;
-export const TEXT_SIZE = 30;
-export const TEXT_WIDTH = TEXT_SIZE * 0.6;