Skip to content

Commit

Permalink
feat: 우편번호 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@seokkkkkk
seokkkkkk committed Aug 10, 2024
1 parent 8d655f9 commit 6de8502
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 93 deletions.
2 changes: 1 addition & 1 deletion src/apis/canary.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export type CanaryApplyForm = {
gender: boolean;
address: string;
detailAddress: string;
zip: string;
zip: string | number;
certificateFilePath: string;
latitude: number;
longitude: number;
Expand Down
23 changes: 15 additions & 8 deletions src/components/ChallengeDetail/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@ const Header = ({
return (
<Container>
<ChallengeInfo>
{categories?.map((category) => (
<div className="category">
{challengeType.find((type) => type.id === category)
?.label || category}
</div>
))}
<div className="categories">
{categories?.map((category) => (
<div className="category">
{challengeType.find((type) => type.id === category)
?.label || category}
</div>
))}
</div>
<p className="title">{title}</p>
<p className="desc">{desc}</p>
</ChallengeInfo>
Expand Down Expand Up @@ -80,15 +82,20 @@ const ChallengeInfo = styled.div`
${tw`
w-[1280px] flex flex-col items-start
`}
.categories {
${tw`
flex gap-[8px] mb-[20px]
`}
}
.category {
${tw`
text-medium-20 font-medium text-white
bg-mainColor rounded-[37px] p-[1px 13px]
bg-mainColor rounded-[37px] p-[3px 13px] pb-[6px]
`}
}
.title {
${tw`
text-bold-64 font-bold mt-[6.5px] text-fontColor1
text-bold-64 font-bold mt-[-20px] text-fontColor1
`}
}
.desc {
Expand Down
78 changes: 59 additions & 19 deletions src/components/MyPage/CanaryModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,18 @@ import useAuthStore from "../../storage/useAuthStore";
import { getPresignedUrl, uploadImageToS3 } from "../../apis/file-upload";
import { postCanaryApply } from "../../apis/canary";

const CanaryModal = ({ onClick }: { onClick: () => void }) => {
interface postCode {
address: string;
zonecode: number | string;
detailAddress?: string;
}

// prop 타입 정의
interface CanaryModalProps {
onClick: () => void;
}

const CanaryModal = ({ onClick }: CanaryModalProps) => {
const { userData } = useAuthStore.getState();
const [success, setSuccess] = useState(false);
const [image, setImage] = useState<File | null>(null);
Expand All @@ -28,34 +39,40 @@ const CanaryModal = ({ onClick }: { onClick: () => void }) => {
gender: true,
address: "",
detailAddress: "",
zip: "",
zip: "" as number | string,
certificateFilePath: "",
latitude: 0,
longitude: 0,
});
const handleApplyData = useCallback(
(data: any, key: string) => {
setApplyData({ ...applyData, [key]: data });
},
[applyData]
);
const handleApplyData = (value: any, field: any) => {
let formattedValue = value;

// 필드에 따라 포맷팅 처리
if (field === "phone") {
formattedValue = formatPhoneNumber(value);
}

setApplyData({
...applyData,
[field]: formattedValue,
});
};

const handleBirthData = useCallback(
(data: any, key: string) => {
setBirthData({ ...birthData, [key]: data });
},
[birthData]
);
const handleAddressChange = useCallback(
(data: any) => {
setApplyData({
...applyData,
address: data.address,
detailAddress: data.detailAddress,
zip: data.zonecode,
});
},
[applyData]
);

const handleAddressChange = (data: postCode) => {
setApplyData({
...applyData,
address: data.address,
detailAddress: data.detailAddress!,
zip: data.zonecode,
});
};

const handleImageChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -67,6 +84,26 @@ const CanaryModal = ({ onClick }: { onClick: () => void }) => {
[]
);

const formatPhoneNumber = (value: any) => {
// 숫자만 남기기
const numbersOnly = value.replace(/\D/g, "");

// 3자리, 4자리, 4자리로 나누어 하이픈 추가
let formattedNumber = numbersOnly;
if (numbersOnly.length > 3 && numbersOnly.length <= 7) {
formattedNumber = `${numbersOnly.slice(0, 3)}-${numbersOnly.slice(
3
)}`;
} else if (numbersOnly.length > 7) {
formattedNumber = `${numbersOnly.slice(0, 3)}-${numbersOnly.slice(
3,
7
)}-${numbersOnly.slice(7, 11)}`;
}

return formattedNumber;
};

const convertToISO = (year: number, month: number, day: number): string => {
const date = new Date(year, month - 1, day);
return date.toISOString();
Expand Down Expand Up @@ -97,6 +134,9 @@ const CanaryModal = ({ onClick }: { onClick: () => void }) => {
}
}
}, [accesstoken, applyData, image, birthData]);

console.log(applyData);

return (
<CanaryWrapper
onClick={() => {
Expand Down
138 changes: 73 additions & 65 deletions src/components/MyPage/PostalCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,92 +6,100 @@ import { useState, useEffect } from "react";
import DaumPost from "../Common/DaumPost";

interface postCode {
address: string;
zonecode: number | string;
detailAddress?: string;
address: string;
zonecode: number | string;
detailAddress?: string;
}
interface PostalCodeProps {
initialAddress?: postCode;
onChange?: (data: postCode) => void;
initialAddress?: postCode;
onChange?: (data: postCode) => void;
}

const PostalCode = ({ initialAddress, onChange }: PostalCodeProps) => {
const [popup, setPopup] = useState(false);
const [popup, setPopup] = useState(false);

const [form, setForm] = useState<postCode>({
address: "",
zonecode: "",
detailAddress: "",
});
const [form, setForm] = useState<postCode>({
address: "",
zonecode: "",
detailAddress: "",
});

const handlePopup = () => {
setPopup(!popup);
};
const handlePopup = () => {
setPopup(!popup);
};

useEffect(() => {
if (initialAddress) {
setForm(initialAddress);
}
}, [initialAddress]);
useEffect(() => {
if (initialAddress) {
setForm(initialAddress);
}
}, [initialAddress]);

useEffect(() => {
if (onChange && form.address !== initialAddress?.address) {
onChange(form);
}
}, [form, initialAddress]);
useEffect(() => {
if (onChange && form.address !== initialAddress?.address) {
onChange(form);
}
}, [form, initialAddress?.address]);

const handleDetailAddressChange = (
e: React.ChangeEvent<HTMLInputElement>
) => {
setForm((prevForm) => ({ ...prevForm, detailAddress: e.target.value }));
};
useEffect(() => {
if (onChange && form.detailAddress !== initialAddress?.detailAddress) {
onChange(form);
}
}, [form.detailAddress, initialAddress?.detailAddress]);

return (
<>
<Container>
<Input
hint="거주 주소지"
placeholder="거주 주소지"
width="577px"
value={form.address}
/>
<Input
hint="상세 주소"
placeholder="상세 주소"
width="199px"
value={form.detailAddress}
onChange={handleDetailAddressChange}
/>
<Input
hint="우편번호"
placeholder="12345"
width="102px"
value={form.zonecode}
/>
<Button title="우편번호 검색" mainColor onClick={handlePopup} />
{popup && <DaumPost handlePopup={handlePopup} setAddress={setForm} />}
</Container>
{popup && (
<Background
onClick={() => {
handlePopup();
}}
/>
)}
</>
);
const handleDetailAddressChange = (
e: React.ChangeEvent<HTMLInputElement>
) => {
setForm((prevForm) => ({ ...prevForm, detailAddress: e.target.value }));
};

return (
<>
<Container>
<Input
hint="거주 주소지"
placeholder="거주 주소지"
width="577px"
value={form.address}
/>
<Input
hint="상세 주소"
placeholder="상세 주소"
width="199px"
value={form.detailAddress}
onChange={handleDetailAddressChange}
/>
<Input
hint="우편번호"
placeholder="12345"
width="102px"
value={form.zonecode}
/>
<Button title="우편번호 검색" mainColor onClick={handlePopup} />
{popup && (
<DaumPost handlePopup={handlePopup} setAddress={setForm} />
)}
</Container>
{popup && (
<Background
onClick={() => {
handlePopup();
}}
/>
)}
</>
);
};

export default PostalCode;

const Container = styled.div`
${tw`
${tw`
flex gap-[23px] items-baseline relative
`}
`;

const Background = styled.div`
${tw`
${tw`
absolute w-[100dvw] h-[100dvh] z-40 top-0 left-0
`}
`;

0 comments on commit 6de8502

Please sign in to comment.