React Native + Expo로 첫 모바일 앱 만들기: 환경 설정부터 빌드까지

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

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>오늘의운동</Text>
      <Text style={styles.subtitle}>매일 건강한 습관을 만들어보세요</Text>

      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>운동 시작하기</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 32,
  },
  button: {
    backgroundColor: '#333',
    paddingVertical: 16,
    paddingHorizontal: 32,
    borderRadius: 12,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
});

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

const exercises = [
  { id: '1', name: '팔굽혀펴기', sets: 3, reps: 15 },
  { id: '2', name: '스쿼트', sets: 4, reps: 12 },
  { id: '3', name: '플랭크', sets: 3, reps: '60초' },
  { id: '4', name: '버피', sets: 3, reps: 10 },
];

function ExerciseItem({ item }) {
  return (
    <View style={styles.item}>
      <Text style={styles.name}>{item.name}</Text>
      <Text style={styles.detail}>{item.sets}세트 × {item.reps}</Text>
    </View>
  );
}

export default function ExerciseList() {
  return (
    <FlatList
      data={exercises}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <ExerciseItem item={item} />}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  name: { fontSize: 16, fontWeight: '600' },
  detail: { fontSize: 14, color: '#666' },
  separator: { height: 1, backgroundColor: '#e5e5e5' },
});

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{
      tabBarActiveTintColor: '#333',
      tabBarStyle: { backgroundColor: '#fff' },
    }}>
      <Tabs.Screen
        name="index"
        options={{ title: '홈', tabBarIcon: () => '🏠' }}
      />
      <Tabs.Screen
        name="workout"
        options={{ title: '운동', tabBarIcon: () => '💪' }}
      />
      <Tabs.Screen
        name="history"
        options={{ title: '기록', tabBarIcon: () => '📊' }}
      />
      <Tabs.Screen
        name="settings"
        options={{ title: '설정', tabBarIcon: () => '⚙️' }}
      />
    </Tabs>
  );
}

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

export default function WorkoutTimer() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let interval;
    if (isRunning) {
      interval = setInterval(() => {
        setSeconds(prev => prev + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isRunning]);

  const formatTime = (s) => {
    const min = Math.floor(s / 60);
    const sec = s % 60;
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
  };

  return (
    <View style={{ alignItems: 'center', padding: 20 }}>
      <Text style={{ fontSize: 48, fontWeight: 'bold' }}>
        {formatTime(seconds)}
      </Text>
    </View>
  );
}