From 952a896b7b97638c446bf09e63fb70d392f00236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= Date: Thu, 22 Aug 2024 20:27:08 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat=20::=20=EA=B8=B0=EC=97=85=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=20=EC=88=98=EC=A0=95=20presigned=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Apis/Companies/index.ts | 1 + .../Detail/CompanyDetail/Basic/index.tsx | 12 +- .../Detail/CompanyDetail/Edit/index.tsx | 90 +++++---- .../RecruitmentFormDetail/Basic/index.tsx | 174 +++++++++--------- 4 files changed, 158 insertions(+), 119 deletions(-) diff --git a/src/Apis/Companies/index.ts b/src/Apis/Companies/index.ts index e37f8a1..c4f08a2 100644 --- 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 index 051e3f0..c46902b 100644 --- a/src/Components/Detail/CompanyDetail/Basic/index.tsx +++ b/src/Components/Detail/CompanyDetail/Basic/index.tsx @@ -15,7 +15,6 @@ export function CompanyDetailBasic({ setCanEdit, }: PropsType) { const navigate = useNavigate(); - const nameArray = decodeURI(companyDetailInfo?.biz_registration_url).split( '/' ); @@ -23,7 +22,6 @@ export function CompanyDetailBasic({ fileName: nameArray[nameArray.length - 1].substring(37), fileUrl: companyDetailInfo?.biz_registration_url, }); - return ( <_.Container> <_.Wrapper> @@ -36,7 +34,15 @@ export function CompanyDetailBasic({ <_.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, + '' + )}` + } /> diff --git a/src/Components/Detail/CompanyDetail/Edit/index.tsx b/src/Components/Detail/CompanyDetail/Edit/index.tsx index 7cf113c..7bdce39 100644 --- 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(null); - const [file, setFile] = useState(null); + + const [imageUrl, setImageUrl] = useState( + `${process.env.REACT_APP_FILE_URL}${companyDetailInfo?.company_profile_url}` || + null + ); + console.log(companyDetailInfo?.company_profile_url); + + const [selectedFile, setSelectedFile] = useState(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) => { + 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({ <_.LogoWrapper> - <_.CompanyLogo - src={ - file - ? URL.createObjectURL(file) - : `${process.env.REACT_APP_FILE_URL}${companyDetailInfo?.company_profile_url}` - } - /> + <_.CompanyLogo src={imageUrl || ''} /> <_.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} /> diff --git a/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx b/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx index 3ab3238..1a5684f 100644 --- a/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx +++ b/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx @@ -9,11 +9,13 @@ interface PropsType { recruitmentFormDetail: RecruitmentFormDetailResponse; setCanEdit: Dispatch>; } + export function RecruitmentFormDetailBasic({ recruitmentFormDetail, setCanEdit, }: PropsType) { const navigate = useNavigate(); + return ( <_.Container> <_.Wrapper> @@ -46,6 +48,7 @@ export function RecruitmentFormDetailBasic({ + <_.Stack> <_.TitleBox>기업명 <_.ContentBox width={40}> @@ -64,82 +67,80 @@ export function RecruitmentFormDetailBasic({ : '상시모집'} + <_.Stack> <_.TitleBox height={recruitmentFormDetail?.areas.length * 325}> 모집분야 <_.Stack flexDirection="column" width={90}> - {recruitmentFormDetail?.areas.map((area, i) => { - return ( - <_.Stack key={area.id}> - <_.TitleBox height={325} width={5}> - {i + 1} - - <_.Stack flexDirection="column" width={95}> - <_.Stack> - <_.TitleBox height={125}> - 채용인원 - - <_.ContentBox height={125} width={15}> - {area.hiring}명 - - <_.TitleBox height={125}> - 분야 - - <_.ContentBox - height={125} - width={15} - overflow="scroll" - longText={true} - > - {area.job - .map((item) => item.name) - .join(' / ')} - - <_.TitleBox height={125}> - 사용기술 - - <_.ContentBox - height={125} - width={40} - overflow="scroll" - longText={true} - > - {area.tech - .map((item) => item.name) - .join(' / ')} - - - <_.Stack> - <_.TitleBox height={200}> - 주요업무 - - <_.ContentBox - height={200} - width={40} - longText={true} - overflow="scroll" - > - {area.major_task} - - <_.TitleBox height={200}> - 우대사항 - - <_.ContentBox - height={200} - width={40} - longText={true} - overflow="scroll" - > - {area.preferential_treatment || '-'} - - + {recruitmentFormDetail?.areas.map((area, i) => ( + <_.Stack key={area.id}> + <_.TitleBox height={325} width={5}> + {i + 1} + + <_.Stack flexDirection="column" width={95}> + <_.Stack> + <_.TitleBox height={125}> + 채용인원 + + <_.ContentBox height={125} width={15}> + {area.hiring}명 + + <_.TitleBox height={125}>분야 + <_.ContentBox + height={125} + width={15} + overflow="scroll" + longText={true} + > + {area.job + .map((item) => item.name) + .join(' / ')} + + <_.TitleBox height={125}> + 사용기술 + + <_.ContentBox + height={125} + width={40} + overflow="scroll" + longText={true} + > + {area.tech + .map((item) => item.name) + .join(' / ')} + + + <_.Stack> + <_.TitleBox height={200}> + 주요업무 + + <_.ContentBox + height={200} + width={40} + longText={true} + overflow="scroll" + > + {area.major_task} + + <_.TitleBox height={200}> + 우대사항 + + <_.ContentBox + height={200} + width={40} + longText={true} + overflow="scroll" + > + {area.preferential_treatment || '-'} + - ); - })} + + ))} + <_.Stack> <_.TitleBox>자격요건 <_.Stack flexDirection="column" width={90}> @@ -158,14 +159,14 @@ export function RecruitmentFormDetailBasic({ <_.TitleBox>성적 <_.ContentBox width={20}> {recruitmentFormDetail?.required_grade - ? recruitmentFormDetail?.required_grade + - '%' + ? `${recruitmentFormDetail?.required_grade}%` : '-'} + <_.Stack> <_.TitleBox height={275}>근무조건 <_.Stack flexDirection="column" width={90}> @@ -188,10 +189,12 @@ export function RecruitmentFormDetailBasic({ <_.TitleBox>정규직전환시 <_.ContentBox width={24}> {recruitmentFormDetail?.pay - ? `${recruitmentFormDetail?.pay?.replace( - /\B(?=(\d{3})+(?!\d))/g, - ',' - )}만원/연` + ? `${recruitmentFormDetail?.pay + .toString() + .replace( + /\B(?=(\d{3})+(?!\d))/g, + ',' + )}만원/연` : '-'} @@ -208,6 +211,7 @@ export function RecruitmentFormDetailBasic({ + <_.Stack> <_.TitleBox height={350}>채용절차 <_.Stack flexDirection="column" width={90}> @@ -215,18 +219,18 @@ export function RecruitmentFormDetailBasic({ <_.Stack> <_.TitleBox>채용절차 <_.ContentBox width={60}> - {recruitmentFormDetail?.hiring_progress.map( - (progress, i) => { - if ( - recruitmentFormDetail - ?.hiring_progress.length === - i + 1 - ) { - return `${hiringProgress[progress]}`; - } - return `${hiringProgress[progress]} → `; - } - )} + {recruitmentFormDetail?.hiring_progress + .map( + (progress, i) => + `${hiringProgress[progress]}${ + recruitmentFormDetail + .hiring_progress.length !== + i + 1 + ? ' → ' + : '' + }` + ) + .join('')} <_.TitleBox> 병역특례 From 71e6eaa269954e67b48b1be9612118471a30784d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= Date: Fri, 23 Aug 2024 13:31:44 +0900 Subject: [PATCH 2/4] =?UTF-8?q?build=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Apis/Companies/index.ts | 1 - src/Components/Detail/CompanyDetail/Edit/index.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Apis/Companies/index.ts b/src/Apis/Companies/index.ts index c4f08a2..e37f8a1 100644 --- a/src/Apis/Companies/index.ts +++ b/src/Apis/Companies/index.ts @@ -3,7 +3,6 @@ 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/Edit/index.tsx b/src/Components/Detail/CompanyDetail/Edit/index.tsx index 7bdce39..fbd363e 100644 --- a/src/Components/Detail/CompanyDetail/Edit/index.tsx +++ b/src/Components/Detail/CompanyDetail/Edit/index.tsx @@ -5,7 +5,7 @@ import { useToastStore, Text, } from '@team-return/design-system'; -import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'; +import { Dispatch, SetStateAction, useRef, useState } from 'react'; import { CompanyDetailResponse } from '../../../../Apis/Companies/response'; import { useForm } from '../../../../Hooks/useForm'; import * as _ from '../../style'; From 1494f4789f2e3f64175d8ac62e65f3075950a44d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= Date: Fri, 23 Aug 2024 16:08:10 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=EC=BD=98=EC=86=94,=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Detail/CompanyDetail/Edit/index.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/Components/Detail/CompanyDetail/Edit/index.tsx b/src/Components/Detail/CompanyDetail/Edit/index.tsx index fbd363e..d814416 100644 --- a/src/Components/Detail/CompanyDetail/Edit/index.tsx +++ b/src/Components/Detail/CompanyDetail/Edit/index.tsx @@ -34,7 +34,6 @@ export function CompanyDetailEdit({ `${process.env.REACT_APP_FILE_URL}${companyDetailInfo?.company_profile_url}` || null ); - console.log(companyDetailInfo?.company_profile_url); const [selectedFile, setSelectedFile] = useState(null); @@ -116,7 +115,6 @@ export function CompanyDetailEdit({ 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); @@ -132,16 +130,6 @@ export function CompanyDetailEdit({ } }; - // useEffect(() => { - // if ( - // companyDetailEditInfo.company_profile_url !== - // companyDetailInfo.company_profile_url - // ) { - // editCompanyInfo(); - // } - // // eslint-disable-next-line - // }, [companyDetailEditInfo.company_profile_url]); - const handleFileChange = (event: React.ChangeEvent) => { if (event.target.files && event.target.files.length > 0) { const file = event.target.files[0]; From f2f872e4afbe8d0a48fc9a5b39b40da18925b198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= Date: Sat, 24 Aug 2024 17:43:37 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Detail/RecruitmentFormDetail/Basic/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx b/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx index 1a5684f..51ac933 100644 --- a/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx +++ b/src/Components/Detail/RecruitmentFormDetail/Basic/index.tsx @@ -189,12 +189,10 @@ export function RecruitmentFormDetailBasic({ <_.TitleBox>정규직전환시 <_.ContentBox width={24}> {recruitmentFormDetail?.pay - ? `${recruitmentFormDetail?.pay - .toString() - .replace( - /\B(?=(\d{3})+(?!\d))/g, - ',' - )}만원/연` + ? `${recruitmentFormDetail?.pay.replace( + /\B(?=(\d{3})+(?!\d))/g, + ',' + )}만원/연` : '-'}