[Kan 71] 마이프로필, 내정보수정 화면 & 로직 구현

App.js

@@ -14,6 +14,7 @@ import 'react-native-gesture-handler';
 export default function App() {
   const [accessToken, setAccessToken] = useState('');
   const [refreshToken, setRefreshToken] = useState('');
+  const [id, setId] = useState('');
 
   const setAccessTokenValue = string => {
     setAccessToken(string);
@@ -23,11 +24,17 @@ export default function App() {
     setRefreshToken(string);
   };
 
+  const setIdValue = string => {
+    setId(string);
+  };
+
   const tokens = {
     accessToken: accessToken,
     setAccessTokenValue,
     refreshToken: refreshToken,
     setRefreshTokenValue,
+    id: id,
+    setIdValue,
   };
 
   return (

src/assets/color.js

@@ -9,3 +9,5 @@ export const COLOR_TEXT70GRAY = '#4D4D4D';
 export const COLOR_TEXT60GRAY = '#666666';
 export const COLOR_NAVY = '#003C71';
 export const COLOR_LIGHTGRAY = '#dddddd';
+export const COLOR_RED = '#FF0000';
+export const COLOR_BLUE = '#0000FF';

src/components/MyReview.js

@@ -0,0 +1,97 @@
+import React, { useState, useCallback, useEffect, useContext, useRef } from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { COLOR_WHITE, COLOR_PRIMARY, COLOR_TEXT70GRAY } from '../assets/color';
+import { useNavigation } from '@react-navigation/native';
+import AppContext from './AppContext';
+import { Dimensions } from 'react-native';
+import StoreCompo from './StoreCompo';
+
+const windowWidth = Dimensions.get('window').width;
+
+export default function MyReview(props) {
+  const navigation = useNavigation();
+  const context = useContext(AppContext);
+
+  const scrollViewRef = useRef();
+
+  const { myReviews } = props;
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleScroll = event => {
+    const offsetX = event.nativeEvent.contentOffset.x;
+    const pageWidth = event.nativeEvent.layoutMeasurement.width;
+    const currentPage = Math.floor(offsetX / pageWidth + 0.5);
+    setCurrentIndex(currentPage);
+  };
+
+  const Indicator = Array.from({ length: myReviews.length }, (_, index) => (
+    <View
+      key={index.toString()}
+      style={{
+        width: 4,
+        height: 4,
+        borderRadius: 2,
+        marginHorizontal: 3.5,
+        backgroundColor: index === currentIndex ? COLOR_PRIMARY : '#D9D9D9',
+      }}
+    />
+  ));
+
+  return (
+    <View style={styles.myReview}>
+      <Text style={styles.myReviewTitle}>사용자&apos;s 리뷰</Text>
+      {myReviews.length === 0 ? (
+        <Text style={styles.noReviewText}>리뷰가 없습니다</Text>
+      ) : (
+        <>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            style={{ marginTop: 10 }}
+            horizontal={true}
+            pagingEnabled
+            onScroll={handleScroll}
+            scrollEventThrottle={16}
+            ref={scrollViewRef}>
+            {myReviews.map((reviewData, index) => {
+              return <StoreCompo key={index.toString()} storeData={reviewData} index={index} />;
+            })}
+          </ScrollView>
+          <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 8 }}>
+            {Indicator}
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  myReview: {
+    marginTop: 15,
+    width: windowWidth - 32,
+    padding: 12,
+    paddingHorizontal: 10,
+    backgroundColor: COLOR_WHITE,
+    borderRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 4, // for Android
+  },
+  myReviewTitle: {
+    fontSize: 20,
+    color: COLOR_TEXT70GRAY,
+    fontWeight: '700',
+  },
+  noReviewText: {
+    marginTop: 20,
+    fontSize: 16,
+    color: COLOR_TEXT70GRAY,
+    textAlign: 'center',
+  },
+});

src/components/MyStore.js

@@ -0,0 +1,134 @@
+import React, { useContext, useRef } from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  Image,
+} from 'react-native';
+import {
+  COLOR_WHITE,
+  COLOR_PRIMARY,
+  COLOR_TEXT70GRAY,
+} from '../assets/color';
+import { useNavigation } from '@react-navigation/native';
+import AppContext from './AppContext';
+import { Dimensions } from 'react-native';
+import AnimatedButton from './AnimationButton';
+
+const windowWidth = Dimensions.get('window').width;
+
+export default function MyStore(props) {
+  const navigation = useNavigation();
+  const context = useContext(AppContext);
+
+  const scrollViewRef = useRef();
+
+  const { passData } = props;
+
+  return (
+    <View style={styles.kingopass}>
+      <Text style={styles.kingopassTitle}>찜한 가게</Text>
+      {passData.length === 0 ? (
+        <Text style={styles.noStoreText}>찜한 가게가 없습니다</Text>
+      ) : (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={true}
+          style={{
+            marginTop: 10,
+          }}
+          horizontal={true}
+          ref={scrollViewRef}>
+          <View style={{ width: 16 }} />
+          {passData.map((data, index) => {
+            return (
+              <AnimatedButton
+                key={index.toString()}
+                style={styles.kingopassKard}
+                // TODO: 찜한 가게 페이지로 이동
+                onPress={() => {
+                  console.log('찜한 가게 페이지로 이동');
+                }}>
+                <Image
+                  source={{
+                    uri: data.image,
+                  }}
+                  resizeMode="cover"
+                  style={{
+                    width: 140,
+                    height: 140,
+                    borderRadius: 10,
+                  }}
+                />
+                <View
+                  style={{
+                    position: 'absolute',
+                    borderRadius: 10,
+                    width: 140,
+                    height: 140,
+                    backgroundColor: '#000000',
+                    opacity: 0.3,
+                  }}
+                />
+                <View
+                  style={{
+                    position: 'absolute',
+                    borderRadius: 10,
+                    width: 140,
+                    height: 140,
+                  }}>
+                  <Text
+                    numberOfLines={1}
+                    style={{
+                      fontSize: 20,
+                      color: COLOR_WHITE,
+                      fontWeight: 'bold',
+                      margin: 10,
+                    }}>
+                    {data.name}
+                  </Text>
+                </View>
+              </AnimatedButton>
+            );
+          })}
+          <View style={{ width: 16 }} />
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  kingopass: {
+    marginTop: 15,
+    width: windowWidth,
+    paddingHorizontal: 0,
+  },
+  kingopassTitle: {
+    fontSize: 20,
+    marginLeft: 26,
+    color: COLOR_TEXT70GRAY,
+    fontWeight: '700',
+  },
+  kingopassKard: {
+    height: 140,
+    width: 140,
+    borderRadius: 10,
+    marginHorizontal: 5,
+    marginBottom: 10,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  noStoreText: {
+    fontSize: 16,
+    color: COLOR_TEXT70GRAY,
+    textAlign: 'center',
+    marginTop: 10,
+  },
+});