feat :: 기업 로고 수정 presigned로 변경

Team-return · Aug 22, 2024 · 952a896 · 952a896
1 parent 656d51c
commit 952a896
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 119 deletions.
diff --git a/src/Apis/Companies/index.ts b/src/Apis/Companies/index.ts
@@ -3,6 +3,7 @@ import {
 	useMutation,
 	useQueries,
 	useQuery,
+	useQueryClient,
 } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { instance } from '../axios';

diff --git a/src/Components/Detail/CompanyDetail/Basic/index.tsx b/src/Components/Detail/CompanyDetail/Basic/index.tsx
@@ -15,15 +15,13 @@ export function CompanyDetailBasic({
 	setCanEdit,
 }: PropsType) {
 	const navigate = useNavigate();
-
 	const nameArray = decodeURI(companyDetailInfo?.biz_registration_url).split(
 		'/'
 	);
 	const { mutate: downloadFile } = useDownloadData({
 		fileName: nameArray[nameArray.length - 1].substring(37),
 		fileUrl: companyDetailInfo?.biz_registration_url,
 	});
-
 	return (
 		<_.Container>
 			<_.Wrapper>
@@ -36,7 +34,15 @@ export function CompanyDetailBasic({
 					</_.BackWrapper>
 					<_.LogoWrapper>
 						<_.CompanyLogo
-							src={`${process.env.REACT_APP_FILE_URL}${companyDetailInfo?.company_profile_url}`}
+							src={
+								!!companyDetailInfo &&
+								`${
+									process.env.REACT_APP_FILE_URL
+								}${companyDetailInfo?.company_profile_url.replace(
+									/\s+/g,
+									''
+								)}`
+							}
 						/>
 					</_.LogoWrapper>
 				</Stack>

diff --git a/src/Components/Detail/CompanyDetail/Edit/index.tsx b/src/Components/Detail/CompanyDetail/Edit/index.tsx
@@ -5,14 +5,15 @@ import {
 	useToastStore,
 	Text,
 } from '@team-return/design-system';
-import { Dispatch, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import { CompanyDetailResponse } from '../../../../Apis/Companies/response';
 import { useForm } from '../../../../Hooks/useForm';
 import * as _ from '../../style';
 import { CompanyInfoEditType } from '../../../../Apis/Companies/request';
 import { useChangeCompanyInfo } from '../../../../Apis/Companies';
-import { useFileUpload } from '../../../../Apis/File';
 import { useNavigate } from 'react-router-dom';
+import { usePresignedUrl } from '../../../../Apis/Files';
+import { useQueryClient } from 'react-query';
 
 interface PropsType {
 	companyDetailInfo: CompanyDetailResponse;
@@ -28,7 +29,15 @@ export function CompanyDetailEdit({
 	const navigate = useNavigate();
 	const { append } = useToastStore();
 	const fileInput = useRef<HTMLInputElement>(null);
-	const [file, setFile] = useState<File | null>(null);
+
+	const [imageUrl, setImageUrl] = useState<string | null>(
+		`${process.env.REACT_APP_FILE_URL}${companyDetailInfo?.company_profile_url}` ||
+			null
+	);
+	console.log(companyDetailInfo?.company_profile_url);
+
+	const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
 	const {
 		form: companyDetailEditInfo,
 		setForm: setCompanyDetailEditInfo,
@@ -76,6 +85,7 @@ export function CompanyDetailEdit({
 		representative_phone_no,
 	} = companyDetailEditInfo;
 
+	const queryClient = useQueryClient();
 	const { mutate: editCompanyInfo } = useChangeCompanyInfo(
 		companyDetailEditInfo,
 		{
@@ -87,6 +97,9 @@ export function CompanyDetailEdit({
 				});
 				refetchCompanyDetailInfo();
 				setCanEdit(false);
+				queryClient.invalidateQueries({
+					queryKey: ['editCompanyInfo'],
+				});
 			},
 			onError: () => {
 				append({
@@ -98,26 +111,49 @@ export function CompanyDetailEdit({
 		}
 	);
 
-	const { mutate: fileUploader } = useFileUpload(file!, {
-		onSuccess: (res: any) => {
-			setCompanyDetailEditInfo((companyDetailEditInfo) => ({
-				...companyDetailEditInfo,
-				company_profile_url: res.data?.urls[0],
-			}));
-			setTimeout(editCompanyInfo);
-		},
-		onError: () => {
-			append({
-				title: '파일 업로드에 실패하였습니다.',
-				message: '',
-				type: 'RED',
-			});
-		},
-	});
+	const { mutateAsync: getPresignedUrl } = usePresignedUrl();
+
+	const handleFileUploadAndEdit = async () => {
+		if (selectedFile) {
+			const response = await getPresignedUrl([selectedFile]);
+			console.log(response);
+			if (response?.presignedUrls?.urls?.[0]?.file_path) {
+				const uploadedUrl = `${process.env.REACT_APP_FILE_URL}${response.presignedUrls.urls[0].file_path}`;
+				setImageUrl(uploadedUrl);
+				setCompanyDetailEditInfo((companyDetailEditInfo) => ({
+					...companyDetailEditInfo,
+					company_profile_url:
+						response.presignedUrls.urls[0].file_path,
+				}));
+				setTimeout(() => {
+					editCompanyInfo();
+				}, 500);
+			}
+		}
+	};
+
+	// useEffect(() => {
+	// 	if (
+	// 		companyDetailEditInfo.company_profile_url !==
+	// 		companyDetailInfo.company_profile_url
+	// 	) {
+	// 		editCompanyInfo();
+	// 	}
+	// 	// eslint-disable-next-line
+	// }, [companyDetailEditInfo.company_profile_url]);
+
+	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		if (event.target.files && event.target.files.length > 0) {
+			const file = event.target.files[0];
+			setSelectedFile(file);
+			const fileUrl = URL.createObjectURL(file);
+			setImageUrl(fileUrl);
+		}
+	};
 
 	const submitEditCompanyInfo = () => {
-		if (file) {
-			fileUploader();
+		if (selectedFile) {
+			handleFileUploadAndEdit();
 		} else {
 			editCompanyInfo();
 		}
@@ -134,13 +170,7 @@ export function CompanyDetailEdit({
 						</Text>
 					</_.BackWrapper>
 					<_.LogoWrapper>
-						<_.CompanyLogo
-							src={
-								file
-									? URL.createObjectURL(file)
-									: `${process.env.REACT_APP_FILE_URL}${companyDetailInfo?.company_profile_url}`
-							}
-						/>
+						<_.CompanyLogo src={imageUrl || ''} />
 					</_.LogoWrapper>
 					<_.LogoEditImg
 						onClick={() => {
@@ -154,9 +184,7 @@ export function CompanyDetailEdit({
 						hidden
 						ref={fileInput}
 						accept="image/jpg, image/png"
-						onChange={(e) => {
-							setFile(e.target.files ? e.target.files[0] : null);
-						}}
+						onChange={handleFileChange}
 					/>
 				</_.LogoEditWrapper>
 				<Stack gap={20}>