From 18880e142bedd6de3ed22438df0def6602863e1a Mon Sep 17 00:00:00 2001
From: junghongseop <a01082372487@gmail.com>
Date: Wed, 17 Jul 2024 01:24:18 +0900
Subject: [PATCH] =?UTF-8?q?fix(user):=20=ED=95=A8=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/CropImageModal/CropImageModal.tsx     | 18 +++++++++---------
 apps/user/src/utils/cropImage.ts               |  2 +-
 apps/user/src/utils/index.ts                   |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/user/src/components/form/CropImageModal/CropImageModal.tsx b/apps/user/src/components/form/CropImageModal/CropImageModal.tsx
index ea4f47c6e..4de74c6be 100644
--- a/apps/user/src/components/form/CropImageModal/CropImageModal.tsx
+++ b/apps/user/src/components/form/CropImageModal/CropImageModal.tsx
@@ -5,7 +5,7 @@ import { flex } from '@maru/utils';
 import styled from 'styled-components';
 import type { Area } from 'react-easy-crop';
 import Cropper from 'react-easy-crop';
-import { getCroppedImg } from '@/utils';
+import { getCropImg } from '@/utils';
 
 interface Props {
   isOpen: boolean;
@@ -16,25 +16,25 @@ interface Props {
 
 const CropImageModal = ({ isOpen, imageSrc, onClose, onCropComplete }: Props) => {
   const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [croppedArea, setCroppedArea] = useState<Area | null>(null);
+  const [cropArea, setCropArea] = useState<Area | null>(null);
 
   const onCropCompleteInternal = useCallback(
-    (croppedArea: Area, croppedAreaPixels: Area) => {
-      setCroppedArea(croppedAreaPixels);
+    (cropArea: Area, croppedAreaPixels: Area) => {
+      setCropArea(croppedAreaPixels);
     },
     []
   );
 
-  const applyCrop = useCallback(async () => {
-    if (!croppedArea) return;
-    const croppedImage = await getCroppedImg(imageSrc, croppedArea, 117, 156);
+  const handleApplyCrop = useCallback(async () => {
+    if (!cropArea) return;
+    const croppedImage = await getCropImg(imageSrc, cropArea, 117, 156);
 
     const response = await fetch(croppedImage as string);
     const blob = await response.blob();
 
     onCropComplete(blob);
     onClose();
-  }, [imageSrc, croppedArea, onCropComplete, onClose]);
+  }, [imageSrc, cropArea, onCropComplete, onClose]);
 
   if (!isOpen) return null;
 
@@ -54,7 +54,7 @@ const CropImageModal = ({ isOpen, imageSrc, onClose, onCropComplete }: Props) =>
               }}
             />
           </CropImageModalStyle>
-          <Button onClick={applyCrop}>
+          <Button onClick={handleApplyCrop}>
             <Text fontType="btn1" color={color.white}>
               사진 자르기 적용
             </Text>
diff --git a/apps/user/src/utils/cropImage.ts b/apps/user/src/utils/cropImage.ts
index cbadec9f6..c32254b61 100644
--- a/apps/user/src/utils/cropImage.ts
+++ b/apps/user/src/utils/cropImage.ts
@@ -14,7 +14,7 @@ interface PixelCrop {
   height: number;
 }
 
-export const getCroppedImg = async (
+export const getCropImg = async (
   imageSrc: string,
   pixelCrop: PixelCrop,
   outputWidth = 117,
diff --git a/apps/user/src/utils/index.ts b/apps/user/src/utils/index.ts
index 51966c92e..55959ed75 100644
--- a/apps/user/src/utils/index.ts
+++ b/apps/user/src/utils/index.ts
@@ -5,4 +5,4 @@ export { default as updateSlicedSubjectList } from './updateSlicedSubjectList';
 export { default as formatApplicationDate } from './formatApplicationDate';
 export { default as formatStartDate } from './formatStartDate';
 export { formatStatus } from './formatStatus';
-export { getCroppedImg } from './cropImage';
+export { getCropImg } from './cropImage';