[Refactor][마이페이지] profile image QA

src/components/modal/TwoButtonModal.tsx

@@ -13,6 +13,7 @@ interface TwoButtonModalProps {
   rightButtonText: string;
   leftButtonPress: () => void;
   rightButtonPress: () => void;
+  rightButtonColor?: string;
 }
 
 const TwoButtonModal = ({
@@ -23,6 +24,7 @@ const TwoButtonModal = ({
   onDismiss,
   rightButtonPress,
   rightButtonText,
+  rightButtonColor,
   subTitle,
   visible,
 }: TwoButtonModalProps) => {
@@ -53,7 +55,7 @@ const TwoButtonModal = ({
             text={rightButtonText}
             width={148}
             height={48}
-            color={theme.colors.graphic.black}
+            color={rightButtonColor ?? theme.colors.graphic.black}
             textColor={theme.colors.graphic.white}
             buttonStyle={styles.modalButton}
             onPress={rightButtonPress}

src/components/profile/MypageProfile.tsx

@@ -1,18 +1,31 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Image, StyleSheet, Text, View } from 'react-native';
 import React from 'react';
-import ProfileAvatar from './ProfileAvatar';
 import { useTheme } from 'react-native-paper';
+import { SvgXml } from 'react-native-svg';
+import person from '../../constants/Icons/Avatar/personXml';
 
 interface MypageProfileProps {
   nickname: string;
   title: string;
+  image: string | undefined;
 }
 
-const MypageProfile = ({ nickname, title }: MypageProfileProps) => {
+const MypageProfile = ({ nickname, title, image }: MypageProfileProps) => {
   const theme = useTheme();
   return (
     <View style={styles.container}>
-      <ProfileAvatar size={84} />
+      {image !== undefined ? (
+        <Image source={{ uri: image }} style={styles.image} />
+      ) : (
+        <View
+          style={{
+            ...styles.image,
+            backgroundColor: theme.colors.brand.surface.container2,
+          }}
+        >
+          <SvgXml xml={person} height={60} width={60} />
+        </View>
+      )}
       <View style={{ marginLeft: 12 }}>
         <Text style={{ ...theme.fonts.text.headline1, color: `${theme.colors.graphic.black}cc` }}>
           {nickname}
@@ -58,4 +71,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  image: {
+    flexDirection: 'row',
+    width: 84,
+    height: 84,
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

src/screens/Main/mypage/IntroductionEditingScreen.tsx

@@ -55,6 +55,7 @@ const IntroductionEditingScreen = ({ navigation, route }) => {
         inputValue={input}
         setInputValue={setInput}
         height={214}
+        autoFocus={true}
       />
     </View>
   );

src/screens/Main/mypage/MyPageScreen.tsx

@@ -15,6 +15,7 @@ const MyPageScreen = ({ navigation, route }) => {
     //return null;
   }
   const theme = useTheme();
+  const [profileImage, setProfileImage] = useState<string | undefined>(undefined);
   const [nickname, setNickname] = useState<string>('닉네임');
   const [title, setTitle] = useState<string>('대표 타이틀');
   const [selectedCategory, setSelectedCategory] = useState<string[]>([
@@ -46,7 +47,7 @@ const MyPageScreen = ({ navigation, route }) => {
           </Pressable>
         </View>
         <View style={{ marginLeft: 16, marginBottom: 24 }}>
-          <MypageProfile nickname={nickname} title={title} />
+          <MypageProfile nickname={nickname} title={title} image={profileImage} />
         </View>
         <View
           style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 20, marginHorizontal: 14 }}

src/screens/Main/mypage/ProfileEditScreen.tsx

@@ -18,8 +18,10 @@ const ProfileEditScreen = ({ navigation, route }) => {
   const theme = useTheme();
   const [modalVisible, setModalVisible] = useState<boolean>(false);
   const [permissionModal, setPermissionModal] = useState<boolean>(false);
+  const [deleteModal, setDeleteModal] = useState<boolean>(false);
   const hideModal = () => setModalVisible(false);
   const hidePermissionModal = () => setPermissionModal(false);
+  const hideDeleteModal = () => setDeleteModal(false);
   const [btnAbled, setBtnAbled] = useState<boolean>(true);
   const [nickname, setNickname] = useState<string>('');
   const [title, setTitle] = useState<string>('');
@@ -106,7 +108,10 @@ const ProfileEditScreen = ({ navigation, route }) => {
     bottomSheetModalRef.current?.present();
   }, []);
 
-  const handleDeletePress = () => setImage(undefined);
+  const handleDeletePress = () => {
+    setDeleteModal(true);
+    bottomSheetModalRef.current?.dismiss();
+  };
   const handleLibraryPress = () => pickImage();
   const handleShotPress = () => openCamera();
 
@@ -118,7 +123,7 @@ const ProfileEditScreen = ({ navigation, route }) => {
     }
 
     const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
       allowsEditing: true,
       aspect: [4, 3],
       quality: 1,
@@ -129,6 +134,7 @@ const ProfileEditScreen = ({ navigation, route }) => {
     if (!result.cancelled) {
       setImage(result.uri);
     }
+    bottomSheetModalRef.current?.dismiss();
   };
 
   const openCamera = async () => {
@@ -146,6 +152,7 @@ const ProfileEditScreen = ({ navigation, route }) => {
     if (!result.cancelled) {
       setImage(result.uri);
     }
+    bottomSheetModalRef.current?.dismiss();
   };
 
   const renderBackdrop = useCallback(
@@ -179,8 +186,22 @@ const ProfileEditScreen = ({ navigation, route }) => {
           leftButtonPress={() => setPermissionModal(false)}
           rightButtonPress={() => {
             Linking.openSettings();
-            setModalVisible(false);
+            setPermissionModal(false);
+          }}
+        />
+        <TwoButtonModal
+          dismissable={false}
+          mainTitle={'현재 사진을 삭제할까요?'}
+          visible={deleteModal}
+          onDismiss={hideDeleteModal}
+          leftButtonText={'취소'}
+          rightButtonText={'삭제하기'}
+          leftButtonPress={() => setDeleteModal(false)}
+          rightButtonPress={() => {
+            setImage(undefined);
+            setDeleteModal(false);
           }}
+          rightButtonColor={theme.colors.graphic.red}
         />
         <ProfileImage image={image} onPress={() => handlePresentModalPress()} />
         <BottomSheetModal
@@ -192,9 +213,9 @@ const ProfileEditScreen = ({ navigation, route }) => {
           backdropComponent={renderBackdrop}
         >
           <View style={styles.sheet}>
-            <BottomSheetOption title="현재 사진 삭제" onPress={handleDeletePress} />
             <BottomSheetOption title="라이브러리에서 선택" onPress={handleLibraryPress} />
             <BottomSheetOption title="사진 찍기" onPress={handleShotPress} />
+            <BottomSheetOption title="현재 사진 삭제" onPress={handleDeletePress} />
           </View>
         </BottomSheetModal>
         <View>