이미지 선택 + 압축 + Base64 변환 (expo-image-picker)

// src/utils/image.ts
import * as ImagePicker from "expo-image-picker";
import * as ImageManipulator from "expo-image-manipulator";

interface ImageResult {
  uri: string;
  base64: string;
}

/**
 * 프로필 이미지 선택 및 처리
 * 1. 갤러리에서 이미지 선택 (1:1 비율 크롭)
 * 2. 400x400으로 리사이즈
 * 3. 70% 품질로 압축
 * 4. Base64 인코딩
 */
export const pickProfileImage = async (): Promise<ImageResult | null> => {
  // 1. 갤러리 권한 요청 및 이미지 선택
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaType.Images,  // 이미지만 선택
    allowsEditing: true,   // 편집(크롭) 허용
    aspect: [1, 1],        // 1:1 비율 (정사각형)
    quality: 1,            // 원본 품질로 가져오기
  });

  // 취소한 경우
  if (result.canceled || !result.assets[0]) {
    return null;
  }

  const selectedImage = result.assets[0];

  // 2. 이미지 리사이즈 + 압축 + Base64 변환
  const manipulated = await ImageManipulator.manipulateAsync(
    selectedImage.uri,
    [{ resize: { width: 400, height: 400 } }],  // 리사이즈
    {
      compress: 0.7,                             // 70% 품질로 압축
      format: ImageManipulator.SaveFormat.JPEG,  // JPEG 포맷
      base64: true,                              // Base64 인코딩
    }
  );

  return {
    uri: manipulated.uri,      // 로컬 파일 경로 (미리보기용)
    base64: manipulated.base64 || "",  // Base64 문자열 (서버 전송용)
  };
};

// Step2ProfileScreen.tsx
import { pickProfileImage } from "../../../utils/image";

const Step2ProfileScreen = () => {
  const [imageUri, setImageUri] = useState<string | null>(null);
  const [imageBase64, setImageBase64] = useState<string | null>(null);

  const handleImagePress = async () => {
    const result = await pickProfileImage();
    if (result) {
      setImageUri(result.uri);        // 미리보기용
      setImageBase64(result.base64);  // 서버 전송용
    }
  };

  return (
    <TouchableOpacity onPress={handleImagePress}>
      {imageUri ? (
        <Image source={{ uri: imageUri }} style={styles.image} />
      ) : (
        <View style={styles.placeholder}>
          <Text>이미지 선택</Text>
        </View>
      )}
    </TouchableOpacity>
  );
};