diff --git a/src/features/projects/api/projectsApi.ts b/src/features/projects/api/projectsApi.ts index 32139b2..85ad045 100644 --- a/src/features/projects/api/projectsApi.ts +++ b/src/features/projects/api/projectsApi.ts @@ -1,18 +1,20 @@ import { addDoc, + arrayRemove, + arrayUnion, collection, doc, serverTimestamp, - deleteDoc, updateDoc, - arrayUnion, - arrayRemove, } from "firebase/firestore"; import type { ApiResMessage } from "@entities/projects/types/firebase"; import { db } from "@shared/firebase/firebase"; -import type { ProjectItemInsertReq } from "@shared/types/project"; +import { + RecruitmentStatus, + type ProjectItemInsertReq, +} from "@shared/types/project"; /** firebase projects에 item 등록 */ export const insertProjectItem = async ( @@ -39,25 +41,27 @@ export const insertProjectItem = async ( } }; -/** firebase projectsItem 삭제 */ -export const deleteProjectItem = async (id: string): Promise => { - if (!window.confirm("정말로 삭제하시겠습니까?")) { +/** project 모집 마감 */ +export const doneProjectItem = async (id: string): Promise => { + if (!window.confirm("이대로 프로젝트를 모집을 마감 하시겠습니까?")) { return { success: false, message: "" }; } try { const docRef = doc(db, "projects", id); - await deleteDoc(docRef); + await updateDoc(docRef, { + status: RecruitmentStatus.completed, + }); return { success: true, - message: "프로젝트를 정상적으로 삭제하였습니다.", + message: "프로젝트가 정상적으로 마감 되었습니다.", }; } catch (err) { console.log(err); return { success: false, - message: "프로젝트 삭제에 실패하였습니다.", + message: "프로젝트가 마감되지 않았습니다.", }; } }; diff --git a/src/features/projects/queries/useProjectDelete.ts b/src/features/projects/queries/useProjectDone.ts similarity index 51% rename from src/features/projects/queries/useProjectDelete.ts rename to src/features/projects/queries/useProjectDone.ts index 4457292..8f0ef31 100644 --- a/src/features/projects/queries/useProjectDelete.ts +++ b/src/features/projects/queries/useProjectDone.ts @@ -1,45 +1,42 @@ import { useMutation, type UseMutationResult } from "@tanstack/react-query"; -import { useNavigate } from "react-router-dom"; -import { deleteProjectItem } from "@features/projects/api/projectsApi"; +import { doneProjectItem } from "@features/projects/api/projectsApi"; import type { ApiResMessage } from "@entities/projects/types/firebase"; +import queryClient from "@shared/react-query/queryClient"; import { useAuthStore } from "@shared/stores/authStore"; interface IDsType { - postID: string; + projectID: string; projectOwnerID: string; } -const useProjectDelete = (): UseMutationResult< - ApiResMessage, - Error, - IDsType -> => { - const Navigate = useNavigate(); +const useProjectDone = (): UseMutationResult => { const user = useAuthStore((state) => state.user); return useMutation({ - mutationFn: ({ postID, projectOwnerID }: IDsType) => { + mutationFn: ({ projectID, projectOwnerID }: IDsType) => { if (user?.uid !== projectOwnerID) { throw new Error("삭제 권한이 없습니다."); } - return deleteProjectItem(postID); + return doneProjectItem(projectID); }, - onSuccess: (data) => { + onSuccess: (data, { projectID }) => { if (data.message) { alert(data.message); } - // 게시글 삭제 후 목록페이지로 이동 if (data.success) { - Navigate("/project"); + queryClient.invalidateQueries({ + queryKey: ["project-detail", projectID], + }); + return; } }, onError: (err) => { - alert(err || "정상적으로 삭제되지 않았습니다."); + alert(err || "정상적으로 마감되지 않았습니다."); console.log(err); }, }); }; -export default useProjectDelete; +export default useProjectDone; diff --git a/src/features/projects/ui/ProjectDelete.tsx b/src/features/projects/ui/ProjectDelete.tsx index 7a64e37..f8d57c2 100644 --- a/src/features/projects/ui/ProjectDelete.tsx +++ b/src/features/projects/ui/ProjectDelete.tsx @@ -2,31 +2,51 @@ import { Box, styled, Typography } from "@mui/material"; import type { JSX } from "react"; import { useParams } from "react-router-dom"; -import useProjectDelete from "@features/projects/queries/useProjectDelete"; +import useProjectDelete from "@features/projects/queries/useProjectDone"; -const ProjectDelete = ({ +export const ProjectDone = (): JSX.Element => { + return ( + + 모집 마감 + + ); +}; + +export const ProjectDones = ({ projectOwnerID, }: { projectOwnerID: string; }): JSX.Element => { - const { id: postID } = useParams(); + const { id: projectID } = useParams(); const { mutate: projectdelete, isPending } = useProjectDelete(); - const handleDeleteBtn = (): void => { - if (postID && !isPending) { - projectdelete({ postID, projectOwnerID }); + const handleIsDone = (): void => { + if (projectID && !isPending) { + projectdelete({ projectID, projectOwnerID }); } }; + const handleModify = (): void => { + // Navigate '/project/insert로 이동' + // state로 폼 넘김 + // 이푸 state 존재 여부에 따라 등록, 수정 나눌 예정 + // form을 나눈다면 여기서 나눠서 보낼 수 있도록 ... + alert("아직없어염.."); + }; + return ( - - 프로젝트 삭제 - + + + 수정하기 + + + + 모집 마감 하기 + + ); }; -export default ProjectDelete; - const MessageBtn = styled(Box)` flex: 1; display: flex; @@ -34,12 +54,27 @@ const MessageBtn = styled(Box)` justify-content: center; height: 4rem; border-radius: 4px; - color: white; - background-color: tomato; transition: background-color 0.3s ease; cursor: pointer; - &:hover { - background-color: #e14b30; + &.white { + border: 1px solid #dddddd; + &:hover { + background-color: #f4f4f4; + } + } + + &.red { + color: white; + background-color: tomato; + &:hover { + background-color: #e14b30; + } + } + + &.gray { + color: #303030; + background-color: #f0f0f0; + cursor: default; } `; diff --git a/src/features/projects/ui/ProjectLike.tsx b/src/features/projects/ui/ProjectLike.tsx index 4ef2b4f..b7d3b62 100644 --- a/src/features/projects/ui/ProjectLike.tsx +++ b/src/features/projects/ui/ProjectLike.tsx @@ -67,13 +67,14 @@ const StatusBox = styled("div")` font-size: 12px; font-weight: 600; letter-spacing: 0.025em; - color: white; - border-radius: 50px; + border-radius: 4px; &.ing { + color: white; background-color: black; } &.done { - background-color: ${({ theme }) => theme.palette.primary.main}; + color: #303030; + background-color: #f0f0f0; } `; diff --git a/src/pages/project-detail/ui/ProjectDetailPage.tsx b/src/pages/project-detail/ui/ProjectDetailPage.tsx index 23355ea..d72590b 100644 --- a/src/pages/project-detail/ui/ProjectDetailPage.tsx +++ b/src/pages/project-detail/ui/ProjectDetailPage.tsx @@ -3,9 +3,8 @@ import { type JSX } from "react"; import { useNavigate, useParams } from "react-router-dom"; import ProjectApplyForm from "@features/projects/ui/ProjectApplyForm"; -import ProjectDelete from "@features/projects/ui/ProjectDelete"; +import { ProjectDone, ProjectDones } from "@features/projects/ui/ProjectDelete"; import ProjectLike from "@features/projects/ui/ProjectLike"; -import ProjectModify from "@features/projects/ui/ProjectModify"; import useProjectsItem from "@entities/projects/queries/useProjectsItem"; import ProjectApply from "@entities/projects/ui/post-info/ProjectApply"; @@ -123,11 +122,11 @@ const ProjectDetailPage = (): JSX.Element | null => { - {user?.uid !== project.projectOwner.id ? ( - - - - + + {project.status === "모집완료" ? ( + + ) : user?.uid === project.projectOwner.id ? ( + ) : ( )}