[modify] V2L 인터랙션 button으로 변경, 적절한 라벨 추가

softeerbootcamp4th · Aug 20, 2024 · 45a2150 · 45a2150
1 parent d8c7060
commit 45a2150
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/src/mainPage/features/interactions/subsidy/index.jsx b/src/mainPage/features/interactions/subsidy/index.jsx
@@ -52,7 +52,7 @@ function SubsidyInteraction({ interactCallback, $ref }) {
       />
       <div className="absolute z-0 w-96 h-96 top-[calc(50%-12rem)] flex justify-center items-center">
         <button
-          className="absolute size-[120px] active:scale-90 transition-transform"
+          className="absolute size-[120px] active:scale-90 rounded-full outline-yellow-400 transition-transform"
           aria-label="Space바를 눌러서 동전을 클릭하고, 예상 금액을 올려보세요!"
           onClick={onClick}
         >

diff --git a/src/mainPage/features/interactions/v2l/Puzzle.jsx b/src/mainPage/features/interactions/v2l/Puzzle.jsx
@@ -73,13 +73,15 @@ function Puzzle({ interactCallback, $ref }) {
               return newBoard;
             });
           };
+          const label = `퍼즐 조각 (${i%3}, ${Math.floor(i/3)}). ${shape.getLabel()}`;
 
           return (
             <PuzzlePiece
               shape={shape}
               key={`puzzle-${i}`}
               onClick={onClick}
               fixRotate={fixRotate}
+              ariaLabel={label}
             />
           );
         })}

diff --git a/src/mainPage/features/interactions/v2l/PuzzlePiece.jsx b/src/mainPage/features/interactions/v2l/PuzzlePiece.jsx
@@ -1,14 +1,14 @@
 import { useState } from "react";
 import { LINEAR } from "./constants.js";
 
-function PuzzlePiece({ shape, onClick, fixRotate }) {
+function PuzzlePiece({ shape, onClick, fixRotate, ariaLabel }) {
   const [fixing, setFixing] = useState(false);
   const style = {
     transform: `rotate( ${shape.rotate * 90}deg)`,
   };
 
   return (
-    <div
+    <button
       style={style}
       className={`size-28 bg-black rounded-xl border-2 border-white transition-transform ease-out ${fixing ? "duration-0" : "duration-500"}`}
       onClick={() => {
@@ -21,6 +21,7 @@ function PuzzlePiece({ shape, onClick, fixRotate }) {
         fixRotate();
         setTimeout(() => setFixing(false), 60);
       }}
+      aria-label={ariaLabel}
     >
       <svg
         className="size-full stroke-blue-300 fill-transparent"
@@ -29,7 +30,7 @@ function PuzzlePiece({ shape, onClick, fixRotate }) {
       >
         <path d={shape.type === LINEAR ? "M 0 54 H 108" : "M108 54 H 54 V 108"} strokeWidth="8" />
       </svg>
-    </div>
+    </button>
   );
 }
 

diff --git a/src/mainPage/features/interactions/v2l/utils.js b/src/mainPage/features/interactions/v2l/utils.js
@@ -47,6 +47,21 @@ class PieceData {
     newPiece.rotate = this.rotate % 4;
     return newPiece;
   }
+  getLabel() {
+    if(this.type === LINEAR) {
+      if(this.rotate % 2) return "위에서 아래로 이어짐.";
+      else return "왼쪽에서 오른쪽으로 이어짐.";
+    }
+    else if(this.type === CURVED) {
+      switch(this.rotate % 4) {
+        case 0: return "오른쪽에서 아래로 이어짐.";
+        case 1: return "왼쪽에서 아래로 이어짐.";
+        case 2: return "왼쪽에서 위로 이어짐.";
+        case 3: return "오른쪽에서 위로 이어짐.";
+      }
+    }
+    else return "알 수 없는 모양."
+  }
 }
 
 export function generatePiece(shapeString) {