+
+ );
+}
+
+export default Puzzle;
diff --git a/src/interactions/v2l/PuzzlePiece.jsx b/src/interactions/v2l/PuzzlePiece.jsx
new file mode 100644
index 00000000..d39656fb
--- /dev/null
+++ b/src/interactions/v2l/PuzzlePiece.jsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { LINEAR } from "./constants.js";
+
+function PuzzlePiece({ shape, onClick, fixRotate }) {
+ const [fixing, setFixing] = useState(false);
+ const style = {
+ transform: `rotate( ${shape.rotate * 90}deg)`,
+ };
+
+ return (
+
+ 
+
+
+
+
+ {piece.map((shape, i) => {
+ const onClick = () => {
+ setPiece((board) => {
+ const newBoard = [...board];
+ newBoard[i] = board[i].rotated();
+ return newBoard;
+ });
+ interactCallback?.();
+ };
+ const fixRotate = () => {
+ setPiece((board) => {
+ const newBoard = [...board];
+ newBoard[i] = board[i].fixedRotated();
+ return newBoard;
+ });
+ };
+
+ return (
+
+
+
+
+
+ 
+ 
+
+ {
+ onClick();
+ setFixing(false);
+ }}
+ onTransitionEnd={() => {
+ if (shape.rotate < 4) return;
+ setFixing(true);
+ fixRotate();
+ }}
+ >
+
+
+ );
+}
+
+export default PuzzlePiece;
diff --git a/src/interactions/v2l/assets/car@1x.png b/src/interactions/v2l/assets/car@1x.png
new file mode 100644
index 00000000..a77bd9d6
Binary files /dev/null and b/src/interactions/v2l/assets/car@1x.png differ
diff --git a/src/interactions/v2l/assets/car@2x.png b/src/interactions/v2l/assets/car@2x.png
new file mode 100644
index 00000000..4c5e1cbe
Binary files /dev/null and b/src/interactions/v2l/assets/car@2x.png differ
diff --git a/src/interactions/v2l/assets/pan.svg b/src/interactions/v2l/assets/pan.svg
new file mode 100644
index 00000000..11e59e12
--- /dev/null
+++ b/src/interactions/v2l/assets/pan.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/interactions/v2l/assets/panContainer@1x.png b/src/interactions/v2l/assets/panContainer@1x.png
new file mode 100644
index 00000000..03161d31
Binary files /dev/null and b/src/interactions/v2l/assets/panContainer@1x.png differ
diff --git a/src/interactions/v2l/assets/panContainer@2x.png b/src/interactions/v2l/assets/panContainer@2x.png
new file mode 100644
index 00000000..37c0d434
Binary files /dev/null and b/src/interactions/v2l/assets/panContainer@2x.png differ
diff --git a/src/interactions/v2l/constants.js b/src/interactions/v2l/constants.js
new file mode 100644
index 00000000..cd3e19d6
--- /dev/null
+++ b/src/interactions/v2l/constants.js
@@ -0,0 +1,3 @@
+export const LINEAR = Symbol("linear");
+export const CURVED = Symbol("curved");
+export const ANY = Symbol("any");
diff --git a/src/interactions/v2l/generateRandom.js b/src/interactions/v2l/generateRandom.js
new file mode 100644
index 00000000..ee81fa60
--- /dev/null
+++ b/src/interactions/v2l/generateRandom.js
@@ -0,0 +1,124 @@
+import { generatePiece, generateAnswer } from "./utils.js";
+
+const dir = [
+ [1, 0],
+ [0, 1],
+ [-1, 0],
+ [0, -1],
+];
+
+function randInt(min, max) {
+ return Math.floor(Math.random() * (max - min)) + min;
+}
+
+function generateRandomPath(width, height) {
+ let traced = Array.from({ length: width }, () =>
+ new Array(height).fill(false),
+ );
+ const stack = [];
+ let cursor = [0, 0];
+
+ function getNextCursorHubo([x, y]) {
+ return dir
+ .map(([dx, dy]) => [x + dx, y + dy])
+ .filter(([tx, ty]) => {
+ if (tx < 0 || ty < 0) return false;
+ if (tx >= width || ty >= height) return false;
+ if (traced[tx][ty]) return false;
+ return true;
+ });
+ }
+
+ while (cursor[0] !== width - 1 || cursor[1] !== height - 1) {
+ traced[cursor[0]][cursor[1]] = true;
+ let hubo = getNextCursorHubo(cursor);
+ // backtracking
+ if (hubo.length === 0) {
+ while (stack.length > 0) {
+ let backtrackedCursor = stack[stack.length - 1];
+ hubo = getNextCursorHubo(backtrackedCursor);
+ if (hubo.length !== 0) break;
+ stack.pop();
+ }
+ } else stack.push(cursor);
+ cursor = hubo[randInt(0, hubo.length)];
+ }
+ stack.push(cursor);
+
+ return stack;
+}
+
+function getDirection(base, target) {
+ let dx = target[0] - base[0];
+ let dy = target[1] - base[1];
+
+ if (dx === 0 && dy === 1) return 0b0001; // down
+ if (dx === 1 && dy === 0) return 0b0010; // right
+ if (dx === -1 && dy === 0) return 0b0100; // left
+ if (dx === 0 && dy === -1) return 0b1000; // up
+ return 0b0000;
+}
+
+// ─│┌┐┘└
+function getShapeChar(before, after) {
+ const code = before | after;
+ switch (code) {
+ case 0b1100:
+ return "┘";
+ case 0b1010:
+ return "└";
+ case 0b1001:
+ return "│";
+ case 0b0110:
+ return "─";
+ case 0b0101:
+ return "┐";
+ case 0b0011:
+ return "┌";
+ default:
+ return ".";
+ }
+}
+
+function generateRandomPuzzle() {
+ const WIDTH = 3;
+ const HEIGHT = 3;
+ const path = generateRandomPath(WIDTH, HEIGHT);
+
+ // path에 대한 길 shape를 생성
+ const shapes = [getShapeChar(0b0100, getDirection(path[0], path[1]))];
+ for (let i = 1; i < path.length - 1; i++) {
+ const before = getDirection(path[i], path[i - 1]);
+ const after = getDirection(path[i], path[i + 1]);
+ shapes.push(getShapeChar(before, after));
+ }
+ shapes.push(
+ getShapeChar(
+ getDirection(path[path.length - 1], path[path.length - 2]),
+ 0b0010,
+ ),
+ );
+
+ // shape 리스트를 3x3 그리드에 맞도록 재배열
+
+ const shapeBoard = new Array(WIDTH * HEIGHT).fill(".");
+ path.forEach(([x, y], i) => {
+ shapeBoard[y * HEIGHT + x] = shapes[i];
+ });
+
+ const answer = generateAnswer(shapeBoard.join(""));
+ const board = generatePiece(
+ shapeBoard
+ .map((c) => {
+ if (c !== ".") return c;
+ if (Math.random() > 0.5) return "─";
+ return "┘";
+ })
+ .join(""),
+ );
+ board.forEach((piece) => (piece.rotate = randInt(0, 4)));
+
+ return [answer, board];
+}
+
+export default generateRandomPuzzle;
diff --git a/src/interactions/v2l/index.jsx b/src/interactions/v2l/index.jsx
new file mode 100644
index 00000000..e7fce19b
--- /dev/null
+++ b/src/interactions/v2l/index.jsx
@@ -0,0 +1,25 @@
+import ClientOnly from "@/common/ClientOnly.jsx";
+import InteractionDescription from "../InteractionDescription.jsx";
+import Puzzle from "./Puzzle.jsx";
+import style from "./style.module.css";
+//import PuzzleSkeleton from "./PuzzleSkeleton.jsx";
+
+function V2LInteraction({ interactCallback, $ref }) {
+ return (
+
+ 스켈레톤 그릴 예정
}>
+