Refactor: PostImageSelect 리팩토링

Author: xxinzzi

src/pages/Post/PostImageSelect/ImageSwiper/index.tsx

@@ -17,7 +17,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onProcessFile, onRemo
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const [currentSlide, setCurrentSlide] = useState(0);
 
-	const handleSelectImage = () => {
+	const handleImageSelect = () => {
 		if (fileInputRef.current) {
 			fileInputRef.current.click();
 		}
@@ -51,7 +51,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onProcessFile, onRemo
 					</SwiperSlide>
 				))}
 				<SwiperSlide className="add-btn-box">
-					<AddButton onClick={handleSelectImage}>
+					<AddButton onClick={handleImageSelect}>
 						<img src={Plus} />
 					</AddButton>
 					<HiddenFileInput

src/pages/Post/PostImageSelect/index.tsx

@@ -22,7 +22,7 @@ import { OODDFrame } from '@components/Frame/Frame';
 import { StyledText } from '@components/Text/StyledText';
 import TopBar from '@components/TopBar';
 
-import ImageSwiper from './ImageSwiper';
+import ImageSwiper from './ImageSwiper/index';
 import { UploadContainer, ImageDragDropContainer, Content } from './styles';
 
 const PostImageSelect: React.FC = () => {
@@ -55,7 +55,7 @@ const PostImageSelect: React.FC = () => {
 	};
 
 	// 파일 선택기에서 사진 업로드
-	const handleSelectImage = () => {
+	const handleImageSelect = () => {
 		if (fileInputRef.current) {
 			fileInputRef.current.click();
 		}
@@ -74,22 +74,22 @@ const PostImageSelect: React.FC = () => {
 		setActive(false);
 
 		if (event.dataTransfer.files) {
-			handleProcessFile(event.dataTransfer.files);
+			processFile(event.dataTransfer.files);
 		}
 	};
 
 	const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		event.preventDefault();
 		if (event.target.files) {
-			handleProcessFile(event.target.files);
+			processFile(event.target.files);
 			// 파일 선택 후 input 값 초기화
 			if (fileInputRef.current) {
 				fileInputRef.current.value = ''; // input 값을 초기화하여 동일한 파일을 다시 추가할 수 있도록 함
 			}
 		}
 	};
 
-	const handleProcessFile = async (files: FileList) => {
+	const processFile = async (files: FileList) => {
 		const filesArray = Array.from(files);
 		for (const file of filesArray) {
 			try {
@@ -111,7 +111,7 @@ const PostImageSelect: React.FC = () => {
 				reader.readAsDataURL(fileBlob);
 				reader.onload = () => {
 					if (reader.result) {
-						handleAddImage(reader.result.toString());
+						handleImageAdd(reader.result.toString());
 					}
 				};
 			} catch (error) {
@@ -121,14 +121,14 @@ const PostImageSelect: React.FC = () => {
 		}
 	};
 
-	const handleAddImage = (newImage: string) => {
+	const handleImageAdd = (newImage: string) => {
 		setImages((prevImages) => {
 			const maxOrderNum = prevImages.reduce((max, img) => (img.orderNum > max ? img.orderNum : max), -1);
 			return [...prevImages, { url: newImage, orderNum: maxOrderNum + 1 }];
 		});
 	};
 
-	const handleRemoveImage = (image: string) => {
+	const handleImageRemove = (image: string) => {
 		// 이미지가 1개일 때는 삭제 할 수 없음
 		if (images.length > 1) {
 			const newImages = images.filter((img) => img.url !== image);
@@ -160,13 +160,13 @@ const PostImageSelect: React.FC = () => {
 							<input type="file" onChange={handleFileInputChange} ref={fileInputRef} multiple accept="image/*,.heic" />
 						</ImageDragDropContainer>
 					) : (
-						<ImageSwiper images={images} onRemoveImage={handleRemoveImage} onProcessFile={handleProcessFile} />
+						<ImageSwiper images={images} onRemoveImage={handleImageRemove} onProcessFile={processFile} />
 					)}
 				</Content>
 
 				<BottomButton
 					content={images.length === 0 ? '컴퓨터에서 사진 선택' : '다음'}
-					onClick={images.length === 0 ? handleSelectImage : handleNext}
+					onClick={images.length === 0 ? handleImageSelect : handleNext}
 				/>
 			</UploadContainer>
 		</OODDFrame>