diff --git a/src/apis/canary.ts b/src/apis/canary.ts
index ca16dea..c022ea3 100644
--- a/src/apis/canary.ts
+++ b/src/apis/canary.ts
@@ -10,7 +10,7 @@ export type CanaryApplyForm = {
     gender: boolean;
     address: string;
     detailAddress: string;
-    zip: string;
+    zip: string | number;
     certificateFilePath: string;
     latitude: number;
     longitude: number;
diff --git a/src/components/ChallengeDetail/Header.tsx b/src/components/ChallengeDetail/Header.tsx
index 0c166ff..1436ce6 100644
--- a/src/components/ChallengeDetail/Header.tsx
+++ b/src/components/ChallengeDetail/Header.tsx
@@ -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>
@@ -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 {
diff --git a/src/components/MyPage/CanaryModal.tsx b/src/components/MyPage/CanaryModal.tsx
index 1f72272..4b5d57e 100644
--- a/src/components/MyPage/CanaryModal.tsx
+++ b/src/components/MyPage/CanaryModal.tsx
@@ -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);
@@ -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>) => {
@@ -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();
@@ -97,6 +134,9 @@ const CanaryModal = ({ onClick }: { onClick: () => void }) => {
             }
         }
     }, [accesstoken, applyData, image, birthData]);
+
+    console.log(applyData);
+
     return (
         <CanaryWrapper
             onClick={() => {
diff --git a/src/components/MyPage/PostalCode.tsx b/src/components/MyPage/PostalCode.tsx
index f3f434a..4d8d131 100644
--- a/src/components/MyPage/PostalCode.tsx
+++ b/src/components/MyPage/PostalCode.tsx
@@ -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
     `}
 `;