Fix/bug

src/components/CategoryButton.js

@@ -1,174 +1,208 @@
-/* eslint-disable react/self-closing-comp */
 /* eslint-disable react-native/no-inline-styles */
-import React, {useState, useCallback, useEffect, useContext} from 'react';
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useContext,
+  useRef,
+} from 'react';
 import {
   View,
   Text,
   SafeAreaView,
   ScrollView,
   StyleSheet,
-  Switch,
+  Image,
+  TouchableOpacity,
+  FlatList,
+  Pressable,
 } from 'react-native';
 import {
   COLOR_WHITE,
   COLOR_BACKGROUND,
   COLOR_GRAY,
   COLOR_PRIMARY,
-  COLOR_TEXT_BLACK,
   COLOR_TEXT70GRAY,
+  COLOR_TEXT_BLACK,
+  COLOR_SECONDARY,
   COLOR_TEXT60GRAY,
 } from '../assets/color';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {useNavigation} from '@react-navigation/native';
+import {SvgXml} from 'react-native-svg';
+import {svgXml} from '../assets/svg';
+import Header from '../components/Header';
+import AppContext from '../components/AppContext';
+import axios from 'axios';
+import {API_URL} from '@env';
+import {Dimensions} from 'react-native';
 import AnimatedButton from './AnimationButton';
+import {astToReact} from 'react-native-svg/lib/typescript/xml';
+
+const windowWidth = Dimensions.get('window').width;
 
 export default function CategoryButton(props) {
-  const {name, onPress, selected} = props;
+  const {onPress, selected} = props;
+
+  const navigation = useNavigation();
+  const context = useContext(AppContext);
+
+  const categroyList1 = ['한식', '양식', '일식', '중식', '분식'];
+  const categroyList2 = ['치킨', '피자', '버거', '아시안', '카페'];
 
   return (
-    <AnimatedButton
-      style={
-        selected === name
-          ? styles.categoryModalButtonSelected
-          : styles.categoryModalButton
-      }
-      onPress={() => {
-        if (name == '') return;
-        onPress(name);
-      }}>
-      <Text
-        style={
-          selected === name
-            ? styles.categoryModalButtonTextSelected
-            : styles.categoryModalButtonText
-        }>
-        {name}
-      </Text>
-    </AnimatedButton>
+    <View style={styles.todayPick}>
+      <View style={styles.buttonLine}>
+        {categroyList1.map((categroy, index) => {
+          const n = index + 1;
+          return (
+            <AnimatedButton
+              style={styles.buttonSet}
+              onPress={async () => {
+                onPress(categroy);
+              }}>
+              <View key={index} style={styles.categroyButton}>
+                {n === 1 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/1.png')}
+                  />
+                ) : n === 2 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/2.png')}
+                  />
+                ) : n === 3 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/3.png')}
+                  />
+                ) : n === 4 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/4.png')}
+                  />
+                ) : (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/5.png')}
+                  />
+                )}
+              </View>
+              <Text style={styles.categroyText2}>{categroy}</Text>
+            </AnimatedButton>
+          );
+        })}
+      </View>
+
+      <View style={{height: 13}} />
+      <View style={styles.buttonLine}>
+        {categroyList2.map((categroy, index) => {
+          const n = index + 1;
+          return (
+            <AnimatedButton
+              style={styles.buttonSet}
+              onPress={async () => {
+                onPress(categroy);
+              }}>
+              <View key={index} style={styles.categroyButton}>
+                {n === 1 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/6.png')}
+                  />
+                ) : n === 2 ? (
+                  <Image
+                    style={styles.foodIcon2}
+                    resizeMode="contain"
+                    source={require('../assets/images/7.png')}
+                  />
+                ) : n === 3 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/8.png')}
+                  />
+                ) : n === 4 ? (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/9.png')}
+                  />
+                ) : (
+                  <Image
+                    style={styles.foodIcon}
+                    resizeMode="contain"
+                    source={require('../assets/images/10.png')}
+                  />
+                )}
+              </View>
+              <Text style={styles.categroyText2}>{categroy}</Text>
+            </AnimatedButton>
+          );
+        })}
+      </View>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  entire: {
-    flex: 1,
-    backgroundColor: COLOR_BACKGROUND,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  triangle: {
-    width: 0,
-    height: 0,
-    borderStyle: 'solid',
-    borderRightWidth: 8,
-    borderTopWidth: 8,
-    borderRightColor: 'transparent',
-    borderTopColor: 'white',
+  todayPick: {
+    width: windowWidth - 32,
+    padding: 12,
+    paddingHorizontal: 15,
   },
-  dart: {
-    padding: 3,
-    alignItems: 'center',
-    backgroundColor: COLOR_WHITE,
-    borderRadius: 8,
-    borderBottomLeftRadius: 0,
-  },
-  dartText: {
-    fontSize: 12,
-    color: COLOR_TEXT_BLACK,
-  },
-  textInput: {
-    marginLeft: 10,
-    flex: 1,
-    fontSize: 12,
-    color: '#888888',
-    padding: 0,
-  },
-  filterButton: {
+  todayPickTitle: {
+    fontSize: 20,
+    color: COLOR_PRIMARY,
+    // fontWeight: '700',
+    // fontFamily: 'NanumSquareRoundEB',
+    fontFamily: 'NIXGONFONTS M 2.0',
+  },
+  line: {
+    marginVertical: 8,
+    height: 0.5,
+    backgroundColor: '#D9D9D9', // Change color as needed
+    width: '100%', // Adjust width as needed
+  },
+  buttonLine: {
     flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 5,
-    paddingHorizontal: 7,
-    backgroundColor: 'white',
-    borderRadius: 15,
-    elevation: 4,
+    justifyContent: 'space-between',
+    marginHorizontal: 3,
   },
-  filterButtonSelected: {
-    flexDirection: 'row',
+  categroyButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 5,
-    paddingHorizontal: 7,
-    backgroundColor: '#D9D9D9',
-    borderRadius: 15,
-    elevation: 4,
-  },
-  filterText: {
-    marginLeft: 1,
-    fontSize: 12,
+    marginBottom: 3,
+    width: 50,
+    height: 50,
+    backgroundColor: COLOR_SECONDARY,
+    borderRadius: 20,
+  },
+  categroyText2: {
+    fontSize: 13,
     color: COLOR_TEXT_BLACK,
-    fontWeight: 'bold',
-  },
-  filterTextActive: {
-    marginLeft: 1,
-    fontSize: 12,
-    color: '#A4D65E',
-    fontWeight: 'bold',
-  },
-  filterTextFade: {
-    marginLeft: 1,
-    fontSize: 12,
-    color: COLOR_GRAY,
-    fontWeight: 'bold',
-  },
-  cornerButton: {
-    position: 'absolute',
-    bottom: 16,
-    backgroundColor: 'white',
-    borderRadius: 15,
-    height: 30,
-    width: 30,
-    elevation: 4,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    backgroundColor: 'white',
-    padding: 16,
-    borderRadius: 16,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
+    // fontWeight: 'bold',
+    // fontFamily: 'NanumSquareRoundEB',
+    fontFamily: 'NIXGONFONTS M 2.0',
   },
-  modalTitle: {
-    fontSize: 20,
-    color: COLOR_TEXT70GRAY,
-    fontWeight: '700',
-  },
-  categoryModalButton: {
-    borderWidth: 0.5,
-    borderColor: '#D9D9D9',
-    alignItems: 'center',
+  buttonSet: {
     justifyContent: 'center',
-    paddingVertical: 8,
-    flex: 1,
-  },
-  categoryModalButtonSelected: {
-    borderWidth: 0.5,
-    borderColor: '#D9D9D9',
-    backgroundColor: '#D9D9D9',
     alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 8,
-    flex: 1,
+    marginBottom: 0,
   },
-  categoryModalButtonText: {
-    fontSize: 16,
-    color: COLOR_TEXT60GRAY,
-  },
-  categoryModalButtonTextSelected: {
-    fontSize: 16,
-    color: COLOR_TEXT70GRAY,
-    fontWeight: 'bold',
+  foodIcon: {
+    width: 30,
+    height: 30,
   },
-  categoryLine: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
+  foodIcon2: {
+    width: 25,
+    height: 25,
   },
 });