Merge pull request #282 from Anifriends/develop

release: v0.1.6

apps/shelter/src/pages/settings/account/index.tsx

@@ -11,8 +11,9 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { usePhotoUpload } from 'shared/hooks/usePhotoUpload';
 
 import { updateShelterInfo } from '@/apis/shelter';
 import { UpdateShelterInfo } from '@/types/apis/shetler';
@@ -21,7 +22,6 @@ import useFetchShelterAccount from './_hooks/useFetchShelterAccount';
 
 export default function SettingsAccountPage() {
   const toast = useToast();
-  const [imgFile, setImgFile] = useState<string>('');
   const { data } = useFetchShelterAccount();
   const { mutate: updateShelter } = useMutation({
     mutationFn: (data: UpdateShelterInfo) => updateShelterInfo(data),
@@ -36,22 +36,21 @@ export default function SettingsAccountPage() {
   });
 
   const { register, handleSubmit, reset, watch } = useForm<UpdateShelterInfo>();
+  const { photo, setPhoto, handleUploadPhoto } = usePhotoUpload(data.imageUrl);
 
   useEffect(() => {
     reset(data);
-    setImgFile(data.imageUrl);
+    setPhoto(data.imageUrl);
   }, [data]);
 
   const onSubmit = handleSubmit((newData) => {
     updateShelter(newData);
   });
 
-  const uploadImgFile = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const newImgFile = URL.createObjectURL(file);
-      setImgFile(newImgFile);
-    }
+  const uploadImgFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+    handleUploadPhoto(files);
+    event.target.value = '';
   };
 
   return (
@@ -64,7 +63,7 @@ export default function SettingsAccountPage() {
             as="label"
             htmlFor="profileImg"
             cursor="pointer"
-            src={imgFile}
+            src={photo}
           />
           <Input
             id="profileImg"

apps/shelter/src/pages/volunteers/update/index.tsx

@@ -17,7 +17,7 @@ import { useCallback, useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import EditPhotoList from 'shared/components/EditPhotoList';
-import { useUploadPhoto } from 'shared/hooks/useUploadPhoto';
+import { usePhotosUpload } from 'shared/hooks/usePhotosUpload';
 import * as z from 'zod';
 
 import { updateShelterRecruitment } from '@/apis/recruitment';
@@ -77,7 +77,7 @@ export default function VolunteersUpdatePage() {
     resolver: zodResolver(recruitmentSchema),
   });
   const { photos, setImageUrls, handleUploadPhoto, handleDeletePhoto } =
-    useUploadPhoto(UPLOAD_LIMIT);
+    usePhotosUpload(UPLOAD_LIMIT);
 
   const contentLength = watch('content')?.length ?? 0;
 

apps/shelter/src/pages/volunteers/write/index.tsx

@@ -16,7 +16,7 @@ import { useMutation } from '@tanstack/react-query';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import EditPhotoList from 'shared/components/EditPhotoList';
-import { useUploadPhoto } from 'shared/hooks/useUploadPhoto';
+import { usePhotosUpload } from 'shared/hooks/usePhotosUpload';
 import * as z from 'zod';
 
 import { createShelterRecruitment } from '@/apis/recruitment';
@@ -60,7 +60,7 @@ export default function VolunteersWritePage() {
   });
 
   const { photos, handleUploadPhoto, handleDeletePhoto } =
-    useUploadPhoto(UPLOAD_LIMIT);
+    usePhotosUpload(UPLOAD_LIMIT);
 
   const contentLength = watch('content')?.length ?? 0;
 

apps/volunteer/src/pages/settings/account/index.tsx

@@ -12,8 +12,9 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { usePhotoUpload } from 'shared/hooks/usePhotoUpload';
 
 import {
   UpdateUserInfoParams,
@@ -23,7 +24,6 @@ import useFetchMyVolunteer from '@/pages/my/_hooks/useFetchMyVolunteer';
 
 export default function SettingsAccountPage() {
   const toast = useToast();
-  const [imgFile, setImgFile] = useState<string>('');
   const { data } = useFetchMyVolunteer();
   const { mutate: updateAccount } = useMutation({
     mutationFn: (data: UpdateUserInfoParams) => updateVolunteerUserInfo(data),
@@ -38,6 +38,9 @@ export default function SettingsAccountPage() {
   });
   const { register, handleSubmit, reset, watch } =
     useForm<UpdateUserInfoParams>();
+  const { photo, setPhoto, handleUploadPhoto } = usePhotoUpload(
+    data.volunteerImageUrl,
+  );
 
   useEffect(() => {
     reset({
@@ -47,15 +50,13 @@ export default function SettingsAccountPage() {
       phoneNumber: data.volunteerPhoneNumber,
       gender: data.volunteerGender,
     });
-    setImgFile(data.volunteerImageUrl);
+    setPhoto(data.volunteerImageUrl);
   }, [data, reset]);
 
-  const uploadImgFile = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const newImgFile = URL.createObjectURL(file);
-      setImgFile(newImgFile);
-    }
+  const uploadImgFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+    handleUploadPhoto(files);
+    event.target.value = '';
   };
 
   const onSubmit = handleSubmit((newData) => {
@@ -71,7 +72,7 @@ export default function SettingsAccountPage() {
             as="label"
             htmlFor="profileImg"
             cursor="pointer"
-            src={imgFile}
+            src={photo}
             variant="프로필 이미지"
           />
           <Input

apps/volunteer/src/pages/shelters/reviews/update/index.tsx

@@ -15,7 +15,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import EditPhotoList from 'shared/components/EditPhotoList';
 import ProfileInfo from 'shared/components/ProfileInfo';
-import { useUploadPhoto } from 'shared/hooks/useUploadPhoto';
+import { usePhotosUpload } from 'shared/hooks/usePhotosUpload';
 
 import { getVolunteerReviewDetail, updateVolunteerReview } from '@/apis/review';
 import { getSimpleShelterProfile } from '@/apis/shelter';
@@ -94,7 +94,7 @@ export default function SheltersReviewsUpdatePage() {
   });
 
   const { photos, setImageUrls, handleUploadPhoto, handleDeletePhoto } =
-    useUploadPhoto(UPLOAD_LIMIT);
+    usePhotosUpload(UPLOAD_LIMIT);
 
   const contentLength = watch('content')?.length ?? 0;
 

apps/volunteer/src/pages/shelters/reviews/write/index.tsx

@@ -14,7 +14,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import EditPhotoList from 'shared/components/EditPhotoList';
 import ProfileInfo from 'shared/components/ProfileInfo';
-import { useUploadPhoto } from 'shared/hooks/useUploadPhoto';
+import { usePhotosUpload } from 'shared/hooks/usePhotosUpload';
 
 import { createVolunteerReview } from '@/apis/review';
 import { getSimpleShelterProfile } from '@/apis/shelter';
@@ -72,7 +72,7 @@ export default function SheltersReviewsWritePage() {
   });
 
   const { photos, handleUploadPhoto, handleDeletePhoto } =
-    useUploadPhoto(UPLOAD_LIMIT);
+    usePhotosUpload(UPLOAD_LIMIT);
 
   const contentLength = watch('content')?.length ?? 0;
 

packages/shared/components/EditPhotoItem.tsx

@@ -2,6 +2,7 @@ import type { ImageProps } from '@chakra-ui/react';
 import { Box, Image } from '@chakra-ui/react';
 
 import BiX from '../assets/icon_BiX.svg';
+import NoImage from '../assets/icon_no_image.svg';
 
 type UploadedPhotoItemProps = {
   photoSrc: ImageProps['src'];
@@ -35,7 +36,7 @@ export default function EditPhotoItem({
       >
         <Image src={BiX} />
       </Box>
-      <Image boxSize={100} fit="cover" src={photoSrc} />
+      <Image boxSize={100} fit="cover" src={photoSrc} fallbackSrc={NoImage} />
     </Box>
   );
 }

packages/shared/components/Loader.tsx

@@ -0,0 +1,15 @@
+import { Flex, Spinner } from '@chakra-ui/react';
+
+export default function Loader() {
+  return (
+    <Flex justify="center" align="center">
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="orange.400"
+        size="xl"
+      />
+    </Flex>
+  );
+}

packages/shared/hooks/usePhotoUpload.ts

@@ -0,0 +1,60 @@
+import { useToast, UseToastOptions } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { uploadImage } from '../apis/common/Image';
+import { resizeImageFile } from '../utils/image';
+
+const toastOption = (
+  description: string,
+  status: UseToastOptions['status'],
+): UseToastOptions => {
+  return {
+    description,
+    position: 'top',
+    status,
+    duration: 1500,
+    isClosable: true,
+  };
+};
+
+export const usePhotoUpload = (initialPhoto?: string) => {
+  const [photo, setPhoto] = useState<string | undefined>(initialPhoto);
+
+  const toast = useToast();
+
+  const handleUploadPhoto = async (files: FileList | null) => {
+    if (!files) {
+      return;
+    }
+
+    if (files.length !== 1) {
+      toast(toastOption('프로필 이미지는 한 장만 등록 가능합니다.', 'error'));
+
+      return;
+    }
+
+    const imageFile = files[0];
+    const localImageUrl = URL.createObjectURL(imageFile);
+    setPhoto(localImageUrl);
+
+    const resizedImage = await resizeImageFile(imageFile, 2);
+    const formData = new FormData();
+    formData.append('images', resizedImage);
+
+    const { data } = await uploadImage(formData);
+    const [imageUrl] = data.imageUrls;
+
+    setPhoto(imageUrl);
+  };
+
+  const handleDeletePhoto = () => {
+    setPhoto(undefined);
+  };
+
+  return {
+    photo,
+    setPhoto,
+    handleUploadPhoto,
+    handleDeletePhoto,
+  };
+};