OTHELLO-75: 置けるマスにホバーした際に石を薄く表示するようにした

src/components/PlayGround/elements/Board/Board.tsx

@@ -26,6 +26,7 @@ const Board: React.FC = () => {
               fieldId={index}
               content={content}
               isSelectable={selectableFields.includes(index)}
+              currentColor={players.active.color}
               update={selectableFields.includes(index) ? update : undefined}
               showMessage={showMessage}
             />

src/components/PlayGround/elements/Board/DummyStone.tsx

@@ -0,0 +1,19 @@
+import { COLOR_CODE } from "@models/Board/Color";
+
+type Props = {
+  color: COLOR_CODE;
+  size?: string;
+};
+
+const Stone: React.FC<Props> = (props) => {
+  const color: string = props.color === COLOR_CODE.WHITE ? "bg-slate-50/60" : "bg-slate-900/40";
+  const size = props.size ?? "h-5/6 w-5/6";
+
+  return (
+    <div
+      className={`rounded-full shadow-[2px_2px_1px_#bebebe] ${color} ${size} animate-flip-in`}
+    />
+  );
+};
+
+export default Stone;

src/components/PlayGround/elements/Board/Field.tsx

@@ -1,12 +1,14 @@
 import { FieldId } from "@models/Board/Board";
 import { COLOR_CODE } from "@models/Board/Color";
 import Stone from "./Stone";
-import { memo } from "react";
+import { memo, useState } from "react";
+import DummyStone from "./DummyStone";
 
 type Props = {
   fieldId: FieldId;
   content: COLOR_CODE;
   isSelectable: boolean;
+  currentColor: COLOR_CODE;
   update?: (fieldId: FieldId) => void;
   showMessage: (message: string) => void;
 };
@@ -15,13 +17,16 @@ const style =
   "bg-slate-200 rounded-sm shadow-x2s flex items-center justify-center box-content";
 
 // eslintに怒られるため名前付き関数に変更している
-const Field: React.FC<Props> = memo(function field(props) {
+const Field: React.FC<Props> = memo(function Field(props) {
+  const [hover, setHover] = useState(false);
   return props.isSelectable ? (
     <button
       className={style}
       onClick={() => !!props.update && props.update(props.fieldId)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
     >
-      {props.content ? <Stone color={props.content} /> : null}
+      {props.content ? <Stone color={props.content} /> : hover ? <DummyStone color={props.currentColor} /> : null}
     </button>
   ) : (
     <div