diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
index 150f7d5c..2c9fb711 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
@@ -1,18 +1,18 @@
 "use client";
-import React, { useState } from "react"; // useState 추가
+import React, { useState } from "react";
 import Link from "next/link";
 import { useUser } from "@/hooks/queries/user/me/useUser";
 import { FormDetailResponse } from "@/types/response/form";
 import FloatingBtn from "@/app/components/button/default/FloatingBtn";
 import { FaEdit } from "react-icons/fa";
 import { MdDeleteForever } from "react-icons/md";
-import { CiMemoPad } from "react-icons/ci";
 import axios from "axios";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 import { HiMail } from "react-icons/hi";
 import { HiDocumentText } from "react-icons/hi";
+import { useMyApplications } from "@/hooks/queries/user/me/useMyApplications";
 interface FormActionsProps {
   formId: string | number;
   albaFormDetailData: FormDetailResponse;
@@ -20,6 +20,7 @@ interface FormActionsProps {
 
 export default function FormActions({ formId, albaFormDetailData }: FormActionsProps) {
   const { user } = useUser();
+  const { data: applicantData } = useMyApplications();
   const router = useRouter();
   const isMyAlbaForm = user?.id === albaFormDetailData.ownerId;
   const isOwnerRole = user?.role === "OWNER";
@@ -66,15 +67,26 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP
     );
   }
 
+  // 이미 지원한 공고인지 확인
+  const hasApplied = applicantData?.pages
+    ?.flatMap((page) => page.data) // 1차원 배열로 변환
+    .some((applicant) => applicant.form?.id === formId); // 일치하는 항목을 찾으면 즉시 true를 반환
+
   // 사장님이 아니면 지원하기/내 지원내역 보기 버튼
   if (!isOwnerRole) {
     return (
       <div className="space-y-4 text-2xl">
-        <Link href={`/apply/${formId}`}>
-          <FloatingBtn className={`${buttonStyle} mb-4`} icon={<HiMail />}>
-            {isLoading ? <DotLoadingSpinner /> : "지원하기"}
+        {hasApplied ? (
+          <FloatingBtn className={`${buttonStyle} mb-4`} icon={<HiMail />} disabled>
+            {isLoading ? <DotLoadingSpinner /> : "이미 지원한 공고"}
           </FloatingBtn>
-        </Link>
+        ) : (
+          <Link href={`/apply/${formId}`}>
+            <FloatingBtn className={`${buttonStyle} mb-4`} icon={<HiMail />}>
+              {isLoading ? <DotLoadingSpinner /> : "지원하기"}
+            </FloatingBtn>
+          </Link>
+        )}
         <Link href={`/my-apply/${formId}`}>
           <FloatingBtn variant="white" className={buttonStyle} icon={<HiDocumentText />}>
             {isLoading ? <DotLoadingSpinner /> : "내 지원내역 보기"}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
index c346ef01..f2c9d67a 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
@@ -22,7 +22,7 @@ export default function RecruitInformation({ albaFormDetailData, formId }: Recru
   };
 
   return (
-    <div className="flex flex-col gap-10 lg:pl-6">
+    <div className="mt-10 flex flex-col gap-10 lg:mt-0 lg:pl-6">
       <RecruitIcon {...recruitmentDetails} />
       <RecruitDetail recruitData={albaFormDetailData} />
       <div className="flex flex-col gap-6">
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/page.tsx b/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
index 68f62233..b267f679 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
@@ -41,13 +41,6 @@ export default function AlbaFormDetailPage() {
     libraries: ["services"],
   });
 
-  // 카카오 SDK 초기화
-  useEffect(() => {
-    if (window.Kakao && !window.Kakao.isInitialized()) {
-      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_APP_KEY);
-    }
-  }, []);
-
   useEffect(() => {
     if (formId) {
       setFormIdState(Number(formId));
@@ -73,11 +66,6 @@ export default function AlbaFormDetailPage() {
     });
   }, [albaFormDetailData?.location]);
 
-  // 사용자 데이터가 로딩 중인지 확인
-  if (!user) {
-    return <LoadingSpinner />;
-  }
-
   if (isLoading)
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
@@ -88,7 +76,17 @@ export default function AlbaFormDetailPage() {
   return (
     <div className="container flex min-h-screen flex-col px-4 lg:px-0">
       {/* 카카오 공유 스트립트 */}
-      <Script src="https://developers.kakao.com/sdk/js/kakao.min.js" strategy="beforeInteractive" />
+      <Script
+        src={`https://developers.kakao.com/sdk/js/kakao.min.js?v=${new Date().getTime()}`}
+        strategy="afterInteractive"
+        onLoad={() => {
+          const kakaoKey = process.env.NEXT_PUBLIC_KAKAO_APP_KEY;
+          if (window.Kakao && !window.Kakao.isInitialized()) {
+            window.Kakao.init(kakaoKey);
+          }
+        }}
+      />
+
       {/* 사진영역 */}
       {albaFormDetailData && (
         <FormImage
@@ -113,7 +111,7 @@ export default function AlbaFormDetailPage() {
           <div className="h-[280px] lg:h-[320px]">
             {error && <div className="text-red-500">Map load error: {String(error)}</div>}
             {!loading && !error && albaFormDetailData && (
-              <Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
+              <Map center={coords} style={{ width: "100%", height: "100%", zIndex: 0 }} level={3}>
                 <MapMarker position={coords}>
                   <div className="whitespace-nowrap p-2 text-center">
                     <p className="">{albaFormDetailData.storeName}</p>
@@ -132,8 +130,8 @@ export default function AlbaFormDetailPage() {
       {/* 지원 현황 */}
       {isOwner && isAuthor && <ApplyStatus formId={formIdState} />}
 
-      <div className="fixed right-10 top-1/2 flex flex-col items-end gap-5">
-        <ScrapBtn formId={formIdState} />
+      <div className="fixed right-10 top-1/2 flex w-12 flex-col items-end gap-5">
+        {user && !isOwner && <ScrapBtn formId={formIdState} />}
         <ExpandedFloatingBtn icon={<IoShareSocialSharp />} variant="orange" />
       </div>
     </div>
diff --git a/src/app/(pages)/(albaform)/layout.tsx b/src/app/(pages)/(albaform)/layout.tsx
index d7f2987d..98d70468 100644
--- a/src/app/(pages)/(albaform)/layout.tsx
+++ b/src/app/(pages)/(albaform)/layout.tsx
@@ -25,7 +25,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   );
 
   // 상세 페이지 레이아웃
-  const DetailStyle = "mx-auto max-w-screen-xl  px-4 py-4 sm:px-6 md:py-8";
+  const DetailStyle = "mx-auto max-w-screen-xl  px-4 py-4 sm:px-6 md:py-8 justify-center flex";
 
   return (
     <div className={cn(isForm ? FormStyle : DetailStyle)}>
diff --git a/src/app/(pages)/my-albaform/(role)/applicant/page.tsx b/src/app/(pages)/my-albaform/(role)/applicant/page.tsx
index 87ea63b9..6f025638 100644
--- a/src/app/(pages)/my-albaform/(role)/applicant/page.tsx
+++ b/src/app/(pages)/my-albaform/(role)/applicant/page.tsx
@@ -12,6 +12,7 @@ import { useMyApplications } from "@/hooks/queries/user/me/useMyApplications";
 import ApplicantSortSection from "./components/ApplicantSortSection";
 import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import ContentSection from "@/app/components/layout/ContentSection";
+import Link from "next/link";
 
 const APPLICATIONS_PER_PAGE = 10;
 
@@ -112,15 +113,17 @@ export default function ApplicantPage() {
                 <React.Fragment key={page.nextCursor}>
                   {page.data.map((application) => (
                     <div key={application.id}>
-                      <MyApplicationListItem
-                        id={application.id}
-                        createdAt={application.createdAt}
-                        updatedAt={application.updatedAt}
-                        status={application.status}
-                        resumeId={application.resumeId}
-                        resumeName={application.resumeName}
-                        form={application.form}
-                      />
+                      <Link href={`/alba/${application.form.id}`}>
+                        <MyApplicationListItem
+                          id={application.id}
+                          createdAt={application.createdAt}
+                          updatedAt={application.updatedAt}
+                          status={application.status}
+                          resumeId={application.resumeId}
+                          resumeName={application.resumeName}
+                          form={application.form}
+                        />
+                      </Link>
                     </div>
                   ))}
                 </React.Fragment>
diff --git a/src/app/(pages)/my-apply/[formId]/page.tsx b/src/app/(pages)/my-apply/[formId]/page.tsx
index 49596bf6..1bc6a05f 100644
--- a/src/app/(pages)/my-apply/[formId]/page.tsx
+++ b/src/app/(pages)/my-apply/[formId]/page.tsx
@@ -2,7 +2,7 @@ import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
 import Chip from "@/app/components/chip/Chip";
 import React from "react";
 
-// 알바폼 지원내역 상세 페이지
+// 알바폼 지원내역 상세 페이지 (수정해야하는 페이지)
 export default function MyApplyPage({ formId }: { formId: number }) {
   return (
     <div className="container flex min-h-screen flex-col">
diff --git a/src/app/components/button/default/ExpandedFloatingBtn.tsx b/src/app/components/button/default/ExpandedFloatingBtn.tsx
index d600697f..f9f967c3 100644
--- a/src/app/components/button/default/ExpandedFloatingBtn.tsx
+++ b/src/app/components/button/default/ExpandedFloatingBtn.tsx
@@ -1,8 +1,7 @@
 "use client";
-import React, { useState, ButtonHTMLAttributes, ReactNode } from "react";
+import React, { useState, ButtonHTMLAttributes, ReactNode, useEffect, useRef } from "react";
 import { cn } from "@/lib/tailwindUtil";
 import { IoShareSocialSharp } from "react-icons/io5"; // 기본 공유 아이콘
-import { FaLink } from "react-icons/fa"; // 링크 및 카카오톡 아이콘
 import { FcShare } from "react-icons/fc";
 import shareToKakao from "@/utils/shareToKakao";
 import toast from "react-hot-toast";
@@ -15,6 +14,7 @@ interface ExpandedFloatingBtnProps extends ButtonHTMLAttributes<HTMLButtonElemen
 
 const ExpandedFloatingBtn = ({ variant = "orange", className, ...props }: ExpandedFloatingBtnProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const baseStyles = "inline-flex items-center justify-center transition-colors font-medium rounded-full";
   const expandedStyles = "h-32 px-1 bg-primary-orange-200  hover:bg-primary-orange-100";
@@ -34,8 +34,23 @@ const ExpandedFloatingBtn = ({ variant = "orange", className, ...props }: Expand
     toast.success("링크가 복사되었습니다.");
   };
 
+  // 외부 클릭 감지 로직
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <button
+      ref={buttonRef} // 버튼 참조
       className={cn(baseStyles, variants[variant], isExpanded ? expandedStyles : collapsedStyles, className)}
       onClick={handleToggle}
       {...props}
diff --git a/src/app/components/button/default/FloatingBtn.tsx b/src/app/components/button/default/FloatingBtn.tsx
index 29f07307..608cd6f5 100644
--- a/src/app/components/button/default/FloatingBtn.tsx
+++ b/src/app/components/button/default/FloatingBtn.tsx
@@ -5,22 +5,41 @@ import { cn } from "@/lib/tailwindUtil";
 interface FloatingBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "orange" | "white";
   icon?: ReactNode;
+  disabled?: boolean;
 }
 
-const FloatingBtn = ({ variant = "orange", icon, children, className, ...props }: FloatingBtnProps) => {
+const FloatingBtn = ({ variant = "orange", icon, children, className, disabled, ...props }: FloatingBtnProps) => {
   const baseStyles = "inline-flex items-center justify-center transition-colors font-medium rounded-full h-12";
 
   const variants = {
-    orange: "bg-primary-orange-300 text-white hover:bg-primary-orange-200",
-    white: "bg-white text-primary-orange-300 border border-primary-orange-300 hover:bg-primary-grayscale-100",
+    orange: "bg-primary-orange-300 text-white",
+    white: "bg-white text-primary-orange-300 border border-primary-orange-300",
   };
 
+  const hoverStyles = {
+    orange: "hover:bg-primary-orange-200",
+    white: "hover:text-primary-orange-200",
+  };
+
+  const disabledStyles = "bg-grayscale-100 text-white cursor-not-allowed";
+
   const widthStyles = children ? "w-auto px-3" : "w-12";
 
   return (
-    <button type="button" className={cn(baseStyles, variants[variant], widthStyles, className)} {...props}>
+    <button
+      type="button"
+      className={cn(
+        baseStyles,
+        variants[variant],
+        widthStyles,
+        disabled ? disabledStyles : hoverStyles[variant],
+        className
+      )}
+      disabled={disabled}
+      {...props}
+    >
       {icon && <span className="text-2xl">{icon}</span>}
-      <span className={cn(children ? "ml-2" : "", "hidden sm:inline")}>{children}</span>
+      <span className={cn(children ? "ml-2" : "", "hidden text-lg sm:inline lg:text-2xl")}>{children}</span>
     </button>
   );
 };
diff --git a/src/app/components/button/default/ScrapBtn.tsx b/src/app/components/button/default/ScrapBtn.tsx
index b09014fa..cb65df19 100644
--- a/src/app/components/button/default/ScrapBtn.tsx
+++ b/src/app/components/button/default/ScrapBtn.tsx
@@ -1,9 +1,12 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FaBookmark, FaRegBookmark } from "react-icons/fa";
 import { cn } from "@/lib/tailwindUtil";
 import axios from "axios";
 import toast from "react-hot-toast";
+import { useQueryClient } from "@tanstack/react-query";
+import useFormDetail from "@/hooks/queries/form/detail/useFormDetail";
+import { useUser } from "@/hooks/queries/user/me/useUser";
 
 interface ScrapBtnProps {
   className?: string;
@@ -12,34 +15,37 @@ interface ScrapBtnProps {
 
 const ScrapBtn = ({ className = "", formId }: ScrapBtnProps) => {
   const [isScraped, setIsScraped] = useState(false);
+  const queryClient = useQueryClient(); // React Query의 QueryClient 인스턴스 사용
+  const { albaFormDetailData } = useFormDetail({ formId });
 
-  const toggleScrap = () => {
+  const toggleScrap = async () => {
     setIsScraped((prev) => !prev);
-  };
 
-  const handleScrap = () => {
-    toggleScrap();
-    if (!isScraped) {
-      // 스크랩
-      try {
-        axios.post(`/api/forms/${formId}/scrap`, { formId });
+    try {
+      if (!isScraped) {
+        // 스크랩
+        await axios.post(`/api/forms/${formId}/scrap`, { formId });
         toast.success("스크랩 되었습니다.");
-      } catch (error) {
-        toggleScrap();
-      }
-    }
-    if (isScraped) {
-      // 스크랩 취소
-      try {
-        axios.delete(`/api/forms/${formId}/scrap`);
+      } else {
+        // 스크랩 취소
+        await axios.delete(`/api/forms/${formId}/scrap`);
         toast.success("스크랩이 취소되었습니다.");
-      } catch (error) {
-        toggleScrap();
       }
-      return;
+
+      // 특정 쿼리 무효화 (키를 기준으로 쿼리를 다시 가져오게 함)
+      queryClient.invalidateQueries({ queryKey: ["formDetail", formId] });
+    } catch (error) {
+      // 오류 발생 시 상태 롤백
+      setIsScraped((prev) => !prev);
+      toast.error("스크랩 요청에 실패했습니다.");
     }
   };
-  console.log(isScraped);
+
+  useEffect(() => {
+    if (albaFormDetailData?.isScrapped !== undefined) {
+      setIsScraped(albaFormDetailData.isScrapped);
+    }
+  }, [albaFormDetailData?.isScrapped]);
 
   return (
     <button
@@ -47,12 +53,12 @@ const ScrapBtn = ({ className = "", formId }: ScrapBtnProps) => {
         "inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-orange-50 p-2 transition-colors",
         className
       )}
-      onClick={handleScrap}
+      onClick={toggleScrap}
     >
       {isScraped ? (
-        <FaBookmark className={cn("text-xl text-primary-orange-300")} />
+        <FaBookmark className="text-xl text-primary-orange-300" />
       ) : (
-        <FaRegBookmark className={cn("text-xl text-primary-orange-300")} />
+        <FaRegBookmark className="text-xl text-primary-orange-300" />
       )}
     </button>
   );
diff --git a/src/app/components/card/cardList/RecruitIconItem.tsx b/src/app/components/card/cardList/RecruitIconItem.tsx
index f0877e43..7e9a9c5b 100644
--- a/src/app/components/card/cardList/RecruitIconItem.tsx
+++ b/src/app/components/card/cardList/RecruitIconItem.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/tailwindUtil";
 import Image from "next/image";
 
 interface RecruitIconItemProps {
@@ -11,8 +12,15 @@ interface RecruitIconItemProps {
 
 // 채용 공고의 근무 조건을 아이콘으로 표시하는 컴포넌트의 아이템 컴포넌트
 const RecruitIconItem = ({ icon, label, value }: RecruitIconItemProps) => {
+  const isPeriodLabel = label === "기간";
+
   return (
-    <div className="flex h-[54px] items-start gap-2 overflow-hidden rounded-lg border border-grayscale-200 p-2 lg:h-[150px] lg:gap-6 lg:p-[30px]">
+    <div
+      className={cn(
+        "flex h-[54px] items-start gap-2 overflow-hidden rounded-lg border border-grayscale-200 p-2 lg:h-[150px] lg:gap-6 lg:p-[30px]",
+        { "lg:items-center": !isPeriodLabel }
+      )}
+    >
       <div className="flex h-9 w-9 items-center justify-center rounded-full bg-grayscale-100 bg-opacity-30 lg:h-14 lg:w-14">
         <div className="block lg:hidden">
           <Image src={icon.sm} alt={label} width={24} height={24} />
@@ -23,9 +31,16 @@ const RecruitIconItem = ({ icon, label, value }: RecruitIconItemProps) => {
       </div>
       <div className="flex-1">
         <div className="text-grayscale-600 text-sm font-medium lg:text-xl">{label}</div>
-        <div className="text-sm font-semibold text-primary-orange-300 lg:h-[68px] lg:text-2xl">{value}</div>
+        <div
+          className={cn("text-sm font-semibold text-primary-orange-300 lg:text-2xl", {
+            "lg:h-0": isPeriodLabel,
+          })}
+        >
+          {value}
+        </div>
       </div>
     </div>
   );
 };
+
 export default RecruitIconItem;
diff --git a/src/utils/kakaoShare.ts b/src/utils/kakaoShare.ts
deleted file mode 100644
index cc50ca08..00000000
--- a/src/utils/kakaoShare.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-declare global {
-  interface Window {
-    Kakao: any;
-  }
-}
-
-export const handleShare = (templateArgs: {
-  title: string;
-  description: string;
-  imageUrl: string;
-  mobileWebUrl: string;
-  webUrl: string;
-}) => {
-  if (typeof window === "undefined" || !window.Kakao) {
-    alert("카카오 SDK가 로드되지 않았습니다.");
-    return;
-  }
-
-  const { Kakao } = window;
-
-  if (!Kakao.isInitialized()) {
-    alert("카카오 SDK가 초기화되지 않았습니다.");
-    return;
-  }
-
-  try {
-    Kakao.Share.sendDefault({
-      objectType: "feed", // 피드 템플릿
-      content: {
-        title: templateArgs.title, // 공유할 제목
-        description: templateArgs.description, // 설명
-        imageUrl: templateArgs.imageUrl, // 공유할 이미지 URL
-        link: {
-          mobileWebUrl: templateArgs.mobileWebUrl, // 모바일 웹 URL
-          webUrl: templateArgs.webUrl, // 웹 URL
-        },
-      },
-      buttons: [
-        {
-          title: "자세히 보기", // 버튼 제목
-          link: {
-            mobileWebUrl: templateArgs.mobileWebUrl, // 버튼 클릭 시 이동할 URL
-            webUrl: templateArgs.webUrl, // 버튼 클릭 시 이동할 URL
-          },
-        },
-      ],
-    });
-  } catch (error) {
-    console.error("카카오 공유 중 오류 발생:", error);
-    alert("공유 중 오류가 발생했습니다. 콘솔을 확인하세요.");
-  }
-};
diff --git a/src/utils/shareToKakao.ts b/src/utils/shareToKakao.ts
index 43b7c601..a42eec3f 100644
--- a/src/utils/shareToKakao.ts
+++ b/src/utils/shareToKakao.ts
@@ -2,7 +2,6 @@ import getMetaContentByProperty from "./getMetaContentByProperty";
 
 const shareToKakao = () => {
   const { Kakao, location } = window;
-
   const url = String(new URL(location.href));
 
   const ogTitle = getMetaContentByProperty("og:title") || "WorkRoot";
@@ -10,18 +9,22 @@ const shareToKakao = () => {
     getMetaContentByProperty("og:description") || `🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트`;
   const ogImage = getMetaContentByProperty("og:image") || "/logo.svg";
 
-  Kakao.Link.sendDefault({
-    objectType: "feed",
-    content: {
-      title: ogTitle,
-      description: ogDescription,
-      imageUrl: ogImage,
-      link: {
-        mobileWebUrl: url,
-        webUrl: url,
+  if (window.Kakao && window.Kakao.isInitialized()) {
+    Kakao.Link.sendDefault({
+      objectType: "feed",
+      content: {
+        title: ogTitle,
+        description: ogDescription,
+        imageUrl: ogImage,
+        link: {
+          mobileWebUrl: url,
+          webUrl: url,
+        },
       },
-    },
-  });
+    });
+  } else {
+    console.error("Kakao SDK가 초기화되지 않았습니다.");
+  }
 };
 
 export default shareToKakao;