[FEAT] #38 선택된 이미지 제거 기능 구현

BinVoyage · Oct 23, 2024 · 0b920be · 0b920be
1 parent 28b2971
commit 0b920be
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/app/src/assets/images/RemoveImageSvg.tsx b/app/src/assets/images/RemoveImageSvg.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Svg, {G, Path, Circle, Defs, Rect} from 'react-native-svg';
+export default function RemoveImageSvg({width, height, fill}: SvgProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 20 20" fill={fill}>
+      <Circle cx="10" cy="10" r="10" fill="white" fillOpacity="0.5" />
+      <Path d="M6 6L14 14" stroke="#5A5E6A" strokeWidth="2" strokeLinecap="round" />
+      <Path d="M14 6L6 14" stroke="#5A5E6A" strokeWidth="2" strokeLinecap="round" />
+    </Svg>
+  );
+}
diff --git a/app/src/screens/reportNewBinDetail/ReportNewBinDetail.style.ts b/app/src/screens/reportNewBinDetail/ReportNewBinDetail.style.ts
@@ -131,8 +131,22 @@ export const ButtonText = styled(DefaultText)<{isValid: boolean}>`
   color: ${props => (props.isValid ? Palette.White : Palette.Gray5)};
 `;
 
+export const ImageContainer = styled.View`
+  position: relative;
+  width: 100%;
+`;
+
 export const AttachedImage = styled.Image`
+  position: relative;
   width: 100%;
   height: 200px;
   border-radius: 8px;
 `;
+
+export const BtnRemoveImage = styled.TouchableOpacity`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+`;
diff --git a/app/src/screens/reportNewBinDetail/ReportNewBinDetail.tsx b/app/src/screens/reportNewBinDetail/ReportNewBinDetail.tsx
@@ -5,12 +5,13 @@ import LocationSvg from 'assets/images/LocationSvg';
 import {Palette} from 'constants/palette';
 import useMediaPermissions from 'hooks/useMediaPermissions';
 import {useEffect, useState} from 'react';
-import {Alert, Image, Linking, Platform, ScrollView} from 'react-native';
+import {Alert, Linking, Platform, ScrollView} from 'react-native';
 import ImagePicker from 'react-native-image-crop-picker';
 import Toast from 'react-native-toast-message';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import * as S from 'screens/reportNewBinDetail/ReportNewBinDetail.style';
 import {RESULTS} from 'react-native-permissions';
+import RemoveImageSvg from 'assets/images/RemoveImageSvg';
 
 type ReportNewBinProps = {
   route: RouteProp<RootReportNewBinParamList, 'ReportNewBinDetail'>;
@@ -209,7 +210,12 @@ export default function ReportNewBinDetail({route}: ReportNewBinProps) {
           textAlignVertical="top"
         />
         {imageUrl ? (
-          <S.AttachedImage source={{uri: imageUrl}} resizeMode="cover" />
+          <S.ImageContainer>
+            <S.AttachedImage source={{uri: imageUrl}} resizeMode="cover" />
+            <S.BtnRemoveImage onPress={() => setImageUrl(null)}>
+              <RemoveImageSvg width="20" height="20" />
+            </S.BtnRemoveImage>
+          </S.ImageContainer>
         ) : (
           <S.AddPicture onPress={handleUploadImage}>
             <S.IconAddPicture source={require('assets/images/AddImage.png')} />