ADD: Home Screen Layout

- Created: ProductList component
- Added: NumberUtils.js
- Added: images for UI

algo.js

@@ -1,3 +1,5 @@
+/* eslint-disable curly */
+
 // solution
 
 function solution(input) {
@@ -19,9 +21,7 @@ function solution(input) {
   };
 
   const getChoSung = char => {
-    if (!/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(char)) {
-      return 0;
-    }
+    if (!/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(char)) return 0;
 
     const jaEum = [
       'ㄱ',
@@ -54,9 +54,7 @@ function solution(input) {
 
   for (let i = 0; i < input.length; i++) {
     const nthChoSung = getChoSung(input.charAt(i));
-    if (!nthChoSung) {
-      continue;
-    }
+    if (!nthChoSung) continue;
     output[nthChoSung] += 1;
   }
 
@@ -86,4 +84,5 @@ const expectedOutput = {
 
 const output = solution(input);
 const result = JSON.stringify(output) === JSON.stringify(expectedOutput);
+
 console.log('resutl: ', result);

src/components/HomeScreen/ProductItem.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity, Text, View, Image} from 'react-native';
+
+import {addComma} from '../../utils/NumberUtils';
+
+const ProductItem = ({id, title, brand, price}) => {
+  return (
+    <TouchableOpacity style={styles.block} activeOpacity={0.5}>
+      <Image
+        style={styles.icon}
+        source={require('../../assets/dinoIcon.png')}
+      />
+      <View style={styles.description}>
+        <Text style={styles.title}>{title}</Text>
+        <View style={styles.secondLine}>
+          <Text style={styles.brand}>{brand}</Text>
+          <Text style={styles.price}>{addComma(price)}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    flex: 0.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  icon: {
+    width: 50,
+    height: 50,
+    marginHorizontal: 5,
+    resizeMode: 'contain',
+  },
+
+  description: {
+    flex: 1,
+    padding: 10,
+  },
+
+  title: {
+    fontSize: 18,
+  },
+
+  secondLine: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 10,
+  },
+
+  brand: {
+    fontWeight: '600',
+  },
+
+  price: {
+    // marginRight: 10,
+    fontSize: 15,
+  },
+});
+
+export default ProductItem;

src/components/HomeScreen/ProductList.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {StyleSheet, FlatList, View} from 'react-native';
+import ProductItem from './ProductItem';
+
+const ProductList = ({products}) => {
+  return (
+    <FlatList
+      style={styles.list}
+      data={products}
+      renderItem={({item}) => <ProductItem {...item} />}
+      keyExtractor={item => item.id}
+      ItemSeparatorComponent={() => <View style={styles.separator} />}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {},
+
+  separator: {
+    height: 1,
+    backgroundColor: 'lightgrey',
+  },
+});
+
+export default ProductList;