feat: 11-DiceRoller 과제 구현(조인영)

11-DiceRoller/join0life/DiceController.tsx

@@ -0,0 +1,31 @@
+type DiceControllerProps = {
+  diceCount: number;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onRoll: () => void;
+};
+
+export default function DiceController({
+  diceCount,
+  onChange,
+  onRoll,
+}: DiceControllerProps) {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onRoll();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="dice-controller">
+      <label htmlFor="dice-count">Number of Dice</label>
+      <input
+        type="number"
+        min="1"
+        max="12"
+        placeholder="1에서 12사이의 숫자를 입력하세요."
+        value={diceCount}
+        onChange={onChange}
+      />
+      <button type="submit">Roll</button>
+    </form>
+  );
+}

11-DiceRoller/join0life/DiceRoller.css

@@ -0,0 +1,22 @@
+.dice-roller {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.dice-controller {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.dices {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+.dice {
+  font-size: 5rem;
+}

11-DiceRoller/join0life/DiceRoller.tsx

@@ -0,0 +1,33 @@
+import DiceController from "./DiceController";
+import Dices from "./Dices";
+import "./DiceRoller.css";
+import { useState } from "react";
+
+export default function DiceRoller() {
+  const [inputCount, setInputCount] = useState<number>(1);
+  const [dices, setDices] = useState<number[]>([]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputCount(value === "" ? 1 : Number(value));
+  };
+
+  const handleRoll = () => {
+    const randomDices = Array.from({ length: inputCount }, () =>
+      Math.floor(Math.random() * 6),
+    );
+
+    setDices(randomDices);
+  };
+
+  return (
+    <div className="dice-roller">
+      <DiceController
+        diceCount={inputCount}
+        onChange={handleInputChange}
+        onRoll={handleRoll}
+      />
+      <Dices dices={dices} />
+    </div>
+  );
+}

11-DiceRoller/join0life/Dices.tsx

@@ -0,0 +1,19 @@
+type DicesProps = {
+  dices: number[];
+};
+
+const RANDOM_DICES = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"];
+
+export default function Dices({ dices }: DicesProps) {
+  return (
+    <div className="dices">
+      {dices.map((dice, index) => (
+        <Dice key={index} value={dice} />
+      ))}
+    </div>
+  );
+}
+
+export function Dice({ value }: { value: number }) {
+  return <div className="dice">{RANDOM_DICES[value]}</div>;
+}