import React from 'react';

import { View, Text, useColorScheme, StyleSheet } from 'react-native';



const App = () => {

// 'dark' 또는 'light' 반환

const colorScheme = useColorScheme();

const isDark = colorScheme === 'dark';



return (

<View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>

<Text style={isDark ? styles.darkText : styles.lightText}>

{isDark ? '🌙 다크 모드' : '☀️ 라이트 모드'}

</Text>

</View>

);

};



const styles = StyleSheet.create({

container: { flex: 1, justifyContent: 'center', alignItems: 'center' },

darkBg: { backgroundColor: '#121212' },

lightBg: { backgroundColor: '#FFFFFF' },

darkText: { color: '#E1E1E1', fontSize: 18 },

lightText: { color: '#1A1A1A', fontSize: 18 },

});

// theme.js - 테마 정의

export const lightTheme = {

background: '#FFFFFF',

surface: '#F5F5F5',

primary: '#667EEA',

text: {

primary: '#1A1A1A',

secondary: '#666666',

disabled: '#AAAAAA',

},

border: '#E0E0E0',

card: '#FFFFFF',

shadow: 'rgba(0,0,0,0.1)',

};



export const darkTheme = {

background: '#121212',

surface: '#1E1E1E',

primary: '#7C8EF5',  // 다크에서는 조금 밝게

text: {

primary: '#E1E1E1',

secondary: '#AAAAAA',

disabled: '#666666',

},

border: '#333333',

card: '#1E1E1E',

shadow: 'rgba(0,0,0,0.5)',

};



// ThemeContext.js

import React, { createContext, useContext, useState, useEffect } from 'react';

import { useColorScheme } from 'react-native';

import { lightTheme, darkTheme } from './theme';



const ThemeContext = createContext();



export const ThemeProvider = ({ children }) => {

const systemScheme = useColorScheme();

const [themeMode, setThemeMode] = useState('system');



const getActiveTheme = () => {

if (themeMode === 'system') {

return systemScheme === 'dark' ? darkTheme : lightTheme;

}

return themeMode === 'dark' ? darkTheme : lightTheme;

};



return (

<ThemeContext.Provider value={{

theme: getActiveTheme(),

themeMode,

setThemeMode,

}}>

{children}

</ThemeContext.Provider>

);

};



export const useTheme = () => useContext(ThemeContext);

// MyCard.js

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import { useTheme } from './ThemeContext';



const MyCard = ({ title, description }) => {

const { theme } = useTheme();



return (

<View style={[styles.card, {

backgroundColor: theme.card,

borderColor: theme.border,

shadowColor: theme.shadow,

}]}>

<Text style={{ color: theme.text.primary, fontSize: 16, fontWeight: '700' }}>

{title}

</Text>

<Text style={{ color: theme.text.secondary, marginTop: 8 }}>

{description}

</Text>

</View>

);

};



const styles = StyleSheet.create({

card: {

borderRadius: 12,

padding: 16,

marginVertical: 8,

borderWidth: 1,

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.1,

shadowRadius: 4,

elevation: 3,

},

});

// useResponsive.js - 커스텀 훅

import { useWindowDimensions } from 'react-native';



export const useResponsive = () => {

const { width, height } = useWindowDimensions();



// 브레이크포인트 정의

const breakpoints = {

sm: 360,   // 소형 스마트폰

md: 414,   // 일반 스마트폰

lg: 768,   // 태블릿

xl: 1024,  // 대형 태블릿

};



return {

width,

height,

isSmall: width < breakpoints.sm,

isMedium: width >= breakpoints.sm && width < breakpoints.lg,

isTablet: width >= breakpoints.lg,

isLandscape: width > height,

// 유동적 크기 계산

wp: (percent) => (width * percent) / 100,

hp: (percent) => (height * percent) / 100,

// 컬럼 수 계산

numColumns: width >= breakpoints.xl ? 3 : width >= breakpoints.lg ? 2 : 1,

};

};



// 사용 예시

const ProductGrid = () => {

const { numColumns, wp, isTablet } = useResponsive();



return (

<FlatList

data={products}

numColumns={numColumns}

key={numColumns}  {/* 컬럼 변경 시 리렌더링 */}

renderItem={({ item }) => (

<ProductCard

item={item}

width={wp(100 / numColumns) - 16}

isTablet={isTablet}

/>

)}

/>

);

};

// typography.js

import { PixelRatio, Dimensions } from 'react-native';



const { width: SCREEN_WIDTH } = Dimensions.get('window');



// 기준 화면 너비 (iPhone 11 기준)

const BASE_WIDTH = 390;



// 화면 비율에 따른 폰트 스케일

const scale = SCREEN_WIDTH / BASE_WIDTH;



export const normalize = (size) => {

const newSize = size * scale;

return Math.round(PixelRatio.roundToNearestPixel(newSize));

};



// 폰트 크기 정의

export const typography = {

h1: normalize(28),

h2: normalize(22),

h3: normalize(18),

body: normalize(14),

caption: normalize(12),

small: normalize(10),

};

// main.dart

import 'package:flutter/material.dart';



void main() => runApp(const MyApp());



class MyApp extends StatelessWidget {

const MyApp({super.key});



@override

Widget build(BuildContext context) {

return MaterialApp(

title: '다크모드 앱',

// 라이트 테마

theme: ThemeData(

useMaterial3: true,

colorScheme: ColorScheme.fromSeed(

seedColor: const Color(0xFF667EEA),

brightness: Brightness.light,

),

),

// 다크 테마

darkTheme: ThemeData(

useMaterial3: true,

colorScheme: ColorScheme.fromSeed(

seedColor: const Color(0xFF667EEA),

brightness: Brightness.dark,

),

),

// 시스템 설정 따라가기

themeMode: ThemeMode.system,

home: const HomePage(),

);

}

}

// theme_provider.dart

import 'package:flutter/material.dart';

import 'package:shared_preferences/shared_preferences.dart';



class ThemeProvider extends ChangeNotifier {

ThemeMode _themeMode = ThemeMode.system;



ThemeMode get themeMode => _themeMode;



bool get isDarkMode {

if (_themeMode == ThemeMode.system) {

// 시스템 설정 확인

final brightness = WidgetsBinding

.instance.platformDispatcher.platformBrightness;

return brightness == Brightness.dark;

}

return _themeMode == ThemeMode.dark;

}



Future<void> setThemeMode(ThemeMode mode) async {

_themeMode = mode;

notifyListeners();

// 설정 저장

final prefs = await SharedPreferences.getInstance();

await prefs.setString('themeMode', mode.name);

}



Future<void> loadTheme() async {

final prefs = await SharedPreferences.getInstance();

final saved = prefs.getString('themeMode') ?? 'system';

_themeMode = ThemeMode.values.firstWhere(

(e) => e.name == saved,

orElse: () => ThemeMode.system,

);

notifyListeners();

}

}

// responsive_layout.dart

class ResponsiveLayout extends StatelessWidget {

final Widget mobile;

final Widget? tablet;

final Widget? desktop;



const ResponsiveLayout({

required this.mobile,

this.tablet,

this.desktop,

super.key,

});



@override

Widget build(BuildContext context) {

return LayoutBuilder(

builder: (context, constraints) {

if (constraints.maxWidth >= 1024) {

return desktop ?? tablet ?? mobile;

} else if (constraints.maxWidth >= 600) {

return tablet ?? mobile;

}

return mobile;

},

);

}

}



// 사용 예시

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: ResponsiveLayout(

mobile: MobileLayout(),

tablet: TabletLayout(),

desktop: DesktopLayout(),

),

);

}

}

// ContentView.swift

import SwiftUI



struct ContentView: View {

// 환경에서 컬러 스킴 자동 감지

@Environment(\.colorScheme) var colorScheme



var body: some View {

VStack(spacing: 20) {

Text("안녕하세요!")

.font(.title)

// 시스템 색상 - 자동으로 다크/라이트 전환

.foregroundColor(.primary)



RoundedRectangle(cornerRadius: 12)

.fill(Color(.systemBackground))

.frame(height: 100)

.shadow(color: colorScheme == .dark

? .white.opacity(0.05)

: .black.opacity(0.1),

radius: 8)

}

.background(Color(.systemGroupedBackground))

}

}



// 커스텀 색상 정의 (Assets.xcassets에서 설정)

extension Color {

static let customPrimary = Color("CustomPrimary")

static let customBackground = Color("CustomBackground")

static let customCard = Color("CustomCard")

}

struct AdaptiveGrid: View {

let items: [Item]



var body: some View {

GeometryReader { geometry in

let width = geometry.size.width

let columns = width > 600 ? 3 : width > 400 ? 2 : 1

let gridItems = Array(repeating: GridItem(.flexible(), spacing: 12),

count: columns)



LazyVGrid(columns: gridItems, spacing: 12) {

ForEach(items) { item in

ItemCard(item: item)

}

}

.padding()

}

}

}

// Theme.kt

import androidx.compose.material3.*

import androidx.compose.runtime.Composable

import androidx.compose.ui.graphics.Color



// 라이트 컬러 팔레트

private val LightColorScheme = lightColorScheme(

primary = Color(0xFF667EEA),

onPrimary = Color.White,

primaryContainer = Color(0xFFE8E4FF),

background = Color(0xFFFFFBFE),

surface = Color(0xFFFFFBFE),

onBackground = Color(0xFF1C1B1F),

onSurface = Color(0xFF1C1B1F),

)



// 다크 컬러 팔레트

private val DarkColorScheme = darkColorScheme(

primary = Color(0xFF9BA8FF),  // 더 밝게

onPrimary = Color(0xFF1A1A6E),

primaryContainer = Color(0xFF3D3D8F),

background = Color(0xFF1C1B1F),

surface = Color(0xFF1C1B1F),

onBackground = Color(0xFFE6E1E5),

onSurface = Color(0xFFE6E1E5),

)



@Composable

fun MyAppTheme(

darkTheme: Boolean = isSystemInDarkTheme(),

content: @Composable () -> Unit

) {

val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme



MaterialTheme(

colorScheme = colorScheme,

typography = Typography,

content = content

)

}

// AdaptiveLayout.kt

import androidx.compose.material3.windowsizeclass.*

import androidx.compose.runtime.Composable



@Composable

fun AdaptiveHomeScreen(windowSizeClass: WindowSizeClass) {

when (windowSizeClass.widthSizeClass) {

WindowWidthSizeClass.Compact -> {

// 스마트폰 - 단일 패널

MobileLayout()

}

WindowWidthSizeClass.Medium -> {

// 폴더블/소형 태블릿 - 2패널

TwoPanelLayout()

}

WindowWidthSizeClass.Expanded -> {

// 대형 태블릿 - 사이드바 + 콘텐츠

ExpandedLayout()

}

}

}



// 적응형 그리드

@Composable

fun AdaptiveGrid(items: List<Item>) {

val configuration = LocalConfiguration.current

val screenWidth = configuration.screenWidthDp



val columns = when {

screenWidth >= 840 -> 4

screenWidth >= 600 -> 3

screenWidth >= 400 -> 2

else -> 1

}



LazyVerticalGrid(

columns = GridCells.Fixed(columns),

contentPadding = PaddingValues(16.dp),

horizontalArrangement = Arrangement.spacedBy(12.dp),

verticalArrangement = Arrangement.spacedBy(12.dp)

) {

items(items) { item ->

ItemCard(item = item)

}

}

}

// React Native - AsyncStorage 활용

import AsyncStorage from '@react-native-async-storage/async-storage';



const THEME_KEY = '@app_theme_mode';



// 테마 저장

const saveTheme = async (mode) => {

try {

await AsyncStorage.setItem(THEME_KEY, mode);

} catch (error) {

console.error('테마 저장 실패:', error);

}

};



// 테마 불러오기

const loadTheme = async () => {

try {

const saved = await AsyncStorage.getItem(THEME_KEY);

return saved ?? 'system'; // 기본값: 시스템 설정

} catch (error) {

return 'system';

}

};



// ThemeProvider에 통합

export const ThemeProvider = ({ children }) => {

const systemScheme = useColorScheme();

const [themeMode, setThemeMode] = useState('system');

const [isLoading, setIsLoading] = useState(true);



useEffect(() => {

// 앱 시작 시 저장된 테마 불러오기

loadTheme().then(saved => {

setThemeMode(saved);

setIsLoading(false);

});

}, []);



const changeTheme = async (mode) => {

setThemeMode(mode);

await saveTheme(mode);

};



if (isLoading) return <SplashScreen />;



return (

<ThemeContext.Provider value={{

theme: getActiveTheme(themeMode, systemScheme),

themeMode,

changeTheme,

}}>

{children}

</ThemeContext.Provider>

);

};

// React Native - Animated API 활용

import { Animated, Easing } from 'react-native';



const AnimatedThemeSwitch = () => {

const { theme, themeMode, changeTheme } = useTheme();

const animValue = useRef(new Animated.Value(0)).current;



const toggleTheme = () => {

const newMode = themeMode === 'dark' ? 'light' : 'dark';



Animated.timing(animValue, {

toValue: 1,

duration: 300,

easing: Easing.inOut(Easing.ease),

useNativeDriver: false,

}).start(() => {

changeTheme(newMode);

animValue.setValue(0);

});

};



const backgroundColor = animValue.interpolate({

inputRange: [0, 1],

outputRange: [theme.background, theme.background],

});



return (

<Animated.View style={{ flex: 1, backgroundColor }}>

<TouchableOpacity onPress={toggleTheme}>

<Text>{themeMode === 'dark' ? '☀️' : '🌙'}</Text>

</TouchableOpacity>

</Animated.View>

);

};

// 적응형 내비게이션 (React Native)

const AdaptiveNavigation = () => {

const { isTablet } = useResponsive();



if (isTablet) {

return (

<DrawerNavigator

drawerType="permanent"  // 항상 보이는 사이드바

drawerStyle={{ width: 240 }}

/>

);

}



return (

<BottomTabNavigator />  // 하단 탭

);

};

// 마스터-디테일 패턴 (Flutter)

class MasterDetailLayout extends StatelessWidget {

final Widget master;

final Widget? detail;



@override

Widget build(BuildContext context) {

final isWide = MediaQuery.of(context).size.width > 600;



if (isWide) {

// 태블릿: 나란히 배치

return Row(

children: [

SizedBox(width: 320, child: master),

const VerticalDivider(width: 1),

Expanded(child: detail ?? const EmptyDetailView()),

],

);

}



// 스마트폰: 스택 내비게이션

return master;

}

}

// 반응형 폼 (React Native)

const ResponsiveForm = () => {

const { isTablet, width } = useResponsive();



const inputStyle = {

width: isTablet ? '48%' : '100%',

marginBottom: 16,

};



return (

<View style={{

flexDirection: isTablet ? 'row' : 'column',

flexWrap: 'wrap',

justifyContent: 'space-between',

}}>

<TextInput style={inputStyle} placeholder="이름" />

<TextInput style={inputStyle} placeholder="이메일" />

<TextInput style={inputStyle} placeholder="전화번호" />

<TextInput style={inputStyle} placeholder="주소" />

</View>

);

};

// Jest + React Native Testing Library 테스트 예시

import { render } from '@testing-library/react-native';

import { ThemeProvider } from './ThemeContext';



describe('다크 모드 테스트', () => {

it('다크 모드에서 올바른 배경색 적용', () => {

const { getByTestId } = render(

<ThemeProvider initialMode="dark">

<HomeScreen />

</ThemeProvider>

);



const container = getByTestId('home-container');

expect(container.props.style).toMatchObject({

backgroundColor: '#121212',

});

});



it('라이트 모드에서 올바른 배경색 적용', () => {

const { getByTestId } = render(

<ThemeProvider initialMode="light">

<HomeScreen />

</ThemeProvider>

);



const container = getByTestId('home-container');

expect(container.props.style).toMatchObject({

backgroundColor: '#FFFFFF',

});

});

});

// 최적화된 ThemeProvider

export const ThemeProvider = ({ children }) => {

const systemScheme = useColorScheme();

const [themeMode, setThemeMode] = useState('system');



// 테마 객체 메모이제이션

const theme = useMemo(() => {

const isDark = themeMode === 'system'

? systemScheme === 'dark'

: themeMode === 'dark';

return isDark ? darkTheme : lightTheme;

}, [themeMode, systemScheme]);



// Context 값 메모이제이션

const contextValue = useMemo(() => ({

theme,

themeMode,

setThemeMode,

}), [theme, themeMode]);



return (

<ThemeContext.Provider value={contextValue}>

{children}

</ThemeContext.Provider>

);

};