From d15f23db4be8a3cf09b3575b3884f7778fcc80ca Mon Sep 17 00:00:00 2001
From: Inyoung Cho <cupshop123@gmail.com>
Date: Fri, 24 Jul 2026 16:05:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 11-DiceRoller/join0life/DiceController.tsx | 31 ++++++++++++++++++++++
 11-DiceRoller/join0life/DiceRoller.css     | 25 +++++++++++++++++
 11-DiceRoller/join0life/DiceRoller.tsx     | 24 +++++++++++++++++
 11-DiceRoller/join0life/Dices.tsx          | 17 ++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 11-DiceRoller/join0life/DiceController.tsx
 create mode 100644 11-DiceRoller/join0life/DiceRoller.css
 create mode 100644 11-DiceRoller/join0life/DiceRoller.tsx
 create mode 100644 11-DiceRoller/join0life/Dices.tsx

diff --git a/11-DiceRoller/join0life/DiceController.tsx b/11-DiceRoller/join0life/DiceController.tsx
new file mode 100644
index 0000000..a4e2662
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/11-DiceRoller/join0life/DiceRoller.css b/11-DiceRoller/join0life/DiceRoller.css
new file mode 100644
index 0000000..99cbde9
--- /dev/null
+++ b/11-DiceRoller/join0life/DiceRoller.css
@@ -0,0 +1,25 @@
+.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 {
+  border: 1px solid #111;
+  border-radius: 0.5rem;
+  width: 50px;
+  height: 50px;
+}
diff --git a/11-DiceRoller/join0life/DiceRoller.tsx b/11-DiceRoller/join0life/DiceRoller.tsx
new file mode 100644
index 0000000..ed56276
--- /dev/null
+++ b/11-DiceRoller/join0life/DiceRoller.tsx
@@ -0,0 +1,24 @@
+import DiceController from "./DiceController";
+import Dices from "./Dices";
+import "./DiceRoller.css";
+import { useState } from "react";
+
+export default function DiceRoller() {
+  const [diceCount, setDiceCount] = useState<number>(1);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setDiceCount(value === "" ? 1 : Number(value));
+  };
+
+  return (
+    <div className="dice-roller">
+      <DiceController
+        diceCount={diceCount}
+        onChange={handleInputChange}
+        // onRoll={}
+      />
+      <Dices diceCount={diceCount} />
+    </div>
+  );
+}
diff --git a/11-DiceRoller/join0life/Dices.tsx b/11-DiceRoller/join0life/Dices.tsx
new file mode 100644
index 0000000..fbaca1e
--- /dev/null
+++ b/11-DiceRoller/join0life/Dices.tsx
@@ -0,0 +1,17 @@
+type DicesProps = {
+  diceCount: number;
+};
+
+export default function Dices({ diceCount }: DicesProps) {
+  return (
+    <div className="dices">
+      {Array.from({ length: diceCount }, (_, index) => (
+        <Dice key={index} />
+      ))}
+    </div>
+  );
+}
+
+export function Dice() {
+  return <div className="dice"></div>;
+}

From 663627eca09706bf6d87a84ddd563609dd8917c7 Mon Sep 17 00:00:00 2001
From: Inyoung Cho <cupshop123@gmail.com>
Date: Fri, 24 Jul 2026 17:02:38 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20DiceRoller=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 11-DiceRoller/join0life/DiceRoller.css |  5 +----
 11-DiceRoller/join0life/DiceRoller.tsx | 19 ++++++++++++++-----
 11-DiceRoller/join0life/Dices.tsx      | 14 ++++++++------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/11-DiceRoller/join0life/DiceRoller.css b/11-DiceRoller/join0life/DiceRoller.css
index 99cbde9..6e66186 100644
--- a/11-DiceRoller/join0life/DiceRoller.css
+++ b/11-DiceRoller/join0life/DiceRoller.css
@@ -18,8 +18,5 @@
 }
 
 .dice {
-  border: 1px solid #111;
-  border-radius: 0.5rem;
-  width: 50px;
-  height: 50px;
+  font-size: 5rem;
 }
diff --git a/11-DiceRoller/join0life/DiceRoller.tsx b/11-DiceRoller/join0life/DiceRoller.tsx
index ed56276..8b36836 100644
--- a/11-DiceRoller/join0life/DiceRoller.tsx
+++ b/11-DiceRoller/join0life/DiceRoller.tsx
@@ -4,21 +4,30 @@ import "./DiceRoller.css";
 import { useState } from "react";
 
 export default function DiceRoller() {
-  const [diceCount, setDiceCount] = useState<number>(1);
+  const [inputCount, setInputCount] = useState<number>(1);
+  const [dices, setDices] = useState<number[]>([]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
-    setDiceCount(value === "" ? 1 : Number(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={diceCount}
+        diceCount={inputCount}
         onChange={handleInputChange}
-        // onRoll={}
+        onRoll={handleRoll}
       />
-      <Dices diceCount={diceCount} />
+      <Dices dices={dices} />
     </div>
   );
 }
diff --git a/11-DiceRoller/join0life/Dices.tsx b/11-DiceRoller/join0life/Dices.tsx
index fbaca1e..9846c3b 100644
--- a/11-DiceRoller/join0life/Dices.tsx
+++ b/11-DiceRoller/join0life/Dices.tsx
@@ -1,17 +1,19 @@
 type DicesProps = {
-  diceCount: number;
+  dices: number[];
 };
 
-export default function Dices({ diceCount }: DicesProps) {
+const RANDOM_DICES = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"];
+
+export default function Dices({ dices }: DicesProps) {
   return (
     <div className="dices">
-      {Array.from({ length: diceCount }, (_, index) => (
-        <Dice key={index} />
+      {dices.map((dice, index) => (
+        <Dice key={index} value={dice} />
       ))}
     </div>
   );
 }
 
-export function Dice() {
-  return <div className="dice"></div>;
+export function Dice({ value }: { value: number }) {
+  return <div className="dice">{RANDOM_DICES[value]}</div>;
 }