🐛 fix: Step Indicator 변경으로 인한 공고 등록/수정 step indicator 디자인 깨짐 정상화 Team…

…-inglo#127

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);

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<JobPostingForm>({
-    images: [],
+    images: postInfo.images.filter(
+      (image): image is File => image instanceof File,
+    ),
     body: { ...postInfo.body },
   });
   const [storedImageUrls, setStoredImageUrls] = useState<Image[]>(
-    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 = ({
                 />
               </label>
             )}
+            {/* 기존 이미지들(cdn 링크를 반환 받으므로 신규로 추가한 이미지와 분리해 처리) */}
             {storedImageUrls[0] &&
               storedImageUrls.map((image, idx) => (
                 <div className="w-[7.5rem] h-[7.5rem] relative rounded-lg flex flex-row items-center justify-center  bg-no-repeat bg-top text-left text-gray-400">
@@ -239,6 +246,7 @@ const Step4 = ({
                         ...newPostInfo.body,
                         recruiter_phone_number: formatPhoneNumber(phoneNum),
                       },
+                      images: [...newPostInfo.images, ...storedImageUrls],
                     })
             }
           />

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 && (
         <div
           className="fixed inset-0 z-50 flex items-center justify-center bg-white bg-opacity-50 overflow-hidden"
           style={{ touchAction: 'none' }}
@@ -172,7 +163,7 @@ const EmployerLaborContractForm = ({
         </div>
       )}
       <div
-        className={`w-full p-6 flex flex-col ${isLoading ? 'overflow-hidden pointer-events-none' : ''}`}
+        className={`w-full p-6 flex flex-col ${isPending ? 'overflow-hidden pointer-events-none' : ''}`}
       >
         <div className="[&>*:last-child]:mb-40 flex flex-col gap-4">
           {/* 회사/점포명 입력 */}

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<SetStateAction<GeoPosition>>;
 }
 
-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<Document[]>(
     [],
   );
   const [currentGeoInfo, setCurrentGeoInfo] = useState({
-    lat: 0,
-    lon: 0,
+    lat: addressBeforeEdit?.latitude || 0,
+    lon: addressBeforeEdit?.longitude || 0,
   });
 
   const { searchAddress } = useSearchAddress({

src/pages/Employer/Post/EmployerCreatePostPage.tsx

@@ -61,6 +61,7 @@ const EmployerCreatePostPage = () => {
               length={5}
               currentStep={currentStep}
               mainColor="#1E1926"
+              textColor='#FFFFFF'
             />
           </div>
           <div className="w-full flex justify-center px-6">

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<JobPostingForm>(
     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 ? (
         <CompleteModal
@@ -107,6 +114,7 @@ const EmployerEditPostPage = () => {
               length={5}
               currentStep={currentStep}
               mainColor="#1E1926"
+              textColor="#FFFFFF"
             />
           </div>
           <div className="w-full flex justify-center px-6">

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;