feat: 전면 카메라로 변경 버튼 추가

packages/react-native/src/assets/ChangeIcon.tsx

@@ -0,0 +1,19 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export default function ChangeIcon({ width, height, color }: SvgProps) {
+  return (
+    <Svg
+      width={width || 26}
+      height={height || 26}
+      viewBox="0 0 26 26"
+      fill="none"
+    >
+      <Path
+        d="M18.4191 23.8862C19.9896 23.1009 21.3328 22.0251 22.438 20.6502V22.612V22.762H22.588H24.988H25.138V22.612V15.412V15.262H24.988H17.788H17.638V15.412V17.812V17.962H17.788H21.0082C20.1928 19.3322 19.0916 20.4143 17.713 21.2101C16.2605 22.0486 14.6784 22.462 12.988 22.462C10.8251 22.462 8.88972 21.8009 7.20049 20.4779C5.51027 19.1541 4.38863 17.4541 3.83298 15.3615L3.80337 15.25H3.688H1.228H1.04317L1.08121 15.4309C1.67617 18.26 3.08621 20.5941 5.30891 22.416L5.30922 22.4163C7.53714 24.2325 10.0937 25.1443 12.9732 25.15L12.976 25.162C14.907 25.162 16.718 24.7367 18.4191 23.8862ZM1 3.25H0.85V3.4V10.438V10.588V10.6H1V10.738H8.224H8.374V10.588V8.188V8.038H8.224H5.00379C5.81917 6.66779 6.92041 5.58568 8.29899 4.78991C9.75155 3.95144 11.3336 3.538 13.024 3.538C15.1869 3.538 17.1223 4.19906 18.8115 5.52209C20.5017 6.8459 21.6234 8.54591 22.179 10.6385L22.2086 10.75H22.324H24.784H24.9688L24.9308 10.5691C24.3359 7.74038 22.938 5.40594 20.7028 3.58374C18.4679 1.76186 15.9024 0.85 13.012 0.85C11.081 0.85 9.27002 1.27529 7.56892 2.12584C5.99844 2.91108 4.65523 3.98686 3.55 5.36182V3.4V3.25H3.4H1Z"
+        fill={color || 'white'}
+        stroke={color || 'white'}
+        strokeWidth="0.3"
+      />
+    </Svg>
+  );
+}

packages/react-native/src/hooks/useCamera.ts

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Platform } from 'react-native';
 import {
+  CameraPosition,
   useCameraDevice,
   useCameraPermission,
 } from 'react-native-vision-camera';
@@ -14,7 +15,8 @@ import {
 import useCameraPermissionAlert from './useCameraPermissionAlert';
 
 export default function useCamera() {
-  const device = useCameraDevice('back');
+  const [cameraPosition, setCameraPosition] = useState<CameraPosition>('back');
+  const device = useCameraDevice(cameraPosition);
   const { hasPermission } = useCameraPermission();
   const cameraPermissionAlert = useCameraPermissionAlert();
 
@@ -28,6 +30,10 @@ export default function useCamera() {
     }
   };
 
+  const changeCameraPosition = () => {
+    setCameraPosition((prev) => (prev === 'back' ? 'front' : 'back'));
+  };
+
   useEffect(() => {
     if (Platform.OS === 'ios') {
       request(PERMISSIONS.IOS.CAMERA).then(() => {
@@ -40,5 +46,5 @@ export default function useCamera() {
     }
   }, []);
 
-  return { device, hasPermission };
+  return { device, hasPermission, changeCameraPosition };
 }

packages/react-native/src/hooks/useGallery.ts

@@ -66,9 +66,7 @@ export default function useGallery() {
       selectionLimit: 1,
     });
 
-    if (response.didCancel) {
-      return null;
-    }
+    if (response.didCancel) return null;
 
     return response.assets?.[0]?.uri;
   };

packages/react-native/src/pages/CameraPage.tsx

@@ -6,11 +6,12 @@ import { Camera, PhotoFile } from 'react-native-vision-camera';
 import useCamera from '@/hooks/useCamera';
 import DownloadIcon from '@/assets/DownloadIcon';
 import useGallery from '@/hooks/useGallery';
+import ChangeIcon from '@/assets/ChangeIcon';
 
 export default function CameraPage() {
   const camera = useRef<Camera>(null);
   const captureRef = useRef<ViewShot>(null);
-  const { device, hasPermission } = useCamera();
+  const { device, hasPermission, changeCameraPosition } = useCamera();
   const [Filter] = useState(<View className="w-20 h-20 absolue bg-blue-300" />);
   const [photo, setPhoto] = useState<PhotoFile | null>(null);
   const { savePhoto: savePicture } = useGallery();
@@ -96,13 +97,22 @@ export default function CameraPage() {
             audio={false}
           />
           {Filter}
-          <TouchableOpacity
-            onPress={takePhoto}
-            className="absolute bottom-24 items-center justify-center"
-          >
-            <View className="absolute bg-white w-[80px] h-[80px] rounded-full" />
-            <View className="absolute bg-white w-[72px] h-[72px] rounded-full border-[3px] border-SPOT-black" />
-          </TouchableOpacity>
+          <View className="absolute items-center justify-between flex-row bottom-0 pb-16 w-full px-10 pt-10">
+            <TouchableOpacity
+              onPress={changeCameraPosition}
+              className="items-center justify-center w-[52px] h-[52px] rounded-full bg-SPOT-black/50"
+            >
+              <ChangeIcon />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={takePhoto}
+              className="items-center justify-center"
+            >
+              <View className="absolute bg-white w-[80px] h-[80px] rounded-full" />
+              <View className="absolute bg-white w-[72px] h-[72px] rounded-full border-[3px] border-SPOT-black" />
+            </TouchableOpacity>
+            <View className="w-[52px] h-[52px]" />
+          </View>
         </>
       )}
     </View>