Feat: 지원현황, 공유하기 수정

src/app/(pages)/(albaform)/alba/[formId]/components/ApplyStatus.tsx

@@ -0,0 +1,17 @@
+import ApplyStatusCard from "@/app/components/card/cardList/apply/ApplyStatusCard";
+import React from "react";
+
+interface ApplyStatusProps {
+  formId: number;
+}
+
+export default function ApplyStatus({ formId }: ApplyStatusProps) {
+  return (
+    <>
+      <div className="mt-20 space-y-6 border-t-2 pt-20 text-2xl">
+        <p className="text-3xl font-bold">지원 현황</p>
+        <ApplyStatusCard formId={formId} />
+      </div>
+    </>
+  );
+}

src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx

@@ -6,13 +6,13 @@ 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 { VscGitStashApply } from "react-icons/vsc";
 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";
 interface FormActionsProps {
   formId: string | number;
   albaFormDetailData: FormDetailResponse;
@@ -25,12 +25,12 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP
   const isOwnerRole = user?.role === "OWNER";
 
   const buttonStyle = "h-10 lg:h-16 w-full rounded-lg font-bold ";
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   if (!user) return null;
 
   const handleDelete = async () => {
-    setLoading(true);
+    setIsLoading(true);
     try {
       await axios.delete(`/api/forms/${formId}`);
       toast.success("성공적으로 삭제되었습니다.");
@@ -39,7 +39,7 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP
       console.error(error);
       toast.error("삭제 중 오류가 발생했습니다.");
     } finally {
-      setLoading(false);
+      setIsLoading(false);
     }
   };
 
@@ -49,18 +49,18 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP
     return (
       <div className="space-y-4 text-2xl">
         <Link href={`/alba/${formId}/edit`}>
-          <FloatingBtn className={`${buttonStyle}`} icon={<FaEdit />} disabled={loading}>
-            수정하기
+          <FloatingBtn className={`${buttonStyle}`} icon={<FaEdit />} disabled={isLoading}>
+            {isLoading ? <DotLoadingSpinner /> : "수정하기"}
           </FloatingBtn>
         </Link>
         <FloatingBtn
           variant="white"
           className={buttonStyle}
           icon={<MdDeleteForever />}
           onClick={handleDelete}
-          disabled={loading}
+          disabled={isLoading}
         >
-          {loading ? <DotLoadingSpinner /> : "삭제하기"}
+          {isLoading ? <DotLoadingSpinner /> : "삭제하기"}
         </FloatingBtn>
       </div>
     );
@@ -70,12 +70,16 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP
   if (!isOwnerRole) {
     return (
       <div className="space-y-4 text-2xl">
-        <FloatingBtn className={buttonStyle} icon={<VscGitStashApply />}>
-          지원하기
-        </FloatingBtn>
-        <FloatingBtn variant="white" className={buttonStyle} icon={<CiMemoPad />}>
-          내 지원내역 보기
-        </FloatingBtn>
+        <Link href={`/apply/${formId}`}>
+          <FloatingBtn className={`${buttonStyle} mb-4`} icon={<HiMail />}>
+            {isLoading ? <DotLoadingSpinner /> : "지원하기"}
+          </FloatingBtn>
+        </Link>
+        <Link href={`/myapply/${formId}`}>
+          <FloatingBtn variant="white" className={buttonStyle} icon={<HiDocumentText />}>
+            {isLoading ? <DotLoadingSpinner /> : "내 지원내역 보기"}
+          </FloatingBtn>
+        </Link>
       </div>
     );
   }

src/app/(pages)/(albaform)/alba/[formId]/page.tsx

@@ -9,13 +9,12 @@ import Script from "next/script";
 import FormHeader from "./components/FormHeader";
 import FormDetails from "./components/FormDetail";
 import RecruitInformation from "./components/RecruitInformation";
-import ApplicationStatus from "./components/ApplicationStatus";
+import ApplyStatus from "./components/ApplyStatus";
 import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import FormImage from "./components/FormImage";
 import ScrapBtn from "@/app/components/button/default/ScrapBtn";
-import FloatingBtn from "@/app/components/button/default/FloatingBtn";
 import { IoShareSocialSharp } from "react-icons/io5";
-import { handleShare } from "@/utils/kakaoShare";
+import ExpandedFloatingBtn from "@/app/components/button/default/ExpandedFloatingBtn";
 
 interface Coords {
   lat: number;
@@ -34,7 +33,6 @@ export default function AlbaFormDetailPage() {
   const [formIdState, setFormIdState] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const { user } = useUser();
-  const isOwner = user?.role === "OWNER";
 
   // 카카오맵 관련 상태
   const [coords, setCoords] = useState<Coords>({ lat: 37.5665, lng: 126.978 });
@@ -45,7 +43,7 @@ export default function AlbaFormDetailPage() {
 
   // 카카오 SDK 초기화
   useEffect(() => {
-    if (typeof window !== "undefined" && window.Kakao && !window.Kakao.isInitialized()) {
+    if (window.Kakao && !window.Kakao.isInitialized()) {
       window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_APP_KEY);
     }
   }, []);
@@ -57,6 +55,8 @@ export default function AlbaFormDetailPage() {
   }, [formId]);
 
   const { albaFormDetailData, isLoading } = useFormDetail({ formId: formIdState });
+  const isOwner = user?.role === "OWNER";
+  const isAuthor = user?.id === albaFormDetailData?.ownerId;
 
   // 주소로 좌표 검색
   useEffect(() => {
@@ -73,6 +73,11 @@ export default function AlbaFormDetailPage() {
     });
   }, [albaFormDetailData?.location]);
 
+  // 사용자 데이터가 로딩 중인지 확인
+  if (!user) {
+    return <LoadingSpinner />;
+  }
+
   if (isLoading)
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
@@ -125,23 +130,11 @@ export default function AlbaFormDetailPage() {
         </div>
       </div>
       {/* 지원 현황 */}
-      {isOwner && <ApplicationStatus formId={formIdState} />}
+      {isOwner && isAuthor && <ApplyStatus formId={formIdState} />}
 
-      <div className="fixed right-10 top-1/2 flex flex-col gap-5">
+      <div className="fixed right-10 top-1/2 flex flex-col items-end gap-5">
         <ScrapBtn formId={formIdState} />
-        <FloatingBtn
-          icon={<IoShareSocialSharp />}
-          variant="orange"
-          onClick={() =>
-            handleShare({
-              title: "알바폼 공유",
-              description: "자세한 내용을 확인하세요!",
-              imageUrl: albaFormDetailData?.imageUrls[0] || "기본 이미지 URL",
-              mobileWebUrl: `http://example.com/form/${formIdState}`,
-              webUrl: `http://example.com/form/${formIdState}`,
-            })
-          }
-        />
+        <ExpandedFloatingBtn icon={<IoShareSocialSharp />} variant="orange" />
       </div>
     </div>
   );

src/app/(pages)/albaform-support-detail/page.tsx → src/app/(pages)/myapply/[formId]/page.tsx

@@ -3,7 +3,7 @@ import Chip from "@/app/components/chip/Chip";
 import React from "react";
 
 // 알바폼 지원내역 상세 페이지
-export default function AlbaFormSupportDetailPage({ formId }: { formId: number }) {
+export default function MyApplyPage({ formId }: { formId: number }) {
   return (
     <div className="container flex min-h-screen flex-col">
       <div className="h-[562px] bg-black-100">지도영역</div>

src/app/(pages)/albaform-support-detail/layout.tsx → src/app/(pages)/myapply/layout.tsx

@@ -1,7 +1,7 @@
 import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import React, { Suspense } from "react";
 
-export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
+export default function MyApplyLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="mx-auto max-w-screen-xl px-4 py-8">
       <Suspense

src/app/api/forms/[formId]/applications/route.ts

@@ -50,12 +50,12 @@ export async function GET(req: NextRequest, { params }: { params: { formId: stri
 
     const { searchParams } = new URL(req.url);
     const queryParams = {
-      page: searchParams.get("page"),
+      formId: params.formId,
       limit: searchParams.get("limit"),
-      status: searchParams.get("status"),
-      sort: searchParams.get("sort"),
+      cursor: searchParams.get("cursor"),
+      orderByExperience: searchParams.get("orderByExperience"),
+      orderByStatus: searchParams.get("orderByStatus"),
     };
-
     const response = await apiClient.get(`/forms/${params.formId}/applications`, {
       params: queryParams,
       headers: {

src/app/api/oauth/callback/google/route.ts

@@ -62,6 +62,13 @@ export const GET = async (request: NextRequest) => {
       },
     };
 
+    // role이 APPLICANT일 경우 추가 정보 설정
+    if (role === "APPLICANT") {
+      googleUser.signup.storeName = "x";
+      googleUser.signup.storePhoneNumber = "x";
+      googleUser.signup.location = "x";
+    }
+
     const processUser = async () => {
       if (action === "signup") {
         try {
@@ -75,6 +82,7 @@ export const GET = async (request: NextRequest) => {
             throw new Error("회원가입 중 서버 오류");
           }
         }
+        return NextResponse.redirect(new URL("/mypage", request.url));
       } else if (action === "login") {
         await loginUser();
       } else {

src/app/components/button/default/ExpandedFloatingBtn.tsx

@@ -0,0 +1,72 @@
+"use client";
+import React, { useState, ButtonHTMLAttributes, ReactNode } 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";
+import Image from "next/image";
+
+interface ExpandedFloatingBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "orange" | "white";
+  icon?: ReactNode;
+}
+
+const ExpandedFloatingBtn = ({ variant = "orange", className, ...props }: ExpandedFloatingBtnProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  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";
+  const collapsedStyles = "h-12 w-full";
+
+  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",
+  };
+
+  const handleToggle = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  const handleLinkCopy = () => {
+    navigator.clipboard.writeText(window.location.href);
+    toast.success("링크가 복사되었습니다.");
+  };
+
+  return (
+    <button
+      className={cn(baseStyles, variants[variant], isExpanded ? expandedStyles : collapsedStyles, className)}
+      onClick={handleToggle}
+      {...props}
+    >
+      {isExpanded ? (
+        // 확장된 상태일 때 카카오톡 및 링크 아이콘 표시
+        <div className="flex flex-col">
+          <button onClick={() => shareToKakao()} className="flex items-center">
+            <div>
+              <Image
+                src="/icons/social/social_kakao.png"
+                layout="fixed"
+                width={50}
+                height={50}
+                objectFit="cover"
+                alt="카카오톡"
+              />
+            </div>
+          </button>
+          <button onClick={handleLinkCopy} className="mt-2 flex items-center">
+            <div className="rounded-full bg-blue-50 p-3 text-2xl">
+              <FcShare />
+            </div>
+          </button>
+        </div>
+      ) : (
+        // 기본 상태일 때 공유 아이콘 표시
+        <IoShareSocialSharp className="text-2xl" />
+      )}
+    </button>
+  );
+};
+
+export default ExpandedFloatingBtn;