[Feat/#369] 이미지 크롭 기능 추가

[imddoy]

📌 관련 이슈번호

• Closes [ Feat ] 사진 업로드할 때 크롭 기능 구현 #369

🎟️ PR 유형

어떤 변경 사항이 있나요?

• 새 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 리팩토링

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

1. 이미지 선택하면 크롭기능 추가
2. 보여지는 비율 보여주기

📢 To Reviewers

• 공통 컴포넌트 ImageEditor를 만들었습니다.

        <ImageEditor file={previewImg} aspectRatio={3 / 4} onCropped={handleCroppedImage} />

이렇게 사용하면 됩니다.
aspectRatio에는 사진 비율 넣어주세요! 포스터면 3/4, 메이커면 1
onCropped에는 크롭한 이미지를 반영해주는 함수 넣어주세요! 저는

  const handleCroppedImage = (croppedImageUrl: string) => {
    setPreviewImg(croppedImageUrl);
    setOpenImageModal(false); // 모달 닫기
    onImageUpload(croppedImageUrl); // 부모 컴포넌트로 전달
  };

이런식으로 사용했습니다.

📸 스크린샷

🔗 참고 자료

https://github.com/eunsukimme/Simple-Image-Crop-App
https://www.npmjs.com/package/react-image-crop

[github-actions]

PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶

[pepperdad]

요잇 확인했씁니다!
코드 리뷰할 시간은 없네요,,, 그래도 컴포넌트로 분리도 하고 최고!!

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud