Home & Nutrition Screen

android/app/src/main/AndroidManifest.xml

@@ -8,7 +8,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/BootTheme">
+      android:theme="@style/BootTheme"
+      android:supportsRtl="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

declarations.d.ts

@@ -4,3 +4,5 @@ declare module '*.svg' {
   const content: React.FC<SvgProps>;
   export default content;
 }
+
+declare module 'react-native-range-slider';

ios/Podfile.lock

@@ -425,9 +425,11 @@ PODS:
     - React-Core
   - RNCMaskedView (0.2.9):
     - React-Core
-  - RNGestureHandler (2.11.0):
+  - RNCPicker (2.4.10):
     - React-Core
-  - RNScreens (3.20.0):
+  - RNGestureHandler (2.12.0):
+    - React-Core
+  - RNScreens (3.21.0):
     - React-Core
     - React-RCTImage
   - RNSVG (13.9.0):
@@ -502,6 +504,7 @@ DEPENDENCIES:
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
+  - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -601,6 +604,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
+  RNCPicker:
+    :path: "../node_modules/@react-native-picker/picker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNScreens:
@@ -663,8 +668,9 @@ SPEC CHECKSUMS:
   RNBootSplash: c9b258d28eb97032adc676b1e3bc353f1c59e6f1
   RNCAsyncStorage: ddc4ee162bfd41b0d2c68bf2d95acd81dd7f1f93
   RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
-  RNGestureHandler: 026038a97d4c8649ce397a22e162ca58b4e6c230
-  RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
+  RNCPicker: 0bc2f0a29abcca7b7ed44a2d036aac9ab6d25700
+  RNGestureHandler: dec4645026e7401a0899f2846d864403478ff6a5
+  RNScreens: d037903436160a4b039d32606668350d2a808806
   RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608

package.json

@@ -10,9 +10,11 @@
     "test": "jest"
   },
   "dependencies": {
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-async-storage/async-storage": "^1.18.2",
     "@react-native-community/cli": "^11.3.1",
     "@react-native-masked-view/masked-view": "^0.2.9",
+    "@react-native-picker/picker": "^2.4.10",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
@@ -26,8 +28,11 @@
     "react-native-global-props": "^1.1.5",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-paper": "^5.8.0",
+    "react-native-picker-select": "^8.0.4",
     "react-native-safe-area-context": "^4.5.3",
     "react-native-screens": "^3.20.0",
+    "react-native-shadow-2": "^7.0.8",
+    "react-native-slick": "^1.6.0",
     "react-native-svg": "^13.9.0",
     "react-native-svg-charts": "^5.4.0",
     "react-native-svg-transformer": "^1.0.0",

src/@types/nutrition.ts

@@ -0,0 +1,15 @@
+export type NutrientType = {
+  value: number;
+  total: number;
+  percent: number;
+};
+
+export type PxItemType = {
+  id: string;
+  name: string;
+  url: string;
+  kcal: number;
+  carbohydrate: NutrientType;
+  protein: NutrientType;
+  fat: NutrientType;
+};

src/assets/Colors.tsx

@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+const Colors = StyleSheet.create({
+  Green: {color: '#21c389'},
+  Red: {color: '#ff4d4d'},
+  Blue: {color: '#507EF7'},
+  Pink: {color: '#EF8EDF'},
+  White: {color: '#ffffff'},
+  Gray100: {color: '#f4f6f8'},
+  Gray200: {color: '#e8ebf0'},
+  Gray300: {color: '#d8dce2'},
+  Gray400: {color: '#c4cad4'},
+  Gray500: {color: '#a5adbd'},
+  Gray600: {color: '#8e95a3'},
+  Gray700: {color: '#595f72'},
+  Gray800: {color: '#353c49'},
+  Gray900: {color: '#1a1e27'},
+  Black: {color: '#121213'},
+});
+
+export default Colors;

src/components/common/CardView.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {StyleSheet, View, ViewProps} from 'react-native';
+import {Shadow} from 'react-native-shadow-2';
+import designToken from '../../assets/design-tokens';
+
+const CardView = (props: ViewProps) => {
+  return (
+    <Shadow
+      offset={[1, 1]}
+      startColor={'rgba(73, 73, 73, 0.1)'}
+      containerStyle={{width: '100%'}}
+      style={{width: '100%'}}
+      distance={4}>
+      <View {...props} style={[style.card, props.style]}>
+        {props.children}
+      </View>
+    </Shadow>
+  );
+};
+
+const style = StyleSheet.create({
+  card: {
+    borderRadius: 10,
+    backgroundColor: designToken.color.Grary.White,
+  },
+});
+export default CardView;

src/components/common/Check.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
-import CheckOn from '../assets/icons/check-on.svg';
-import CheckOff from '../assets/icons/check-off.svg';
+import CheckOn from '../../assets/icons/check-on.svg';
+import CheckOff from '../../assets/icons/check-off.svg';
 interface CheckProps {
   checked: boolean;
   setChecked?: React.Dispatch<React.SetStateAction<boolean>>;

src/components/common/CheckBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
-import CheckBoxOn from '../assets/icons/checkbox-on.svg';
-import CheckBoxOff from '../assets/icons/checkbox-off.svg';
+import CheckBoxOn from '../../assets/icons/checkbox-on.svg';
+import CheckBoxOff from '../../assets/icons/checkbox-off.svg';
 import {NumberProp} from 'react-native-svg';
 interface CheckBoxProps {
   checked: boolean;

src/components/common/Header.tsx

@@ -4,7 +4,7 @@ import Title3 from '../text/Title3';
 import Wrap from './Wrap';
 import {useNavigation} from '@react-navigation/native';
 import designToken from '../../assets/design-tokens';
-import BackImage from '../assets/icons/back.svg';
+import BackImage from '../../assets/icons/back.svg';
 
 const Header = ({title = ' ', wrap = true, marginBottom = 0, onPress}: any) => {
   const navigation = useNavigation();

src/components/common/Spacer.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import {NumberProp} from 'react-native-svg';
 
-const Spacer = (height: NumberProp) => {
+const Spacer = (height: number) => {
   return <View style={{height: height}} />;
 };
 

src/components/NutrientRatio.tsx → src/components/nutrition/NutrientRatio.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import {Caption} from 'react-native-paper';
-import designToken from '../assets/design-tokens';
+import designToken from '../../assets/design-tokens';
+import {NutrientType} from '../../@types/nutrition';
 
-type Nutrient = {
-  value: number;
-  percent: number;
-};
 type NutrientRatioProps = {
-  carbohydrate: Nutrient;
-  protein: Nutrient;
-  fat: Nutrient;
+  carbohydrate: NutrientType;
+  protein: NutrientType;
+  fat: NutrientType;
+  column?: boolean;
 };
-const NutrientRatio = ({carbohydrate, protein, fat}: NutrientRatioProps) => {
+const NutrientRatio = ({
+  carbohydrate,
+  protein,
+  fat,
+  column = false,
+}: NutrientRatioProps) => {
   return (
     <View>
       <View style={style.container}>
@@ -41,41 +44,35 @@ const NutrientRatio = ({carbohydrate, protein, fat}: NutrientRatioProps) => {
           <Caption style={style.stickPercent}>{fat.percent}%</Caption>
         </View>
       </View>
-      <View style={style.infoArea}>
-        <View style={style.boxWrap}>
-          <View
-            style={[
-              style.box,
-              {
-                backgroundColor: designToken.color.Green,
-              },
-            ]}
-          />
-          <Caption style={style.gray700}>탄수화물</Caption>
+      <View style={column ? style.infoAreaColumn : style.infoArea}>
+        <View
+          style={[style.boxWrap, column && {justifyContent: 'space-between'}]}>
+          <View style={[style.boxWrap, column && {gap: 12}]}>
+            <View
+              style={[style.box, {backgroundColor: designToken.color.Green}]}
+            />
+            <Caption style={style.gray700}>탄수화물</Caption>
+          </View>
           <Caption style={style.gray700}>{carbohydrate.value}g</Caption>
         </View>
-        <View style={style.boxWrap}>
-          <View
-            style={[
-              style.box,
-              {
-                backgroundColor: designToken.color.Blue,
-              },
-            ]}
-          />
-          <Caption style={style.gray700}>단백질</Caption>
+        <View
+          style={[style.boxWrap, column && {justifyContent: 'space-between'}]}>
+          <View style={[style.boxWrap, column && {gap: 12}]}>
+            <View
+              style={[style.box, {backgroundColor: designToken.color.Blue}]}
+            />
+            <Caption style={style.gray700}>단백질</Caption>
+          </View>
           <Caption style={style.gray700}>{protein.value}g</Caption>
         </View>
-        <View style={style.boxWrap}>
-          <View
-            style={[
-              style.box,
-              {
-                backgroundColor: designToken.color.Pink,
-              },
-            ]}
-          />
-          <Caption style={style.gray700}>지방</Caption>
+        <View
+          style={[style.boxWrap, column && {justifyContent: 'space-between'}]}>
+          <View style={[style.boxWrap, column && {gap: 12}]}>
+            <View
+              style={[style.box, {backgroundColor: designToken.color.Pink}]}
+            />
+            <Caption style={style.gray700}>지방</Caption>
+          </View>
           <Caption style={style.gray700}>{fat.value}g</Caption>
         </View>
       </View>
@@ -111,11 +108,21 @@ const style = StyleSheet.create({
     width: 10,
     borderRadius: 2,
   },
-  boxWrap: {flexDirection: 'row', alignItems: 'center', gap: 4},
+  boxWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
   infoArea: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 30,
+    // marginBottom: 30,
+  },
+  infoAreaColumn: {
+    gap: 8,
+  },
+  container: {
+    flexDirection: 'row',
+    marginBottom: 20,
   },
-  container: {flexDirection: 'row', marginBottom: 20},
 });