[KAN-133] profile image Update (#41)

* fix * Fix
meokgu-skku · Jun 1, 2024 · 5dd5b7a · 5dd5b7a
1 parent 7849844
commit 5dd5b7a
Show file tree

Hide file tree

Showing 7 changed files with 646 additions and 543 deletions.
diff --git a/android/app/src/main/assets/index.android.bundle b/android/app/src/main/assets/index.android.bundle
diff --git a/android/app/src/main/res/drawable-mdpi/src_assets_images_logo.png b/android/app/src/main/res/drawable-mdpi/src_assets_images_logo.png
diff --git a/android/app/src/main/res/drawable-mdpi/src_assets_images_splashlogo.png b/android/app/src/main/res/drawable-mdpi/src_assets_images_splashlogo.png
diff --git a/src/assets/svg.js b/src/assets/svg.js
diff --git a/src/screens/mypage/MypageScreen.js b/src/screens/mypage/MypageScreen.js
@@ -10,6 +10,8 @@ import {
 } from 'react-native';
 import {useNavigation, useFocusEffect} from '@react-navigation/native';
 import Header from '../../components/Header';
+import {SvgXml} from 'react-native-svg';
+import {svgXml} from '../../assets/svg';
 import {
   COLOR_BACKGROUND,
   COLOR_HOME_BACKGROUND,
@@ -132,7 +134,7 @@ export default function MyPageScreen() {
       setStorePage(0);
       fetchMyReviews(0);
       fetchLikedStores(0);
-    }, [])
+    }, []),
   );
 
   useEffect(() => {
@@ -159,15 +161,21 @@ export default function MyPageScreen() {
     <>
       <Header title={'내 프로필'} isBackButton={false} />
       <ScrollView contentContainerStyle={styles.entire}>
-        <Image
-          style={[styles.myPageItem, styles.myPageItemLayout]}
-          resizeMode="cover"
-          source={
-            profileImageUrl
-              ? {uri: profileImageUrl}
-              : require('../../assets/images/logo.png')
-          }
-        />
+        {profileImageUrl != '' ? (
+          <Image
+            style={[styles.myPageItem, styles.myPageItemLayout]}
+            resizeMode="cover"
+            source={
+              profileImageUrl
+                ? {uri: profileImageUrl}
+                : require('../../assets/images/logo.png')
+            }
+          />
+        ) : (
+          <View style={[styles.myPageItem, styles.myPageItemLayout]}>
+            <SvgXml xml={svgXml.icon.prodileDefault} width="100" height="100" />
+          </View>
+        )}
         <TouchableOpacity
           style={styles.text6Position}
           onPress={() => {
@@ -224,7 +232,7 @@ const styles = StyleSheet.create({
   myPageItemLayout: {
     marginTop: 20,
     marginBottom: 10,
-    borderRadius: 15,
+    borderRadius: 50,
   },
   text6: {
     fontSize: 20,

diff --git a/src/screens/mypage/UserDataChangeScreen.js b/src/screens/mypage/UserDataChangeScreen.js
@@ -16,6 +16,7 @@ import {
   COLOR_WHITE,
   COLOR_GRAY,
   COLOR_RED,
+  COLOR_NAVY,
   COLOR_BLUE,
   COLOR_HOME_BACKGROUND,
   COLOR_TEXT_BLACK,
@@ -25,12 +26,18 @@ import Header from '../../components/Header';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import AppContext from '../../components/AppContext';
 import axios from 'axios';
-import {API_URL} from '@env';
+import {API_URL, IMG_URL} from '@env';
+import AnimatedButton from '../../components/AnimationButton';
+import ImagePicker from 'react-native-image-crop-picker';
+import RNFS from 'react-native-fs';
+import {SvgXml} from 'react-native-svg';
+import {svgXml} from '../../assets/svg';
 
 export default function UserDataChangeScreen() {
   const navigation = useNavigation();
   const context = useContext(AppContext);
 
+  const [profileImage, setProfileImage] = useState('');
   const [nickname, setNickname] = useState('');
   const [email, setEmail] = useState('');
   const [duplicateMessage, setDuplicateMessage] = useState('');
@@ -83,6 +90,7 @@ export default function UserDataChangeScreen() {
       const response = await axios.patch(
         `${API_URL}/v1/users`,
         {
+          profileImageUrl: profileImage,
           nickname: nickname,
         },
         {
@@ -91,9 +99,11 @@ export default function UserDataChangeScreen() {
       );
 
       if (response.status === 200) {
-        Alert.alert('성공', '닉네임이 성공적으로 변경되었습니다.', [
-          {text: '확인', onPress: () => navigation.goBack()},
-        ]);
+        Alert.alert(
+          '성공',
+          '닉네임/프로필 이미지가 성공적으로 변경되었습니다.',
+          [{text: '확인', onPress: () => navigation.goBack()}],
+        );
       }
     } catch (error) {
       console.error('Failed to update nickname:', error);
@@ -135,6 +145,41 @@ export default function UserDataChangeScreen() {
     }
   };
 
+  const uploadImage = async image => {
+    let imageData = '';
+    await RNFS.readFile(image.path, 'base64')
+      .then(data => {
+        // console.log('encoded', data);
+        imageData = data;
+      })
+      .catch(err => {
+        console.error(err);
+      });
+
+    // console.log('token:', signUpData.token);
+    try {
+      const response = await axios.post(`${IMG_URL}/v1/upload-image`, {
+        images: [
+          {
+            imageData: imageData,
+            location: 'test',
+          },
+        ],
+      });
+
+      console.log('response image:', response.data);
+
+      if (response.data.result != 'SUCCESS') {
+        console.log('Error: No return data');
+        return;
+      }
+
+      setProfileImage(response.data.data[0].imageUrl);
+    } catch (error) {
+      console.log('Error:', error);
+    }
+  };
+
   const logout = async () => {
     try {
       await AsyncStorage.removeItem('accessToken');
@@ -158,12 +203,28 @@ export default function UserDataChangeScreen() {
     <>
       <Header title={'내 정보 수정'} isBackButton={true} />
       <ScrollView contentContainerStyle={styles.entire}>
-        <Image
-          style={[styles.myPageItem, styles.myPageItemLayout]}
-          resizeMode="cover"
-          source={require('../../assets/images/logo.png')}
-        />
-
+        <AnimatedButton
+          style={styles.profile}
+          onPress={() => {
+            // console.log('프로필 사진 변경', profileImage);
+            ImagePicker.openPicker({
+              width: 400,
+              height: 400,
+              cropping: true,
+              cropperCircleOverlay: true,
+            }).then(image => {
+              uploadImage(image);
+            });
+          }}>
+          {profileImage ? (
+            <Image
+              source={{uri: profileImage}}
+              style={{width: 100, height: 100, borderRadius: 75}}
+            />
+          ) : (
+            <SvgXml width={100} height={100} xml={svgXml.icon.camera} />
+          )}
+        </AnimatedButton>
         <View style={styles.inputContainer}>
           <Text style={styles.label}>닉네임</Text>
           <View style={styles.inputWithButton}>
@@ -313,4 +374,12 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontFamily: 'NanumSquareRoundB',
   },
+  profile: {
+    width: 100,
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 30,
+    marginBottom: 10,
+  },
 });
diff --git a/src/screens/signup/ProfileSetScreen.js b/src/screens/signup/ProfileSetScreen.js
@@ -150,8 +150,9 @@ export default function ProfileSetScreen(props) {
             }}>
             {profileImage ? (
               <Image
+                resizeMode="contain"
                 source={{uri: profileImage}}
-                style={{width: 150, height: 150, borderRadius: 75}}
+                style={{borderRadius: 75, width: 150, height: 150}}
               />
             ) : (
               <SvgXml width={200} height={200} xml={svgXml.icon.camera} />