Merge pull request #122 from FE9-2/refactor/albaFormDetail

Refactor: 알바폼 상세페이지 지원자/사장님 같은 url에서 분기

Author: hongggyelim

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import FormHeader from "../components/FormHeader";
+import FormDetails from "../components/FormDetail";
+import RecruitInformation from "../components/RecruitInfomation";
+import ApplicationStatus from "../components/ApplicationStatus";
+import { useFormDetail } from "@/hooks/queries/form/detail/useFormDetail";
+
+export default function AlbaFormDetailPage() {
+  const { formId } = useParams(); // useParams로 formId 추출
+  const [formIdState, setFormIdState] = useState<number>(0);
+  const { user } = useUser();
+  const isOwner = user?.role === "OWNER";
+
+  useEffect(() => {
+    // formId가 문자열로 전달되므로 숫자로 변환하여 상태에 저장
+    if (formId) {
+      setFormIdState(Number(formId)); // formId를 숫자로 변환하여 상태에 저장
+    }
+  }, [formId]);
+
+  // formId가 설정되면 useFormDetail 호출
+  const { albaFormDetailData, isLoading, error } = useFormDetail({ formId: formIdState });
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (error) return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
+
+  if (!albaFormDetailData) return <div>데이터가 없습니다.</div>;
+
+  return (
+    <div className="container flex min-h-screen flex-col">
+      <div className="h-[562px] bg-black-100">사진영역</div>
+      <div className="mt-20 flex justify-between">
+        {/* 왼쪽 영역 */}
+        <div className="w-[770px] space-y-10">
+          <FormHeader albaFormDetailData={albaFormDetailData} />
+          <FormDetails albaFormDetailData={albaFormDetailData} />
+          {/* 지도 영역 */}
+          <div className="h-[400px] bg-black-100">카카오지도</div>
+        </div>
+        {/* 오른쪽 영역 */}
+        <div className="flex w-[640px] flex-col space-y-12">
+          <RecruitInformation albaFormDetailData={albaFormDetailData} />
+        </div>
+      </div>
+      {/* 지원 현황 */}
+      {isOwner && <ApplicationStatus formId={formIdState} />}
+    </div>
+  );
+}

src/app/(pages)/alba/components/ApplicationStatus.tsx

@@ -0,0 +1,37 @@
+import ApplicationStatusCard from "@/app/components/card/cardList/ApplicationStatusCard";
+import { useApplicationStatus } from "@/hooks/queries/form/detail/useApplicationStatus";
+import React from "react";
+
+interface ApplicationStatusProps {
+  formId: number;
+}
+
+export default function ApplicationStatus({ formId }: ApplicationStatusProps) {
+  const { applicationStatusData, isLoading, error } = useApplicationStatus({
+    formId,
+    limit: 5, // 요청당 데이터 수 제한
+  });
+
+  if (isLoading) return <div>지원 현황을 불러오는 중입니다...</div>;
+  if (error && "status" in error) {
+    if (error.status === 403) {
+      return (
+        <div>
+          <p>지원 현황을 볼 권한이 없습니다.</p>
+          <p>{error.message}</p>
+        </div>
+      );
+    }
+    console.log("지원현황 에러", error);
+  }
+  if (error || !applicationStatusData) return <div>지원 현황 데이터를 불러오는데 실패했습니다.</div>;
+  console.log("applicationStatusData:", applicationStatusData);
+
+  return (
+    <div className="space-y-4 text-2xl">
+      <p className="text-3xl font-bold">지원 현황</p>
+
+      <ApplicationStatusCard applicationStatusData={applicationStatusData.data} />
+    </div>
+  );
+}

src/app/(pages)/alba/components/FormActions.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Button from "@/app/components/button/default/Button";
+import { FcEmptyTrash } from "react-icons/fc";
+import { FcEditImage } from "react-icons/fc";
+import { FcFile } from "react-icons/fc";
+import { FcSearch } from "react-icons/fc";
+
+interface FormActionsProps {
+  isOwner: boolean;
+}
+
+export default function FormActions({ isOwner }: FormActionsProps) {
+  return (
+    <div className="space-y-4 text-2xl">
+      <Button className="h-16" width="lg" icon={isOwner ? <FcEditImage /> : <FcFile />}>
+        {isOwner ? "수정하기" : "지원하기"}
+      </Button>
+      <Button className="h-16" width="lg" icon={isOwner ? <FcEmptyTrash /> : <FcSearch />} variant="outlined">
+        {isOwner ? "삭제하기" : "내 지원내역 보기"}
+      </Button>
+    </div>
+  );
+}

src/app/(pages)/alba/components/FormDetail.tsx

@@ -0,0 +1,36 @@
+import { FormDetailResponse } from "@/types/response/form";
+import React from "react";
+import toast from "react-hot-toast";
+
+interface FormDetailsProps {
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function FormDetails({ albaFormDetailData }: FormDetailsProps) {
+  const handleCopyLocation = () => {
+    navigator.clipboard.writeText(albaFormDetailData.location);
+    toast.success("근무지역이 복사되었습니다.");
+  };
+
+  return (
+    <>
+      <div className="mb-4 flex items-end gap-4">
+        <span className="text-2xl text-black-400 underline">{albaFormDetailData.storeName || "가게명"}</span>
+        <span className="text-xl text-grayscale-500">
+          {albaFormDetailData.location || "위치"} ・ {"경력 정보 없음"}
+        </span>
+      </div>
+      <p className="text-3xl font-bold">{albaFormDetailData.title}</p>
+      <div className="space-y-32">
+        <div className="text-2xl">{albaFormDetailData.description}</div>
+        <p className="text-3xl font-bold">근무 지역</p>
+      </div>
+      <div className="flex space-x-5 text-2xl">
+        <p>{albaFormDetailData.location}</p>
+        <button className="text-xl text-primary-orange-300" onClick={handleCopyLocation}>
+          복사
+        </button>
+      </div>
+    </>
+  );
+}

src/app/(pages)/alba/components/FormHeader.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Chip from "@/app/components/chip/Chip";
+import { FormDetailResponse } from "@/types/response/form";
+
+interface FormHeaderProps {
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function FormHeader({ albaFormDetailData }: FormHeaderProps) {
+  const recruitmentStatus = new Date(albaFormDetailData.recruitmentEndDate) > new Date() ? "모집중" : "모집완료";
+  return (
+    <div className="flex items-center">
+      <Chip
+        label={albaFormDetailData.isPublic ? "공개" : "비공개"}
+        variant={albaFormDetailData.isPublic ? "positive" : "negative"}
+      />
+      <Chip label={recruitmentStatus} variant="positive" />
+      <p className="ml-2 text-lg text-grayscale-500">{new Date(albaFormDetailData.createdAt).toLocaleString()} 등록</p>
+    </div>
+  );
+}

src/app/(pages)/alba/components/RecruitInfomation.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import RecruitDetail from "@/app/components/card/cardList/RecruitDetail";
+import RecruitIcon from "@/app/components/card/cardList/RecruitIcon";
+import RecruitCondition from "@/app/components/card/cardList/RecruitCondition";
+import { FormDetailResponse } from "@/types/response/form";
+import FormActions from "./FormActions";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+
+interface FormDetailsProps {
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function RecruitInformation({ albaFormDetailData }: FormDetailsProps) {
+  const { user } = useUser();
+  const isOwner = user?.role === "OWNER";
+
+  const recruitmentDetails = {
+    hourlyWage: albaFormDetailData.hourlyWage,
+    recruitmentStartDate: new Date(albaFormDetailData.recruitmentStartDate),
+    recruitmentEndDate: new Date(albaFormDetailData.recruitmentEndDate),
+    isNegotiableWorkDays: albaFormDetailData.isNegotiableWorkDays,
+    workDays: albaFormDetailData.workDays,
+    workStartTime: albaFormDetailData.workStartTime,
+    workEndTime: albaFormDetailData.workEndTime,
+  };
+
+  return (
+    <>
+      <RecruitIcon {...recruitmentDetails} />
+      <RecruitDetail recruitData={albaFormDetailData} />
+      <FormActions isOwner={isOwner} />
+
+      <p className="text-3xl font-bold">모집 조건</p>
+      <RecruitCondition recruitData={albaFormDetailData} />
+    </>
+  );
+}

src/app/(pages)/albaFormDetail/layout.tsx src/app/(pages)/alba/layout.tsxsrc/app/(pages)/albaFormDetail/layout.tsx renamed to src/app/(pages)/alba/layout.tsx

@@ -149,7 +149,9 @@ export default function AlbaList() {
                 <React.Fragment key={page.nextCursor}>
                   {page.data.map((form) => (
                     <div key={form.id}>
-                      <AlbaListItem {...form} />
+                      <Link href={`/alba/${form.id}`}>
+                        <AlbaListItem {...form} />
+                      </Link>
                     </div>
                   ))}
                 </React.Fragment>