From 61751bb6e5a45b8a2f74148cc5b63f5a477cda96 Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 13:53:17 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix(ui):=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=EA=B3=BC=20=EB=B0=A9=20=ED=8E=B8=EC=A7=91=20=EC=B9=98=EC=88=98?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ui/EditRoomFormModal.module.css    | 34 ++++++++++---------
 .../hooks/useProfileSettingsForm.test.tsx     |  2 +-
 .../settings/model/profileSettingsLimits.ts   |  2 +-
 .../settings/ui/ProfileSettingsTab.test.tsx   |  6 ++--
 .../ui/components/ProfileSettingsForm.tsx     |  2 +-
 .../profile/ui/UserProfileContent.module.css  | 13 +++++--
 .../profile/ui/UserProfileContent.test.tsx    |  4 +++
 .../user/profile/ui/UserProfileContent.tsx    |  5 ++-
 8 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/features/room/create/ui/EditRoomFormModal.module.css b/src/features/room/create/ui/EditRoomFormModal.module.css
index 331e7eba..f674cbc3 100644
--- a/src/features/room/create/ui/EditRoomFormModal.module.css
+++ b/src/features/room/create/ui/EditRoomFormModal.module.css
@@ -5,13 +5,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: 24px 16px;
   background: rgba(255, 255, 255, 0.86);
 }
 
 .modal {
+  --edit-room-control-height: 56px;
+
   position: relative;
-  width: min(816px, 100%);
+  width: min(688px, 100%);
   height: min(1236px, calc(100dvh - 48px));
   min-height: min(720px, calc(100dvh - 48px));
   overflow: hidden;
@@ -171,7 +173,7 @@
 .select,
 .participationInput {
   width: 100%;
-  height: 56px;
+  height: var(--edit-room-control-height);
   box-sizing: border-box;
   border: 1px solid #d9d9d9;
   border-radius: 10px;
@@ -368,8 +370,8 @@
   top: 0;
   right: 0;
   display: inline-flex;
-  width: 56px;
-  height: 56px;
+  width: var(--edit-room-control-height);
+  height: var(--edit-room-control-height);
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -476,7 +478,7 @@
 .footerButton {
   display: inline-flex;
   width: 100%;
-  height: 68px;
+  height: var(--edit-room-control-height);
   align-items: center;
   justify-content: center;
   border: 1px solid #242424;
@@ -535,6 +537,8 @@
   }
 
   .modal {
+    --edit-room-control-height: 52px;
+
     width: 100%;
     height: calc(100dvh - 24px);
     min-height: 0;
@@ -570,7 +574,6 @@
   .titleInput,
   .select,
   .participationInput {
-    height: 52px;
     font-size: 16px;
   }
 
@@ -599,8 +602,8 @@
   }
 
   .participationToggle {
-    width: 52px;
-    height: 52px;
+    width: var(--edit-room-control-height);
+    height: var(--edit-room-control-height);
   }
 
   .formFooter {
@@ -608,18 +611,19 @@
   }
 
   .footerButton {
-    height: 56px;
     font-size: 16px;
   }
 }
 
 @media (min-width: 481px) and (max-width: 1600px) and (max-height: 900px) {
   .overlay {
-    padding: 19.2px;
+    padding: 19.2px 16px;
   }
 
   .modal {
-    width: min(652.8px, 100%);
+    --edit-room-control-height: 44.8px;
+
+    width: min(550.4px, 100%);
     height: min(988.8px, calc(100dvh - 38.4px));
     min-height: min(576px, calc(100dvh - 38.4px));
     border-radius: 12.8px;
@@ -671,7 +675,6 @@
   .titleInput,
   .select,
   .participationInput {
-    height: 44.8px;
     border-radius: 8px;
     font-size: 13.6px;
   }
@@ -728,8 +731,8 @@
   }
 
   .participationToggle {
-    width: 44.8px;
-    height: 44.8px;
+    width: var(--edit-room-control-height);
+    height: var(--edit-room-control-height);
     border-radius: 0 8px 8px 0;
   }
 
@@ -756,7 +759,6 @@
   }
 
   .footerButton {
-    height: 54.4px;
     font-size: 14.4px;
   }
 }
diff --git a/src/features/settings/hooks/useProfileSettingsForm.test.tsx b/src/features/settings/hooks/useProfileSettingsForm.test.tsx
index ecace896..bef1b2dd 100644
--- a/src/features/settings/hooks/useProfileSettingsForm.test.tsx
+++ b/src/features/settings/hooks/useProfileSettingsForm.test.tsx
@@ -145,7 +145,7 @@ describe("프로필 통합 저장 폼", () => {
     expect(result.current.canUpdateProfile).toBe(false);
   });
 
-  it("줄바꿈을 제거하고 20자로 제한한다", () => {
+  it("줄바꿈을 제거하고 최애곡 최대 길이로 제한한다", () => {
     const { result } = renderProfileForm();
 
     act(() =>
diff --git a/src/features/settings/model/profileSettingsLimits.ts b/src/features/settings/model/profileSettingsLimits.ts
index 7ddb98d1..45ce1446 100644
--- a/src/features/settings/model/profileSettingsLimits.ts
+++ b/src/features/settings/model/profileSettingsLimits.ts
@@ -1,3 +1,3 @@
-export const STATUS_MESSAGE_MAX_LENGTH = 20;
+export const STATUS_MESSAGE_MAX_LENGTH = 40;
 export const NICKNAME_MIN_LENGTH = 2;
 export const NICKNAME_MAX_LENGTH = 19;
diff --git a/src/features/settings/ui/ProfileSettingsTab.test.tsx b/src/features/settings/ui/ProfileSettingsTab.test.tsx
index 303e94b0..0c707226 100644
--- a/src/features/settings/ui/ProfileSettingsTab.test.tsx
+++ b/src/features/settings/ui/ProfileSettingsTab.test.tsx
@@ -23,7 +23,7 @@ vi.mock("@/src/features/badge/hooks/useSetRepresentativeBadge", () => ({
   useSetRepresentativeBadge: vi.fn(),
 }));
 vi.mock("../hooks/useProfileSettingsForm", () => ({
-  STATUS_MESSAGE_MAX_LENGTH: 20,
+  STATUS_MESSAGE_MAX_LENGTH: 40,
   useProfileSettingsForm: vi.fn(),
 }));
 vi.mock("@/src/shared/ui/action-feedback/ActionFeedbackProvider", () => ({
@@ -184,9 +184,9 @@ describe("설정 칭호 목록", () => {
     expect(screen.getByText("2/19")).toBeInTheDocument();
     expect(screen.getByLabelText("최애곡")).toHaveAttribute(
       "maxlength",
-      "20",
+      "40",
     );
-    expect(screen.getByText("2/20")).toBeInTheDocument();
+    expect(screen.getByText("2/40")).toBeInTheDocument();
   });
 
   it("획득한 칭호를 선택하면 badgeCode만 대표 칭호 mutation에 전달한다", async () => {
diff --git a/src/features/settings/ui/components/ProfileSettingsForm.tsx b/src/features/settings/ui/components/ProfileSettingsForm.tsx
index a1cce393..df3b9cdc 100644
--- a/src/features/settings/ui/components/ProfileSettingsForm.tsx
+++ b/src/features/settings/ui/components/ProfileSettingsForm.tsx
@@ -152,7 +152,7 @@ export default function ProfileSettingsForm({
           </span>
         </div>
         <span id="settings-status-message-hint" className={styles.srOnly}>
-          최대 20자, 빈 문자열로 저장하면 삭제됩니다.
+          최대 {STATUS_MESSAGE_MAX_LENGTH}자, 빈 문자열로 저장하면 삭제됩니다.
         </span>
         <span id="settings-status-message-error" className={styles.srOnly}>
           최애곡 입력을 확인해 주세요.
diff --git a/src/features/user/profile/ui/UserProfileContent.module.css b/src/features/user/profile/ui/UserProfileContent.module.css
index 28926270..284fa22b 100644
--- a/src/features/user/profile/ui/UserProfileContent.module.css
+++ b/src/features/user/profile/ui/UserProfileContent.module.css
@@ -67,8 +67,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.name[data-line-clamp="2"],
-.statusCardValue[data-line-clamp="2"] {
+.name[data-line-clamp="2"] {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -122,8 +121,16 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.statusCardValue[data-line-clamp="2"] {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
 .favoriteSongValueSlot {
-  height: 1lh;
+  min-height: 1lh;
+}
+.favoriteSongValueSlot[data-line-clamp="2"] {
+  min-height: 2lh;
 }
 .musicPowerRow {
   min-width: 0;
diff --git a/src/features/user/profile/ui/UserProfileContent.test.tsx b/src/features/user/profile/ui/UserProfileContent.test.tsx
index ab94f1e8..4e8473fb 100644
--- a/src/features/user/profile/ui/UserProfileContent.test.tsx
+++ b/src/features/user/profile/ui/UserProfileContent.test.tsx
@@ -34,6 +34,10 @@ describe("UserProfileContent", () => {
       "첫 번째 줄을 채우고 두 번째 줄까지 이어지는 최애곡",
     );
     expect(favoriteSongValue).toHaveAttribute("data-line-clamp", "2");
+    expect(favoriteSongValue.parentElement).toHaveAttribute(
+      "data-line-clamp",
+      "2",
+    );
     expect(favoriteSongValue.parentElement?.parentElement).toBe(
       screen.getByText("최애곡").parentElement,
     );
diff --git a/src/features/user/profile/ui/UserProfileContent.tsx b/src/features/user/profile/ui/UserProfileContent.tsx
index da21b865..040243b8 100644
--- a/src/features/user/profile/ui/UserProfileContent.tsx
+++ b/src/features/user/profile/ui/UserProfileContent.tsx
@@ -128,7 +128,10 @@ export default function UserProfileContent({
         <div className={styles.statsColumn}>
           <div className={styles.card}>
             <div className={styles.cardTitle}>최애곡</div>
-            <div className={`${styles.cardValue} ${styles.favoriteSongValueSlot}`}>
+            <div
+              className={`${styles.cardValue} ${styles.favoriteSongValueSlot}`}
+              data-line-clamp={textLineClamp}
+            >
               <div
                 className={styles.statusCardValue}
                 data-line-clamp={textLineClamp}

From 65064a78a5a7ff65d82633d51d6c8ec65c55ec08 Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 13:53:30 +0900
Subject: [PATCH 2/7] =?UTF-8?q?fix(playlist):=20=EB=85=B8=EB=9E=98=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=20=EB=AC=B8=EA=B5=AC=EC=99=80=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useAddTrackAction.test.tsx          |  4 +--
 .../add-track/hooks/useAddTrackAction.ts      |  2 +-
 .../add-track/ui/AddTrackFormFields.test.tsx  | 13 +++++++++-
 .../add-track/ui/AddTrackFormFields.tsx       |  4 +--
 .../add-track/ui/AddTrackModal.module.css     | 25 ++++++++++++++-----
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/features/playlist/add-track/hooks/useAddTrackAction.test.tsx b/src/features/playlist/add-track/hooks/useAddTrackAction.test.tsx
index 7d547d1f..7cf28903 100644
--- a/src/features/playlist/add-track/hooks/useAddTrackAction.test.tsx
+++ b/src/features/playlist/add-track/hooks/useAddTrackAction.test.tsx
@@ -184,11 +184,11 @@ describe("useAddTrackAction", () => {
 
     expect(mocks.setError).toHaveBeenCalledWith(
       "story",
-      "사연은 30자 이하로 입력해주세요.",
+      "노래 선정 이유는 30자 이하로 입력해주세요.",
     );
     expect(mocks.notify).toHaveBeenCalledWith({
       dedupeKey: "add-track:room:story",
-      message: "사연은 30자 이하로 입력해주세요.",
+      message: "노래 선정 이유는 30자 이하로 입력해주세요.",
       tone: "error",
     });
   });
diff --git a/src/features/playlist/add-track/hooks/useAddTrackAction.ts b/src/features/playlist/add-track/hooks/useAddTrackAction.ts
index 4b95fc49..58bbef87 100644
--- a/src/features/playlist/add-track/hooks/useAddTrackAction.ts
+++ b/src/features/playlist/add-track/hooks/useAddTrackAction.ts
@@ -193,7 +193,7 @@ export function useAddTrackAction(slug: string, roomAccessToken: string) {
 
     const story = form.storyValue.trim();
     if (story.length > ADD_TRACK_STORY_MAX_LENGTH) {
-      showError("story", "사연은 30자 이하로 입력해주세요.");
+      showError("story", "노래 선정 이유는 30자 이하로 입력해주세요.");
       return;
     }
 
diff --git a/src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx b/src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx
index 5e690f68..6cc0bc8f 100644
--- a/src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx
+++ b/src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx
@@ -19,6 +19,17 @@ function renderFields(errorField: "url" | "story") {
 }
 
 describe("AddTrackFormFields", () => {
+  it("신청 사연을 노래 선정 이유로 안내한다", () => {
+    renderFields("url");
+
+    expect(screen.getByText("노래 선정 이유 (선택)")).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText(
+        "이 노래를 선정한 이유나 전하고 싶은 말을 적어주세요",
+      ),
+    ).toBeInTheDocument();
+  });
+
   it("URL 오류를 URL 입력의 aria-invalid와 SR 설명에 연결한다", () => {
     renderFields("url");
 
@@ -33,7 +44,7 @@ describe("AddTrackFormFields", () => {
     renderFields("story");
 
     const textarea = screen.getByPlaceholderText(
-      "함께 듣고 싶은 이유나 전하고 싶은 말을 적어주세요",
+      "이 노래를 선정한 이유나 전하고 싶은 말을 적어주세요",
     );
     expect(textarea).toHaveAttribute("aria-invalid", "true");
     expect(textarea).toHaveAttribute("aria-describedby", "add-track-error");
diff --git a/src/features/playlist/add-track/ui/AddTrackFormFields.tsx b/src/features/playlist/add-track/ui/AddTrackFormFields.tsx
index 1874755a..8fa863b3 100644
--- a/src/features/playlist/add-track/ui/AddTrackFormFields.tsx
+++ b/src/features/playlist/add-track/ui/AddTrackFormFields.tsx
@@ -55,7 +55,7 @@ export default function AddTrackFormFields({
 
       <label className={styles.fieldGroup}>
         <div className={styles.labelRow}>
-          <span className={styles.label}>사연 (선택)</span>
+          <span className={styles.label}>노래 선정 이유 (선택)</span>
           <span className={styles.characterCount}>
             {storyLength}/{storyMaxLength}
           </span>
@@ -63,7 +63,7 @@ export default function AddTrackFormFields({
         <textarea
           value={storyValue}
           onChange={(event) => onStoryChange(event.target.value)}
-          placeholder="함께 듣고 싶은 이유나 전하고 싶은 말을 적어주세요"
+          placeholder="이 노래를 선정한 이유나 전하고 싶은 말을 적어주세요"
           className={styles.textarea}
           disabled={submitting}
           rows={4}
diff --git a/src/features/playlist/add-track/ui/AddTrackModal.module.css b/src/features/playlist/add-track/ui/AddTrackModal.module.css
index 8e2ac7e3..bbb23879 100644
--- a/src/features/playlist/add-track/ui/AddTrackModal.module.css
+++ b/src/features/playlist/add-track/ui/AddTrackModal.module.css
@@ -95,7 +95,7 @@
   border: 1px solid #d9d9d9;
   border-radius: 8px;
   color: #3c3c3c;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: var(--fw-medium);
   outline: none;
   transition:
@@ -172,20 +172,32 @@
 
 .actionButton {
   min-width: 83px;
-  padding: 0;
+  min-height: 40px;
+  padding: 0 18px;
   border: 0;
+  border-radius: 999px;
   background: transparent;
   color: #3c3c3c;
   font-size: 20px;
   font-weight: var(--fw-semibold);
   line-height: 1.4;
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease;
 }
 
-.actionButton:hover:not(:disabled) {
+.actionButton:hover:not(:disabled),
+.actionButton:focus-visible:not(:disabled) {
+  background: #f7f7f9;
   color: #555555;
 }
 
+.actionButton:focus-visible {
+  outline: 2px solid #8d8d8d;
+  outline-offset: 2px;
+}
+
 .submitButton {
   color: #d3d3d3;
 }
@@ -230,7 +242,7 @@
   .input {
     height: 64px;
     padding: 0 18px;
-    font-size: 19px;
+    font-size: 20px;
   }
 
   .textarea {
@@ -246,6 +258,7 @@
 
   .actionButton {
     min-width: 72px;
+    min-height: 44px;
     font-size: 22px;
   }
 }
@@ -259,9 +272,9 @@
   .fieldGroup + .fieldGroup { margin-top: 19.2px; }
   .label, .youtubeLink { font-size: 12.8px; }
   .characterCount { font-size: 11.2px; }
-  .input { height: 42.4px; padding: 11.2px 12.8px; font-size: 14.4px; }
+  .input { height: 42.4px; padding: 11.2px 12.8px; font-size: 12.8px; }
   .textarea { min-height: 89.6px; padding: 11.2px 12.8px; font-size: 12.8px; }
   .error { margin-top: 9.6px; font-size: 14.4px; }
   .actions { gap: 16px; padding-top: 32px; }
-  .actionButton { min-width: 66.4px; font-size: 16px; }
+  .actionButton { min-width: 66.4px; min-height: 32px; padding: 0 14.4px; font-size: 16px; }
 }

From 9c2d93058cc5e00a6b869a778bf7a0743bce90de Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 13:53:55 +0900
Subject: [PATCH 3/7] =?UTF-8?q?docs(delivery):=20UI=20=ED=9B=84=EC=86=8D?=
 =?UTF-8?q?=20=EA=B2=80=EC=A6=9D=20=EA=B8=B0=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api-contract.md                           |  6 ++
 .../change-summary.md                         |  8 +++
 .../delivery-state.md                         | 12 ++++
 .../handoff.md                                |  8 +++
 .../plan.md                                   | 55 +++++++++++++++++++
 .../qa-report.md                              | 23 ++++++++
 .../request-summary.md                        |  6 ++
 .../ui-flow.md                                |  8 +++
 docs/exec-plans/active/README.md              |  2 +
 9 files changed, 128 insertions(+)
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/api-contract.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/change-summary.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/request-summary.md
 create mode 100644 docs/exec-plans/active/2026-09-01-profile-room-request-polish/ui-flow.md

diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/api-contract.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/api-contract.md
new file mode 100644
index 00000000..1a9f1797
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/api-contract.md
@@ -0,0 +1,6 @@
+# API Contract
+
+- `PATCH /api/v1/user-profiles/me`의 기존 `statusMessage` 필드와 payload 형태를 그대로 사용한다.
+- 최애곡 입력은 줄바꿈을 공백으로 정규화한 뒤 최대 40자까지만 전송한다.
+- 방 수정과 노래 신청 endpoint, payload, cache invalidation에는 변경이 없다.
+- `https://api.queuing.cc`의 일반적인 OpenAPI/Swagger 공개 경로는 2026-09-01 확인 시 모두 404였다. 따라서 새 서버 최대 길이를 추정해 타입을 바꾸지 않고, 기존 255자 프런트 계약보다 보수적인 40자 제한만 적용한다.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/change-summary.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/change-summary.md
new file mode 100644
index 00000000..b05837e0
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/change-summary.md
@@ -0,0 +1,8 @@
+# Change Summary
+
+- 최애곡 상한을 40자로 늘리고 접근성 안내와 카운터를 같은 상수로 통일했다.
+- 방·친구 공개 프로필의 두 줄 최애곡 경로에서 말줄임을 제거하고 최소 두 줄 공간을 확보했다.
+- 방 편집 모달을 방 본문 셸과 같은 688px/550.4px 너비로 맞췄다.
+- 방 편집 select·참여 제한·footer 액션이 density별 하나의 높이 변수를 공유하도록 정리했다.
+- 노래 신청의 사연 문구와 검증 오류를 `노래 선정 이유`로 바꾸고 하단 액션에 pill hover/focus 배경을 추가했다.
+- YouTube URL input 글자 크기를 normal/mobile/compact 각각의 label 크기와 맞췄다.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
new file mode 100644
index 00000000..1206ed6a
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
@@ -0,0 +1,12 @@
+# Delivery State
+
+- status: publishing
+- branch: dev
+- base: main
+- issue:
+- pr: https://github.com/Queuing-org/frontend/pull/58
+- selected_skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, browser:control-in-app-browser
+- local_qa: targeted 6 files/44 tests, lint, 152 files/650 tests, build, diff-check, fresh review passed
+- ci: pending publication
+- review_threads: not checked yet
+- next_action: verify GitHub authentication, push dev, update Draft PR #58 metadata
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
new file mode 100644
index 00000000..d4577554
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
@@ -0,0 +1,8 @@
+# Handoff
+
+- Branch: `dev`
+- Draft PR: #58
+- Implementation, targeted tests, full lint/test/build, diff-check, fresh read-only QA are complete.
+- Browser visual QA remains because no browser instance was available.
+- Feature slices are committed locally.
+- Next action: verify GitHub authentication, push `dev`, and update Draft PR #58 metadata if authentication permits.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
new file mode 100644
index 00000000..cc90f6a5
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
@@ -0,0 +1,55 @@
+# 프로필·방 편집·노래 신청 UI 후속 정리
+
+## Scope
+
+- 설정 최애곡 입력 상한을 20자에서 40자로 늘리고 공개 프로필에서 말줄임 없이 여러 줄로 표시한다.
+- 방 편집 모달 너비를 방 내부 메인 컨테이너 너비와 맞춘다.
+- 방 편집 하단 삭제·완료 버튼 높이를 같은 화면의 드롭다운 높이와 맞춘다.
+- 노래 신청의 `사연 (선택)` 문구를 `노래 선정 이유 (선택)`로 변경하고 하단 액션에 pill hover/focus 배경을 적용한다.
+- YouTube URL 입력 글자 크기를 같은 필드의 라벨 크기와 맞춘다.
+- `dev`에 커밋·푸시하고 기존 Draft PR #58에 포함한다.
+
+## Selected Skills
+
+- `queuing-feature-delivery`
+- `queuing-orchestrator`
+- `queuing-api-boundary`
+- `queuing-ui-flow`
+- `frontend-architecture-guardrails`
+- `queuing-qa-reviewer`
+
+## Ownership Decisions
+
+- 최애곡 입력 상한과 저장 전 정규화는 기존 settings form model/hook이 계속 소유한다.
+- 프로필 줄바꿈은 공유 `UserProfileContent`가 소유해 방·친구 프로필에 동일하게 적용한다.
+- 방 편집 치수는 `EditRoomFormModal.module.css`에서 방 메인 셸의 normal/compact 치수와 동일하게 관리한다.
+- 노래 신청 문구와 입력/액션 표현은 add-track UI와 CSS module에서만 변경한다.
+
+## Commit Slices
+
+1. `fix(ui): 프로필과 방 편집 치수를 정리`
+2. `fix(playlist): 노래 신청 문구와 입력 스타일 정리`
+3. `docs(delivery): UI 후속 검증 기록`
+
+## Acceptance Criteria
+
+- 최애곡은 최대 40자까지 입력·저장 payload에 유지되고 카운터와 접근성 설명도 40자를 안내한다.
+- 두 줄 프로필에서 최애곡은 말줄임표 없이 자연스럽게 줄바꿈되고 최소 두 줄 높이를 확보한다.
+- 방 편집 모달은 normal 688px, compact 550.4px이며 좁은 화면에서는 기존 반응형 제한을 유지한다.
+- 방 편집 삭제·완료 버튼은 normal 56px, compact 44.8px, mobile 52px로 같은 화면의 select 높이와 일치한다.
+- 노래 신청 이유 문구, pill hover/focus, URL 입력·라벨 글자 크기가 회귀 테스트와 CSS 검토를 통과한다.
+- `npm run lint`, `npm run test`, `npm run build`, `git diff --check`, fresh read-only QA가 통과한다.
+
+## Progress
+
+- [x] 요청과 관련 경계 확인
+- [x] 구현 및 대상 테스트 보강
+- [x] 전체 로컬 검증
+- [x] Fresh read-only QA
+- [ ] `dev` 커밋·푸시 및 Draft PR #58 반영 확인
+
+## Residual Risk
+
+- 배포 API의 공개 OpenAPI 경로가 404라 `statusMessage`의 현재 서버 최대 길이는 문서로 재검증하지 못했다. 프런트엔드의 과거 계약은 255자였고 이번 전송 형태는 변경하지 않는다.
+- 실제 글자 폭은 언어와 글꼴에 따라 달라진다. 말줄임 대신 자연 줄바꿈을 사용해 제목 손실을 피한다.
+- in-app Browser에 연결 가능한 브라우저 인스턴스가 없어 실제 화면 스크린샷 QA는 수행하지 못했다.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
new file mode 100644
index 00000000..73332b73
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
@@ -0,0 +1,23 @@
+# QA Report
+
+## Automated Verification
+
+- targeted: 6 files / 44 tests passed
+- `npm run lint`: passed
+- `npm run test`: passed — 152 files / 650 tests
+- `npm run build`: passed
+- `git diff --check`: passed
+
+## Boundary Review
+
+- Fresh read-only reviewer: `pass`; blocking finding 없음.
+- `statusMessage` payload key와 update mutation/cache 흐름은 변경하지 않고 최대 길이 정규화만 40자로 확장했다.
+- 방 편집 modal normal/compact 너비는 방 메인 container 계산값과 일치한다.
+- select·참여 제한·footer 버튼은 `--edit-room-control-height`를 공유해 normal/mobile/compact cascade가 일치한다.
+- add-track API `story` key와 submit state는 유지하고 사용자 문구와 CSS interaction만 변경했다.
+- YouTube URL input과 label은 normal 16px, mobile 20px, compact 12.8px로 일치한다.
+
+## Residual Risk
+
+- 배포 API의 공개 OpenAPI/Swagger 경로가 404라 `statusMessage`의 실제 서버 상한은 통합 확인이 남아 있다. 과거 프런트 계약은 255자였고 이번 상한은 40자다.
+- in-app Browser에 사용 가능한 브라우저가 없어 computed layout과 실제 hover를 스크린샷으로 확인하지 못했다. CSS 소스·빌드·fresh review까지만 검증했다.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/request-summary.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/request-summary.md
new file mode 100644
index 00000000..cfac00a2
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/request-summary.md
@@ -0,0 +1,6 @@
+# Request Summary
+
+- 프로필 최애곡이 20자 제한과 한 줄 높이 때문에 충분히 보이지 않는 문제를 개선한다.
+- 방 편집창의 너비를 방 내부 컨테이너와 맞추고 하단 액션 높이를 드롭다운과 맞춘다.
+- 노래 신청 사연 문구를 노래 선정 이유로 바꾸고 hover 배경을 pill 형태로 만든다.
+- YouTube 링크 입력 글자 크기를 필드 라벨과 같게 만든다.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/ui-flow.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/ui-flow.md
new file mode 100644
index 00000000..c8ea6ed3
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/ui-flow.md
@@ -0,0 +1,8 @@
+# UI Flow
+
+- 설정 최애곡 input과 카운터는 40자를 기준으로 동작하고 기존 즉시 draft/완료 저장 흐름을 유지한다.
+- 방·친구 프로필의 최애곡은 공유 컴포넌트에서 말줄임 없이 줄바꿈하며 두 줄 분량의 기본 공간을 확보한다.
+- 방 편집 모달은 방 메인 셸의 normal/compact 너비를 따르고 mobile에서는 기존 viewport 여백을 유지한다.
+- 방 편집 footer 버튼은 각 density의 select 높이와 동일하다.
+- 노래 신청 모달은 필드 라벨을 `노래 선정 이유 (선택)`로 표시하고 취소·큐잉 액션에 hover/focus-visible pill 배경을 제공한다.
+- YouTube URL input은 normal/mobile/compact에서 각각 같은 화면의 label 글자 크기를 사용한다.
diff --git a/docs/exec-plans/active/README.md b/docs/exec-plans/active/README.md
index 4f33775a..c1d4b045 100644
--- a/docs/exec-plans/active/README.md
+++ b/docs/exec-plans/active/README.md
@@ -1,5 +1,7 @@
 # Active Execution Plans
 
+- [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): publishing — 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬 QA·fresh review 통과
+
 - [2026-09-01-automatic-replay-state](./2026-09-01-automatic-replay-state/plan.md): ci-pending — 자동 순환 상태를 59px 아이콘과 `100cqh` 기반 list viewport 중앙으로 교정하고 로컬 QA·fresh review 통과
 
 - [2026-09-01-settings-badge-tooltip](./2026-09-01-settings-badge-tooltip/plan.md): ci-pending — Draft PR #58에 설정 칭호 acquisitionRate 정규화와 접근성 리스트박스·획득 상세 portal tooltip 게시 완료

From 83d4df65a8894c173a9ceacf443ac8ca8ea79a61 Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 13:58:43 +0900
Subject: [PATCH 4/7] =?UTF-8?q?docs(delivery):=20UI=20=ED=9B=84=EC=86=8D?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=20=EC=83=81=ED=83=9C=20=EA=B0=B1=EC=8B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../delivery-state.md                                  | 10 +++++-----
 .../2026-09-01-profile-room-request-polish/handoff.md  |  7 ++++---
 .../2026-09-01-profile-room-request-polish/plan.md     |  8 ++++++--
 .../qa-report.md                                       |  5 +++++
 docs/exec-plans/active/README.md                       |  2 +-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
index 1206ed6a..93fdee28 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
@@ -1,12 +1,12 @@
 # Delivery State
 
-- status: publishing
+- status: ci-pending
 - branch: dev
 - base: main
 - issue:
-- pr: https://github.com/Queuing-org/frontend/pull/58
+- pr: https://github.com/Queuing-org/frontend/pull/59
 - selected_skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, browser:control-in-app-browser
 - local_qa: targeted 6 files/44 tests, lint, 152 files/650 tests, build, diff-check, fresh review passed
-- ci: pending publication
-- review_threads: not checked yet
-- next_action: verify GitHub authentication, push dev, update Draft PR #58 metadata
+- ci: pending
+- review_threads: none at publication
+- next_action: monitor Draft PR #59 checks and review feedback
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
index d4577554..c02c7d0f 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
@@ -1,8 +1,9 @@
 # Handoff
 
 - Branch: `dev`
-- Draft PR: #58
+- Draft PR: #59 — https://github.com/Queuing-org/frontend/pull/59
 - Implementation, targeted tests, full lint/test/build, diff-check, fresh read-only QA are complete.
 - Browser visual QA remains because no browser instance was available.
-- Feature slices are committed locally.
-- Next action: verify GitHub authentication, push `dev`, and update Draft PR #58 metadata if authentication permits.
+- Feature slices and verification documents are pushed to `dev`.
+- Existing PR #58 merged before the latest push, so its metadata was restored to the merged scope and the new commits were published in Draft PR #59.
+- Next action: monitor Draft PR #59 checks and review feedback.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
index cc90f6a5..bb485631 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
@@ -7,7 +7,7 @@
 - 방 편집 하단 삭제·완료 버튼 높이를 같은 화면의 드롭다운 높이와 맞춘다.
 - 노래 신청의 `사연 (선택)` 문구를 `노래 선정 이유 (선택)`로 변경하고 하단 액션에 pill hover/focus 배경을 적용한다.
 - YouTube URL 입력 글자 크기를 같은 필드의 라벨 크기와 맞춘다.
-- `dev`에 커밋·푸시하고 기존 Draft PR #58에 포함한다.
+- `dev`에 커밋·푸시한다. 게시 중 PR #58이 먼저 병합되어 이번 변경은 새 Draft PR #59로 전달한다.
 
 ## Selected Skills
 
@@ -46,10 +46,14 @@
 - [x] 구현 및 대상 테스트 보강
 - [x] 전체 로컬 검증
 - [x] Fresh read-only QA
-- [ ] `dev` 커밋·푸시 및 Draft PR #58 반영 확인
+- [x] `dev` 커밋·푸시 및 Draft PR #59 게시
 
 ## Residual Risk
 
 - 배포 API의 공개 OpenAPI 경로가 404라 `statusMessage`의 현재 서버 최대 길이는 문서로 재검증하지 못했다. 프런트엔드의 과거 계약은 255자였고 이번 전송 형태는 변경하지 않는다.
 - 실제 글자 폭은 언어와 글꼴에 따라 달라진다. 말줄임 대신 자연 줄바꿈을 사용해 제목 손실을 피한다.
 - in-app Browser에 연결 가능한 브라우저 인스턴스가 없어 실제 화면 스크린샷 QA는 수행하지 못했다.
+
+## Publication Note
+
+- 기존 PR #58은 이번 커밋 push 전에 병합되었다. 병합된 PR의 제목·본문은 원래 범위로 복구하고, `origin/main..dev`의 새 커밋 3개를 Draft PR #59로 게시했다.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
index 73332b73..1f0d2891 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
@@ -21,3 +21,8 @@
 
 - 배포 API의 공개 OpenAPI/Swagger 경로가 404라 `statusMessage`의 실제 서버 상한은 통합 확인이 남아 있다. 과거 프런트 계약은 255자였고 이번 상한은 40자다.
 - in-app Browser에 사용 가능한 브라우저가 없어 computed layout과 실제 hover를 스크린샷으로 확인하지 못했다. CSS 소스·빌드·fresh review까지만 검증했다.
+
+## Publication
+
+- `dev` push passed.
+- 기존 PR #58이 push 전에 병합되어 새 변경은 Draft PR #59로 게시했다.
diff --git a/docs/exec-plans/active/README.md b/docs/exec-plans/active/README.md
index c1d4b045..7569cdca 100644
--- a/docs/exec-plans/active/README.md
+++ b/docs/exec-plans/active/README.md
@@ -1,6 +1,6 @@
 # Active Execution Plans
 
-- [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): publishing — 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬 QA·fresh review 통과
+- [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): ci-pending — Draft PR #59, 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬 QA·fresh review 통과
 
 - [2026-09-01-automatic-replay-state](./2026-09-01-automatic-replay-state/plan.md): ci-pending — 자동 순환 상태를 59px 아이콘과 `100cqh` 기반 list viewport 중앙으로 교정하고 로컬 QA·fresh review 통과
 

From 22fc0bcd3248fe24f164ba6060c5068129d5d03a Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 14:02:21 +0900
Subject: [PATCH 5/7] =?UTF-8?q?docs(delivery):=20UI=20=ED=9B=84=EC=86=8D?=
 =?UTF-8?q?=20CI=20=EA=B2=B0=EA=B3=BC=20=EA=B8=B0=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../delivery-state.md                                       | 6 +++---
 .../2026-09-01-profile-room-request-polish/handoff.md       | 3 ++-
 .../2026-09-01-profile-room-request-polish/qa-report.md     | 1 +
 docs/exec-plans/active/README.md                            | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
index 93fdee28..c37e8ed7 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
@@ -1,12 +1,12 @@
 # Delivery State
 
-- status: ci-pending
+- status: ready
 - branch: dev
 - base: main
 - issue:
 - pr: https://github.com/Queuing-org/frontend/pull/59
 - selected_skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, browser:control-in-app-browser
 - local_qa: targeted 6 files/44 tests, lint, 152 files/650 tests, build, diff-check, fresh review passed
-- ci: pending
+- ci: GitHub Actions lint/test/build, Vercel, Vercel Preview Comments, CodeRabbit passed
 - review_threads: none at publication
-- next_action: monitor Draft PR #59 checks and review feedback
+- next_action: human review and optional authenticated browser pixel QA
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
index c02c7d0f..7a84ca42 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
@@ -6,4 +6,5 @@
 - Browser visual QA remains because no browser instance was available.
 - Feature slices and verification documents are pushed to `dev`.
 - Existing PR #58 merged before the latest push, so its metadata was restored to the merged scope and the new commits were published in Draft PR #59.
-- Next action: monitor Draft PR #59 checks and review feedback.
+- GitHub Actions lint/test/build, Vercel, Vercel Preview Comments, and CodeRabbit checks passed.
+- Next action: human review and optional authenticated browser pixel QA.
diff --git a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
index 1f0d2891..1e4e58c1 100644
--- a/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
+++ b/docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
@@ -26,3 +26,4 @@
 
 - `dev` push passed.
 - 기존 PR #58이 push 전에 병합되어 새 변경은 Draft PR #59로 게시했다.
+- Draft PR #59 checks passed: GitHub Actions lint/test/build, Vercel, Vercel Preview Comments, CodeRabbit.
diff --git a/docs/exec-plans/active/README.md b/docs/exec-plans/active/README.md
index 7569cdca..a7380f37 100644
--- a/docs/exec-plans/active/README.md
+++ b/docs/exec-plans/active/README.md
@@ -1,6 +1,6 @@
 # Active Execution Plans
 
-- [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): ci-pending — Draft PR #59, 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬 QA·fresh review 통과
+- [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): ready — Draft PR #59, 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬·CI QA 통과
 
 - [2026-09-01-automatic-replay-state](./2026-09-01-automatic-replay-state/plan.md): ci-pending — 자동 순환 상태를 59px 아이콘과 `100cqh` 기반 list viewport 중앙으로 교정하고 로컬 QA·fresh review 통과
 

From abd935514131ea9fe0f3d9f8a889c2183f1c836e Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 14:41:43 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat(room):=20=EC=B0=B8=EA=B0=80=EC=9E=90?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=EC=97=90=20=EB=82=B4=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=EC=99=80=20=EB=AA=A8=EB=8B=AC=20=EC=A7=84=EC=9E=85=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api-contract.md                           |   7 +
 .../change-summary.md                         |   6 +
 .../delivery-state.md                         |  12 +
 .../handoff.md                                |   7 +
 .../plan.md                                   |  57 +++++
 .../qa-report.md                              |  37 ++++
 .../ui-flow.md                                |  15 ++
 docs/exec-plans/active/README.md              |   2 +
 .../room/floating/ui/RoomFloatingWidgets.tsx  |   6 +
 .../page/hooks/useRoomRealtimeEvents.test.tsx |   9 +-
 .../room/page/hooks/useRoomRealtimeEvents.ts  |   7 +
 .../ui/RoomPlaybackJoinedContent.test.tsx     | 208 ++++++++++++++++++
 .../page/ui/RoomPlaybackJoinedContent.tsx     |  30 +++
 .../room/page/ui/RoomPlaybackScreen.test.tsx  |  81 ++++++-
 .../room/page/ui/RoomPlaybackScreen.tsx       |  15 +-
 .../model/participantIdentity.test.ts         |  84 +++++++
 .../participants/model/participantIdentity.ts |  47 ++++
 .../participants/ui/RoomParticipantCard.tsx   |  31 ++-
 .../ui/RoomParticipantList.test.tsx           |  66 ++++++
 .../participants/ui/RoomParticipantList.tsx   |  30 ++-
 .../ui/RoomParticipantsPanel.module.css       |  12 +
 .../ui/RoomParticipantsPanel.test.tsx         |   4 +
 .../participants/ui/RoomParticipantsPanel.tsx |   6 +
 .../ui/RoomSelfManagementMenu.tsx             |  55 +++++
 24 files changed, 818 insertions(+), 16 deletions(-)
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/api-contract.md
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/change-summary.md
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/qa-report.md
 create mode 100644 docs/exec-plans/active/2026-09-01-room-self-participant-menu/ui-flow.md
 create mode 100644 src/features/room/page/ui/RoomPlaybackJoinedContent.test.tsx
 create mode 100644 src/features/room/participants/ui/RoomSelfManagementMenu.tsx

diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/api-contract.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/api-contract.md
new file mode 100644
index 00000000..9cf849ee
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/api-contract.md
@@ -0,0 +1,7 @@
+# Participant Identity Contract
+
+- `ROOM_JOINED.data.participant` is the authoritative identity for the current room session.
+- Initial join and every reconnect join update the room screen's current participant state.
+- Cursor participant pages remain the server-state source for the list. The current joined participant is prepended only when neither its `participantId` nor non-null `userSlug` is present.
+- When a fetched page already contains the current user, the fetched participant object wins so refreshed nickname/profile fields are not replaced by stale join data.
+- Room access tokens remain excluded from URLs, logs, and query keys; this change adds no endpoint or payload mutation.
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/change-summary.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/change-summary.md
new file mode 100644
index 00000000..693ce153
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/change-summary.md
@@ -0,0 +1,6 @@
+# Change Summary
+
+- 내 참가자 행을 목록 첫 번째로 정렬하고 `(나)` 표시를 추가했다.
+- 내 더보기 메뉴에서 기존 Setting/Friends modal을 열도록 연결했다.
+- 최초 입장과 reconnect의 `ROOM_JOINED` participant identity를 보존해 cursor page 밖의 자기 행도 보장했다.
+- participant identity, virtual list/menu, mobile/desktop modal, room join/reconnect 회귀 테스트를 추가했다.
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
new file mode 100644
index 00000000..9442bd43
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
@@ -0,0 +1,12 @@
+# Delivery State
+
+- status: publishing
+- branch: dev
+- base: main
+- issue:
+- pr:
+- selected_skills: queuing-feature-delivery, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer
+- local_qa: lint, 660 tests, and production build passed; browser session unavailable
+- ci: not-started
+- review_threads: not-checked
+- next_action: push dev and open a draft PR to main
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
new file mode 100644
index 00000000..38ddbad6
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
@@ -0,0 +1,7 @@
+# Handoff
+
+- status: publishing
+- completed: implementation, targeted tests, lint, full tests, build, final fresh QA pass, local commit
+- blocker: none
+- next_action: push `dev`, create a draft PR from `dev` to `main`, then update this run to `ci-pending`
+- prohibited: do not force-push, merge, or mark the PR ready without explicit user request
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
new file mode 100644
index 00000000..508591f1
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
@@ -0,0 +1,57 @@
+# Room Self Participant Menu
+
+## Scope
+
+- 현재 로그인 사용자를 참가자 목록 첫 행으로 안정 정렬한다.
+- 내 닉네임 오른쪽, 방장 왕관 왼쪽에 `(나)`를 표시한다.
+- 내 참가자 행의 더보기 메뉴에서 기존 Settings/Friends modal을 연다.
+
+## Acceptance Criteria
+
+- 정렬은 query data를 변경하지 않고 나머지 참가자 순서를 보존한다.
+- `(나)`는 `#3c3c3c`이며 방장 행은 `닉네임 → (나) → 왕관` 순서다.
+- 내 행 메뉴는 `Setting`, `Friends`만 표시하고 hover, focus, Escape, outside-click 동작은 기존 참가자 메뉴와 같다.
+- 데스크톱 draggable panel과 모바일 참가자 탭 모두 같은 modal owner를 사용한다.
+- 다른 참가자의 관리 액션과 참가자 DOM 상한은 회귀하지 않는다.
+
+## Decisions
+
+- 사용자가 선택한 대로 내 행은 첫 번째 정렬만 적용하고 scroll sticky는 적용하지 않는다.
+- 현재 사용자는 `currentUser.slug`와 participant `userSlug`로 판별한다.
+- modal visibility는 `RoomPlaybackJoinedContent`의 local state가 소유한다.
+- 실제 `SettingsModal`, `FollowModal`은 draggable transform 밖에 렌더링한다.
+- 비로그인 guest에는 자기 표시와 로그인 전용 메뉴를 추가하지 않는다.
+
+## Selected Skills
+
+- `queuing-feature-delivery`
+- `queuing-api-boundary`
+- `queuing-ui-flow`
+- `frontend-architecture-guardrails`
+- `queuing-qa-reviewer`
+
+## Commit Plan
+
+1. `feat(room): 참가자 목록에 내 메뉴와 모달 진입 추가`
+
+## Progress
+
+- [x] request와 현재 component/modal ownership 확인
+- [x] implementation 및 component tests
+- [x] lint, test, build
+- [x] fresh QA review — final pass
+- [x] local commit
+- [ ] push, draft PR
+
+## Verification
+
+- `npm test -- src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx src/features/room/page/ui/RoomPlaybackScreen.test.tsx src/features/room/page/ui/RoomPlaybackJoinedContent.test.tsx src/features/room/participants/model/participantIdentity.test.ts src/features/room/participants/ui/RoomParticipantList.test.tsx src/features/room/participants/ui/RoomParticipantsPanel.test.tsx` — 6 files, 50 tests passed
+- `npm run lint` — passed
+- `npm run test` — 153 files, 660 tests passed
+- `npm run build` — passed
+- local browser smoke — browser session unavailable; component integration tests cover mobile/desktop modal ownership
+
+## Residual Risk
+
+- 실제 로그인 방의 시각 smoke는 사용할 수 있는 browser session이 없어 자동 수행하지 못했다.
+- modal close 후 원래 참가자 trigger로 focus를 복원하는 별도 계약은 기존 home modal에도 없어 이번 변경에서는 추가하지 않았다.
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/qa-report.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/qa-report.md
new file mode 100644
index 00000000..75866f28
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/qa-report.md
@@ -0,0 +1,37 @@
+# QA Report
+
+## Result
+
+- classification: pass
+- reviewer: fresh read-only agent after two targeted fix rounds
+- blocking findings: none
+
+## Findings Resolved
+
+1. 최초 참가자 cursor page에 현재 사용자가 없으면 자기 행이 사라지는 문제
+   - `ROOM_JOINED.data.participant`를 화면 state에 보존하고 page 결과에 identity 중복 없이 포함했다.
+   - 101명 방에서 현재 참가자가 첫 page 밖인 화면 회귀 테스트를 추가했다.
+2. reconnect `ROOM_JOINED`의 최신 참가자 객체를 버리는 문제
+   - `useRoomRealtimeEvents`가 최신 participant를 화면 callback으로 전달한다.
+   - 변경된 participantId와 nickname을 저장하는 reconnect 회귀 테스트를 추가했다.
+
+## Boundary Review
+
+- 현재 사용자는 첫 행 정렬만 적용하며 sticky row를 만들지 않는다.
+- `(나)` DOM 순서와 `#3c3c3c` 색상이 요청과 일치한다.
+- self menu는 `Setting`, `Friends`만 제공하고 기존 viewport portal/focus shell을 사용한다.
+- 기존 Settings/Friends modal을 draggable transform 밖의 room screen owner가 렌더링한다.
+- 다른 참가자 관리 액션과 virtual DOM 24개 상한을 유지한다.
+
+## Verification
+
+- targeted: 6 files, 50 tests passed
+- lint: passed
+- full test: 153 files, 660 tests passed
+- production build: passed
+- browser smoke: unavailable because no browser session was connected
+
+## Residual Risk
+
+- 실제 로그인 방과 작은 모바일 실기기의 시각 smoke가 남아 있다.
+- modal close 후 참가자 trigger focus 복원은 기존 home modal에도 없는 접근성 부채다.
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/ui-flow.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/ui-flow.md
new file mode 100644
index 00000000..d941a866
--- /dev/null
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/ui-flow.md
@@ -0,0 +1,15 @@
+# UI Flow
+
+1. 참가자 목록은 로그인한 현재 사용자 행을 첫 번째로 파생 정렬한다.
+2. 내 행 hover 또는 keyboard focus 시 기존과 같은 더보기 trigger가 나타난다.
+3. trigger를 열면 `Setting`, `Friends` menuitem만 표시된다.
+4. menuitem 선택은 menu를 닫고 방 화면의 단일 modal state를 갱신한다.
+5. 방 화면은 draggable widget 밖에서 기존 `SettingsModal` 또는 `FollowModal`을 렌더링한다.
+6. modal close는 room modal state를 `null`로 되돌린다.
+
+## Ownership
+
+- 정렬과 열린 참가자 menu: `RoomParticipantList`
+- 참가자 행 trigger와 self/member menu 선택: `RoomParticipantCard`
+- Settings/Friends modal visibility: `RoomPlaybackJoinedContent`
+- modal 내부 tab/form/follow state: 기존 modal component
diff --git a/docs/exec-plans/active/README.md b/docs/exec-plans/active/README.md
index a7380f37..6f1672e3 100644
--- a/docs/exec-plans/active/README.md
+++ b/docs/exec-plans/active/README.md
@@ -1,5 +1,7 @@
 # Active Execution Plans
 
+- [2026-09-01-room-self-participant-menu](./2026-09-01-room-self-participant-menu/plan.md): publishing — 내 참가자 첫 행·`(나)`·Settings/Friends modal과 reconnect identity QA 통과, draft PR 게시 중
+
 - [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): ready — Draft PR #59, 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬·CI QA 통과
 
 - [2026-09-01-automatic-replay-state](./2026-09-01-automatic-replay-state/plan.md): ci-pending — 자동 순환 상태를 59px 아이콘과 `100cqh` 기반 list viewport 중앙으로 교정하고 로컬 QA·fresh review 통과
diff --git a/src/features/room/floating/ui/RoomFloatingWidgets.tsx b/src/features/room/floating/ui/RoomFloatingWidgets.tsx
index 19e81aaf..ea59eca4 100644
--- a/src/features/room/floating/ui/RoomFloatingWidgets.tsx
+++ b/src/features/room/floating/ui/RoomFloatingWidgets.tsx
@@ -37,6 +37,8 @@ type Props = {
   isParticipantsLoadMoreError: boolean;
   onLoadMoreParticipants: () => Promise<unknown>;
   onChatLoginClick?: () => void;
+  onOpenFriends: () => void;
+  onOpenSettings: () => void;
   onUserBlocked: (userSlug: string) => void;
   onSendChatMessage: (message: string) => boolean;
   onActivateWidget: (widgetId: WidgetId) => void;
@@ -64,6 +66,8 @@ export default function RoomFloatingWidgets({
   isParticipantsLoadMoreError,
   onLoadMoreParticipants,
   onChatLoginClick,
+  onOpenFriends,
+  onOpenSettings,
   onUserBlocked,
   onSendChatMessage,
   onActivateWidget,
@@ -163,6 +167,8 @@ export default function RoomFloatingWidgets({
                   isFetchingNextPage={isFetchingNextParticipantsPage}
                   isLoadMoreError={isParticipantsLoadMoreError}
                   onLoadMore={onLoadMoreParticipants}
+                  onOpenFriends={onOpenFriends}
+                  onOpenSettings={onOpenSettings}
                   onUserBlocked={onUserBlocked}
                   participants={participants}
                   roomMeta={roomMeta}
diff --git a/src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx b/src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx
index 48db626f..a21bbb1a 100644
--- a/src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx
+++ b/src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx
@@ -778,13 +778,14 @@ describe("useRoomRealtimeEvents", () => {
     const setJoinErrorMessage = vi.fn();
     const setLivePlaybackStatus = vi.fn();
     const setStatus = vi.fn();
+    const onCurrentParticipantChanged = vi.fn();
     const onRoomAccessTokenChanged = vi.fn();
     const joinedData = {
       participant: {
         participantType: "USER" as const,
-        participantId: "participant",
+        participantId: "reconnected-participant",
         userSlug: "user",
-        nickname: "사용자",
+        nickname: "재연결 사용자",
         profileImageUrl: null,
       },
       recentChatMessages: [],
@@ -801,6 +802,7 @@ describe("useRoomRealtimeEvents", () => {
         useRoomRealtimeEvents({
           cleanupChatSubscriptions,
           initializeChatStateFromJoinData,
+          onCurrentParticipantChanged,
           onRoomAccessTokenChanged,
           resetChatState,
           setJoinErrorMessage,
@@ -844,6 +846,9 @@ describe("useRoomRealtimeEvents", () => {
       expect(subscribeRoomEvents).toHaveBeenCalledTimes(2),
     );
     expect(initializeChatStateFromJoinData).toHaveBeenCalledWith(joinedData);
+    expect(onCurrentParticipantChanged).toHaveBeenCalledWith(
+      joinedData.participant,
+    );
     expect(onRoomAccessTokenChanged).toHaveBeenCalledWith("rotated-token");
     expect(sessionStorage.getItem("room-access-token:room")).toBe(
       "rotated-token",
diff --git a/src/features/room/page/hooks/useRoomRealtimeEvents.ts b/src/features/room/page/hooks/useRoomRealtimeEvents.ts
index caac1935..6e59cb94 100644
--- a/src/features/room/page/hooks/useRoomRealtimeEvents.ts
+++ b/src/features/room/page/hooks/useRoomRealtimeEvents.ts
@@ -73,6 +73,7 @@ const PARTICIPANT_KICKED_ERROR_CODE = "room.participant-kicked";
 const SESSION_REPLACED_ERROR_CODE = "user.session-replaced";
 const SESSION_REPLACED_MESSAGE =
   "현재 방은 다른 창에서 마지막으로 열렸습니다.";
+const ignoreCurrentParticipantChange = () => undefined;
 type RoomInvalidationTarget =
   | "meta"
   | "participants"
@@ -129,6 +130,9 @@ type UseRoomRealtimeEventsParams = {
   initializeChatStateFromJoinData: (
     data: JoinRoomResult["data"],
   ) => void;
+  onCurrentParticipantChanged?: (
+    participant: JoinRoomResult["data"]["participant"],
+  ) => void;
   onRoomAccessTokenChanged?: (accessToken: string | null) => void;
   resetChatState: () => void;
   setJoinErrorMessage: (message: string) => void;
@@ -145,6 +149,7 @@ type RoomSubscriptionConfig = {
 export function useRoomRealtimeEvents({
   cleanupChatSubscriptions,
   initializeChatStateFromJoinData,
+  onCurrentParticipantChanged = ignoreCurrentParticipantChange,
   onRoomAccessTokenChanged = () => undefined,
   resetChatState,
   setJoinErrorMessage,
@@ -670,6 +675,7 @@ export function useRoomRealtimeEvents({
       const nextConfig = { accessToken, slug: config.slug };
       writeStoredRoomAccessToken(config.slug, accessToken);
       roomSubscriptionConfigRef.current = nextConfig;
+      onCurrentParticipantChanged(joinResult.data.participant);
       onRoomAccessTokenChanged(accessToken);
       initializeChatStateFromJoinData(joinResult.data);
       subscribeWithConfig(nextConfig, true);
@@ -681,6 +687,7 @@ export function useRoomRealtimeEvents({
     [
       initializeChatStateFromJoinData,
       invalidateRoomReads,
+      onCurrentParticipantChanged,
       onRoomAccessTokenChanged,
       setJoinErrorMessage,
       setStatus,
diff --git a/src/features/room/page/ui/RoomPlaybackJoinedContent.test.tsx b/src/features/room/page/ui/RoomPlaybackJoinedContent.test.tsx
new file mode 100644
index 00000000..3525f1b7
--- /dev/null
+++ b/src/features/room/page/ui/RoomPlaybackJoinedContent.test.tsx
@@ -0,0 +1,208 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import RoomPlaybackJoinedContent from "./RoomPlaybackJoinedContent";
+
+vi.mock("next/image", () => ({
+  default: ({ alt }: { alt?: string }) => <span aria-label={alt || undefined} />,
+}));
+vi.mock("@/src/features/room/hooks/useRoomMeta", () => ({
+  useRoomMeta: () => ({
+    data: {
+      activeUsersCount: 2,
+      hasPassword: false,
+      isPublic: true,
+      maxParticipants: 10,
+      owner: {
+        nickname: "방장",
+        profileImageUrl: null,
+        slug: "owner",
+      },
+      slug: "room",
+      tags: [],
+      title: "테스트 방",
+    },
+  }),
+}));
+vi.mock("../hooks/useRoomPlaybackViewModel", () => ({
+  useRoomPlaybackViewModel: () => ({
+    backgroundImageSrc: "/images/default-room.png",
+    currentRequester: null,
+    currentTrackDurationMs: null,
+    currentTrackStory: null,
+    currentTrackTitle: null,
+    currentVideoId: null,
+    isCurrentRequesterRoomOwner: false,
+    isCurrentUserRoomOwner: false,
+    isQueuingDefaultRoomImage: false,
+    playbackStatus: null,
+  }),
+}));
+vi.mock("../hooks/useRoomOwnerSuccessionFeedback", () => ({
+  useRoomOwnerSuccessionFeedback: vi.fn(),
+}));
+vi.mock("../model/roomChatLayout", () => ({
+  getRoomChatLayout: () => ({ chatMinHeight: 320, songStackWidth: 400 }),
+}));
+vi.mock("@/src/features/playlist/add-track/ui/AddTrackAction", () => ({
+  default: () => null,
+}));
+vi.mock("@/src/features/playlist/player/ui/YouTubePlayer", () => ({
+  default: () => null,
+}));
+vi.mock("@/src/features/room/chat/ui/ChatArea", () => ({
+  default: () => null,
+}));
+vi.mock("@/src/features/room/info/ui/RoomInfo", () => ({
+  default: () => null,
+}));
+vi.mock("@/src/features/room/control-bar/ui/RoomControlBar", () => ({
+  default: () => null,
+}));
+vi.mock("@/src/features/room/page/ui/RoomLeaveConfirmDialog", () => ({
+  default: () => null,
+}));
+vi.mock("@/src/features/room/participants/ui/RoomParticipantsPanel", () => ({
+  default: ({
+    onOpenFriends,
+    onOpenSettings,
+  }: {
+    onOpenFriends: () => void;
+    onOpenSettings: () => void;
+  }) => (
+    <>
+      <button type="button" onClick={onOpenSettings}>
+        모바일 Setting 열기
+      </button>
+      <button type="button" onClick={onOpenFriends}>
+        모바일 Friends 열기
+      </button>
+    </>
+  ),
+}));
+vi.mock("@/src/features/room/floating/ui/RoomFloatingWidgets", () => ({
+  default: ({
+    onOpenFriends,
+    onOpenSettings,
+  }: {
+    onOpenFriends: () => void;
+    onOpenSettings: () => void;
+  }) => (
+    <>
+      <button type="button" onClick={onOpenSettings}>
+        데스크톱 Setting 열기
+      </button>
+      <button type="button" onClick={onOpenFriends}>
+        데스크톱 Friends 열기
+      </button>
+    </>
+  ),
+}));
+vi.mock("@/src/features/settings/ui/SettingsModal", () => ({
+  default: ({ onClose }: { onClose: () => void }) => (
+    <div role="dialog" aria-label="Setting modal">
+      <button type="button" onClick={onClose}>
+        Setting 닫기
+      </button>
+    </div>
+  ),
+}));
+vi.mock("@/src/features/follow/ui/FollowModal", () => ({
+  default: ({ onClose }: { onClose: () => void }) => (
+    <div role="dialog" aria-label="Friends modal">
+      <button type="button" onClick={onClose}>
+        Friends 닫기
+      </button>
+    </div>
+  ),
+}));
+
+const currentUser = {
+  nickname: "나",
+  profileImageUrl: null,
+  slug: "me",
+  userId: 1,
+};
+
+const roomChat = {
+  hasOlderMessages: false,
+  historyErrorMessage: null,
+  isLoadingOlderMessages: false,
+  isSending: false,
+  loadOlderMessages: vi.fn(),
+  messages: [],
+  scrollToLatestKey: 0,
+  sendMessage: vi.fn(() => true),
+};
+
+const floatingWidgets = {
+  activateWidget: vi.fn(),
+  closeAllWidgets: vi.fn(),
+  handleWidgetStop: vi.fn(),
+  isViewportReady: false,
+  resetWidgetPositions: vi.fn(),
+  toggleWidget: vi.fn(),
+  viewportSize: { height: 900, width: 1440 },
+  widgets: {
+    chat: { isOpen: false },
+    participants: { isOpen: true },
+    profile: { isOpen: false },
+    queue: { isOpen: false },
+  },
+};
+
+function renderContent({ isMobileLayout }: { isMobileLayout: boolean }) {
+  return render(
+    <RoomPlaybackJoinedContent
+      currentUser={currentUser}
+      floatingWidgets={floatingWidgets as never}
+      hasNextParticipantsPage={false}
+      isCurrentUserLoading={false}
+      isFetchingNextParticipantsPage={false}
+      isMobileLayout={isMobileLayout}
+      isParticipantsLoadMoreError={false}
+      livePlaybackStatus={null}
+      mobileTab="participants"
+      onLeaveRoom={() => true}
+      onLoadMoreParticipants={() => Promise.resolve()}
+      participants={[]}
+      resolveParticipantByUserSlug={() => Promise.resolve(null)}
+      roomAccessToken="access-token"
+      roomChat={roomChat as never}
+      setMobileTab={vi.fn()}
+      slug="room"
+    />,
+  );
+}
+
+describe("RoomPlaybackJoinedContent self modals", () => {
+  it("모바일 참가자 패널의 내 메뉴 요청으로 기존 modal layer를 전환한다", async () => {
+    const user = userEvent.setup();
+    renderContent({ isMobileLayout: true });
+
+    await user.click(screen.getByRole("button", { name: "모바일 Setting 열기" }));
+    expect(screen.getByRole("dialog", { name: "Setting modal" })).toBeVisible();
+
+    await user.click(screen.getByRole("button", { name: "Setting 닫기" }));
+    expect(screen.queryByRole("dialog", { name: "Setting modal" })).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "모바일 Friends 열기" }));
+    expect(screen.getByRole("dialog", { name: "Friends modal" })).toBeVisible();
+  });
+
+  it("데스크톱 draggable widget의 요청도 화면 최상위 modal layer로 전달한다", async () => {
+    const user = userEvent.setup();
+    renderContent({ isMobileLayout: false });
+
+    await user.click(
+      screen.getByRole("button", { name: "데스크톱 Setting 열기" }),
+    );
+    expect(screen.getByRole("dialog", { name: "Setting modal" })).toBeVisible();
+
+    await user.click(screen.getByRole("button", { name: "Setting 닫기" }));
+    await user.click(
+      screen.getByRole("button", { name: "데스크톱 Friends 열기" }),
+    );
+    expect(screen.getByRole("dialog", { name: "Friends modal" })).toBeVisible();
+  });
+});
diff --git a/src/features/room/page/ui/RoomPlaybackJoinedContent.tsx b/src/features/room/page/ui/RoomPlaybackJoinedContent.tsx
index 328a1b28..be39ef68 100644
--- a/src/features/room/page/ui/RoomPlaybackJoinedContent.tsx
+++ b/src/features/room/page/ui/RoomPlaybackJoinedContent.tsx
@@ -33,6 +33,8 @@ import type { User } from "@/src/features/user/model/types";
 import RoomQueuePanel from "@/src/features/room/queue/ui/RoomQueuePanel";
 import RoomParticipantsPanel from "@/src/features/room/participants/ui/RoomParticipantsPanel";
 import type { ResolveRoomParticipantByUserSlug } from "@/src/features/room/participants/model/roomParticipantPaging";
+import FollowModal from "@/src/features/follow/ui/FollowModal";
+import SettingsModal from "@/src/features/settings/ui/SettingsModal";
 import { redirectToGoogleLogin } from "@/src/features/auth/login-with-google/api/login";
 import SkipTrackButton from "@/src/features/playlist/skip-track/ui/SkipTrackButton";
 import {
@@ -44,6 +46,7 @@ import { getRoomChatLayout } from "../model/roomChatLayout";
 import RoomLeaveConfirmDialog from "./RoomLeaveConfirmDialog";
 
 export type MobileRoomTab = "playback" | "queue" | "participants";
+type RoomSelfModal = "friends" | "settings";
 
 const MOBILE_ROOM_TABS: {
   id: MobileRoomTab;
@@ -190,6 +193,27 @@ export default function RoomPlaybackJoinedContent({
   );
   const desktopWheelRegionRef = useRef<HTMLDivElement>(null);
   const mobileInlineChatRef = useRef<HTMLDivElement>(null);
+  const [activeSelfModal, setActiveSelfModal] =
+    useState<RoomSelfModal | null>(null);
+  const closeSelfModal = useCallback(() => setActiveSelfModal(null), []);
+  const openFriendsModal = useCallback(
+    () => setActiveSelfModal("friends"),
+    [],
+  );
+  const openSettingsModal = useCallback(
+    () => setActiveSelfModal("settings"),
+    [],
+  );
+  const selfModal = (
+    <>
+      {activeSelfModal === "settings" ? (
+        <SettingsModal open onClose={closeSelfModal} />
+      ) : null}
+      {activeSelfModal === "friends" ? (
+        <FollowModal open onClose={closeSelfModal} />
+      ) : null}
+    </>
+  );
   const leaveButtonRef = useRef<HTMLButtonElement>(null);
   const [isLeaveDialogOpen, setIsLeaveDialogOpen] = useState(false);
   const closeLeaveDialog = useCallback(() => {
@@ -373,6 +397,8 @@ export default function RoomPlaybackJoinedContent({
                   isFetchingNextPage={isFetchingNextParticipantsPage}
                   isLoadMoreError={isParticipantsLoadMoreError}
                   onLoadMore={onLoadMoreParticipants}
+                  onOpenFriends={openFriendsModal}
+                  onOpenSettings={openSettingsModal}
                   onUserBlocked={handleUserBlocked}
                   participants={participants}
                   roomMeta={roomMeta}
@@ -409,6 +435,7 @@ export default function RoomPlaybackJoinedContent({
           </nav>
         </div>
         {leaveDialog}
+        {selfModal}
       </div>
     );
   }
@@ -546,6 +573,8 @@ export default function RoomPlaybackJoinedContent({
         isFetchingNextParticipantsPage={isFetchingNextParticipantsPage}
         isParticipantsLoadMoreError={isParticipantsLoadMoreError}
         onLoadMoreParticipants={onLoadMoreParticipants}
+        onOpenFriends={openFriendsModal}
+        onOpenSettings={openSettingsModal}
         resolveParticipantByUserSlug={resolveParticipantByUserSlug}
         onChatLoginClick={
           showChatLoginAction ? redirectToGoogleLogin : undefined
@@ -562,6 +591,7 @@ export default function RoomPlaybackJoinedContent({
         onWidgetStop={floatingWidgets.handleWidgetStop}
       />
       {leaveDialog}
+      {selfModal}
     </div>
   );
 }
diff --git a/src/features/room/page/ui/RoomPlaybackScreen.test.tsx b/src/features/room/page/ui/RoomPlaybackScreen.test.tsx
index f9dadfe0..e8d40d21 100644
--- a/src/features/room/page/ui/RoomPlaybackScreen.test.tsx
+++ b/src/features/room/page/ui/RoomPlaybackScreen.test.tsx
@@ -8,6 +8,8 @@ import { roomKeys } from "@/src/features/room/model/queryKeys";
 import { useRoomPlayback } from "@/src/features/playlist/model/useRoomPlayback";
 import { useRoomParticipants } from "@/src/features/playlist/model/useRoomParticipants";
 import { playlistKeys } from "@/src/features/playlist/model/queryKeys";
+import type { PlaylistParticipant } from "@/src/features/playlist/model/types";
+import type { User } from "@/src/features/user/model/types";
 import { ApiError } from "@/src/shared/api/api-error";
 import { RoomJoinError } from "@/src/features/room/api/joinRoom.types";
 import { storeRoomJoinHandoff } from "@/src/features/room/join/model/roomJoinHandoff";
@@ -25,6 +27,11 @@ const mocks = vi.hoisted(() => {
   const replace = vi.fn();
   const replaceDocumentLocation = vi.fn();
   const notify = vi.fn();
+  const joinedContentProps = vi.fn();
+  const meQuery: { data: User | null; isLoading: boolean } = {
+    data: null,
+    isLoading: false,
+  };
   const roomChat = {
     cleanupSubscriptions: vi.fn(),
     initializeFromJoinData: vi.fn(),
@@ -33,7 +40,9 @@ const mocks = vi.hoisted(() => {
 
   return {
     ensureRoomSubscription,
+    joinedContentProps,
     leaveRoomSession,
+    meQuery,
     notify,
     replace,
     replaceDocumentLocation,
@@ -78,7 +87,7 @@ vi.mock("@/src/features/playlist/model/useRoomParticipants", () => ({
   })),
 }));
 vi.mock("@/src/features/user/session/hooks/useMe", () => ({
-  useMe: () => ({ data: null, isLoading: false }),
+  useMe: () => mocks.meQuery,
 }));
 vi.mock("@/src/features/room/chat/hooks/useRoomChat", () => ({
   useRoomChat: () => mocks.roomChat,
@@ -95,6 +104,12 @@ vi.mock("@/src/features/room/floating/model/useFloatingWidgetsState", () => ({
 vi.mock("@/src/shared/ui/action-feedback/ActionFeedbackProvider", () => ({
   useActionFeedback: () => ({ notify: mocks.notify }),
 }));
+vi.mock("./RoomPlaybackJoinedContent", () => ({
+  default: (props: { participants: PlaylistParticipant[] }) => {
+    mocks.joinedContentProps(props);
+    return <div>joined room content</div>;
+  },
+}));
 
 function renderRoomPlaybackScreen({ strict = false } = {}) {
   const queryClient = createTestQueryClient();
@@ -131,6 +146,8 @@ function createJoinedResult(roomAccessToken = "access-token") {
 describe("RoomPlaybackScreen join reads", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mocks.meQuery.data = null;
+    mocks.meQuery.isLoading = false;
     localStorage.clear();
     sessionStorage.clear();
   });
@@ -423,4 +440,66 @@ describe("RoomPlaybackScreen join reads", () => {
       "handoff-token",
     );
   });
+
+  it("현재 참가자가 첫 조회 page 밖이어도 ROOM_JOINED 참가자를 목록 첫 행에 포함한다", async () => {
+    const otherParticipant: PlaylistParticipant = {
+      nickname: "다른 참가자",
+      participantId: "participant-other",
+      participantType: "USER",
+      profileImageUrl: null,
+      userSlug: "other",
+    };
+    mocks.meQuery.data = {
+      nickname: "사용자",
+      profileImageUrl: null,
+      slug: "user",
+      userId: 1,
+    };
+    vi.mocked(fetchRoomMeta).mockResolvedValue({
+      activeUsersCount: 101,
+      hasPassword: false,
+      isPublic: true,
+      slug: "room",
+      tags: [],
+      title: "큰 방",
+    } as never);
+    vi.mocked(joinRoom).mockResolvedValue(createJoinedResult());
+    vi.mocked(useRoomPlayback).mockReturnValue({
+      data: { queueRevision: 1 },
+      error: null,
+      isError: false,
+      isLoading: false,
+      refetch: mocks.refetchRoomPlayback,
+    } as never);
+    vi.mocked(useRoomParticipants).mockReturnValue({
+      data: {
+        pageParams: [null],
+        pages: [
+          {
+            hasNext: true,
+            items: [otherParticipant],
+            nextCursor: "next-page",
+          },
+        ],
+      },
+      error: null,
+      fetchNextPage: vi.fn(),
+      hasNextPage: true,
+      isError: false,
+      isFetchNextPageError: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+      refetch: mocks.refetchParticipants,
+    } as never);
+
+    renderRoomPlaybackScreen();
+
+    await screen.findByText("joined room content");
+    const latestProps = mocks.joinedContentProps.mock.calls.at(-1)?.[0] as {
+      participants: PlaylistParticipant[];
+    };
+    expect(latestProps.participants.map(({ participantId }) => participantId)).toEqual(
+      ["participant", "participant-other"],
+    );
+  });
 });
diff --git a/src/features/room/page/ui/RoomPlaybackScreen.tsx b/src/features/room/page/ui/RoomPlaybackScreen.tsx
index aca0c706..9363d6ba 100644
--- a/src/features/room/page/ui/RoomPlaybackScreen.tsx
+++ b/src/features/room/page/ui/RoomPlaybackScreen.tsx
@@ -5,6 +5,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRoomPlayback } from "@/src/features/playlist/model/useRoomPlayback";
 import { useRoomParticipants } from "@/src/features/playlist/model/useRoomParticipants";
+import type { PlaylistParticipant } from "@/src/features/playlist/model/types";
 import { playlistKeys } from "@/src/features/playlist/model/queryKeys";
 import { roomMetaQueryOptions } from "@/src/features/room/hooks/useRoomMeta";
 import type { JoinRoomResult } from "@/src/features/room/api/joinRoom";
@@ -35,6 +36,7 @@ import { useRoomChat } from "@/src/features/room/chat/hooks/useRoomChat";
 import { useMe } from "@/src/features/user/session/hooks/useMe";
 import type { RoomMeta } from "@/src/features/room/model/types";
 import { createRoomParticipantPageCoordinator } from "@/src/features/room/participants/model/roomParticipantPaging";
+import { includeCurrentParticipant } from "@/src/features/room/participants/model/participantIdentity";
 import type { LivePlaybackState } from "../hooks/useRoomPlaybackViewModel";
 import { useRoomRealtimeEvents } from "../hooks/useRoomRealtimeEvents";
 import QueryBoundary from "@/src/shared/ui/query-boundary/QueryBoundary";
@@ -64,6 +66,8 @@ export default function RoomPlaybackScreen() {
   const [joinErrorMessage, setJoinErrorMessage] = useState("");
   const [isSubmittingPassword, setIsSubmittingPassword] = useState(false);
   const [roomAccessToken, setRoomAccessToken] = useState<string | null>(null);
+  const [currentParticipant, setCurrentParticipant] =
+    useState<PlaylistParticipant | null>(null);
   const [livePlaybackStatus, setLivePlaybackStatus] =
     useState<LivePlaybackState | null>(null);
   const [mobileTab, setMobileTab] = useState<MobileRoomTab>("playback");
@@ -104,8 +108,12 @@ export default function RoomPlaybackScreen() {
     currentStatus === "joined",
   );
   const participants = useMemo(
-    () => participantPages?.pages.flatMap((page) => page.items) ?? [],
-    [participantPages],
+    () =>
+      includeCurrentParticipant(
+        participantPages?.pages.flatMap((page) => page.items) ?? [],
+        currentParticipant,
+      ),
+    [currentParticipant, participantPages],
   );
   const participantPageCoordinator = useMemo(
     () => createRoomParticipantPageCoordinator(slug),
@@ -157,6 +165,7 @@ export default function RoomPlaybackScreen() {
     useRoomRealtimeEvents({
       cleanupChatSubscriptions,
       initializeChatStateFromJoinData,
+      onCurrentParticipantChanged: setCurrentParticipant,
       onRoomAccessTokenChanged: setRoomAccessToken,
       resetChatState,
       setJoinErrorMessage,
@@ -206,6 +215,7 @@ export default function RoomPlaybackScreen() {
     ensureRoomSubscription(target.slug, joinedAccessToken);
     refreshRoomMetaAfterJoin(target.slug);
     setJoinStateSlug(target.slug);
+    setCurrentParticipant(joinResult.data.participant);
     setRoomAccessToken(joinedAccessToken);
     setStatus("joined");
     setJoinErrorMessage("");
@@ -270,6 +280,7 @@ export default function RoomPlaybackScreen() {
     activeJoinAbortControllerRef.current?.abort();
     activeJoinAbortControllerRef.current = abortController;
     const storedAccessToken = readStoredRoomAccessToken(slug);
+    setCurrentParticipant(null);
     resetChatState();
 
     (async () => {
diff --git a/src/features/room/participants/model/participantIdentity.test.ts b/src/features/room/participants/model/participantIdentity.test.ts
index 1b04ef94..da7f4467 100644
--- a/src/features/room/participants/model/participantIdentity.test.ts
+++ b/src/features/room/participants/model/participantIdentity.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import type { PlaylistParticipant } from "@/src/features/playlist/model/types";
 import type { User } from "@/src/features/user/model/types";
 import {
+  getCurrentParticipantFirst,
+  includeCurrentParticipant,
   getParticipantIdentityKey,
   getParticipantKickTargetForUser,
   getParticipantUserSlug,
@@ -49,6 +51,88 @@ describe("participantIdentity", () => {
     expect(isSameUser(participant({ userSlug: "me" }), me)).toBe(true);
   });
 
+  it("현재 사용자를 첫 번째로 옮기고 나머지 참가자 순서를 보존한다", () => {
+    const participants = [
+      participant({ participantId: "owner", userSlug: "owner" }),
+      participant({ participantId: "me", userSlug: "me" }),
+      participant({ participantId: "member", userSlug: "member" }),
+    ];
+
+    const ordered = getCurrentParticipantFirst(participants, { slug: "me" });
+
+    expect(ordered.map(({ participantId }) => participantId)).toEqual([
+      "me",
+      "owner",
+      "member",
+    ]);
+    expect(participants.map(({ participantId }) => participantId)).toEqual([
+      "owner",
+      "me",
+      "member",
+    ]);
+  });
+
+  it("현재 사용자가 없거나 이미 첫 번째면 기존 배열을 유지한다", () => {
+    const participants = [
+      participant({ participantId: "me", userSlug: "me" }),
+      participant({ participantId: "member", userSlug: "member" }),
+    ];
+
+    expect(getCurrentParticipantFirst(participants, { slug: "me" })).toBe(
+      participants,
+    );
+    expect(
+      getCurrentParticipantFirst(participants, { slug: "missing" }),
+    ).toBe(participants);
+    expect(getCurrentParticipantFirst(participants, null)).toBe(participants);
+  });
+
+  it("현재 참가자가 조회 page 밖이면 앞에 포함하고 원본 page는 변경하지 않는다", () => {
+    const pageParticipants = [
+      participant({ participantId: "owner", userSlug: "owner" }),
+      participant({ participantId: "member", userSlug: "member" }),
+    ];
+    const currentParticipant = participant({
+      participantId: "me",
+      userSlug: "me",
+    });
+
+    const included = includeCurrentParticipant(
+      pageParticipants,
+      currentParticipant,
+    );
+
+    expect(included.map(({ participantId }) => participantId)).toEqual([
+      "me",
+      "owner",
+      "member",
+    ]);
+    expect(pageParticipants.map(({ participantId }) => participantId)).toEqual([
+      "owner",
+      "member",
+    ]);
+  });
+
+  it("participantId 또는 회원 slug가 이미 있으면 현재 참가자를 중복하지 않는다", () => {
+    const currentParticipant = participant({
+      participantId: "me",
+      userSlug: "me",
+    });
+    const sameParticipantId = [
+      participant({ participantId: "me", userSlug: "renamed-me" }),
+    ];
+    const sameUserSlug = [
+      participant({ participantId: "refetched-me", userSlug: "me" }),
+    ];
+
+    expect(includeCurrentParticipant(sameParticipantId, currentParticipant)).toBe(
+      sameParticipantId,
+    );
+    expect(includeCurrentParticipant(sameUserSlug, currentParticipant)).toBe(
+      sameUserSlug,
+    );
+  });
+
   it("현재 참가 중인 회원에게만 userSlug 기반 내보내기 대상을 만든다", () => {
     const participants = [participant({ userSlug: "active-user" })];
 
diff --git a/src/features/room/participants/model/participantIdentity.ts b/src/features/room/participants/model/participantIdentity.ts
index 02711c8a..95a6bd3c 100644
--- a/src/features/room/participants/model/participantIdentity.ts
+++ b/src/features/room/participants/model/participantIdentity.ts
@@ -39,6 +39,53 @@ export function isSameUser(
   );
 }
 
+export function getCurrentParticipantFirst(
+  participants: readonly PlaylistParticipant[],
+  user: { slug?: string | null } | null | undefined,
+) {
+  const currentParticipantIndex = participants.findIndex((participant) =>
+    isSameUser(participant, user),
+  );
+
+  if (currentParticipantIndex <= 0) {
+    return participants;
+  }
+
+  return [
+    participants[currentParticipantIndex],
+    ...participants.slice(0, currentParticipantIndex),
+    ...participants.slice(currentParticipantIndex + 1),
+  ];
+}
+
+export function includeCurrentParticipant(
+  participants: PlaylistParticipant[],
+  currentParticipant: PlaylistParticipant | null | undefined,
+) {
+  if (!currentParticipant) {
+    return participants;
+  }
+
+  const currentParticipantKey = getParticipantIdentityKey(currentParticipant);
+  const currentUserSlug = getParticipantUserSlug(currentParticipant);
+  const alreadyIncluded = participants.some((participant) => {
+    if (getParticipantIdentityKey(participant) === currentParticipantKey) {
+      return true;
+    }
+
+    const participantUserSlug = getParticipantUserSlug(participant);
+    return Boolean(
+      currentUserSlug &&
+        participantUserSlug &&
+        currentUserSlug === participantUserSlug,
+    );
+  });
+
+  return alreadyIncluded
+    ? participants
+    : [currentParticipant, ...participants];
+}
+
 export function isParticipantRoomOwner(
   owner: { slug?: string | null } | null | undefined,
   participant: PlaylistParticipant | null | undefined,
diff --git a/src/features/room/participants/ui/RoomParticipantCard.tsx b/src/features/room/participants/ui/RoomParticipantCard.tsx
index c570baf3..fa1cdeaf 100644
--- a/src/features/room/participants/ui/RoomParticipantCard.tsx
+++ b/src/features/room/participants/ui/RoomParticipantCard.tsx
@@ -7,12 +7,14 @@ import RoomMemberManagementMenu, {
   type RoomMemberManagementAction,
 } from "@/src/features/room/management/ui/RoomMemberManagementMenu";
 import type { ParticipantKickTarget } from "../model/participantIdentity";
+import RoomSelfManagementMenu from "./RoomSelfManagementMenu";
 import styles from "./RoomParticipantsPanel.module.css";
 
 type Props = {
   actions: readonly RoomMemberManagementAction[];
   badgeUserSlug: string | null;
   expanded: boolean;
+  isCurrentUser: boolean;
   isKickPending: boolean;
   isOwner: boolean;
   isTransferPending: boolean;
@@ -21,6 +23,8 @@ type Props = {
   onBlockParticipant: (participant: PlaylistParticipant) => void;
   onClose: () => void;
   onKickParticipant: (participant: PlaylistParticipant) => void;
+  onOpenFriends: () => void;
+  onOpenSettings: () => void;
   onReportParticipant: (participant: PlaylistParticipant) => void;
   onToggle: (participantKey: string) => void;
   onTransferOwner: (participant: PlaylistParticipant) => void;
@@ -34,6 +38,7 @@ export default function RoomParticipantCard({
   actions,
   badgeUserSlug,
   expanded,
+  isCurrentUser,
   isKickPending,
   isOwner,
   isTransferPending,
@@ -42,6 +47,8 @@ export default function RoomParticipantCard({
   onBlockParticipant,
   onClose,
   onKickParticipant,
+  onOpenFriends,
+  onOpenSettings,
   onReportParticipant,
   onToggle,
   onTransferOwner,
@@ -52,7 +59,7 @@ export default function RoomParticipantCard({
 }: Props) {
   const triggerRef = useRef<HTMLButtonElement>(null);
   const actionsId = useId();
-  const hasActions = actions.length > 0;
+  const hasActions = isCurrentUser || actions.length > 0;
 
   const handleToggle = () => {
     onToggle(participantKey);
@@ -84,6 +91,9 @@ export default function RoomParticipantCard({
         <div className={styles.meta}>
           <div className={styles.nameRow}>
             <div className={styles.nickname}>{participant.nickname}</div>
+            {isCurrentUser ? (
+              <span className={styles.currentUserLabel}>(나)</span>
+            ) : null}
             {isOwner ? (
               <Image
                 src="/icons/onwer_black.svg"
@@ -105,7 +115,11 @@ export default function RoomParticipantCard({
             ref={triggerRef}
             type="button"
             className={styles.participantMenuButton}
-            aria-label={`${participant.nickname} 참가자 관리 메뉴`}
+            aria-label={
+              isCurrentUser
+                ? `${participant.nickname} 내 프로필 메뉴`
+                : `${participant.nickname} 참가자 관리 메뉴`
+            }
             aria-haspopup="menu"
             aria-expanded={expanded}
             aria-controls={expanded ? actionsId : undefined}
@@ -113,7 +127,18 @@ export default function RoomParticipantCard({
           >
             <MoreVertical aria-hidden="true" size={18} />
           </button>
-          {expanded ? (
+          {expanded && isCurrentUser ? (
+            <RoomSelfManagementMenu
+              anchorBoundaryRef={listRef}
+              label={`${participant.nickname} 내 프로필 관리`}
+              menuId={actionsId}
+              onClose={onClose}
+              onOpenFriends={onOpenFriends}
+              onOpenSettings={onOpenSettings}
+              triggerRef={triggerRef}
+            />
+          ) : null}
+          {expanded && !isCurrentUser ? (
             <RoomMemberManagementMenu
               actions={actions}
               isKickPending={isKickPending}
diff --git a/src/features/room/participants/ui/RoomParticipantList.test.tsx b/src/features/room/participants/ui/RoomParticipantList.test.tsx
index e69176d8..493dbbd3 100644
--- a/src/features/room/participants/ui/RoomParticipantList.test.tsx
+++ b/src/features/room/participants/ui/RoomParticipantList.test.tsx
@@ -83,6 +83,8 @@ const participants: PlaylistParticipant[] = [
 const callbacks = {
   onBlockParticipant: vi.fn(),
   onKickParticipant: vi.fn(),
+  onOpenFriends: vi.fn(),
+  onOpenSettings: vi.fn(),
   onReportParticipant: vi.fn(),
   onTransferOwner: vi.fn(),
 };
@@ -216,6 +218,70 @@ describe("RoomParticipantList", () => {
     expect(screen.getByText("회원 100")).toBeVisible();
   });
 
+  it("현재 사용자를 첫 행으로 옮기고 닉네임 오른쪽에 (나)를 표시한다", () => {
+    renderList({
+      canModerateParticipants: false,
+      currentUser: {
+        nickname: "회원",
+        profileImageUrl: null,
+        slug: "member",
+        userId: 2,
+      },
+    });
+
+    const rows = screen
+      .getByLabelText("참가자 목록")
+      .querySelectorAll("[data-participant-key]");
+    expect(rows[0]).toHaveAttribute(
+      "data-participant-key",
+      "participant:participant-member",
+    );
+    expect(screen.getByText("회원").parentElement?.children[1]).toHaveTextContent(
+      "(나)",
+    );
+  });
+
+  it("내가 방장이면 닉네임, (나), 왕관 순서로 표시한다", () => {
+    renderList();
+
+    const nameRow = screen.getByText("방장").parentElement;
+    expect(nameRow?.children[0]).toHaveTextContent("방장");
+    expect(nameRow?.children[1]).toHaveTextContent("(나)");
+    expect(nameRow?.children[2]).toHaveAttribute("aria-label", "방장");
+  });
+
+  it("내 메뉴에서 Setting과 Friends 진입만 제공한다", async () => {
+    const user = userEvent.setup();
+    renderList({
+      canModerateParticipants: false,
+      currentUser: {
+        nickname: "회원",
+        profileImageUrl: null,
+        slug: "member",
+        userId: 2,
+      },
+    });
+    const trigger = screen.getByRole("button", {
+      name: "회원 내 프로필 메뉴",
+    });
+
+    await user.click(trigger);
+    expect(
+      screen.getByRole("menu", { name: "회원 내 프로필 관리" }),
+    ).toBeVisible();
+    expect(screen.getByRole("menuitem", { name: "Setting" })).toBeVisible();
+    expect(screen.getByRole("menuitem", { name: "Friends" })).toBeVisible();
+    expect(screen.queryByRole("menuitem", { name: "팔로우" })).toBeNull();
+
+    await user.click(screen.getByRole("menuitem", { name: "Setting" }));
+    expect(callbacks.onOpenSettings).toHaveBeenCalledOnce();
+    expect(screen.queryByRole("menu")).toBeNull();
+
+    await user.click(trigger);
+    await user.click(screen.getByRole("menuitem", { name: "Friends" }));
+    expect(callbacks.onOpenFriends).toHaveBeenCalledOnce();
+  });
+
   it("방장은 회원의 더보기 버튼으로 채팅과 같은 관리 메뉴를 열고 다시 닫는다", async () => {
     const user = userEvent.setup();
     renderList();
diff --git a/src/features/room/participants/ui/RoomParticipantList.tsx b/src/features/room/participants/ui/RoomParticipantList.tsx
index e1d0394d..15f2ae1e 100644
--- a/src/features/room/participants/ui/RoomParticipantList.tsx
+++ b/src/features/room/participants/ui/RoomParticipantList.tsx
@@ -17,6 +17,7 @@ import type { RoomOwner } from "@/src/features/room/model/types";
 import type { User } from "@/src/features/user/model/types";
 import RoomParticipantCard from "./RoomParticipantCard";
 import {
+  getCurrentParticipantFirst,
   getParticipantIdentityKey,
   getParticipantKickTarget,
   getParticipantKickTargetKey,
@@ -37,6 +38,8 @@ type Props = {
   kickingParticipantKey: string | null;
   onBlockParticipant: (participant: PlaylistParticipant) => void;
   onKickParticipant: (participant: PlaylistParticipant) => void;
+  onOpenFriends: () => void;
+  onOpenSettings: () => void;
   onReportParticipant: (participant: PlaylistParticipant) => void;
   onTransferOwner: (participant: PlaylistParticipant) => void;
   owner: RoomOwner | null;
@@ -132,6 +135,8 @@ export default function RoomParticipantList({
   kickingParticipantKey,
   onBlockParticipant,
   onKickParticipant,
+  onOpenFriends,
+  onOpenSettings,
   onReportParticipant,
   onTransferOwner,
   owner,
@@ -144,6 +149,10 @@ export default function RoomParticipantList({
   >(null);
   const [windowStart, setWindowStart] = useState(0);
   const listRef = useRef<HTMLDivElement>(null);
+  const orderedParticipants = useMemo(
+    () => getCurrentParticipantFirst(participants, currentUser),
+    [currentUser, participants],
+  );
   const closeParticipantMenu = useCallback(() => {
     setExpandedParticipantKey(null);
   }, []);
@@ -154,7 +163,7 @@ export default function RoomParticipantList({
   }, []);
   const maxWindowStart = Math.max(
     0,
-    participants.length - PARTICIPANT_CARD_DOM_LIMIT,
+    orderedParticipants.length - PARTICIPANT_CARD_DOM_LIMIT,
   );
   const effectiveWindowStart = Math.min(windowStart, maxWindowStart);
   const handleListScroll = useCallback(
@@ -180,7 +189,7 @@ export default function RoomParticipantList({
           return null;
         }
 
-        return participants
+        return orderedParticipants
           .slice(
             boundedWindowStart,
             boundedWindowStart + PARTICIPANT_CARD_DOM_LIMIT,
@@ -193,16 +202,16 @@ export default function RoomParticipantList({
           : null;
       });
     },
-    [maxWindowStart, participants],
+    [maxWindowStart, orderedParticipants],
   );
 
   const visibleParticipants = useMemo(
     () =>
-      participants.slice(
+      orderedParticipants.slice(
         effectiveWindowStart,
         effectiveWindowStart + PARTICIPANT_CARD_DOM_LIMIT,
       ),
-    [effectiveWindowStart, participants],
+    [effectiveWindowStart, orderedParticipants],
   );
   const participantBadgeSlugs = useMemo(() => {
     const seenSlugs = new Set<string>();
@@ -234,7 +243,7 @@ export default function RoomParticipantList({
     ]),
   );
 
-  const activeExpandedParticipantKey = participants.some(
+  const activeExpandedParticipantKey = orderedParticipants.some(
     (participant) =>
       getParticipantIdentityKey(participant) === expandedParticipantKey,
   )
@@ -252,7 +261,9 @@ export default function RoomParticipantList({
       <div
         className={styles.virtualList}
         style={
-          { "--participant-count": participants.length } as CSSProperties
+          {
+            "--participant-count": orderedParticipants.length,
+          } as CSSProperties
         }
       >
         {visibleParticipants.map((participant, visibleIndex) => {
@@ -283,7 +294,7 @@ export default function RoomParticipantList({
               ? (["transfer"] as const)
               : []),
           ];
-          const hasActions = actions.length > 0;
+          const hasActions = isCurrentUser || actions.length > 0;
           const isCurrentKickPending =
             isKickPending &&
             kickTargetKey != null &&
@@ -311,6 +322,7 @@ export default function RoomParticipantList({
               <RoomParticipantCard
                 actions={actions}
                 expanded={expanded}
+                isCurrentUser={isCurrentUser}
                 isKickPending={isCurrentKickPending}
                 isOwner={isOwner}
                 isTransferPending={isCurrentTransferPending}
@@ -319,6 +331,8 @@ export default function RoomParticipantList({
                 onBlockParticipant={onBlockParticipant}
                 onClose={closeParticipantMenu}
                 onKickParticipant={onKickParticipant}
+                onOpenFriends={onOpenFriends}
+                onOpenSettings={onOpenSettings}
                 onReportParticipant={onReportParticipant}
                 onToggle={toggleParticipantMenu}
                 onTransferOwner={onTransferOwner}
diff --git a/src/features/room/participants/ui/RoomParticipantsPanel.module.css b/src/features/room/participants/ui/RoomParticipantsPanel.module.css
index d7ee6955..2b1dc2a8 100644
--- a/src/features/room/participants/ui/RoomParticipantsPanel.module.css
+++ b/src/features/room/participants/ui/RoomParticipantsPanel.module.css
@@ -156,6 +156,14 @@
   white-space: nowrap;
 }
 
+.currentUserLabel {
+  flex-shrink: 0;
+  color: #3c3c3c;
+  font-size: 12px;
+  font-weight: var(--fw-medium);
+  line-height: 1.2;
+}
+
 .badgeLabel {
   display: inline-flex;
   max-width: 100%;
@@ -358,6 +366,10 @@
     font-size: 11.2px;
   }
 
+  .currentUserLabel {
+    font-size: 9.6px;
+  }
+
   .ownerIcon {
     width: 12.8px;
     height: 11.2px;
diff --git a/src/features/room/participants/ui/RoomParticipantsPanel.test.tsx b/src/features/room/participants/ui/RoomParticipantsPanel.test.tsx
index c44a7b60..b9876428 100644
--- a/src/features/room/participants/ui/RoomParticipantsPanel.test.tsx
+++ b/src/features/room/participants/ui/RoomParticipantsPanel.test.tsx
@@ -14,6 +14,8 @@ const transferMutate = vi.fn();
 const transferReset = vi.fn();
 const onUserBlocked = vi.fn();
 const onLoadMore = vi.fn();
+const onOpenFriends = vi.fn();
+const onOpenSettings = vi.fn();
 
 const member: PlaylistParticipant = {
   nickname: "회원",
@@ -136,6 +138,8 @@ function renderPanel(messages = [
       isFetchingNextPage={false}
       isLoadMoreError={false}
       onLoadMore={onLoadMore}
+      onOpenFriends={onOpenFriends}
+      onOpenSettings={onOpenSettings}
       onUserBlocked={onUserBlocked}
       participants={[member]}
       roomMeta={{
diff --git a/src/features/room/participants/ui/RoomParticipantsPanel.tsx b/src/features/room/participants/ui/RoomParticipantsPanel.tsx
index af039621..e8c3bed3 100644
--- a/src/features/room/participants/ui/RoomParticipantsPanel.tsx
+++ b/src/features/room/participants/ui/RoomParticipantsPanel.tsx
@@ -36,6 +36,8 @@ type Props = {
   isFetchingNextPage: boolean;
   isLoadMoreError: boolean;
   onLoadMore: () => Promise<unknown>;
+  onOpenFriends: () => void;
+  onOpenSettings: () => void;
   onUserBlocked: (userSlug: string) => void;
   participants: PlaylistParticipant[];
   roomMeta: RoomMeta | null;
@@ -50,6 +52,8 @@ export default function RoomParticipantsPanel({
   isFetchingNextPage,
   isLoadMoreError,
   onLoadMore,
+  onOpenFriends,
+  onOpenSettings,
   onUserBlocked,
   participants,
   roomMeta,
@@ -153,6 +157,8 @@ export default function RoomParticipantsPanel({
             kickParticipant.variables ?? null,
           )}
           onBlockParticipant={handleBlockParticipant}
+          onOpenFriends={onOpenFriends}
+          onOpenSettings={onOpenSettings}
           onKickParticipant={(participant) => {
             const target = getParticipantKickTarget(participant);
             const feedbackTarget = target?.userSlug ?? target?.participantId;
diff --git a/src/features/room/participants/ui/RoomSelfManagementMenu.tsx b/src/features/room/participants/ui/RoomSelfManagementMenu.tsx
new file mode 100644
index 00000000..dbafc537
--- /dev/null
+++ b/src/features/room/participants/ui/RoomSelfManagementMenu.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import type { RefObject } from "react";
+import ManagementMenuShell from "@/src/shared/ui/management-menu/ManagementMenuShell";
+
+type Props = {
+  anchorBoundaryRef: RefObject<HTMLElement | null>;
+  label: string;
+  menuId: string;
+  onClose: () => void;
+  onOpenFriends: () => void;
+  onOpenSettings: () => void;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+
+export default function RoomSelfManagementMenu({
+  anchorBoundaryRef,
+  label,
+  menuId,
+  onClose,
+  onOpenFriends,
+  onOpenSettings,
+  triggerRef,
+}: Props) {
+  const runAndClose = (action: () => void) => {
+    onClose();
+    action();
+  };
+
+  return (
+    <ManagementMenuShell
+      anchorBoundaryRef={anchorBoundaryRef}
+      label={label}
+      menuId={menuId}
+      onClose={onClose}
+      positioning="viewport"
+      triggerRef={triggerRef}
+    >
+      <button
+        type="button"
+        role="menuitem"
+        onClick={() => runAndClose(onOpenSettings)}
+      >
+        Setting
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        onClick={() => runAndClose(onOpenFriends)}
+      >
+        Friends
+      </button>
+    </ManagementMenuShell>
+  );
+}

From c03715db5545604b2f31d967c89a47b4f8d55cd3 Mon Sep 17 00:00:00 2001
From: Ryu Tae Hyun <ryu200112@gmail.com>
Date: Tue, 1 Sep 2026 14:44:04 +0900
Subject: [PATCH 7/7] =?UTF-8?q?docs(delivery):=20=EC=B0=B8=EA=B0=80?=
 =?UTF-8?q?=EC=9E=90=20=EB=82=B4=20=EB=A9=94=EB=89=B4=20PR=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EA=B8=B0=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../delivery-state.md                                     | 8 ++++----
 .../2026-09-01-room-self-participant-menu/handoff.md      | 6 +++---
 .../active/2026-09-01-room-self-participant-menu/plan.md  | 2 +-
 docs/exec-plans/active/README.md                          | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
index 9442bd43..5fcce655 100644
--- a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
@@ -1,12 +1,12 @@
 # Delivery State
 
-- status: publishing
+- status: ci-pending
 - branch: dev
 - base: main
 - issue:
-- pr:
+- pr: https://github.com/Queuing-org/frontend/pull/59
 - selected_skills: queuing-feature-delivery, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer
 - local_qa: lint, 660 tests, and production build passed; browser session unavailable
-- ci: not-started
+- ci: pending
 - review_threads: not-checked
-- next_action: push dev and open a draft PR to main
+- next_action: inspect PR #59 CI and review feedback when requested
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
index 38ddbad6..86041e53 100644
--- a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
@@ -1,7 +1,7 @@
 # Handoff
 
-- status: publishing
-- completed: implementation, targeted tests, lint, full tests, build, final fresh QA pass, local commit
+- status: ci-pending
+- completed: implementation, targeted tests, lint, full tests, build, final fresh QA pass, commit, push, Draft PR #59 update
 - blocker: none
-- next_action: push `dev`, create a draft PR from `dev` to `main`, then update this run to `ci-pending`
+- next_action: inspect Draft PR #59 CI and review feedback when requested
 - prohibited: do not force-push, merge, or mark the PR ready without explicit user request
diff --git a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
index 508591f1..6cc6c26d 100644
--- a/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
+++ b/docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
@@ -41,7 +41,7 @@
 - [x] lint, test, build
 - [x] fresh QA review — final pass
 - [x] local commit
-- [ ] push, draft PR
+- [x] push, Draft PR #59 갱신
 
 ## Verification
 
diff --git a/docs/exec-plans/active/README.md b/docs/exec-plans/active/README.md
index 6f1672e3..a6bab59e 100644
--- a/docs/exec-plans/active/README.md
+++ b/docs/exec-plans/active/README.md
@@ -1,6 +1,6 @@
 # Active Execution Plans
 
-- [2026-09-01-room-self-participant-menu](./2026-09-01-room-self-participant-menu/plan.md): publishing — 내 참가자 첫 행·`(나)`·Settings/Friends modal과 reconnect identity QA 통과, draft PR 게시 중
+- [2026-09-01-room-self-participant-menu](./2026-09-01-room-self-participant-menu/plan.md): ci-pending — Draft PR #59, 내 참가자 첫 행·`(나)`·Settings/Friends modal과 reconnect identity QA 통과
 
 - [2026-09-01-profile-room-request-polish](./2026-09-01-profile-room-request-polish/plan.md): ready — Draft PR #59, 최애곡 두 줄 표시·방 편집 치수·노래 신청 문구와 hover/타이포 구현 및 로컬·CI QA 통과