diff --git a/front-end/src/components/Modal/index.tsx b/front-end/src/components/Modal/index.tsx
index c1778de..498e744 100644
--- a/front-end/src/components/Modal/index.tsx
+++ b/front-end/src/components/Modal/index.tsx
@@ -48,7 +48,16 @@ const Modal = forwardRef(
)}
- {type === 'rank' &&
[{title}]
}
+ {type === 'rank' && (
+
+
+ [{title}]
+
+
+
+ )}
{children}
diff --git a/front-end/src/components/Tetris/Board/index.tsx b/front-end/src/components/Tetris/Board/index.tsx
index a9e5c4f..c24da72 100644
--- a/front-end/src/components/Tetris/Board/index.tsx
+++ b/front-end/src/components/Tetris/Board/index.tsx
@@ -328,8 +328,10 @@ const moves = {
posY: prev.posY + 1,
}),
[TETRIS.KEY.TURN_RIGHT]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), true),
- [TETRIS.KEY.TURN_LEFT]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), false),
- [TETRIS.KEY.HOLD]: (prev: TetrisBlock) => prev,
+ [TETRIS.KEY.TURN_LEFT_ENG]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), false),
+ [TETRIS.KEY.TURN_LEFT_KR]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), false),
+ [TETRIS.KEY.HOLD_ENG]: (prev: TetrisBlock) => prev,
+ [TETRIS.KEY.HOLD_KR]: (prev: TetrisBlock) => prev,
[TETRIS.KEY.HARD_DROP]: (prev: TetrisBlock) => prev,
};
@@ -599,13 +601,16 @@ const Board = ({
let downInterval: NodeJS.Timeout;
const keyDownEventHandler = (event: KeyboardEvent) => {
- event.preventDefault();
+ const focus = document.activeElement;
+ if(focus === document.querySelector('.chat__input')) return;
+
if (!moves[event.key]) return;
BLOCK.NEXT = moves[event.key](BLOCK.NOW);
switch (event.key) {
// 방향 키 이벤트(왼쪽, 오른쪽, 아래)
case TETRIS.KEY.LEFT:
+ event.preventDefault();
if (!STATE.KEYDOWN_LEFT) {
if (STATE.KEYDOWN_RIGHT) {
// 오른쪽이 계속 눌리고 있다면
@@ -627,6 +632,7 @@ const Board = ({
moveBlock(BOARD, BLOCK, BACKGROUND, socket);
break;
case TETRIS.KEY.RIGHT:
+ event.preventDefault();
if (!STATE.KEYDOWN_RIGHT) {
if (STATE.KEYDOWN_LEFT) {
// 왼쪽이 계속 눌리고 있다면
@@ -647,6 +653,7 @@ const Board = ({
moveBlock(BOARD, BLOCK, BACKGROUND, socket);
break;
case TETRIS.KEY.DOWN:
+ event.preventDefault();
if (!STATE.KEYDOWN_DOWN) {
STATE.KEYDOWN_DOWN = true;
downInterval = setInterval(() => {
@@ -657,19 +664,22 @@ const Board = ({
break;
// 회전 키 이벤트(위, z)
case TETRIS.KEY.TURN_RIGHT:
+ event.preventDefault();
if (STATE.KEYDOWN_TURN_RIGHT) return;
STATE.KEYDOWN_TURN_RIGHT = true;
BLOCK.NEXT = SRSAlgorithm(BOARD, BLOCK, event.key);
moveBlock(BOARD, BLOCK, BACKGROUND, socket);
break;
- case TETRIS.KEY.TURN_LEFT:
+ case TETRIS.KEY.TURN_LEFT_ENG:
+ case TETRIS.KEY.TURN_LEFT_KR:
if (STATE.KEYDOWN_TURN_LEFT) return;
STATE.KEYDOWN_TURN_LEFT = true;
BLOCK.NEXT = SRSAlgorithm(BOARD, BLOCK, event.key);
moveBlock(BOARD, BLOCK, BACKGROUND, socket);
break;
// 홀드 키(c)
- case TETRIS.KEY.HOLD:
+ case TETRIS.KEY.HOLD_ENG:
+ case TETRIS.KEY.HOLD_KR:
if (STATE.CAN_HOLD) {
STATE.CAN_HOLD = false;
holdBlock(BOARD, BLOCK, STATE, PROPS_FUNC, BACKGROUND, socket);
@@ -738,7 +748,7 @@ const Board = ({
case TETRIS.KEY.TURN_RIGHT:
STATE.KEYDOWN_TURN_RIGHT = false;
break;
- case TETRIS.KEY.TURN_LEFT:
+ case TETRIS.KEY.TURN_LEFT_ENG:
STATE.KEYDOWN_TURN_LEFT = false;
break;
case TETRIS.KEY.HARD_DROP:
diff --git a/front-end/src/constants/tetris.ts b/front-end/src/constants/tetris.ts
index b25c352..208ffbc 100644
--- a/front-end/src/constants/tetris.ts
+++ b/front-end/src/constants/tetris.ts
@@ -71,8 +71,10 @@ export const KEY = {
RIGHT: 'ArrowRight',
DOWN: 'ArrowDown',
TURN_RIGHT: 'ArrowUp',
- TURN_LEFT: 'z',
- HOLD: 'c',
+ TURN_LEFT_ENG: 'z',
+ TURN_LEFT_KR: 'ㅋ',
+ HOLD_ENG: 'c',
+ HOLD_KR: 'ㅊ',
HARD_DROP: ' ',
};
diff --git a/front-end/src/pages/GamePage/index.tsx b/front-end/src/pages/GamePage/index.tsx
index fb9517f..ccd0ffb 100644
--- a/front-end/src/pages/GamePage/index.tsx
+++ b/front-end/src/pages/GamePage/index.tsx
@@ -46,7 +46,6 @@ function GamePage() {
const chatInputRef = useRef();
const containerRef = useRef();
- const [isGameStarted, setIsGameStarted] = useState(false);
const [gameStart, setgameStart] = useState(false);
const [gameOver, setGameOver] = useState(true);
const [holdBlock, setHoldBlock] = useState(null);
@@ -56,8 +55,6 @@ function GamePage() {
const modalRef = useRef();
const [rank, setRankState] = useState();
- let rankIdx = 1;
-
const handleRankModal = () => {
modalRef.current.open();
};
@@ -91,6 +88,7 @@ function GamePage() {
sendMessage();
}
};
+
const sendMessage = () => {
if (chatInputRef.current.value.length) {
socketClient.current.emit('send message', {
@@ -212,7 +210,8 @@ function GamePage() {
gameOver={gameOver}
endGame={() => endGame(socketClient.current)}
getHoldBlockState={getHoldBlock}
- getPreviewBlocksList={getPreviewBlocks} />
+ getPreviewBlocksList={getPreviewBlocks}
+ />
{profile.nickname}
diff --git a/front-end/src/pages/GamePage/style.scss b/front-end/src/pages/GamePage/style.scss
index e17f213..367acc2 100644
--- a/front-end/src/pages/GamePage/style.scss
+++ b/front-end/src/pages/GamePage/style.scss
@@ -96,5 +96,12 @@
color: #1C2137;
}
}
+
+ & .close__btn {
+ cursor: pointer;
+ left: 140px;
+ top: -13px;
+ position: relative;
+ }
}
}
\ No newline at end of file