From 954b41b955bfeb16148f097abda54c8a5a914e7d Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Mon, 18 Mar 2024 18:51:35 +0900 Subject: [PATCH 01/11] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=82=AD=EC=A0=9C=EB=B2=84=ED=8A=BC=20ui=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Comments/CommentsForm/CommentsForm.tsx | 1 + .../Summary/SummaryTop/SummaryControl.tsx | 44 ++++++++ .../Summary/SummaryTop/SummaryTop.tsx | 101 ++++++++---------- .../constants/toastMessage.ts | 20 ++-- .../mutations/useDeleteCommentMutation.ts | 4 +- .../hooks/mutations/useDeleteLikeMutation.ts | 2 +- .../mutations/useDeleteProjectMutation.ts | 58 ++++++++++ .../hooks/mutations/useEditCommentMutation.ts | 4 +- .../hooks/mutations/usePostCommentMutation.ts | 4 +- .../hooks/mutations/usePostLikeMutation.ts | 4 +- .../hooks/queries/useProjectDetailQuery.ts | 2 +- 11 files changed, 173 insertions(+), 71 deletions(-) create mode 100644 src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx create mode 100644 src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx index 69dea9ea..d7d1588b 100644 --- a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx +++ b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx @@ -99,6 +99,7 @@ const CommentsForm = ({ isChecked={isAnonymous} size="lg" onChange={handleAnonymous} + color={isAnonymous ? "red.200" : "grey.500"} colorScheme="red"> 익명 diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx new file mode 100644 index 00000000..2a62b641 --- /dev/null +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx @@ -0,0 +1,44 @@ +import { CiMenuKebab } from "react-icons/ci" +import { useNavigate } from "react-router-dom" + +import { + Button, + IconButton, + Popover, + PopoverArrow, + PopoverBody, + PopoverContent, + PopoverTrigger, + VStack, +} from "@chakra-ui/react" + +const SummaryControl = () => { + const navigate = useNavigate() + const handleEditProject = () => { + navigate("/project/edit") + } + const handleDeleteProject = () => {} + return ( + + + } + aria-label="control" + fontSize="3rem" + /> + + + + + + + + + + + + ) +} + +export default SummaryControl diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx index 388fd4ac..bfd75364 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx @@ -1,22 +1,23 @@ import { FaRegComment } from "react-icons/fa" import { IoMdHeart, IoMdHeartEmpty } from "react-icons/io" import { MdRemoveRedEye } from "react-icons/md" -import { PiClipboardText } from "react-icons/pi" -import { useLocation } from "react-router-dom" import { Link } from "react-scroll" -import { Flex, useMediaQuery } from "@chakra-ui/react" +import { Stack, VStack, useMediaQuery } from "@chakra-ui/react" +import { useUserInfoData } from "@services/caches/useUserInfoData" import { useDeleteLikeMutation } from "@pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation" import { usePostLikeMutation } from "@pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation" import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId" +import SummaryControl from "./SummaryControl" import SummaryTopIcon from "./SummaryTopIcon" interface SummaryTopProps extends ProjectIdProps { likeCount: number viewCount: number commentCount: number + ownerId: number likeId: number | null } const SummaryTop = ({ @@ -24,69 +25,59 @@ const SummaryTop = ({ viewCount, commentCount, likeId, + ownerId, projectId, }: SummaryTopProps) => { const [isLargerThan1200] = useMediaQuery(["(min-width: 1200px)"]) - const location = useLocation() - const { VITE_BASE_URL } = import.meta.env - - const handleCopyClipBoard = async (text: string) => { - try { - await navigator.clipboard.writeText(text) - } catch (err) { - console.log(err) - } - } const { postLikeMutation } = usePostLikeMutation() const { deleteLikeMutation } = useDeleteLikeMutation(Number(projectId)) + const user = useUserInfoData() + return ( - - } - fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} - /> + spacing="1.5rem" + align="flex-end"> + + } + fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} + /> - : } - fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} - onClick={(likeId: number | null) => { - if (likeId) { - deleteLikeMutation({ likeId }) - } else { - postLikeMutation({ projectId: Number(projectId) }) - } - }} - /> - } - aria-label="commentButton" - fontSize={isLargerThan1200 ? "2.3rem" : "1.8rem"} + count={likeCount} + likeId={likeId} + aria-label="likeButton" + icon={likeId ? : } + fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} + onClick={(likeId: number | null) => { + if (likeId) { + deleteLikeMutation({ likeId }) + } else { + postLikeMutation({ projectId: Number(projectId) }) + } + }} /> - - - handleCopyClipBoard(`${VITE_BASE_URL}${location.pathname}`) - } - aria-label="clipboardButton" - fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} - icon={} - /> - + + } + aria-label="commentButton" + fontSize={isLargerThan1200 ? "2.3rem" : "1.8rem"} + /> + + + {ownerId === user?.id && } + ) } export default withProjectId(SummaryTop) diff --git a/src/pages/ProjectDetailPage/constants/toastMessage.ts b/src/pages/ProjectDetailPage/constants/toastMessage.ts index 4e294628..fe2fc250 100644 --- a/src/pages/ProjectDetailPage/constants/toastMessage.ts +++ b/src/pages/ProjectDetailPage/constants/toastMessage.ts @@ -4,7 +4,7 @@ export const COMMON_MESSAGES = { export const GET_PROJECT_MESSAGES = { ERROR: { - FAIL: "프로젝트 정보를 불러 오는데 실패했습니다", // 404 + BAD_REQUEST: "프로젝트 정보를 불러 오는데 실패했습니다", UNCAUGHT: "일시적인 오류가 발생하였습니다.", }, } @@ -16,17 +16,25 @@ export const COMMENT_MESSAGES = { EDIT: "댓글이 수정되었습니다", }, ERROR: { - UNVALIDATE: "요청 정보가 유효하지 않습니다.", // 400 - UNAUTHORIZED: "해당 요청에 대한 권한이 없습니다.", // 403 - UNDEFINED: "존재하지 않는 댓글입니다.", // 404 + BAD_REQUEST: "요청 정보가 유효하지 않습니다.", + UNAUTHORIZED: "해당 요청에 대한 권한이 없습니다.", + NOT_FOUND: "존재하지 않는 댓글입니다.", UNCAUGHT: "일시적인 오류가 발생하였습니다.", }, } export const LIKE_MESSAGES = { ERROR: { - UNVALIDATE: "좋아요 요청에 실패했습니다.", // 400, 404 - DUPLICATE: "이미 좋아요를 눌렀습니다.", // 409 + BAD_REQUEST: "좋아요 요청에 실패했습니다.", + CONFLICT: "이미 좋아요를 눌렀습니다.", + UNCAUGHT: "일시적인 오류가 발생하였습니다.", + }, +} + +export const PROJECT__CONTROL_MESSAGES = { + ERROR: { + FORBIDDEN: "삭제 요청에 실패했습니다.", + NOT_FOUND: "해당 요청에 대한 권한이 없습니다.", UNCAUGHT: "일시적인 오류가 발생하였습니다.", }, } diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteCommentMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteCommentMutation.ts index 0cdb8103..595c3a43 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteCommentMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteCommentMutation.ts @@ -40,7 +40,7 @@ export const useDeleteCommentMutation = () => { break } case 400: { - message = COMMENT_MESSAGES.ERROR.UNVALIDATE + message = COMMENT_MESSAGES.ERROR.BAD_REQUEST break } case 403: { @@ -48,7 +48,7 @@ export const useDeleteCommentMutation = () => { break } case 404: { - message = COMMENT_MESSAGES.ERROR.UNDEFINED + message = COMMENT_MESSAGES.ERROR.NOT_FOUND break } default: { diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts index 3ddc14ad..5470f924 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts @@ -74,7 +74,7 @@ export const useDeleteLikeMutation = (projectId: number) => { } case 400: case 404: { - message = LIKE_MESSAGES.ERROR.UNVALIDATE + message = LIKE_MESSAGES.ERROR.BAD_REQUEST break } default: { diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts new file mode 100644 index 00000000..caa1bbc4 --- /dev/null +++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts @@ -0,0 +1,58 @@ +import { useEffect } from "react" +import { useNavigate } from "react-router-dom" + +import { useToast } from "@chakra-ui/react" +import { isAxiosError } from "axios" + +import { useMutation } from "@tanstack/react-query" + +import { deleteProject } from "@apis/project/deleteProject" + +import { + COMMON_MESSAGES, + PROJECT__CONTROL_MESSAGES, +} from "@pages/ProjectDetailPage/constants/toastMessage" + +const QUERY_KEY_POST_LIKE = "DELETE_LIKE_1328940382182" + +export const useDeleteProjectMutation = () => { + const navigate = useNavigate() + const toast = useToast() + + const { mutate: deleteProjectMutation, error } = useMutation({ + mutationKey: [QUERY_KEY_POST_LIKE], + mutationFn: (projectId: number) => deleteProject({ projectId }), + onSuccess: () => { + navigate(-1) + }, + }) + + useEffect(() => { + if (isAxiosError(error)) { + let message = "" + switch (error.response?.status) { + case 500: { + message = COMMON_MESSAGES.SERVER + break + } + case 403: { + message = PROJECT__CONTROL_MESSAGES.ERROR.FORBIDDEN + break + } + case 404: { + message = PROJECT__CONTROL_MESSAGES.ERROR.NOT_FOUND + break + } + default: { + message = PROJECT__CONTROL_MESSAGES.ERROR.UNCAUGHT + } + } + toast({ + status: "error", + title: message, + }) + } + }, [error, toast]) + + return { deleteProjectMutation } +} diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts index 45826e09..584b2cd6 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts @@ -41,7 +41,7 @@ export const useEditCommentMutation = () => { break } case 400: { - message = COMMENT_MESSAGES.ERROR.UNVALIDATE + message = COMMENT_MESSAGES.ERROR.BAD_REQUEST break } case 403: { @@ -49,7 +49,7 @@ export const useEditCommentMutation = () => { break } case 404: { - message = COMMENT_MESSAGES.ERROR.UNDEFINED + message = COMMENT_MESSAGES.ERROR.NOT_FOUND break } default: { diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts index ab224e51..ae286ff7 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts @@ -45,7 +45,7 @@ export const usePostCommentMutation = () => { break } case 400: { - message = COMMENT_MESSAGES.ERROR.UNVALIDATE + message = COMMENT_MESSAGES.ERROR.BAD_REQUEST break } case 403: { @@ -53,7 +53,7 @@ export const usePostCommentMutation = () => { break } case 404: { - message = COMMENT_MESSAGES.ERROR.UNDEFINED + message = COMMENT_MESSAGES.ERROR.NOT_FOUND break } default: { diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts index 80a3c393..37755d81 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts @@ -75,11 +75,11 @@ export const usePostLikeMutation = () => { } case 400: case 404: { - message = LIKE_MESSAGES.ERROR.UNVALIDATE + message = LIKE_MESSAGES.ERROR.BAD_REQUEST break } case 409: { - message = LIKE_MESSAGES.ERROR.DUPLICATE + message = LIKE_MESSAGES.ERROR.CONFLICT break } default: { diff --git a/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts b/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts index 731cfed9..f59fc460 100644 --- a/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts +++ b/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts @@ -30,7 +30,7 @@ export const useProjectDetailQuery = (projectId: number) => { break } case 404: { - message = GET_PROJECT_MESSAGES.ERROR.FAIL + message = GET_PROJECT_MESSAGES.ERROR.BAD_REQUEST break } default: { From 8ef7f38987a6d80209a611ff3a54b964caa00ae7 Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Mon, 18 Mar 2024 20:12:51 +0900 Subject: [PATCH 02/11] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Summary/SummaryTop/SummaryControl.tsx | 15 ++++++++++++--- .../hooks/mutations/useDeleteProjectMutation.ts | 9 ++++++++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx index 2a62b641..156ae9bb 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx @@ -12,12 +12,21 @@ import { VStack, } from "@chakra-ui/react" -const SummaryControl = () => { +import { useDeleteProjectMutation } from "@pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation" + +import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId" + +interface SummaryControl extends ProjectIdProps {} + +const SummaryControl = ({ projectId }: SummaryControl) => { const navigate = useNavigate() + const { deleteProjectMutation } = useDeleteProjectMutation() const handleEditProject = () => { navigate("/project/edit") } - const handleDeleteProject = () => {} + const handleDeleteProject = () => { + deleteProjectMutation(Number(projectId)) + } return ( @@ -41,4 +50,4 @@ const SummaryControl = () => { ) } -export default SummaryControl +export default withProjectId(SummaryControl) diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts index caa1bbc4..6f3a1bab 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts @@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom" import { useToast } from "@chakra-ui/react" import { isAxiosError } from "axios" -import { useMutation } from "@tanstack/react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { deleteProject } from "@apis/project/deleteProject" @@ -13,16 +13,23 @@ import { PROJECT__CONTROL_MESSAGES, } from "@pages/ProjectDetailPage/constants/toastMessage" +import { QUERYKEY } from "../../../../constants/queryKey" + const QUERY_KEY_POST_LIKE = "DELETE_LIKE_1328940382182" export const useDeleteProjectMutation = () => { const navigate = useNavigate() const toast = useToast() + const queryClient = useQueryClient() const { mutate: deleteProjectMutation, error } = useMutation({ mutationKey: [QUERY_KEY_POST_LIKE], mutationFn: (projectId: number) => deleteProject({ projectId }), onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [QUERYKEY.ALL_PROJECTS], + }) + navigate(-1) }, }) From 13c18d034287f134cc3a3764c80ad03178d42dd9 Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Tue, 19 Mar 2024 01:19:27 +0900 Subject: [PATCH 03/11] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=A3=EC=A7=80=EC=BC=80?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/index.ts | 4 ++-- .../components/Summary/SummaryContent/SummaryRight.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/mocks/index.ts b/src/mocks/index.ts index 39c58d61..b841410b 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -1,4 +1,4 @@ export const initMsw = async () => { - const { worker } = await import("./browser") - worker.start() + // const { worker } = await import("./browser") + // worker.start() } diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx index 9baa788e..471d601d 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx @@ -31,11 +31,13 @@ const SummaryRight = ({ overviewImageUrl }: SummaryRightProps) => { const swiperRef = useRef() + console.log(overviewImageUrl) + return ( - {overviewImageUrl.length > 0 ? ( + {overviewImageUrl.length > 1 ? ( (swiperRef.current = swiper)}> @@ -56,8 +58,7 @@ const SummaryRight = ({ overviewImageUrl }: SummaryRightProps) => { fallbackSrc={noImage} /> )} - - {isLargerThan1200 && overviewImageUrl.length > 0 && ( + {isLargerThan1200 && overviewImageUrl.length > 1 && ( <> Date: Tue, 19 Mar 2024 10:11:13 +0900 Subject: [PATCH 04/11] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=82=AD=EC=A0=9C=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SummaryTop/ProjectDeleteCheckModal.tsx | 74 +++++++++++++++++++ .../Summary/SummaryTop/SummaryControl.tsx | 20 ++--- .../SummaryTop/SummaryControlButton.tsx | 3 + .../Summary/SummaryTop/SummaryTop.tsx | 14 +++- 4 files changed, 97 insertions(+), 14 deletions(-) create mode 100644 src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx create mode 100644 src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControlButton.tsx diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx new file mode 100644 index 00000000..6fdb3940 --- /dev/null +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx @@ -0,0 +1,74 @@ +import { + Button, + Modal, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Text, +} from "@chakra-ui/react" + +import { useDeleteProjectMutation } from "@pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation" + +interface ProjectDeleteCheckModalProps { + isOpen: boolean + onClose: () => void + projectId: string +} + +const ProjectDeleteCheckModal = ({ + isOpen, + onClose, + projectId, +}: ProjectDeleteCheckModalProps) => { + const { deleteProjectMutation } = useDeleteProjectMutation() + + const handleDeleteProject = () => { + onClose() + deleteProjectMutation(Number(projectId)) + } + + return ( + + + + 정말로 삭제하시겠습니까? + + 삭제된 게시물은 복구할 수 없습니다! + + + + + + + ) +} + +export default ProjectDeleteCheckModal diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx index 156ae9bb..26eba34a 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx @@ -12,21 +12,17 @@ import { VStack, } from "@chakra-ui/react" -import { useDeleteProjectMutation } from "@pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation" - -import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId" - -interface SummaryControl extends ProjectIdProps {} +interface SummaryControlProps { + onOpen: () => void +} -const SummaryControl = ({ projectId }: SummaryControl) => { +const SummaryControl = ({ onOpen }: SummaryControlProps) => { const navigate = useNavigate() - const { deleteProjectMutation } = useDeleteProjectMutation() + const handleEditProject = () => { navigate("/project/edit") } - const handleDeleteProject = () => { - deleteProjectMutation(Number(projectId)) - } + return ( @@ -42,7 +38,7 @@ const SummaryControl = ({ projectId }: SummaryControl) => { - + @@ -50,4 +46,4 @@ const SummaryControl = ({ projectId }: SummaryControl) => { ) } -export default withProjectId(SummaryControl) +export default SummaryControl diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControlButton.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControlButton.tsx new file mode 100644 index 00000000..0a386a86 --- /dev/null +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControlButton.tsx @@ -0,0 +1,3 @@ +const SummaryControlButton = () => {} + +export default SummaryControlButton diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx index bfd75364..be29cd90 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx @@ -3,13 +3,14 @@ import { IoMdHeart, IoMdHeartEmpty } from "react-icons/io" import { MdRemoveRedEye } from "react-icons/md" import { Link } from "react-scroll" -import { Stack, VStack, useMediaQuery } from "@chakra-ui/react" +import { Stack, VStack, useDisclosure, useMediaQuery } from "@chakra-ui/react" import { useUserInfoData } from "@services/caches/useUserInfoData" import { useDeleteLikeMutation } from "@pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation" import { usePostLikeMutation } from "@pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation" import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId" +import ProjectDeleteCheckModal from "./ProjectDeleteCheckModal" import SummaryControl from "./SummaryControl" import SummaryTopIcon from "./SummaryTopIcon" @@ -32,6 +33,8 @@ const SummaryTop = ({ const { postLikeMutation } = usePostLikeMutation() const { deleteLikeMutation } = useDeleteLikeMutation(Number(projectId)) + const { isOpen, onOpen, onClose } = useDisclosure() + console.log(isOpen) const user = useUserInfoData() return ( @@ -76,7 +79,14 @@ const SummaryTop = ({ /> - {ownerId === user?.id && } + {ownerId === user?.id && } + {isOpen && ( + + )} ) } From e13d8ea1e81ca7072de3a4e161fdd0078326ca9a Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Tue, 19 Mar 2024 10:43:56 +0900 Subject: [PATCH 05/11] =?UTF-8?q?[Design=20=F0=9F=8E=A8]=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx index 6fdb3940..8f0e5103 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/ProjectDeleteCheckModal.tsx @@ -42,7 +42,7 @@ const ProjectDeleteCheckModal = ({ 정말로 삭제하시겠습니까? - 삭제된 게시물은 복구할 수 없습니다! + 삭제된 게시물은 복구할 수 없습니다! - + + + + From 63e5d5dd2c7e3b638f8cd9f79a81aa38c0bffb22 Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Tue, 19 Mar 2024 11:00:01 +0900 Subject: [PATCH 07/11] =?UTF-8?q?[Design=20=F0=9F=8E=A8]=20Viewcount=20?= =?UTF-8?q?=EC=BB=A4=EC=84=9C=20=ED=8F=AC=EC=9D=B8=ED=84=B0=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Summary/SummaryTop/SummaryTop.tsx | 1 - .../components/Summary/SummaryTop/SummaryTopIcon.tsx | 11 +++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx index be29cd90..a8803ae5 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx @@ -34,7 +34,6 @@ const SummaryTop = ({ const { postLikeMutation } = usePostLikeMutation() const { deleteLikeMutation } = useDeleteLikeMutation(Number(projectId)) const { isOpen, onOpen, onClose } = useDisclosure() - console.log(isOpen) const user = useUserInfoData() return ( diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx index 71383a9d..0825cd09 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx @@ -35,10 +35,17 @@ const SummaryTopIcon = ({ - {isLike ? : } + {isLike ? ( + + ) : ( + + )} {count} ) From e779c17b30faa7132eee39c647670e361be05046 Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Tue, 19 Mar 2024 11:03:39 +0900 Subject: [PATCH 08/11] =?UTF-8?q?[Design=20=F0=9F=8E=A8]=20768=20=EB=84=88?= =?UTF-8?q?=EB=B9=84=20=EC=9D=B4=ED=95=98=EC=8B=9C=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=EC=9A=94=EB=A7=8C=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Summary/SummaryTop/SummaryTop.tsx | 41 +++++++++++-------- .../Summary/SummaryTop/SummaryTopIcon.tsx | 2 +- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx index a8803ae5..192c9a9e 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx @@ -30,6 +30,7 @@ const SummaryTop = ({ projectId, }: SummaryTopProps) => { const [isLargerThan1200] = useMediaQuery(["(min-width: 1200px)"]) + const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"]) const { postLikeMutation } = usePostLikeMutation() const { deleteLikeMutation } = useDeleteLikeMutation(Number(projectId)) @@ -44,12 +45,14 @@ const SummaryTop = ({ - } - fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} - /> + {isLargerThan768 && ( + } + fontSize={isLargerThan1200 ? "2.7rem" : "2rem"} + /> + )} - - } - aria-label="commentButton" - fontSize={isLargerThan1200 ? "2.3rem" : "1.8rem"} - /> - + {isLargerThan768 && ( + + } + aria-label="commentButton" + fontSize={isLargerThan1200 ? "2.3rem" : "1.8rem"} + /> + + )} {ownerId === user?.id && } {isOpen && ( diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx index 0825cd09..5ff3d3b0 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx @@ -33,7 +33,7 @@ const SummaryTopIcon = ({ return ( Date: Tue, 19 Mar 2024 11:11:05 +0900 Subject: [PATCH 09/11] =?UTF-8?q?[Remove=20=F0=9F=97=91=EF=B8=8F]=20?= =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Comments/CommentsForm/CommentsForm.tsx | 1 - .../Comments/CommentsItem/CommentsItem.tsx | 1 - .../Summary/SummaryContent/SummaryRight.tsx | 2 -- .../hooks/mutations/useDeleteLikeMutation.ts | 3 +-- .../hooks/mutations/usePostLikeMutation.ts | 3 +-- src/pages/ProjectDetailPage/mocks/index.ts | 12 ------------ src/pages/ProjectDetailPage/store/CommentContext.tsx | 1 - 7 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx index d7d1588b..4fd4d03f 100644 --- a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx +++ b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx @@ -1,4 +1,3 @@ -// TODO: 익명 처리 import { useCallback, useState } from "react" import { SubmitHandler, useForm } from "react-hook-form" import ResizeTextarea from "react-textarea-autosize" diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx index ca5e9575..ad40b653 100644 --- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx +++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx @@ -1,4 +1,3 @@ -// TODO: 1. 포커스 자동 조정(register edit name 사용) import { UseFormRegisterReturn } from "react-hook-form" import { useNavigate } from "react-router-dom" diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx index 471d601d..70bba816 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx @@ -31,8 +31,6 @@ const SummaryRight = ({ overviewImageUrl }: SummaryRightProps) => { const swiperRef = useRef() - console.log(overviewImageUrl) - return ( { return { previousLikeState } }, - onError: (err, _, context) => { - console.log(err) + onError: (_, __, context) => { queryClient.setQueryData( [QUERY_KEY_GET_PROJECT_DETAIL, projectId], context?.previousLikeState, diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts index 37755d81..ac42d8bf 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts @@ -51,8 +51,7 @@ export const usePostLikeMutation = () => { return { previousLikeState } }, - onError: (err, _, context) => { - console.log(err) + onError: (_, __, context) => { queryClient.setQueryData( [QUERY_KEY_GET_PROJECT_DETAIL], context?.previousLikeState, diff --git a/src/pages/ProjectDetailPage/mocks/index.ts b/src/pages/ProjectDetailPage/mocks/index.ts index a7869e09..0e771834 100644 --- a/src/pages/ProjectDetailPage/mocks/index.ts +++ b/src/pages/ProjectDetailPage/mocks/index.ts @@ -6,16 +6,4 @@ export const projectDetailHandlers = [ rest.get("/api/v1/projects/:projectId", (_, res, ctx) => { return res(ctx.status(200), ctx.json(DUMMY_PROJECT_DETAIL)) }), - - // rest.post("/api/v1/projects/:projectId/comments", (req, res, ctx) => { - // DUMMY_PROJECT_DETAIL.projects.comments.push(req.body) - // return res(ctx.status(200)) - // }), - - // rest.delete("/api/v1/projects/:projectId/comments/:id", (req, res, ctx) => { - // const commentIdx = DUMMY_PROJECT_DETAIL.projects.comments.findIndex( - // (comment: Comment) => Number(comment.id) === Number(req.params.id), - // ) - // DUMMY_PROJECT_DETAIL.projects.comments.splice(commentIdx, 1) - // return res(ctx.status(200)) ] diff --git a/src/pages/ProjectDetailPage/store/CommentContext.tsx b/src/pages/ProjectDetailPage/store/CommentContext.tsx index c7339853..90467365 100644 --- a/src/pages/ProjectDetailPage/store/CommentContext.tsx +++ b/src/pages/ProjectDetailPage/store/CommentContext.tsx @@ -18,7 +18,6 @@ const CommentContext = createContext({ handleOffEdit: () => {}, handleDelete: () => {}, onSubmitEdit: () => {}, - // 좀 문제임 register: undefined, handleSubmit: undefined, }) From bc7826b3ac8aa41e1e9772655a4c34b14a2d7907 Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Tue, 19 Mar 2024 12:05:56 +0900 Subject: [PATCH 10/11] =?UTF-8?q?[Remove=20=F0=9F=97=91=EF=B8=8F]=20msw=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mocks/index.ts b/src/mocks/index.ts index b841410b..39c58d61 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -1,4 +1,4 @@ export const initMsw = async () => { - // const { worker } = await import("./browser") - // worker.start() + const { worker } = await import("./browser") + worker.start() } From d4c39f920bbdb777276da024b2f681a994d17299 Mon Sep 17 00:00:00 2001 From: Whoknow77 Date: Tue, 19 Mar 2024 12:36:42 +0900 Subject: [PATCH 11/11] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=ED=82=A4=20=EC=A0=84=EC=97=AD=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=BA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/queryKey.ts | 8 ++++++ src/mocks/index.ts | 4 +-- .../ProjectDetailPage/ProjectDetailPage.tsx | 3 +-- .../Comments/CommentsForm/CommentsForm.tsx | 2 +- .../components/Comments/Hoc/withProjectId.tsx | 25 ------------------- .../Summary/SummaryContent/SummaryRight.tsx | 2 +- .../mutations/useDeleteCommentMutation.ts | 8 +++--- .../hooks/mutations/useDeleteLikeMutation.ts | 16 ++++++------ .../mutations/useDeleteProjectMutation.ts | 4 +-- .../hooks/mutations/useEditCommentMutation.ts | 8 +++--- .../hooks/mutations/usePostCommentMutation.ts | 8 +++--- .../hooks/mutations/usePostLikeMutation.ts | 16 ++++++------ .../hooks/queries/useProjectDetailQuery.ts | 5 ++-- 13 files changed, 40 insertions(+), 69 deletions(-) delete mode 100644 src/pages/ProjectDetailPage/components/Comments/Hoc/withProjectId.tsx diff --git a/src/constants/queryKey.ts b/src/constants/queryKey.ts index dcd32f76..63b5a959 100644 --- a/src/constants/queryKey.ts +++ b/src/constants/queryKey.ts @@ -3,4 +3,12 @@ export const QUERYKEY = { TECH_STACKS: "techStacks", ALL_PROJECTS: "allProjects", BANNER_PROJECTS: "bannerProjects", + PROJECT_DETAIL: "projectDetail", + DELETE_PROJECT: "deleteProject", + + POST_LIKE: "postLike", + DELETE_LIKE: "deleteLike", + POST_COMMENT: "postComment", + EDIT_COMMENT: "editComment", + DELETE_COMMENT: "deleteComment", } diff --git a/src/mocks/index.ts b/src/mocks/index.ts index 39c58d61..b841410b 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -1,4 +1,4 @@ export const initMsw = async () => { - const { worker } = await import("./browser") - worker.start() + // const { worker } = await import("./browser") + // worker.start() } diff --git a/src/pages/ProjectDetailPage/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage/ProjectDetailPage.tsx index cea198cc..b6dfec1c 100644 --- a/src/pages/ProjectDetailPage/ProjectDetailPage.tsx +++ b/src/pages/ProjectDetailPage/ProjectDetailPage.tsx @@ -3,9 +3,8 @@ import { Box, Flex, useMediaQuery } from "@chakra-ui/react" import FullScreenSpinner from "@components/LoadingComponents/FullScreenSpinner" import Comments from "./components/Comments/Comments" -import { withProjectId } from "./components/Comments/Hoc/withProjectId" -import { ProjectIdProps } from "./components/Comments/Hoc/withProjectId" import Content from "./components/Content/Content" +import { ProjectIdProps, withProjectId } from "./components/Hoc/withProjectId" import Summary from "./components/Summary/Summary" import { useProjectDetailQuery } from "./hooks/queries/useProjectDetailQuery" diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx index 4fd4d03f..c3c00644 100644 --- a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx +++ b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx @@ -16,7 +16,7 @@ import { useUserInfoData } from "@services/caches/useUserInfoData" import { usePostCommentMutation } from "@pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation" import { CommentFormValues } from "../../../types/commentFormValues" -import { ProjectIdProps, withProjectId } from "../Hoc/withProjectId" +import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId" interface CommentsFormProps extends ProjectIdProps { parentId?: number | null diff --git a/src/pages/ProjectDetailPage/components/Comments/Hoc/withProjectId.tsx b/src/pages/ProjectDetailPage/components/Comments/Hoc/withProjectId.tsx deleted file mode 100644 index 46ad3764..00000000 --- a/src/pages/ProjectDetailPage/components/Comments/Hoc/withProjectId.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentType } from "react" -import { useParams } from "react-router-dom" - -export interface ProjectIdProps { - projectId: string -} - -export const withProjectId =

( - WrappedComponent: ComponentType

, -) => { - const ComponentWithProjectId = (props: Omit) => { - const { projectId } = useParams() - - if (!projectId) { - return null - } - return ( - - ) - } - return ComponentWithProjectId -} diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx index 70bba816..dbed7393 100644 --- a/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx +++ b/src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx @@ -33,7 +33,7 @@ const SummaryRight = ({ overviewImageUrl }: SummaryRightProps) => { return ( {overviewImageUrl.length > 1 ? ( { const queryClient = useQueryClient() const toast = useToast(toastOptions) const { mutate: deleteCommentMutation, error } = useMutation({ - mutationKey: [QUERY_KEY_DELETE_COMMENT], + mutationKey: [QUERYKEY.DELETE_COMMENT], mutationFn: (commentId: number) => deleteComment({ commentId }), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL], + queryKey: [QUERYKEY.PROJECT_DETAIL], }) }, }) diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts index f9459820..fd43c2d7 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts @@ -15,23 +15,21 @@ import { } from "@pages/ProjectDetailPage/constants/toastMessage" import { toastOptions } from "@pages/SignUpPage/constants/toastOptions" -import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery" - -const QUERY_KEY_POST_LIKE = "DELETE_LIKE_1328940382182" +import { QUERYKEY } from "@constants/queryKey" export const useDeleteLikeMutation = (projectId: number) => { const queryClient = useQueryClient() const toast = useToast(toastOptions) const { mutate: deleteLikeMutation, error } = useMutation({ - mutationKey: [QUERY_KEY_POST_LIKE], + mutationKey: [QUERYKEY.DELETE_LIKE], mutationFn: (data: deleteLikePayload) => deleteLike(data), onMutate: async () => { await queryClient.cancelQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + queryKey: [QUERYKEY.PROJECT_DETAIL, projectId], }) const previousLikeState = queryClient.getQueryData([ - QUERY_KEY_GET_PROJECT_DETAIL, + QUERYKEY.PROJECT_DETAIL, projectId, ]) @@ -42,7 +40,7 @@ export const useDeleteLikeMutation = (projectId: number) => { likeCount: previousLikeState.likeCount - 1, } queryClient.setQueryData( - [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + [QUERYKEY.PROJECT_DETAIL, projectId], updatedLikeState, ) } @@ -52,13 +50,13 @@ export const useDeleteLikeMutation = (projectId: number) => { onError: (_, __, context) => { queryClient.setQueryData( - [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + [QUERYKEY.PROJECT_DETAIL, projectId], context?.previousLikeState, ) }, onSettled: () => { queryClient.invalidateQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + queryKey: [QUERYKEY.PROJECT_DETAIL, projectId], }) }, }) diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts index 6f3a1bab..d8cd83d0 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteProjectMutation.ts @@ -15,15 +15,13 @@ import { import { QUERYKEY } from "../../../../constants/queryKey" -const QUERY_KEY_POST_LIKE = "DELETE_LIKE_1328940382182" - export const useDeleteProjectMutation = () => { const navigate = useNavigate() const toast = useToast() const queryClient = useQueryClient() const { mutate: deleteProjectMutation, error } = useMutation({ - mutationKey: [QUERY_KEY_POST_LIKE], + mutationKey: [QUERYKEY.DELETE_PROJECT], mutationFn: (projectId: number) => deleteProject({ projectId }), onSuccess: () => { queryClient.invalidateQueries({ diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts index 584b2cd6..2601e492 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/useEditCommentMutation.ts @@ -14,20 +14,18 @@ import { } from "@pages/ProjectDetailPage/constants/toastMessage" import { toastOptions } from "@pages/SignUpPage/constants/toastOptions" -import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery" - -const QUERY_KEY_EDIT_COMMENT = "EDIT_COMMENT_234893204832" +import { QUERYKEY } from "@constants/queryKey" export const useEditCommentMutation = () => { const queryClient = useQueryClient() const toast = useToast(toastOptions) const { mutate: editCommentMutation, error } = useMutation({ - mutationKey: [QUERY_KEY_EDIT_COMMENT], + mutationKey: [QUERYKEY.EDIT_COMMENT], mutationFn: (data: editCommentPayload) => editComment(data), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL], + queryKey: [QUERYKEY.PROJECT_DETAIL], }) }, }) diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts index ae286ff7..435b87eb 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation.ts @@ -14,20 +14,18 @@ import { } from "@pages/ProjectDetailPage/constants/toastMessage" import { toastOptions } from "@pages/SignUpPage/constants/toastOptions" -import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery" - -const QUERY_KEY_POST_COMMENT = "POST_COMMENT_2384902384" +import { QUERYKEY } from "@constants/queryKey" export const usePostCommentMutation = () => { const queryClient = useQueryClient() const toast = useToast(toastOptions) const { mutate: sendCommentMutation, error } = useMutation({ - mutationKey: [QUERY_KEY_POST_COMMENT], + mutationKey: [QUERYKEY.POST_COMMENT], mutationFn: (data: postCommentPayload) => postComment(data), onSuccess: (_, { projectId }) => { queryClient.invalidateQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + queryKey: [QUERYKEY.PROJECT_DETAIL, projectId], }) toast({ status: "success", diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts index ac42d8bf..0f010d27 100644 --- a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts +++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts @@ -15,24 +15,22 @@ import { } from "@pages/ProjectDetailPage/constants/toastMessage" import { toastOptions } from "@pages/SignUpPage/constants/toastOptions" -import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery" - -const QUERY_KEY_POST_LIKE = "POST_LIKE_234893204832" +import { QUERYKEY } from "@constants/queryKey" export const usePostLikeMutation = () => { const queryClient = useQueryClient() const toast = useToast(toastOptions) const { mutate: postLikeMutation, error } = useMutation({ - mutationKey: [QUERY_KEY_POST_LIKE], + mutationKey: [QUERYKEY.POST_LIKE], mutationFn: (data: postLikePayload) => postLike(data), onMutate: async ({ projectId }) => { await queryClient.cancelQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL], + queryKey: [QUERYKEY.PROJECT_DETAIL], }) const previousLikeState = queryClient.getQueryData([ - QUERY_KEY_GET_PROJECT_DETAIL, + QUERYKEY.PROJECT_DETAIL, projectId, ]) @@ -43,7 +41,7 @@ export const usePostLikeMutation = () => { likeCount: previousLikeState.likeCount + 1, } queryClient.setQueryData( - [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + [QUERYKEY.PROJECT_DETAIL, projectId], updatedLikeState, ) } @@ -53,13 +51,13 @@ export const usePostLikeMutation = () => { onError: (_, __, context) => { queryClient.setQueryData( - [QUERY_KEY_GET_PROJECT_DETAIL], + [QUERYKEY.PROJECT_DETAIL], context?.previousLikeState, ) }, onSettled: (_, __, { projectId }) => { queryClient.invalidateQueries({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + queryKey: [QUERYKEY.PROJECT_DETAIL, projectId], }) }, }) diff --git a/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts b/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts index f59fc460..dece4c62 100644 --- a/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts +++ b/src/pages/ProjectDetailPage/hooks/queries/useProjectDetailQuery.ts @@ -13,11 +13,12 @@ import { } from "@pages/ProjectDetailPage/constants/toastMessage" import { toastOptions } from "@pages/SignUpPage/constants/toastOptions" -export const QUERY_KEY_GET_PROJECT_DETAIL = "GET_PROJECT_DETAIL_1389471984712" +import { QUERYKEY } from "@constants/queryKey" + export const useProjectDetailQuery = (projectId: number) => { const toast = useToast(toastOptions) const { data: projectDetailInfo, error } = useQuery({ - queryKey: [QUERY_KEY_GET_PROJECT_DETAIL, projectId], + queryKey: [QUERYKEY.PROJECT_DETAIL, projectId], queryFn: () => getProjectDetail({ projectId }), })