From 0b920beadaabcd695df6eacee13d7c963a3501cf Mon Sep 17 00:00:00 2001
From: Lee-Sunho <sunho9889@naver.com>
Date: Wed, 23 Oct 2024 20:52:31 +0900
Subject: [PATCH] =?UTF-8?q?[FEAT]=20#38=20=EC=84=A0=ED=83=9D=EB=90=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=9C=EA=B1=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/assets/images/RemoveImageSvg.tsx           | 11 +++++++++++
 .../reportNewBinDetail/ReportNewBinDetail.style.ts | 14 ++++++++++++++
 .../reportNewBinDetail/ReportNewBinDetail.tsx      | 10 ++++++++--
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 app/src/assets/images/RemoveImageSvg.tsx

diff --git a/app/src/assets/images/RemoveImageSvg.tsx b/app/src/assets/images/RemoveImageSvg.tsx
new file mode 100644
index 0000000..36ce6fe
--- /dev/null
+++ 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
index 498a411..b976d5c 100644
--- 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
index 8a313f3..8b7aacd 100644
--- 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')} />