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)/apply/[formId]/page.tsx

@@ -12,6 +12,8 @@ import { useMutation } from "@tanstack/react-query";
 import Label from "../../component/Label";
 import uploadResume from "@/utils/uploadResume";
 import tempSave from "@/utils/tempSave";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import { useState } from "react";
 interface ApplyFormData {
   name: string;
   phoneNumber: string;
@@ -49,6 +51,7 @@ export default function Apply() {
   const router = useRouter();
   const currentValues = getValues();
   const { resume, ...submitData } = currentValues;
+  const [isLoding, setIsLoading] = useState(false);
 
   // 폼 제출 리액트쿼리
   const mutation = useMutation({
@@ -57,8 +60,11 @@ export default function Apply() {
       const response = await axios.post(`/api/forms/${formId}/applications`, submitData);
       console.log("apply 제출 response.data 출력", response.data);
     },
-
+    onMutate: () => {
+      setIsLoading(true); // 로딩 상태 시작
+    },
     onSuccess: () => {
+      setIsLoading(false);
       if (typeof window !== "undefined") {
         window.localStorage.removeItem("tempAddFormData");
       }
@@ -67,6 +73,7 @@ export default function Apply() {
     },
 
     onError: (error) => {
+      setIsLoading(false);
       console.error("에러가 발생했습니다.", error);
       toast.error("에러가 발생했습니다.");
       onTempSave();
@@ -211,7 +218,7 @@ export default function Apply() {
           className="h-[58px] w-full lg:h-[72px] lg:text-xl lg:leading-8"
           disabled={!isValid || !isDirty}
         >
-          작성 완료
+          {isLoding ? <DotLoadingSpinner /> : "작성 완료"}
         </Button>
       </div>
     </form>

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-2xl 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 {