From 660e622a939ece4f8a48f0024c1ae3026ec3432f Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Wed, 22 Jul 2026 02:37:45 +0900
Subject: [PATCH] =?UTF-8?q?refactor(ui-native):=20d3roNativePalette=20ambe?=
 =?UTF-8?q?r->main=20=EA=B0=9C=EB=AA=85=20(WS-NATIVE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- packages/ui-native theme.ts accent: amber->main, amberDim->dim, amberGlow->glow (값 보존)
- apps/mobile 20건 + apps/mobile-rn 18건 + ui-native 컴포넌트 9건 = 47 참조 치환
SKIP: Led/PhosphorText/Header color prop 'amber'(의미론적 컴포넌트 API, 별도 마이그레이션)
       green/greenGlow 키(amber계 범위外)
정책: docs/REFACTOR_POLICY.md DP1, 이식 인사이트 P7
---
 apps/mobile-rn/src/navigation/TabNavigator.tsx       | 6 +++---
 apps/mobile-rn/src/screens/HistoryScreen.tsx         | 6 +++---
 apps/mobile-rn/src/screens/LoginScreen.tsx           | 6 +++---
 apps/mobile-rn/src/screens/RecordScreen.tsx          | 6 +++---
 apps/mobile-rn/src/screens/SettingsScreen.tsx        | 6 +++---
 apps/mobile-rn/src/screens/TalkScreen.tsx            | 6 +++---
 apps/mobile/app/(tabs)/_layout.tsx                   | 8 ++++----
 apps/mobile/app/(tabs)/history.tsx                   | 6 +++---
 apps/mobile/app/(tabs)/record.tsx                    | 6 +++---
 apps/mobile/app/(tabs)/settings.tsx                  | 6 +++---
 apps/mobile/app/(tabs)/talk.tsx                      | 6 +++---
 apps/mobile/app/_layout.tsx                          | 2 +-
 apps/mobile/app/login.tsx                            | 6 +++---
 packages/ui-native/src/components/FilterChip.tsx     | 4 ++--
 packages/ui-native/src/components/Led.tsx            | 4 ++--
 packages/ui-native/src/components/PhosphorText.tsx   | 6 +++---
 packages/ui-native/src/components/PhysicalButton.tsx | 2 +-
 packages/ui-native/src/components/WaveBars.tsx       | 2 +-
 packages/ui-native/src/theme.ts                      | 6 +++---
 19 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/apps/mobile-rn/src/navigation/TabNavigator.tsx b/apps/mobile-rn/src/navigation/TabNavigator.tsx
index 8190654..0a9f235 100644
--- a/apps/mobile-rn/src/navigation/TabNavigator.tsx
+++ b/apps/mobile-rn/src/navigation/TabNavigator.tsx
@@ -60,7 +60,7 @@ export default function TabNavigator(): React.ReactElement {
           paddingBottom: 20,
           paddingTop: 8,
         },
-        tabBarActiveTintColor: d3roNativePalette.accent.amber,
+        tabBarActiveTintColor: d3roNativePalette.accent.main,
         tabBarInactiveTintColor: d3roNativePalette.text.muted,
         tabBarLabelStyle: {
           fontFamily: MONO,
@@ -132,10 +132,10 @@ const fabStyles = StyleSheet.create({
     width: 56,
     height: 56,
     borderRadius: 28,
-    backgroundColor: d3roNativePalette.accent.amber,
+    backgroundColor: d3roNativePalette.accent.main,
     justifyContent: 'center',
     alignItems: 'center',
-    shadowColor: d3roNativePalette.accent.amber,
+    shadowColor: d3roNativePalette.accent.main,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.4,
     shadowRadius: 10,
diff --git a/apps/mobile-rn/src/screens/HistoryScreen.tsx b/apps/mobile-rn/src/screens/HistoryScreen.tsx
index b00198f..01b3995 100644
--- a/apps/mobile-rn/src/screens/HistoryScreen.tsx
+++ b/apps/mobile-rn/src/screens/HistoryScreen.tsx
@@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
   if (loading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
+        <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
       </View>
     )
   }
@@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
           <RefreshControl
             refreshing={refreshing}
             onRefresh={() => { setRefreshing(true); void load() }}
-            tintColor={d3roNativePalette.accent.amber}
+            tintColor={d3roNativePalette.accent.main}
           />
         }
         ListEmptyComponent={
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
   cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
   timeLabel: { marginLeft: 8 },
   wordBadge: {
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    backgroundColor: d3roNativePalette.accent.dim,
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4
diff --git a/apps/mobile-rn/src/screens/LoginScreen.tsx b/apps/mobile-rn/src/screens/LoginScreen.tsx
index b2d9e4b..1936409 100644
--- a/apps/mobile-rn/src/screens/LoginScreen.tsx
+++ b/apps/mobile-rn/src/screens/LoginScreen.tsx
@@ -293,11 +293,11 @@ const styles = StyleSheet.create({
     fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
   },
   loginBtn: {
-    backgroundColor: P.accent.amber,
+    backgroundColor: P.accent.main,
     borderRadius: 12,
     paddingVertical: 14,
     alignItems: 'center',
-    shadowColor: P.accent.amber,
+    shadowColor: P.accent.main,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.3,
     shadowRadius: 10,
@@ -315,7 +315,7 @@ const styles = StyleSheet.create({
   warningBox: {
     borderWidth: 1,
     borderColor: 'rgba(255,92,53,0.3)',
-    backgroundColor: P.accent.amberDim,
+    backgroundColor: P.accent.dim,
     padding: 12,
     borderRadius: 8,
     marginTop: 8
diff --git a/apps/mobile-rn/src/screens/RecordScreen.tsx b/apps/mobile-rn/src/screens/RecordScreen.tsx
index d62778b..0fb5e7b 100644
--- a/apps/mobile-rn/src/screens/RecordScreen.tsx
+++ b/apps/mobile-rn/src/screens/RecordScreen.tsx
@@ -197,7 +197,7 @@ export default function RecordScreen(): React.ReactElement {
         )}
 
         {state === 'processing' && (
-          <ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
+          <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
         )}
 
         {transcript !== '' && state === 'done' && (
@@ -284,8 +284,8 @@ const styles = StyleSheet.create({
   },
   errorBox: {
     borderWidth: 1,
-    borderColor: d3roNativePalette.accent.amber,
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    borderColor: d3roNativePalette.accent.main,
+    backgroundColor: d3roNativePalette.accent.dim,
     padding: 10,
     borderRadius: 6,
     width: '100%'
diff --git a/apps/mobile-rn/src/screens/SettingsScreen.tsx b/apps/mobile-rn/src/screens/SettingsScreen.tsx
index 5691d4e..e43052d 100644
--- a/apps/mobile-rn/src/screens/SettingsScreen.tsx
+++ b/apps/mobile-rn/src/screens/SettingsScreen.tsx
@@ -99,7 +99,7 @@ export default function SettingsScreen(): React.ReactElement {
             value={true}
             trackColor={{
               false: d3roNativePalette.bg.inset,
-              true: d3roNativePalette.accent.amber
+              true: d3roNativePalette.accent.main
             }}
             thumbColor="#ffffff"
           />
@@ -121,7 +121,7 @@ export default function SettingsScreen(): React.ReactElement {
             value={true}
             trackColor={{
               false: d3roNativePalette.bg.inset,
-              true: d3roNativePalette.accent.amber
+              true: d3roNativePalette.accent.main
             }}
             thumbColor="#ffffff"
           />
@@ -132,7 +132,7 @@ export default function SettingsScreen(): React.ReactElement {
             value={true}
             trackColor={{
               false: d3roNativePalette.bg.inset,
-              true: d3roNativePalette.accent.amber
+              true: d3roNativePalette.accent.main
             }}
             thumbColor="#ffffff"
           />
diff --git a/apps/mobile-rn/src/screens/TalkScreen.tsx b/apps/mobile-rn/src/screens/TalkScreen.tsx
index b72781b..5a0a631 100644
--- a/apps/mobile-rn/src/screens/TalkScreen.tsx
+++ b/apps/mobile-rn/src/screens/TalkScreen.tsx
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
   },
   userBubble: {
     alignSelf: 'flex-end',
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    backgroundColor: d3roNativePalette.accent.dim,
     borderWidth: 1,
     borderColor: 'rgba(255, 92, 53, 0.3)',
     borderTopRightRadius: 4
@@ -204,7 +204,7 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 16,
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    backgroundColor: d3roNativePalette.accent.dim,
     borderWidth: 1,
     borderColor: 'rgba(255, 92, 53, 0.3)',
     justifyContent: 'center',
@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 8,
     borderLeftColor: 'transparent',
     borderRightColor: 'transparent',
-    borderBottomColor: d3roNativePalette.accent.amber
+    borderBottomColor: d3roNativePalette.accent.main
   },
   inputStatus: { paddingVertical: 4 }
 })
diff --git a/apps/mobile/app/(tabs)/_layout.tsx b/apps/mobile/app/(tabs)/_layout.tsx
index ff8c260..88e884f 100644
--- a/apps/mobile/app/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(tabs)/_layout.tsx
@@ -43,7 +43,7 @@ export default function TabsLayout(): React.ReactElement {
           paddingBottom: 20,
           paddingTop: 8
         },
-        tabBarActiveTintColor: d3roNativePalette.accent.amber,
+        tabBarActiveTintColor: d3roNativePalette.accent.main,
         tabBarInactiveTintColor: d3roNativePalette.text.muted,
         tabBarLabelStyle: {
           fontFamily: MONO_FONT,
@@ -52,7 +52,7 @@ export default function TabsLayout(): React.ReactElement {
           letterSpacing: 0.5
         },
         headerStyle: { backgroundColor: d3roNativePalette.bg.app },
-        headerTintColor: d3roNativePalette.accent.amber,
+        headerTintColor: d3roNativePalette.accent.main,
         headerTitleStyle: { fontWeight: '300', letterSpacing: 1, fontFamily: MONO_FONT },
         headerShown: false
       }}
@@ -129,10 +129,10 @@ const styles = StyleSheet.create({
     width: 56,
     height: 56,
     borderRadius: 28,
-    backgroundColor: d3roNativePalette.accent.amber,
+    backgroundColor: d3roNativePalette.accent.main,
     justifyContent: 'center',
     alignItems: 'center',
-    shadowColor: d3roNativePalette.accent.amber,
+    shadowColor: d3roNativePalette.accent.main,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.4,
     shadowRadius: 10,
diff --git a/apps/mobile/app/(tabs)/history.tsx b/apps/mobile/app/(tabs)/history.tsx
index efbf581..bf55046 100644
--- a/apps/mobile/app/(tabs)/history.tsx
+++ b/apps/mobile/app/(tabs)/history.tsx
@@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
   if (loading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
+        <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
       </View>
     )
   }
@@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
           <RefreshControl
             refreshing={refreshing}
             onRefresh={() => { setRefreshing(true); void load() }}
-            tintColor={d3roNativePalette.accent.amber}
+            tintColor={d3roNativePalette.accent.main}
           />
         }
         ListEmptyComponent={
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
   cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
   timeLabel: { marginLeft: 8 },
   wordBadge: {
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    backgroundColor: d3roNativePalette.accent.dim,
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4
diff --git a/apps/mobile/app/(tabs)/record.tsx b/apps/mobile/app/(tabs)/record.tsx
index 243b86f..322bed5 100644
--- a/apps/mobile/app/(tabs)/record.tsx
+++ b/apps/mobile/app/(tabs)/record.tsx
@@ -181,7 +181,7 @@ export default function RecordScreen(): React.ReactElement {
         )}
 
         {state === 'processing' && (
-          <ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
+          <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
         )}
 
         {transcript !== '' && state === 'done' && (
@@ -268,8 +268,8 @@ const styles = StyleSheet.create({
   },
   errorBox: {
     borderWidth: 1,
-    borderColor: d3roNativePalette.accent.amber,
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    borderColor: d3roNativePalette.accent.main,
+    backgroundColor: d3roNativePalette.accent.dim,
     padding: 10,
     borderRadius: 6,
     width: '100%'
diff --git a/apps/mobile/app/(tabs)/settings.tsx b/apps/mobile/app/(tabs)/settings.tsx
index 4b2527d..9e4119e 100644
--- a/apps/mobile/app/(tabs)/settings.tsx
+++ b/apps/mobile/app/(tabs)/settings.tsx
@@ -98,7 +98,7 @@ export default function SettingsScreen(): React.ReactElement {
             value={true}
             trackColor={{
               false: d3roNativePalette.bg.inset,
-              true: d3roNativePalette.accent.amber
+              true: d3roNativePalette.accent.main
             }}
             thumbColor="#ffffff"
           />
@@ -120,7 +120,7 @@ export default function SettingsScreen(): React.ReactElement {
             value={true}
             trackColor={{
               false: d3roNativePalette.bg.inset,
-              true: d3roNativePalette.accent.amber
+              true: d3roNativePalette.accent.main
             }}
             thumbColor="#ffffff"
           />
@@ -131,7 +131,7 @@ export default function SettingsScreen(): React.ReactElement {
             value={true}
             trackColor={{
               false: d3roNativePalette.bg.inset,
-              true: d3roNativePalette.accent.amber
+              true: d3roNativePalette.accent.main
             }}
             thumbColor="#ffffff"
           />
diff --git a/apps/mobile/app/(tabs)/talk.tsx b/apps/mobile/app/(tabs)/talk.tsx
index 4f9cafe..d070108 100644
--- a/apps/mobile/app/(tabs)/talk.tsx
+++ b/apps/mobile/app/(tabs)/talk.tsx
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
   },
   userBubble: {
     alignSelf: 'flex-end',
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    backgroundColor: d3roNativePalette.accent.dim,
     borderWidth: 1,
     borderColor: 'rgba(255, 92, 53, 0.3)',
     borderTopRightRadius: 4
@@ -204,7 +204,7 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 16,
-    backgroundColor: d3roNativePalette.accent.amberDim,
+    backgroundColor: d3roNativePalette.accent.dim,
     borderWidth: 1,
     borderColor: 'rgba(255, 92, 53, 0.3)',
     justifyContent: 'center',
@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 8,
     borderLeftColor: 'transparent',
     borderRightColor: 'transparent',
-    borderBottomColor: d3roNativePalette.accent.amber
+    borderBottomColor: d3roNativePalette.accent.main
   },
   inputStatus: { paddingVertical: 4 }
 })
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 268be81..5eb0fd3 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout(): React.ReactElement {
             <Stack
               screenOptions={{
                 headerStyle: { backgroundColor: d3roNativePalette.bg.app },
-                headerTintColor: d3roNativePalette.accent.amber,
+                headerTintColor: d3roNativePalette.accent.main,
                 contentStyle: { backgroundColor: d3roNativePalette.bg.app }
               }}
             >
diff --git a/apps/mobile/app/login.tsx b/apps/mobile/app/login.tsx
index 8a9428a..43f5a7b 100644
--- a/apps/mobile/app/login.tsx
+++ b/apps/mobile/app/login.tsx
@@ -274,11 +274,11 @@ const styles = StyleSheet.create({
     fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
   },
   loginBtn: {
-    backgroundColor: P.accent.amber,
+    backgroundColor: P.accent.main,
     borderRadius: 12,
     paddingVertical: 14,
     alignItems: 'center',
-    shadowColor: P.accent.amber,
+    shadowColor: P.accent.main,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.3,
     shadowRadius: 10,
@@ -296,7 +296,7 @@ const styles = StyleSheet.create({
   warningBox: {
     borderWidth: 1,
     borderColor: 'rgba(255,92,53,0.3)',
-    backgroundColor: P.accent.amberDim,
+    backgroundColor: P.accent.dim,
     padding: 12,
     borderRadius: 8,
     marginTop: 8
diff --git a/packages/ui-native/src/components/FilterChip.tsx b/packages/ui-native/src/components/FilterChip.tsx
index 6d1a239..93f0ba3 100644
--- a/packages/ui-native/src/components/FilterChip.tsx
+++ b/packages/ui-native/src/components/FilterChip.tsx
@@ -23,9 +23,9 @@ export function FilterChip({
       onPress={onPress}
       style={[
         {
-          backgroundColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.bg.card,
+          backgroundColor: active ? d3roNativePalette.accent.main : d3roNativePalette.bg.card,
           borderWidth: 1,
-          borderColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.border.default,
+          borderColor: active ? d3roNativePalette.accent.main : d3roNativePalette.border.default,
           borderRadius: d3roNativeRadius.pill,
           paddingHorizontal: 16,
           paddingVertical: 6
diff --git a/packages/ui-native/src/components/Led.tsx b/packages/ui-native/src/components/Led.tsx
index aae30ca..75a3c27 100644
--- a/packages/ui-native/src/components/Led.tsx
+++ b/packages/ui-native/src/components/Led.tsx
@@ -11,7 +11,7 @@ export interface LedProps {
 }
 
 const COLOR_MAP: Record<string, string> = {
-  amber: d3roNativePalette.accent.amber,
+  amber: d3roNativePalette.accent.main,
   green: d3roNativePalette.tag.green,
   red: d3roNativePalette.tag.red,
   orange: d3roNativePalette.tag.orange,
@@ -19,7 +19,7 @@ const COLOR_MAP: Record<string, string> = {
 }
 
 export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement {
-  const c = COLOR_MAP[color] ?? d3roNativePalette.accent.amber
+  const c = COLOR_MAP[color] ?? d3roNativePalette.accent.main
   const style: ViewStyle = {
     width: size,
     height: size,
diff --git a/packages/ui-native/src/components/PhosphorText.tsx b/packages/ui-native/src/components/PhosphorText.tsx
index 2dbd359..617072e 100644
--- a/packages/ui-native/src/components/PhosphorText.tsx
+++ b/packages/ui-native/src/components/PhosphorText.tsx
@@ -23,12 +23,12 @@ export function PhosphorText({
   const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value'
 
   const resolvedColor: string = (() => {
-    if (color === 'amber') return d3roNativePalette.accent.amber
+    if (color === 'amber') return d3roNativePalette.accent.main
     if (color === 'primary') return d3roNativePalette.text.primary
     if (color === 'secondary') return d3roNativePalette.text.secondary
     if (color === 'label') return d3roNativePalette.text.label
     if (color === 'muted') return d3roNativePalette.text.muted
-    return isAmberVariant ? d3roNativePalette.accent.amber : d3roNativePalette.text.primary
+    return isAmberVariant ? d3roNativePalette.accent.main : d3roNativePalette.text.primary
   })()
 
   const baseStyle: TextStyle = {
@@ -37,7 +37,7 @@ export function PhosphorText({
     fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
     ...(isAmberVariant
       ? {
-          textShadowColor: d3roNativePalette.accent.amberGlow,
+          textShadowColor: d3roNativePalette.accent.glow,
           textShadowOffset: { width: 0, height: 0 },
           textShadowRadius: 6
         }
diff --git a/packages/ui-native/src/components/PhysicalButton.tsx b/packages/ui-native/src/components/PhysicalButton.tsx
index 4721495..90387d4 100644
--- a/packages/ui-native/src/components/PhysicalButton.tsx
+++ b/packages/ui-native/src/components/PhysicalButton.tsx
@@ -31,7 +31,7 @@ export function PhysicalButton({
 
   const bgColor =
     variant === 'primary'
-      ? d3roNativePalette.accent.amber
+      ? d3roNativePalette.accent.main
       : variant === 'danger'
         ? d3roNativePalette.tag.red
         : 'transparent'
diff --git a/packages/ui-native/src/components/WaveBars.tsx b/packages/ui-native/src/components/WaveBars.tsx
index a0e114c..e6bc7d1 100644
--- a/packages/ui-native/src/components/WaveBars.tsx
+++ b/packages/ui-native/src/components/WaveBars.tsx
@@ -54,7 +54,7 @@ function WaveBar({ index, active }: { index: number; active: boolean }): React.R
       style={{
         width: 6,
         height,
-        backgroundColor: d3roNativePalette.accent.amber,
+        backgroundColor: d3roNativePalette.accent.main,
         borderRadius: 3
       }}
     />
diff --git a/packages/ui-native/src/theme.ts b/packages/ui-native/src/theme.ts
index 9636f40..65795f7 100644
--- a/packages/ui-native/src/theme.ts
+++ b/packages/ui-native/src/theme.ts
@@ -24,9 +24,9 @@ export const d3roNativePalette = {
     muted: '#71717a'
   },
   accent: {
-    amber: '#ff5c35',
-    amberDim: 'rgba(255, 92, 53, 0.15)',
-    amberGlow: 'rgba(255, 92, 53, 0.6)',
+    main: '#ff5c35',
+    dim: 'rgba(255, 92, 53, 0.15)',
+    glow: 'rgba(255, 92, 53, 0.6)',
     green: '#4ade80',
     greenGlow: 'rgba(74, 222, 128, 0.6)'
   },