From 4559b0d997093e77c5075ea41442d3773c4a25c3 Mon Sep 17 00:00:00 2001 From: naarang Date: Fri, 24 Jan 2025 09:57:13 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Step=20Indicator=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?= =?UTF-8?q?=EA=B3=B5=EA=B3=A0=20=EB=93=B1=EB=A1=9D/=EC=88=98=EC=A0=95=20st?= =?UTF-8?q?ep=20indicator=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B9=A8?= =?UTF-8?q?=EC=A7=90=20=EC=A0=95=EC=83=81=ED=99=94=20#127?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Employer/PostCreate/Step2.tsx | 2 +- src/components/Employer/PostCreate/Step4.tsx | 22 +++++++++++++------ .../EmployerLaborContractForm.tsx | 15 +++---------- src/hooks/api/useAddressSearch.ts | 13 +++++++---- .../Employer/Post/EmployerCreatePostPage.tsx | 1 + .../Employer/Post/EmployerEditPostPage.tsx | 16 ++++++++++---- src/types/postCreate/postCreate.ts | 2 +- 7 files changed, 42 insertions(+), 29 deletions(-) diff --git a/src/components/Employer/PostCreate/Step2.tsx b/src/components/Employer/PostCreate/Step2.tsx index fb003e87..9792d13c 100644 --- a/src/components/Employer/PostCreate/Step2.tsx +++ b/src/components/Employer/PostCreate/Step2.tsx @@ -33,7 +33,7 @@ const Step2 = ({ handleAddressSearch, // 검색할 주소 입력 시 실시간 검색 handleAddressSelect, // 검색 결과 중 원하는 주소를 선택할 시 state에 입력 setAddressInput, - } = useAddressSearch(); + } = useAddressSearch(postInfo.body.address); const handleAddressSelection = (selectedAddressName: string) => { const result = handleAddressSelect(selectedAddressName); diff --git a/src/components/Employer/PostCreate/Step4.tsx b/src/components/Employer/PostCreate/Step4.tsx index 09f6819b..d9d8b627 100644 --- a/src/components/Employer/PostCreate/Step4.tsx +++ b/src/components/Employer/PostCreate/Step4.tsx @@ -6,7 +6,7 @@ import InputLayout from '@/components/WorkExperience/InputLayout'; import { buttonTypeKeys } from '@/constants/components'; import { phone } from '@/constants/information'; import { InputType } from '@/types/common/input'; -import { Image, JobPostingForm } from '@/types/postCreate/postCreate'; +import type { Image, JobPostingForm } from '@/types/postCreate/postCreate'; import { useEffect, useState } from 'react'; import AddFileIcon from '@/assets/icons/FileAddIcon.svg?react'; import { @@ -29,11 +29,16 @@ const Step4 = ({ }) => { // 현재 step내에서 입력받는 정보를 따로 관리할 state, 추후 다음 step으로 넘어갈 때 funnel 관리 페이지의 state로 통합된다. const [newPostInfo, setNewPostInfo] = useState({ - images: [], + images: postInfo.images.filter( + (image): image is File => image instanceof File, + ), body: { ...postInfo.body }, }); const [storedImageUrls, setStoredImageUrls] = useState( - isEdit ? (postInfo.images as Image[]) : [], + // 이미지 수정 시 기존 이미지를 불러와 저장 (id, img_url이 있는 경우 기존 이미지) + isEdit + ? postInfo.images.filter((image) => 'id' in image && 'img_url' in image) + : [], ); // 세 부분으로 나누어 입력받는 방식을 위해 전화번호만 별도의 state로 분리, 추후 유효성 검사 단에서 통합 const [phoneNum, setPhoneNum] = useState({ @@ -56,10 +61,11 @@ const Step4 = ({ const { recruiter_name, recruiter_email } = newPostInfo.body; const isFormValid = - recruiter_name !== '' && - basicEmailRegex.test(recruiter_email) && - isValidPhoneNumber(phoneNum) && - newPostInfo.images.length > 0 || storedImageUrls.length > 0; + (recruiter_name !== '' && + basicEmailRegex.test(recruiter_email) && + isValidPhoneNumber(phoneNum) && + newPostInfo.images.length > 0) || + storedImageUrls.length > 0; setIsInvalid(!isFormValid); }, [newPostInfo, phoneNum]); @@ -153,6 +159,7 @@ const Step4 = ({ /> )} + {/* 기존 이미지들(cdn 링크를 반환 받으므로 신규로 추가한 이미지와 분리해 처리) */} {storedImageUrls[0] && storedImageUrls.map((image, idx) => (
@@ -239,6 +246,7 @@ const Step4 = ({ ...newPostInfo.body, recruiter_phone_number: formatPhoneNumber(phoneNum), }, + images: [...newPostInfo.images, ...storedImageUrls], }) } /> diff --git a/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx b/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx index 8d853365..96b07bcc 100644 --- a/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx +++ b/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx @@ -76,21 +76,12 @@ const EmployerLaborContractForm = ({ setAddressInput, } = useAddressSearch(); - const [isLoading, setIsLoading] = useState(false); const [isInvalid, setIsInvalid] = useState(false); // 근무시간, 요일 선택 모달 활성화 플래그 const [isModal, setIsModal] = useState(false); // 입력 완료 시 제출 - const { mutate: putDocument } = usePutLaborContractEmployer( + const { mutate: putDocument, isPending } = usePutLaborContractEmployer( Number(currentDocumentId), - { - onMutate: () => { - setIsLoading(true); - }, - onSettled: () => { - setIsLoading(false); - }, - }, ); useEffect(() => { if (isEdit && document?.employer_information) { @@ -162,7 +153,7 @@ const EmployerLaborContractForm = ({ return ( <> - {isLoading && ( + {isPending && (
)}
{/* 회사/점포명 입력 */} diff --git a/src/hooks/api/useAddressSearch.ts b/src/hooks/api/useAddressSearch.ts index eb60496b..4a59044e 100644 --- a/src/hooks/api/useAddressSearch.ts +++ b/src/hooks/api/useAddressSearch.ts @@ -1,5 +1,6 @@ import { useSearchAddress } from '@/hooks/api/useKaKaoMap'; import { Document, AddressType, GeoPosition } from '@/types/api/map'; +import { Address } from '@/types/postCreate/postCreate'; import { pick } from '@/utils/map'; import { Dispatch, SetStateAction, useCallback, useState } from 'react'; @@ -27,14 +28,18 @@ interface UseAddressSearchReturn { setCurrentGeoInfo: Dispatch>; } -export const useAddressSearch = (): UseAddressSearchReturn => { - const [addressInput, setAddressInput] = useState(''); +export const useAddressSearch = ( + addressBeforeEdit?: Address, +): UseAddressSearchReturn => { + const [addressInput, setAddressInput] = useState( + addressBeforeEdit?.address_name || '', + ); const [addressSearchResult, setAddressSearchResult] = useState( [], ); const [currentGeoInfo, setCurrentGeoInfo] = useState({ - lat: 0, - lon: 0, + lat: addressBeforeEdit?.latitude || 0, + lon: addressBeforeEdit?.longitude || 0, }); const { searchAddress } = useSearchAddress({ diff --git a/src/pages/Employer/Post/EmployerCreatePostPage.tsx b/src/pages/Employer/Post/EmployerCreatePostPage.tsx index bb24dc08..60f49efe 100644 --- a/src/pages/Employer/Post/EmployerCreatePostPage.tsx +++ b/src/pages/Employer/Post/EmployerCreatePostPage.tsx @@ -61,6 +61,7 @@ const EmployerCreatePostPage = () => { length={5} currentStep={currentStep} mainColor="#1E1926" + textColor='#FFFFFF' />
diff --git a/src/pages/Employer/Post/EmployerEditPostPage.tsx b/src/pages/Employer/Post/EmployerEditPostPage.tsx index e9605a81..8132ed54 100644 --- a/src/pages/Employer/Post/EmployerEditPostPage.tsx +++ b/src/pages/Employer/Post/EmployerEditPostPage.tsx @@ -20,7 +20,7 @@ const EmployerEditPostPage = () => { const { isEdit } = location.state || {}; const { id } = useParams(); const { currentPostId } = useCurrentPostIdStore(); - console.log(currentPostId) + console.log(currentPostId); const [currentStep, setCurrentStep] = useState(1); const [postInfo, setPostInfo] = useState( initialJobPostingState, @@ -56,8 +56,15 @@ const EmployerEditPostPage = () => { work_period: serverData.working_conditions.work_period, hourly_rate: serverData.working_conditions.hourly_rate, employment_type: serverData.working_conditions.employment_type, - address: {...postInfo.body.address, address_name: serverData.company_information.company_address}, - recruitment_dead_line: serverData.recruitment_conditions.recruitment_deadline, + address: { + ...postInfo.body.address, + address_name: serverData.workplace_information.main_address, + latitude: serverData.workplace_information.latitude, + longitude: serverData.workplace_information.longitude, + address_detail: serverData.workplace_information.detailed_address, + }, + recruitment_dead_line: + serverData.recruitment_conditions.recruitment_deadline, recruitment_number: serverData.recruitment_conditions.number_of_recruits, gender: serverData.recruitment_conditions.gender, age_restriction: initialJobPostingState.body.age_restriction, @@ -90,7 +97,7 @@ const EmployerEditPostPage = () => { hasBackButton onClickBackButton={() => navigate(-1)} hasMenuButton={false} - title="공고등록" + title="공고수정" /> {devIsModal ? ( { length={5} currentStep={currentStep} mainColor="#1E1926" + textColor="#FFFFFF" />
diff --git a/src/types/postCreate/postCreate.ts b/src/types/postCreate/postCreate.ts index 692a1bd4..b62281f0 100644 --- a/src/types/postCreate/postCreate.ts +++ b/src/types/postCreate/postCreate.ts @@ -73,7 +73,7 @@ export type Image = { } export type JobPostingForm = { - images: File[] | Image[]; + images: (File | Image)[]; body: { title: string; job_category: JobCategory | string;