[5/20] (#12)

* Add/home logic * Add/logic
meokgu-skku · May 21, 2024 · fa06a58 · fa06a58
1 parent b7b1b06
commit fa06a58
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "react-native-image-modal": "^2.0.4",
     "react-native-maps": "^1.14.0",
     "react-native-modal": "^13.0.1",
+    "react-native-navigation-bar-color": "^2.0.2",
     "react-native-reanimated": "^3.8.1",
     "react-native-safe-area-context": "^4.9.0",
     "react-native-screens": "^3.30.1",

diff --git a/src/components/FoodCategory.js b/src/components/FoodCategory.js
@@ -26,6 +26,7 @@ import {
   COLOR_TEXT_BLACK,
   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';
@@ -35,6 +36,7 @@ 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;
 
@@ -54,10 +56,13 @@ export default function FoodCategory(props) {
           marginBottom: 14,
         }}>
         <Text style={styles.todayPickTitle}>카테고리</Text>
-        {/* TODO: 기능 구현 */}
         <AnimatedButton
-          onPress={() => {
+          onPress={async () => {
             console.log('카테고리로 넘어가기');
+            await AsyncStorage.setItem('category', '');
+            navigation.navigate('ListNavigator', {
+              screen: 'ListMainScreen',
+            });
           }}>
           <SvgXml xml={svgXml.button.goForward} />
         </AnimatedButton>
@@ -66,39 +71,46 @@ export default function FoodCategory(props) {
         {categroyList1.map((categroy, index) => {
           return (
             <AnimatedButton
-              key={index}
-              // {/* TODO: 기능 구현 */}
-              onPress={() => {
+              style={styles.buttonSet}
+              onPress={async () => {
                 console.log(categroy, '누름');
-              }}
-              style={styles.categroyButton}>
+                await AsyncStorage.setItem('category', categroy);
+                navigation.reset({
+                  index: 0,
+                  routes: [
+                    {
+                      name: 'ListNavigator',
+                    },
+                  ],
+                });
+              }}>
+              <View key={index} style={styles.categroyButton} />
               <Text style={styles.categroyText2}>{categroy}</Text>
             </AnimatedButton>
           );
         })}
       </View>
+
+      <View style={{height: 13}} />
       <View style={styles.buttonLine}>
         {categroyList2.map((categroy, index) => {
           return (
             <AnimatedButton
-              key={index}
-              // {/* TODO: 기능 구현 */}
-              onPress={() => {
+              style={styles.buttonSet}
+              onPress={async () => {
                 console.log(categroy, '누름');
-              }}
-              style={styles.categroyButton}>
-              {categroy.length > 2 ? (
-                <Text
-                  style={{
-                    fontSize: 16,
-                    color: COLOR_WHITE,
-                    fontWeight: 'bold',
-                  }}>
-                  {categroy}
-                </Text>
-              ) : (
-                <Text style={styles.categroyText2}>{categroy}</Text>
-              )}
+                await AsyncStorage.setItem('category', categroy);
+                navigation.reset({
+                  index: 0,
+                  routes: [
+                    {
+                      name: 'ListNavigator',
+                    },
+                  ],
+                });
+              }}>
+              <View key={index} style={styles.categroyButton} />
+              <Text style={styles.categroyText2}>{categroy}</Text>
             </AnimatedButton>
           );
         })}
@@ -142,15 +154,20 @@ const styles = StyleSheet.create({
   categroyButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 34,
+    marginBottom: 3,
     width: 50,
     height: 50,
     backgroundColor: COLOR_PRIMARY,
     borderRadius: 20,
   },
   categroyText2: {
-    fontSize: 20,
-    color: COLOR_WHITE,
+    fontSize: 15,
+    color: COLOR_TEXT_BLACK,
     fontWeight: 'bold',
   },
+  buttonSet: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 0,
+  },
 });
diff --git a/src/components/KingoPass.js b/src/components/KingoPass.js
@@ -67,10 +67,11 @@ export default function KingoPass(props) {
               // TODO: 킹고패스 페이지로 이동
               onPress={() => {
                 console.log('킹고패스 페이지로 이동');
+                navigation.navigate('StoreDetail', {data: data});
               }}>
               <Image
                 source={{
-                  uri: data.image,
+                  uri: data.representativeImageUrl,
                 }}
                 resizeMode="cover"
                 style={{
@@ -116,7 +117,7 @@ export default function KingoPass(props) {
                     fontWeight: 'bold',
                     margin: 10,
                   }}>
-                  {data.body}
+                  {data.discountContent}
                 </Text>
               </View>
             </AnimatedButton>

diff --git a/src/components/StoreCompo.js b/src/components/StoreCompo.js
@@ -60,7 +60,6 @@ export default function StoreCompo(props) {
         console.log('가게 상세 페이지로 이동');
         navigation.navigate('StoreDetail', {data: storeData});
       }}>
-      {console.log('addPadding: ', addPadding)}
       <View style={{flexDirection: 'row'}}>
         <ImageModal
           swipeToDismiss={true}

diff --git a/src/navigation/BottomTabNavigator.js b/src/navigation/BottomTabNavigator.js
@@ -23,6 +23,7 @@ import {
   COLOR_PRIMARY,
 } from '../assets/color';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import changeNavigationBarColor from 'react-native-navigation-bar-color';
 
 import HomeScreen from '../screens/home/HomeScreen';
 import ListMainScreen from '../screens/list/ListMainScreen';
@@ -137,6 +138,7 @@ function MypageNavigator() {
 }
 
 export default function BottomTabNavigator() {
+  changeNavigationBarColor(COLOR_WHITE);
   return (
     <>
       <StatusBar backgroundColor={COLOR_PRIMARY} />
@@ -146,7 +148,7 @@ export default function BottomTabNavigator() {
           headerShown: false,
           tabBarStyle: {
             height: 56,
-            backgroundColor: COLOR_BACKGROUND,
+            backgroundColor: COLOR_WHITE,
             // backgroundColor: 'red',
           },
           tabBarShowLabel: false,

diff --git a/src/screens/home/HomeScreen.js b/src/screens/home/HomeScreen.js
@@ -31,7 +31,7 @@ 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 axios, {AxiosError} from 'axios';
 import {API_URL} from '@env';
 import {Dimensions} from 'react-native';
 import TodayPick from '../../components/TodayPick';
@@ -86,51 +86,50 @@ export default function HomeScreen() {
     },
   ]);
 
-  const [kingoPassData, setkingoPassData] = useState([
-    {
-      name: '율천회관',
-      image: 'https://d2da4yi19up8sp.cloudfront.net/product/pro.jpeg',
-      body: '가게 내부 깨끗하고, 서비스 친절해서 개좋음. 기대안하고 첨 갔는데 걍 인생 oo 맛봄. 지림.',
-    },
-    {
-      name: '무대뽀 핫도그',
-      image: 'https://d2da4yi19up8sp.cloudfront.net/product/max.jpeg',
-      body: '가게 내부 깨끗하고, 서비스 친절해서 개좋음. 기대안하고 첨 갔는데 걍 인생 oo 맛봄. 지림.',
-    },
-    {
-      name: '무대뽀 핫도그',
-      image: 'https://d2da4yi19up8sp.cloudfront.net/product/max.jpeg',
-      body: '가게 내부 깨끗하고, 서비스 친절해서 개좋음. 기대안하고 첨 갔는데 걍 인생 oo 맛봄. 지림.',
-    },
-  ]);
+  const [kingoPassData, setkingoPassData] = useState([]);
+
+  const initKingoPassData = async () => {
+    try {
+      console.log('context.accessToken:', context.accessToken);
+
+      const params = {
+        discountForSkku: true,
+      };
+
+      const queryString = new URLSearchParams(params).toString();
+
+      const response = await axios.get(
+        `${API_URL}/v1/restaurants?${queryString}`,
+        {
+          headers: {Authorization: `Bearer ${context.accessToken}`},
+        },
+      );
+
+      console.log('response:', response.data.data.restaurants[0]);
+
+      setkingoPassData(response.data.data.restaurants);
+    } catch (e) {
+      console.log('error', e);
+    }
+  };
+
+  const initTodayPickData = async () => {
+    try {
+      //TODO: 백엔드 연결
+    } catch (e) {
+      console.log('error', e);
+    }
+  };
+
+  useEffect(() => {
+    initKingoPassData();
+  }, []);
 
   return (
     <>
       <Header title={'홈'} isBackButton={false} />
       <ScrollView contentContainerStyle={styles.entire}>
         {/* 먹구스꾸 오늘의 픽 */}
-        {/* <AnimatedButton
-          style={{width: windowWidth, height: 200, backgroundColor: 'red'}}
-          onPress={async () => {
-            try {
-              const response = await axios.get(
-                `${API_URL}/hello/security-test`,
-                {
-                  headers: {Authorization: `Bearer ${context.accessToken}`},
-                },
-              );
-
-              console.log('response:', response.data.data);
-
-              if (!response.data.data) {
-                console.log('Error: No return data');
-                return;
-              }
-            } catch (e) {
-              console.log('error', e);
-            }
-          }}
-        /> */}
         <TodayPick todaysPick={todaysPick} />
         <FoodCategory />
         <KingoPass passData={kingoPassData} />

diff --git a/src/screens/list/ListMainScreen.js b/src/screens/list/ListMainScreen.js
@@ -22,7 +22,7 @@ import StoreCompo from '../../components/StoreCompo';
 import {SvgXml} from 'react-native-svg';
 import {svgXml} from '../../assets/svg';
 import {Dimensions} from 'react-native';
-
+import AsyncStorage from '@react-native-async-storage/async-storage';
 const windowWidth = Dimensions.get('window').width;
 
 export default function ListMainScreen() {
@@ -274,6 +274,20 @@ export default function ListMainScreen() {
     },
   ]);
 
+  const checkCategory = async () => {
+    const srcCategory = await AsyncStorage.getItem('category');
+    if (srcCategory) {
+      setSelectedCategory(srcCategory);
+      await AsyncStorage.setItem('category', '');
+    } else {
+      setSelectedCategory('전체');
+    }
+  };
+
+  useEffect(() => {
+    checkCategory();
+  }, []);
+
   //TODO: 필터링 하는 함수
 
   //리스트 위에 필터 버튼들
@@ -289,7 +303,7 @@ export default function ListMainScreen() {
         <AnimatedButton
           style={styles.filterButton}
           onPress={() => {
-            console.log('정렬 버튼 누름');
+            console.log('정렬 버튼 누름', selectedCategory);
           }}>
           <View style={{flexDirection: 'row'}}>
             <SvgXml xml={svgXml.icon.filter} width="20" height="20" />

diff --git a/yarn.lock b/yarn.lock
@@ -5911,6 +5911,11 @@ react-native-modal@^13.0.1:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"
 
+react-native-navigation-bar-color@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.2.tgz#2e14ca79a656d81d5b4b7433ae43966ef5206444"
+  integrity sha512-ZmpLWRocyme1au11e5ZuecMS/UCi57nlzgnioi03Q6ERMbeUOqqbWgNBaNB7SsCeqBV6fZPjo3+A64zEIpzw4w==
+
 react-native-reanimated@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.8.1.tgz#45c13d4bedebef8df3d5a8756f25072de65960d7"