Skip to content

Commit

Permalink
Merge pull request #141 from Team-inglo/fix/IGW-55/127
Browse files Browse the repository at this point in the history 
🐛 [Fix/igw 55/127] 서류작성 관련 QC 수정사항
  • Loading branch information
@MrMirror21
MrMirror21 authored Dec 22, 2024
2 parents 714e1c5 + 4244d7b commit 7b80c3f
Show file tree
Hide file tree
Showing 17 changed files with 4,735 additions and 4,220 deletions.
4,922 changes: 2,692 additions & 2,230 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/components/Document/write/SignaturePad.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,9 @@ const SignaturePad: React.FC<SignaturePadProps> = ({
>
{(() => {
if (signatureData !== '' && isKorean) return '저장됨';
if (signatureData !== '' && !isKorean) return 'Saved';
if (signatureData !== '' && !isKorean) return 'Done';
if (signatureData === '' && isKorean) return '저장';
return 'Saving';
return 'Save';
})()}
</button>
</div>
Expand Down
14 changes: 11 additions & 3 deletions src/components/Employer/ApplicantDocumentsDetail/DocumentCardDispenserEmployer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type DocumentCardProps = {
title: string;
type: string;
reason?: string;
onNext?: () => void;
setIsLoading: (loadingStatus: boolean) => void;
};

const NullCard = ({ title }: { title: string }) => {
Expand Down Expand Up @@ -288,7 +288,7 @@ const ConfirmationCard = ({
}: {
title: string;
document: EmployDocumentInfo;

onDownload: (url: string) => void;
}) => {
return (
Expand Down Expand Up @@ -358,13 +358,21 @@ const DocumentCardDispenserEmployer = ({
title,
type,
reason,
setIsLoading,
}: DocumentCardProps) => {
const navigate = useNavigate();
const handleDownload = (url: string) => {
window.open(url, '_blank');
};
const { updateCurrentDocumentId } = useCurrentDocumentIdStore();
const { mutate: submitDocument } = usePatchStatusSubmissionEmployer();
const { mutate: submitDocument } = usePatchStatusSubmissionEmployer({
onMutate: () => {
setIsLoading(true);
},
onSettled: () => {
setIsLoading(false);
},
});
if (!document.status) return <NullCard title={title} />;
switch (document.status) {
case DocumentStatusEmployer.TEMPORARY_SAVE:
Expand Down
95 changes: 21 additions & 74 deletions src/components/Employer/EditProfile/EmployerEditInputSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import Dropdown, { DropdownModal } from '@/components/Common/Dropdown';
import Input from '@/components/Common/Input';
import InputLayout from '@/components/WorkExperience/InputLayout';
import { phone } from '@/constants/information';
import { useGetGeoInfo, useSearchAddress } from '@/hooks/api/useKaKaoMap';
import { AddressType, Document } from '@/types/api/map';
import { useGetGeoInfo } from '@/hooks/api/useKaKaoMap';
import { AddressType } from '@/types/api/map';
import { InputType } from '@/types/common/input';
import { pick } from '@/utils/map';
import { useCallback, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';
import FileAddIcon from '@/assets/icons/FileAddIcon.svg?react';
import CheckIcon from '@/assets/icons/CheckOfBoxIcon.svg?react';
import GiggleLogo from '@/assets/icons/GiggleLogo.svg?react';
import giggleLogoPng from '@/assets/images/GiggleLogo.png';
import { formatPhoneNumber } from '@/utils/information';
import { EmployerProfileRequestBody } from '@/types/api/profile';
import { useAddressSearch } from '@/hooks/api/useAddressSearch';

type EmployerEditInputSectionProps = {
newEmployData: EmployerProfileRequestBody;
Expand All @@ -34,17 +34,15 @@ const EmployerEditInputSection = ({
setLogoFile,
initialPhonNum,
}: EmployerEditInputSectionProps) => {
// 주소 검색용 input 저장하는 state
const [addressInput, setAddressInput] = useState('');
// 주소 검색 결과를 저장하는 array
const [addressSearchResult, setAddressSearchResult] = useState<Document[]>(
[],
);
// 지도에 표시할 핀에 사용되는 위/경도 좌표
const [currentGeoInfo, setCurrentGeoInfo] = useState({
lat: 0,
lon: 0,
});
const {
addressInput, // 주소 검색용 input 저장하는 state
addressSearchResult, // 주소 검색 결과를 저장하는 array
currentGeoInfo, // 지도에 표시할 핀에 사용되는 위/경도 좌표
setCurrentGeoInfo,
handleAddressSearch, // 검색할 주소 입력 시 실시간 검색
handleAddressSelect, // 검색 결과 중 원하는 주소를 선택할 시 state에 입력
setAddressInput,
} = useAddressSearch();
// 세 부분으로 나누어 입력받는 방식을 위해 전화번호만 별도의 state로 분리, 추후 유효성 검사 단에서 통합
const [phoneNum, setPhoneNum] = useState({
start: '',
Expand All @@ -67,10 +65,6 @@ const EmployerEditInputSection = ({
const [selectedImage, setSelectedImage] = useState<string>();
// 현재 좌표 기준 주소 획득
const { data, isSuccess } = useGetGeoInfo(setCurrentGeoInfo);
// 키워드로 주소 검색
const { searchAddress } = useSearchAddress({
onSuccess: (data) => setAddressSearchResult(data),
});
// 첫 로딩 시 현재 사용자의 위치 파악 해 지도에 표기
useEffect(() => {
setNewEmployData({
Expand All @@ -92,68 +86,21 @@ const EmployerEditInputSection = ({
});
}, [phoneNum]);

// 검색할 주소 입력 시 실시간 검색
const handleAddressSearch = useCallback(
(address: string) => {
setAddressInput(address);
if (address !== '') {
searchAddress(address);
} else {
setAddressSearchResult([]);
}
},
[searchAddress],
);
// 검색 결과 중 원하는 주소를 선택할 시 state에 입력
const handleAddressSelect = (selectedAddressName: string) => {
// 사용자가 선택한 주소와 일치하는 결과를 검색 결과를 저장하는 array에서 탐색
const selectedAddress = addressSearchResult.find(
(address) => address.address_name === selectedAddressName,
) as Document | undefined;

if (!selectedAddress) return;
// 검색된 주소 선택 시 state에 반영
const handleAddressSelection = (selectedAddressName: string) => {
const result = handleAddressSelect(selectedAddressName);
if (!result) return;

// 구 주소와 도로명 주소를 구분하기 위한 플래그(카카오에서 반환하는 속성 명이 달라짐)
const isRegionAddr =
selectedAddress.address_type === AddressType.REGION_ADDR;
const addressData = isRegionAddr
? selectedAddress.address
: selectedAddress.road_address;

// 카카오에서 반환하는 데이터 중 필요한 속성들만 선택
const selectedProperties = pick(addressData, [
'address_name',
'region_1depth_name',
'region_2depth_name',
'region_3depth_name',
]);

let region4DepthName = ''; // optional property인 region4DeptName
if (isRegionAddr) {
region4DepthName = selectedAddress.address.region_3depth_h_name || '';
} else {
region4DepthName = selectedAddress.road_address.road_name || '';
}

// 선택한 데이터들을 state에 update
setNewEmployData({
...newEmployData,
address: {
...newEmployData.address,
...selectedProperties,
region_4depth_name: region4DepthName,
longitude: Number(addressData.x),
latitude: Number(addressData.y),
...result.addressData,
},
});
setAddressInput(selectedAddress.address_name);
setCurrentGeoInfo({
lon: Number(selectedAddress.x),
lat: Number(selectedAddress.y),
});
// 검색 결과 초기화
setAddressSearchResult([]);
setAddressInput(result.selectedAddressName);
};

// 로고 선택
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
Expand Down Expand Up @@ -254,7 +201,7 @@ const EmployerEditInputSection = ({
),
(address) => address.address_name,
)}
onSelect={handleAddressSelect}
onSelect={handleAddressSelection}
/>
)}
</InputLayout>
Expand Down
105 changes: 22 additions & 83 deletions src/components/Employer/PostCreate/Step2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@ import Button from '@/components/Common/Button';
import Dropdown, { DropdownModal } from '@/components/Common/Dropdown';
import Input from '@/components/Common/Input';
import InputLayout from '@/components/WorkExperience/InputLayout';
import { useSearchAddress } from '@/hooks/api/useKaKaoMap';
import { AddressType, Document } from '@/types/api/map';
import { AddressType } from '@/types/api/map';
import { InputType } from '@/types/common/input';
import { JobPostingForm } from '@/types/postCreate/postCreate';
import { pick } from '@/utils/map';
import { useCallback, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';
import CheckIcon from '@/assets/icons/CheckOfBoxIcon.svg?react';
import { buttonTypeKeys } from '@/constants/components';
import { formatDateToDash } from '@/utils/editResume';
import { useAddressSearch } from '@/hooks/api/useAddressSearch';

const Step2 = ({
postInfo,
Expand All @@ -27,96 +26,36 @@ const Step2 = ({
const [newPostInfo, setNewPostInfo] = useState<JobPostingForm>(postInfo);
// 버튼 활성화 여부를 위한 플래그
const [isInvalid, setIsInvalid] = useState(true);
// 주소 검색용 input 저장하는 state
const [addressInput, setAddressInput] = useState(
newPostInfo.body.address.address_name
? newPostInfo.body.address.address_name
: '',
);
// 주소 검색 결과를 저장하는 array
const [addressSearchResult, setAddressSearchResult] = useState<Document[]>(
[],
);
// 지도에 표시할 핀에 사용되는 위/경도 좌표
const [currentGeoInfo, setCurrentGeoInfo] = useState({
lat: 0,
lon: 0,
});

// 키워드로 주소 검색
const { searchAddress } = useSearchAddress({
onSuccess: (data) => setAddressSearchResult(data),
});
// 검색할 주소 입력 시 실시간 검색
const handleAddressSearch = useCallback(
(address: string) => {
setAddressInput(address);
if (address !== '') {
searchAddress(address);
} else {
setAddressSearchResult([]);
}
},
[searchAddress],
);

useEffect(() => {
if(addressInput !== '') handleAddressSearch(addressInput);
}, []);

// 검색 결과 중 원하는 주소를 선택할 시 state에 입력
const handleAddressSelect = (selectedAddressName: string) => {
// 사용자가 선택한 주소와 일치하는 결과를 검색 결과를 저장하는 array에서 탐색
const selectedAddress = addressSearchResult.find(
(address) => address.address_name === selectedAddressName,
) as Document | undefined;
const {
addressInput, // 주소 검색용 input 저장하는 state
addressSearchResult, // 주소 검색 결과를 저장하는 array
currentGeoInfo, // 지도에 표시할 핀에 사용되는 위/경도 좌표
handleAddressSearch, // 검색할 주소 입력 시 실시간 검색
handleAddressSelect, // 검색 결과 중 원하는 주소를 선택할 시 state에 입력
setAddressInput,
} = useAddressSearch();

if (!selectedAddress) return;
const handleAddressSelection = (selectedAddressName: string) => {
const result = handleAddressSelect(selectedAddressName);
if (!result) return;

// 구 주소와 도로명 주소를 구분하기 위한 플래그(카카오에서 반환하는 속성 명이 달라짐)
const isRegionAddr =
selectedAddress.address_type === AddressType.REGION_ADDR;
const addressData = isRegionAddr
? selectedAddress.address
: selectedAddress.road_address;

// 카카오에서 반환하는 데이터 중 필요한 속성들만 선택
const selectedProperties = pick(addressData, [
'address_name',
'region_1depth_name',
'region_2depth_name',
'region_3depth_name',
]);

let region4DepthName = ''; // optional property인 region4DeptName
if (isRegionAddr) {
region4DepthName = selectedAddress.address.region_3depth_h_name || '';
} else {
region4DepthName = selectedAddress.road_address.road_name || '';
}

// 선택한 데이터들을 state에 update
setNewPostInfo({
...newPostInfo,
body: {
...newPostInfo.body,
address: {
...newPostInfo.body.address,
...selectedProperties,
region_4depth_name: region4DepthName,
longitude: Number(addressData.x),
latitude: Number(addressData.y),
...result.addressData,
},
},
});
setAddressInput(selectedAddress.address_name);
setCurrentGeoInfo({
lon: Number(selectedAddress.x),
lat: Number(selectedAddress.y),
});
// 검색 결과 초기화
setAddressSearchResult([]);
setAddressInput(result.selectedAddressName);
};

useEffect(() => {
if (addressInput !== '') handleAddressSearch(addressInput);
}, []);

/* 정보 입력 시마다 유효성을 검사해 모든 값이 유효하면 버튼이 활성화 */
useEffect(() => {
const { address } = newPostInfo.body;
Expand Down Expand Up @@ -150,7 +89,7 @@ const Step2 = ({
),
(address) => address.address_name,
)}
onSelect={handleAddressSelect}
onSelect={handleAddressSelection}
/>
)}
</InputLayout>
Expand Down
Loading

0 comments on commit 7b80c3f

Please sign in to comment.