[Feature][챌린지] 챌린지 목표 설정 Range 바 구현 (#10)

* create Temp.tsx for testing components

* created temp screen with skeleton for range input

* created bar, making to component

* finished functionality and componentize

* bar min and max info added

* cleaning unnecessary test files

* clearing unused types

* added styles for range bar

* delete unused files

* delete usused temp screen

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@miblanchard/react-native-slider": "^2.1.0",
     "@react-native-async-storage/async-storage": "^1.17.7",
     "@react-navigation/bottom-tabs": "^6.0.5",
     "@react-navigation/native": "^6.0.2",

src/components/etc/ChallengeGoalSettingBar.tsx

@@ -0,0 +1,140 @@
+import { View, Text, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { useTheme } from 'react-native-paper';
+import { Slider } from '@miblanchard/react-native-slider';
+
+// create alias for interface
+interface ChallengeGoalSettingBarProps {
+  minValue: number;
+  maxValue: number;
+  value: number;
+  unit: string;
+  infoText: string;
+  onChange: (value: number | number[]) => void;
+}
+
+export default function ChallengeGoalSettingBar({
+  value: valueProp,
+  minValue,
+  maxValue,
+  infoText,
+  onChange,
+  unit,
+}: ChallengeGoalSettingBarProps) {
+  const themeProp = useTheme();
+  const styles = makeStyles(themeProp, unit);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.InfoContainer}>
+        <Text style={styles.infoText}>{infoText}</Text>
+        <View>
+          <Text style={styles.challengeSettingAmount}>{valueProp}</Text>
+          <Text style={styles.challengeSettingUnit}>{unit}</Text>
+        </View>
+        <View style={styles.slider}>
+          <Slider
+            value={valueProp}
+            minimumValue={minValue}
+            maximumValue={maxValue}
+            step={1}
+            onValueChange={(val: number | number[]) => onChange(val)}
+            minimumTrackTintColor={
+              unit === '번' ? themeProp.colors.graphic.green : themeProp.colors.graphic.orange
+            }
+            thumbStyle={styles.thumb}
+            trackStyle={styles.track}
+          />
+        </View>
+        <View style={styles.barInfo}>
+          <Text>
+            {minValue}
+            {unit}
+          </Text>
+          <Text>
+            {maxValue}
+            {unit}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function makeStyles(theme: ReactNativePaper.Theme, unit: string) {
+  return StyleSheet.create({
+    container: {
+      marginLeft: 17,
+      marginRight: 17,
+      backgroundColor: 'white',
+      height: 150,
+    },
+    challengeSettingAmount: {
+      fontSize: 30,
+    },
+    challengeSettingUnit: {
+      fontSize: 16,
+      opacity: 0.5,
+      color: theme.colors.graphic.black,
+      position: 'absolute',
+      left: 20,
+      top: 9,
+    },
+    InfoContainer: {
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    infoText: {
+      fontSize: 16,
+      textAlign: 'center',
+      color: theme.colors.graphic.black,
+      opacity: 0.8,
+    },
+    slider: {
+      width: '80%',
+      alignItems: 'stretch',
+      justifyContent: 'center',
+      position: 'relative',
+    },
+    thumb: {
+      backgroundColor: unit === '번' ? theme.colors.graphic.green : theme.colors.graphic.orange,
+      borderColor: theme.colors.graphic.white,
+      borderRadius: 10,
+      borderWidth: 5,
+      height: 20,
+      shadowColor: theme.colors.graphic.black,
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.35,
+      shadowRadius: 2,
+      // android shadow
+      elevation: 4,
+      width: 20,
+    },
+    track: {
+      backgroundColor: 'rgba(18,19,20,0.1)',
+      borderRadius: 4,
+      height: 10,
+      shadowColor: theme.colors.graphic.black,
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.15,
+      shadowRadius: 1,
+    },
+    barInfo: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      // 1px solid radius
+      width: '80%',
+      position: 'absolute',
+      bottom: -10,
+      fontSize: 14,
+      opacity: 0.8,
+    },
+  });
+}