From bac505fa99f46b787e350249e8511021f250751b Mon Sep 17 00:00:00 2001
From: jwkim <jwkim@o2o.kr>
Date: Wed, 17 Jun 2026 15:38:20 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EB=8B=89=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comments.tsx | 21 ++++++++++++++++++++-
 frontend/src/lib/api.ts              | 13 +++++++++++++
 frontend/src/lib/i18n.ts             |  3 +++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Comments.tsx b/frontend/src/components/Comments.tsx
index e624741..fb1b40f 100644
--- a/frontend/src/components/Comments.tsx
+++ b/frontend/src/components/Comments.tsx
@@ -5,6 +5,7 @@ import {
   listComments,
   postComment,
   getSessionNickname,
+  rerollSessionNickname,
   getDeviceId,
   ApiError,
 } from "@/lib/api";
@@ -81,6 +82,15 @@ export default function Comments({
     }
   }
 
+  async function reroll() {
+    try {
+      const n = await rerollSessionNickname(matchId);
+      setNickname(n);
+    } catch {
+      /* 무시 */
+    }
+  }
+
   async function submit() {
     const text = body.trim();
     if (posting || !text) return;
@@ -118,9 +128,18 @@ export default function Comments({
       {/* 입력 */}
       <div className="mt-3 space-y-2">
         {nickname && (
-          <p className="text-[12px] font-bold text-white/45">
+          <p className="flex items-center gap-1.5 text-[12px] font-bold text-white/45">
             ⚽ {t.commentAs}{" "}
             <span className="text-[var(--green)]">{nickname}</span>
+            <button
+              type="button"
+              onClick={reroll}
+              title={t.commentReroll}
+              aria-label={t.commentReroll}
+              className="grid h-5 w-5 place-items-center rounded-full text-[13px] leading-none text-white/45 transition hover:text-white active:rotate-180"
+            >
+              ↻
+            </button>
           </p>
         )}
         <div className="flex items-end gap-2">
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index b72b2ac..dad01d8 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -115,6 +115,19 @@ export async function getSessionNickname(matchId: string): Promise<string> {
   return nickname;
 }
 
+// 닉네임 새로 뽑기 — 서버에서 새 닉 받아 세션 캐시 갱신
+export async function rerollSessionNickname(matchId: string): Promise<string> {
+  const { nickname } = await http<{ nickname: string }>(
+    `/matches/${matchId}/comments/nickname`,
+  );
+  try {
+    sessionStorage.setItem(SESSION_NICK_KEY, nickname);
+  } catch {
+    /* noop */
+  }
+  return nickname;
+}
+
 // 방문 기록 (하루 1기기 1회 집계). 실패는 무시(fire-and-forget).
 export function recordVisit(): void {
   void http(`/visit`, {
diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts
index e0296b1..571bd99 100644
--- a/frontend/src/lib/i18n.ts
+++ b/frontend/src/lib/i18n.ts
@@ -103,6 +103,7 @@ type Dict = {
   commentsCount: (n: number) => string;
   commentPh: string;
   commentAs: string;
+  commentReroll: string;
   commentSubmit: string;
   commentMore: string;
   commentCollapse: string;
@@ -185,6 +186,7 @@ export const DICT: Record<Lang, Dict> = {
     commentsCount: (n) => `총 ${n}개`,
     commentPh: "응원 한마디 남기기...",
     commentAs: "이번 닉네임",
+    commentReroll: "닉네임 새로 뽑기",
     commentSubmit: "등록",
     commentMore: "댓글 더보기",
     commentCollapse: "접기",
@@ -265,6 +267,7 @@ export const DICT: Record<Lang, Dict> = {
     commentsCount: (n) => `${n} total`,
     commentPh: "Leave a comment...",
     commentAs: "Your name",
+    commentReroll: "Get a new name",
     commentSubmit: "Post",
     commentMore: "Show more",
     commentCollapse: "Collapse",