From 1e5cc5f9e7e7e06553a624c3dae253b98d6aadba Mon Sep 17 00:00:00 2001
From: Develop-KIM <kimdonghwan913@gmail.com>
Date: Thu, 9 Jul 2026 00:03:27 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix(retrospect):=20=EC=A0=84=EC=86=A1=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B2=AB=20=EB=A0=8C=EB=8D=94=20?=
 =?UTF-8?q?=EA=B9=9C=EB=B9=A1=EC=9E=84=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=81=AC=20=EA=B6=8C=ED=95=9C=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전송 버튼 아이콘을 <Icon>(비동기 resolve) 대신 인라인 SVG로 교체해 검은 원만 뜨던 깜빡임 제거
- AndroidManifest에 RECORD_AUDIO/MODIFY_AUDIO_SETTINGS 추가(WebView getUserMedia 권한 요청 가능화)
- 권한 영구 거부 시 [설정으로 이동] 팝업 추가(capacitor-native-settings)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 android/app/capacitor.build.gradle         |  1 +
 android/app/src/main/AndroidManifest.xml   |  4 ++
 android/capacitor.settings.gradle          |  3 +
 app/components/RetrospectVoiceRecorder.vue | 12 ++--
 app/composables/useVoiceRecorder.ts        | 14 +++++
 app/pages/retrospect/start.vue             | 64 +++++++++++++++++++++-
 package-lock.json                          | 10 ++++
 package.json                               |  1 +
 8 files changed, 103 insertions(+), 6 deletions(-)

diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index 0421499..8905ffd 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -16,6 +16,7 @@ dependencies {
     implementation project(':capacitor-text-zoom')
     implementation project(':capgo-capacitor-social-login')
     implementation project(':team-lepisode-capacitor-kakao-login')
+    implementation project(':capacitor-native-settings')
 
 }
 
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 614ae08..4ae718f 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -54,6 +54,10 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
 
+    <!-- 회고 음성 입력(STT) — WebView getUserMedia가 런타임 권한 다이얼로그를 띄우려면 선언 필요 -->
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+
     <!-- 광고 미사용: 일부 SDK(Firebase 등)가 자동 병합하는 광고 ID 권한 제거 -->
     <uses-permission android:name="com.google.android.gms.permission.AD_ID" tools:node="remove" />
 </manifest>
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 092f56e..f696ff6 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -22,3 +22,6 @@ project(':capgo-capacitor-social-login').projectDir = new File('../node_modules/
 
 include ':team-lepisode-capacitor-kakao-login'
 project(':team-lepisode-capacitor-kakao-login').projectDir = new File('../node_modules/@team-lepisode/capacitor-kakao-login/android')
+
+include ':capacitor-native-settings'
+project(':capacitor-native-settings').projectDir = new File('../node_modules/capacitor-native-settings/android')
diff --git a/app/components/RetrospectVoiceRecorder.vue b/app/components/RetrospectVoiceRecorder.vue
index f24c0a5..74b1629 100644
--- a/app/components/RetrospectVoiceRecorder.vue
+++ b/app/components/RetrospectVoiceRecorder.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits<{ done: [blob: Blob]; cancel: [] }>()
+const emit = defineEmits<{ done: [blob: Blob]; cancel: []; blocked: [] }>()
 const { show } = useToast()
 const recorder = useVoiceRecorder()
 
@@ -121,9 +121,13 @@ function onCancel() {
 onMounted(async () => {
   const ok = await recorder.start()
   if (!ok) {
-    // 마이크 권한 거부/장치 없음 — 웹·네이티브 공통으로 안내 후 닫기
-    show('마이크를 사용할 수 없어요. 권한을 확인해 주세요.')
-    emit('cancel')
+    // 권한이 영구 거부면 부모가 '설정으로 이동' 안내를 띄우도록 위임, 그 외(1회 거부·장치 없음)엔 일반 토스트
+    if (await recorder.isPermissionBlocked()) {
+      emit('blocked')
+    } else {
+      show('마이크를 사용할 수 없어요. 권한을 확인해 주세요.')
+      emit('cancel')
+    }
     return
   }
   startWave()
diff --git a/app/composables/useVoiceRecorder.ts b/app/composables/useVoiceRecorder.ts
index 1214780..f1402de 100644
--- a/app/composables/useVoiceRecorder.ts
+++ b/app/composables/useVoiceRecorder.ts
@@ -42,6 +42,19 @@ export function useVoiceRecorder() {
     }
   }
 
+  // 마이크 권한이 영구 거부('denied') 상태인지 — true면 OS 다이얼로그가 더는 안 떠서 설정 유도가 필요.
+  // Permissions API는 안드 WebView(Chromium)에서 지원. iOS WKWebView 등 미지원 환경은 false로 폴백.
+  async function isPermissionBlocked(): Promise<boolean> {
+    try {
+      const perms = navigator.permissions
+      if (!perms?.query) return false
+      const status = await perms.query({ name: 'microphone' as PermissionName })
+      return status.state === 'denied'
+    } catch {
+      return false
+    }
+  }
+
   // 마이크 권한 요청 (성공 시 true). 네이티브에선 권한 다이얼로그로 대체.
   async function requestPermission(): Promise<boolean> {
     try {
@@ -117,6 +130,7 @@ export function useVoiceRecorder() {
     isRecording: readonly(isRecording),
     isPaused: readonly(isPaused),
     elapsed: readonly(elapsed),
+    isPermissionBlocked,
     requestPermission,
     start,
     stop,
diff --git a/app/pages/retrospect/start.vue b/app/pages/retrospect/start.vue
index 2dea536..3b9479e 100644
--- a/app/pages/retrospect/start.vue
+++ b/app/pages/retrospect/start.vue
@@ -123,7 +123,17 @@
           aria-label="전송"
           @click="onSend"
         >
-          <Icon name="famicons:arrow-up-sharp" class="w-4 h-4 text-grey-1" />
+          <!-- 인라인 SVG(비동기 아이콘 resolve 제거) — 검은 원만 뜨는 첫 마운트 깜빡임 방지. 모양은 famicons:arrow-up-sharp와 동일 -->
+          <svg viewBox="0 0 512 512" class="w-4 h-4 text-grey-1" aria-hidden="true">
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-miterlimit="10"
+              stroke-width="48"
+              d="M112 244l144-144 144 144M256 120v292"
+            />
+          </svg>
         </button>
       </div>
     </div>
@@ -213,7 +223,40 @@
     </Teleport>
 
     <!-- 음성 레코더 (figma 2225-7905) -->
-    <RetrospectVoiceRecorder v-if="showRecorder" @done="onRecorderDone" @cancel="onRecorderCancel" />
+    <RetrospectVoiceRecorder v-if="showRecorder" @done="onRecorderDone" @cancel="onRecorderCancel" @blocked="onMicBlocked" />
+
+    <!-- 마이크 권한 영구 거부 → 설정 유도 (OS 다이얼로그가 더는 안 뜨는 상태) -->
+    <Teleport to="#app-container">
+      <Transition name="mic-fade">
+        <div v-if="showMicBlockedPopup" class="absolute inset-0 z-50 flex items-center justify-center px-5" style="padding-bottom: env(safe-area-inset-bottom, 0px)">
+          <div class="absolute inset-0 bg-black/40" @click="showMicBlockedPopup = false" />
+          <div class="relative w-full max-w-[300px] bg-grey-1 rounded-2xl px-5 py-4 flex flex-col gap-[14px]">
+            <div class="flex flex-col items-center gap-2 py-3 text-center">
+              <p class="text-[17px] font-semibold text-grey-13 leading-[1.4] tracking-[-0.02em]">
+                마이크 권한이<br />꺼져 있어요.
+              </p>
+              <p class="text-[14px] font-normal text-grey-8 leading-[1.6] tracking-[-0.02em]">
+                음성으로 회고를 기록하려면<br />설정에서 마이크 권한을 켜주세요.
+              </p>
+            </div>
+            <div class="flex gap-2 pb-1">
+              <button
+                class="flex-1 h-[50px] rounded-xl border border-grey-5 bg-grey-1 text-[15px] font-semibold text-grey-13 active:bg-grey-3 transition-colors"
+                @click="showMicBlockedPopup = false"
+              >
+                닫기
+              </button>
+              <button
+                class="flex-1 h-[50px] rounded-xl bg-primary text-[15px] font-semibold text-grey-13 active:opacity-80 transition-opacity"
+                @click="onOpenAppSettings"
+              >
+                설정으로 이동
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
 
     <!-- 음성 → 텍스트 변환 중 (figma 2229-8319) -->
     <Teleport to="#app-container">
@@ -236,6 +279,7 @@
 import { Capacitor } from '@capacitor/core'
 import type { PluginListenerHandle } from '@capacitor/core'
 import { Keyboard } from '@capacitor/keyboard'
+import { NativeSettings, AndroidSettings, IOSSettings } from 'capacitor-native-settings'
 import type { QuestionType, CompleteRetrospectiveResponse } from '~/types/api'
 import { getApiErrorCode, getApiErrorMessage, isAuthError } from '~/utils/api-error'
 
@@ -290,6 +334,7 @@ const showRestartPopup = ref(false)
 
 // 음성 입력(STT) — 웹·네이티브 모두 지원
 const showMicPopup = ref(false) // 마이크 권한 안내 팝업 (CHAT_001)
+const showMicBlockedPopup = ref(false) // 마이크 권한 영구 거부 → 설정 유도 팝업
 const micExplained = ref(false) // 안내 팝업을 이미 거쳤는지
 const showRecorder = ref(false) // 녹음 레코더 노출
 const isTranscribing = ref(false) // 음성 → 텍스트 변환 중
@@ -609,6 +654,21 @@ async function onRecorderDone(blob: Blob) {
 function onRecorderCancel() {
   showRecorder.value = false
 }
+// 마이크 권한 영구 거부 → 레코더 닫고 설정 유도 팝업 노출
+function onMicBlocked() {
+  showRecorder.value = false
+  showMicBlockedPopup.value = true
+}
+// OS 앱 설정 화면으로 이동 (사용자가 직접 마이크 권한 토글). 웹에선 무동작.
+async function onOpenAppSettings() {
+  showMicBlockedPopup.value = false
+  if (!isNative.value) return
+  if (Capacitor.getPlatform() === 'ios') {
+    await NativeSettings.openIOS({ option: IOSSettings.App })
+  } else {
+    await NativeSettings.openAndroid({ option: AndroidSettings.ApplicationDetails })
+  }
+}
 
 function onBack() {
   if (messages.value.length === 0) {
diff --git a/package-lock.json b/package-lock.json
index 1f2067a..0ba5483 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@vueuse/nuxt": "^13.3.0",
         "axios": "^1.9.0",
         "canvas-confetti": "^1.9.4",
+        "capacitor-native-settings": "^7.0.2",
         "firebase": "^12.15.0",
         "nuxt": "^4.4.7",
         "pinia": "^3.0.2",
@@ -8085,6 +8086,15 @@
         "url": "https://www.paypal.me/kirilvatev"
       }
     },
+    "node_modules/capacitor-native-settings": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/capacitor-native-settings/-/capacitor-native-settings-7.0.2.tgz",
+      "integrity": "sha512-s6xsLW0mJ6tywPgGtPXMgfDGTH5UqdSry1ZRlqh9T124IEIuPQyA35zpBaCywfHkmDKEZYdBik3/8Mdncjbniw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=7.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
diff --git a/package.json b/package.json
index 5f276cb..4508abc 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@vueuse/nuxt": "^13.3.0",
     "axios": "^1.9.0",
     "canvas-confetti": "^1.9.4",
+    "capacitor-native-settings": "^7.0.2",
     "firebase": "^12.15.0",
     "nuxt": "^4.4.7",
     "pinia": "^3.0.2",

From b8de12eb11b4dc655fa6d10ce6b0d6fdd014518d Mon Sep 17 00:00:00 2001
From: Develop-KIM <kimdonghwan913@gmail.com>
Date: Thu, 9 Jul 2026 00:03:27 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat(app):=20=EC=83=81=C2=B7=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EB=B0=94=EB=A5=BC=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=B0=B0=EA=B2=BD=EC=83=89=EC=97=90=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커스텀 NavigationBar 네이티브 플러그인으로 하단 내비바 색 런타임 제어
- status-bar.client.ts를 하단까지 확장: 탭바 화면은 흰색, 그 외는 배경색 샘플링
- 스플래시/초기 프레임 바를 포인트컬러(#3DDB99)로 지정

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../main/java/kr/ai/didit/MainActivity.java   | 11 ++-
 .../java/kr/ai/didit/NavigationBarPlugin.java | 46 +++++++++++
 android/app/src/main/res/values/styles.xml    | 11 +++
 app/components/layout/BottomTabBar.vue        |  1 +
 app/plugins/status-bar.client.ts              | 76 +++++++++++++------
 5 files changed, 119 insertions(+), 26 deletions(-)
 create mode 100644 android/app/src/main/java/kr/ai/didit/NavigationBarPlugin.java

diff --git a/android/app/src/main/java/kr/ai/didit/MainActivity.java b/android/app/src/main/java/kr/ai/didit/MainActivity.java
index 09b3622..17091ce 100644
--- a/android/app/src/main/java/kr/ai/didit/MainActivity.java
+++ b/android/app/src/main/java/kr/ai/didit/MainActivity.java
@@ -1,5 +1,14 @@
 package kr.ai.didit;
 
+import android.os.Bundle;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+    @Override
+    public void onCreate(Bundle savedInstanceState) {
+        // 커스텀 하단 내비게이션 바 플러그인 등록 (super.onCreate 이전에 호출해야 함)
+        registerPlugin(NavigationBarPlugin.class);
+        super.onCreate(savedInstanceState);
+    }
+}
diff --git a/android/app/src/main/java/kr/ai/didit/NavigationBarPlugin.java b/android/app/src/main/java/kr/ai/didit/NavigationBarPlugin.java
new file mode 100644
index 0000000..8817ed0
--- /dev/null
+++ b/android/app/src/main/java/kr/ai/didit/NavigationBarPlugin.java
@@ -0,0 +1,46 @@
+package kr.ai.didit;
+
+import android.graphics.Color;
+import android.os.Build;
+import android.view.View;
+
+import com.getcapacitor.Plugin;
+import com.getcapacitor.PluginCall;
+import com.getcapacitor.PluginMethod;
+import com.getcapacitor.annotation.CapacitorPlugin;
+
+// 하단 내비게이션 바 색을 런타임에 현재 화면 배경색으로 칠하기 위한 커스텀 플러그인.
+// (@capacitor/status-bar는 상단 상태바만 다뤄서, 하단 내비바는 직접 구현한다)
+@CapacitorPlugin(name = "NavigationBar")
+public class NavigationBarPlugin extends Plugin {
+
+    // setColor({ color: '#RRGGBB', darkButtons: boolean })
+    @PluginMethod
+    public void setColor(PluginCall call) {
+        final String color = call.getString("color");
+        final boolean darkButtons = Boolean.TRUE.equals(call.getBoolean("darkButtons", true));
+        if (color == null) {
+            call.reject("color is required");
+            return;
+        }
+        getActivity().runOnUiThread(() -> {
+            try {
+                getActivity().getWindow().setNavigationBarColor(Color.parseColor(color));
+                // 밝은 배경이면 어두운 버튼(LIGHT_NAVIGATION_BAR) — API 26+ 에서만 지원
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+                    View decor = getActivity().getWindow().getDecorView();
+                    int flags = decor.getSystemUiVisibility();
+                    if (darkButtons) {
+                        flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+                    } else {
+                        flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+                    }
+                    decor.setSystemUiVisibility(flags);
+                }
+                call.resolve();
+            } catch (Exception e) {
+                call.reject("failed to set navigation bar color: " + e.getMessage());
+            }
+        });
+    }
+}
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index be874e5..32d902a 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -13,10 +13,21 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
         <item name="android:background">@null</item>
+        <!-- 시스템 바 초기색: 첫 화면(스플래시/로그인)이 포인트컬러(초록)라 초록으로 시작.
+             WebView 로드 후 status-bar.client.ts가 화면별 배경색으로 덮어쓴다. -->
+        <item name="android:statusBarColor">#3DDB99</item>
+        <item name="android:navigationBarColor">#3DDB99</item>
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
     </style>
 
 
     <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
         <item name="android:background">@drawable/splash</item>
+        <!-- 네이티브 스플래시: 상·하단 바 포인트컬러(초록) + 어두운 아이콘 -->
+        <item name="android:statusBarColor">#3DDB99</item>
+        <item name="android:navigationBarColor">#3DDB99</item>
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
     </style>
 </resources>
\ No newline at end of file
diff --git a/app/components/layout/BottomTabBar.vue b/app/components/layout/BottomTabBar.vue
index 67bf5a6..0d15365 100644
--- a/app/components/layout/BottomTabBar.vue
+++ b/app/components/layout/BottomTabBar.vue
@@ -1,5 +1,6 @@
 <template>
   <nav
+    id="bottom-tab-bar"
     class="shrink-0 bg-white w-full"
     style="border-top: 1px solid #E8E8E8;"
   >
diff --git a/app/plugins/status-bar.client.ts b/app/plugins/status-bar.client.ts
index 228551d..baca4ed 100644
--- a/app/plugins/status-bar.client.ts
+++ b/app/plugins/status-bar.client.ts
@@ -1,25 +1,35 @@
-// 네이티브 앱 상태바를 "현재 화면의 실제 배경색"에 자동으로 통일한다.
-// - 웹뷰를 상태바 아래까지 그리고(edge-to-edge), 상태바 영역(=#app-container의 safe-top 패딩)을
-//   현재 화면 최상단 배경색으로 칠해 화면과 이어지게 한다.
-// - 배경 밝기를 계산해 아이콘(시간·배터리) 톤을 자동 전환한다. (어두운 배경 → 밝은 아이콘)
+// 네이티브 앱 상·하단 시스템 바를 "현재 화면의 실제 배경색"에 자동으로 통일한다.
+// - 상단 상태바: @capacitor/status-bar 오버레이 + safe-top 패딩을 최상단 배경색으로 칠함
+// - 하단 내비게이션 바: 커스텀 NavigationBar 플러그인으로 최하단 배경색을 칠함
+//   (예: 로그인/스플래시(초록) → 초록, 탭바 화면(흰색) → 흰색)
+// - 각 바의 배경 밝기를 계산해 아이콘/버튼 톤을 자동 전환한다. (어두운 배경 → 밝은 아이콘)
 // 화면별 색 지정이 필요 없다 — 어떤 페이지든 그 배경색을 그대로 따라간다.
-import { Capacitor } from '@capacitor/core'
+import { Capacitor, registerPlugin } from '@capacitor/core'
 import { StatusBar, Style } from '@capacitor/status-bar'
 
+// 커스텀 하단 내비바 플러그인 (android 네이티브)
+interface NavigationBarPlugin {
+  setColor(options: { color: string; darkButtons: boolean }): Promise<void>
+}
+const NavigationBar = registerPlugin<NavigationBarPlugin>('NavigationBar')
+
 export default defineNuxtPlugin((nuxtApp) => {
   if (!Capacitor.isNativePlatform()) return
+  const isAndroid = Capacitor.getPlatform() === 'android'
 
   // Android: 상태바 투명 오버레이 (iOS는 기본 오버레이라 무영향)
   StatusBar.setOverlaysWebView({ overlay: true }).catch(() => {})
 
   const getContainer = () => document.getElementById('app-container')
 
-  // 상태바 바로 아래 지점의 실제 배경색을 DOM에서 읽어온다 (투명이면 부모로 거슬러 올라감)
-  function sampleTopColor(): [number, number, number] | null {
-    const container = getContainer()
-    if (!container) return null
-    const inset = parseFloat(getComputedStyle(container).paddingTop) || 0
-    let el: Element | null = document.elementFromPoint(Math.floor(window.innerWidth / 2), inset + 2)
+  // 인지 밝기(0~255). 150 미만이면 어두운 배경으로 간주.
+  const isDarkBg = (r: number, g: number, b: number) => (r * 299 + g * 587 + b * 114) / 1000 < 150
+  const toHex = (r: number, g: number, b: number) =>
+    `#${[r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('')}`
+
+  // 특정 y 지점의 실제 배경색을 DOM에서 읽어온다 (투명이면 부모로 거슬러 올라감)
+  function sampleColorAt(y: number): [number, number, number] | null {
+    let el: Element | null = document.elementFromPoint(Math.floor(window.innerWidth / 2), y)
     while (el) {
       const m = getComputedStyle(el).backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
       if (m && (m[4] === undefined || Number(m[4]) > 0)) {
@@ -30,23 +40,39 @@ export default defineNuxtPlugin((nuxtApp) => {
     return null
   }
 
-  function syncStatusBar() {
+  function syncSystemBars() {
     const container = getContainer()
-    // 이전 화면 색 잔상 제거 후 샘플링 (페이지 배경이 투명하면 기본 배경색으로 폴백)
+    // 이전 화면 색 잔상 제거 후 샘플링
     if (container) container.style.backgroundColor = ''
-    const rgb = sampleTopColor()
-    if (!rgb) return
-    const [r, g, b] = rgb
-    const hex = `#${[r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('')}`
-    // 상태바 영역(패딩)도 같은 색으로 → 화면과 자연스럽게 이어짐
-    if (container) container.style.backgroundColor = hex
-    StatusBar.setBackgroundColor({ color: hex }).catch(() => {})
-    // 인지 밝기(0~255) < 150 이면 어두운 배경 → 밝은 아이콘
-    const dark = (r * 299 + g * 587 + b * 114) / 1000 < 150
-    StatusBar.setStyle({ style: dark ? Style.Dark : Style.Light }).catch(() => {})
+
+    // 상단 상태바 — safe-top 패딩 바로 아래 지점 색
+    const topInset = container ? parseFloat(getComputedStyle(container).paddingTop) || 0 : 0
+    const top = sampleColorAt(topInset + 2)
+    if (top) {
+      const [r, g, b] = top
+      const hex = toHex(r, g, b)
+      // 상태바 영역(패딩)도 같은 색으로 → 화면과 자연스럽게 이어짐
+      if (container) container.style.backgroundColor = hex
+      StatusBar.setBackgroundColor({ color: hex }).catch(() => {})
+      StatusBar.setStyle({ style: isDarkBg(r, g, b) ? Style.Dark : Style.Light }).catch(() => {})
+    }
+
+    // 하단 내비게이션 바
+    if (isAndroid) {
+      // 탭바가 있는 화면은 무조건 흰색(탭바 bg-white와 이음새). 그 외엔 화면 배경색을 샘플링.
+      if (document.getElementById('bottom-tab-bar')) {
+        NavigationBar.setColor({ color: '#FFFFFF', darkButtons: true }).catch(() => {})
+      } else {
+        const bottom = sampleColorAt(window.innerHeight - 2)
+        if (bottom) {
+          const [r, g, b] = bottom
+          NavigationBar.setColor({ color: toHex(r, g, b), darkButtons: !isDarkBg(r, g, b) }).catch(() => {})
+        }
+      }
+    }
   }
 
   // 페이지 전환 완료·최초 마운트 후 한 프레임 뒤 동기화 (렌더 반영 대기)
-  nuxtApp.hook('page:finish', () => { requestAnimationFrame(syncStatusBar) })
-  nuxtApp.hook('app:mounted', () => { requestAnimationFrame(syncStatusBar) })
+  nuxtApp.hook('page:finish', () => { requestAnimationFrame(syncSystemBars) })
+  nuxtApp.hook('app:mounted', () => { requestAnimationFrame(syncSystemBars) })
 })

From 092fdba5adc218c795fe9aad819415817b87abe6 Mon Sep 17 00:00:00 2001
From: Develop-KIM <kimdonghwan913@gmail.com>
Date: Thu, 9 Jul 2026 00:03:27 +0900
Subject: [PATCH 3/4] =?UTF-8?q?fix(ui):=20WebView=20=EC=9E=91=EC=9D=80=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=AD=89=EA=B0=9C=EC=A7=90=20?=
 =?UTF-8?q?=EC=99=84=ED=99=94(text-rendering=20optimizeSpeed)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

비정수 DPR(1.75)에서 optimizeLegibility의 커닝/리가처가 작은 글자를 서브픽셀에 얹어 무르게 만드는 문제를 optimizeSpeed로 완화

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/assets/css/main.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 482f0ec..e7d3d0a 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -23,7 +23,9 @@
   html {
     font-family: 'Pretendard', system-ui, sans-serif;
     /* 비정수 DPR(예: 1.75) 기기에서 antialiased(grayscale AA)는 글자를 더 물러 보이게 해 제거 → WebView 기본 AA 사용 */
-    text-rendering: optimizeLegibility;
+    /* optimizeLegibility는 커닝/리가처로 글자를 소수 픽셀 위치에 얹어 작은 글자(pill·태그칩 11~12px)를 무르게 만든다.
+       optimizeSpeed로 그 경로를 꺼 작은 텍스트를 또렷하게 (DPR 1.75 서브픽셀 뭉개짐 완화) */
+    text-rendering: optimizeSpeed;
   }
 
   body {

From 6ce23df485bd421b522ca6b1c3e28997d115478b Mon Sep 17 00:00:00 2001
From: Develop-KIM <kimdonghwan913@gmail.com>
Date: Thu, 9 Jul 2026 00:03:27 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix(my):=20=EB=AA=A9=ED=91=9C=20=EB=8B=AC?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=B0=EC=A7=80=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20pop-in=20=EB=B0=A9=EC=A7=80(=EC=8A=A4=EC=BC=88?=
 =?UTF-8?q?=EB=A0=88=ED=86=A4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

배지 섹션이 /api/v1/badges 응답 후 렌더돼 뒤늦게 나타나던 깜빡임을 로딩 스켈레톤으로 자리 예약해 방지

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/pages/my/index.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/pages/my/index.vue b/app/pages/my/index.vue
index e5207d5..066fdbf 100644
--- a/app/pages/my/index.vue
+++ b/app/pages/my/index.vue
@@ -34,7 +34,18 @@
         <img src="/icons/chevron-right.svg" alt="" class="w-6 h-6" />
       </button>
       <!-- 획득 배지 미리보기: 최대 2개. 열 고정 대신 카드 최소폭(140px) 기준 auto-fill → 넓은 화면에서 카드가 늘어나지 않음 -->
-      <div v-if="acquiredBadges.length > 0" class="mt-2 mb-2 px-2 grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-[10px]">
+      <!-- 로딩 중엔 스켈레톤으로 자리를 예약 → 배지(로컬 이미지)가 뒤늦게 pop-in 하며 깜빡이는 현상 방지 -->
+      <div v-if="!badgesLoaded" class="mt-2 mb-2 px-2 grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-[10px]">
+        <div
+          v-for="n in 2"
+          :key="`skeleton-${n}`"
+          class="rounded-[14px] bg-grey-3 flex flex-col items-center pt-3 gap-1 pb-5 animate-pulse"
+        >
+          <div class="h-24 w-24 rounded-xl bg-grey-4" />
+          <div class="h-3 w-12 rounded bg-grey-4" />
+        </div>
+      </div>
+      <div v-else-if="acquiredBadges.length > 0" class="mt-2 mb-2 px-2 grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-[10px]">
         <div
           v-for="b in acquiredBadges.slice(0, 2)"
           :key="b.code"
@@ -148,7 +159,7 @@ const jobLabel = computed(() => (profile.value?.job ? jobLabels[profile.value.jo
 const showLevelBadge = computed(() => (profile.value?.currentLevel ?? 0) >= 1)
 const displayLevel = computed(() => profile.value?.currentLevel ?? 1)
 
-const { badges, load: loadBadges } = useBadges()
+const { badges, loaded: badgesLoaded, load: loadBadges } = useBadges()
 const acquiredBadges = computed(() =>
   badges.value
     .filter(b => b.acquired)