[feature/projectDetail/button] 프로젝트 상세정보 페이지 수정/삭제 버튼 추가

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",
 }

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()
 }

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"
 

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"
@@ -17,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
@@ -99,6 +98,7 @@ const CommentsForm = ({
                   isChecked={isAnonymous}
                   size="lg"
                   onChange={handleAnonymous}
+                  color={isAnonymous ? "red.200" : "grey.500"}
                   colorScheme="red">
                   익명
                 </Checkbox>

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"
 

src/pages/ProjectDetailPage/components/Summary/SummaryContent/SummaryRight.tsx

@@ -33,9 +33,9 @@ const SummaryRight = ({ overviewImageUrl }: SummaryRightProps) => {
 
   return (
     <Box
-      maxW={isLargerThan1200 ? "50%" : isLargerThan768 ? "75rem" : "100%"}
+      maxW={isLargerThan1200 ? "40%" : isLargerThan768 ? "50%" : "100%"}
       position="relative">
-      {overviewImageUrl.length > 0 ? (
+      {overviewImageUrl.length > 1 ? (
         <StyledSwiper
           {...swiperParams}
           onBeforeInit={(swiper) => (swiperRef.current = swiper)}>
@@ -56,8 +56,7 @@ const SummaryRight = ({ overviewImageUrl }: SummaryRightProps) => {
           fallbackSrc={noImage}
         />
       )}
-
-      {isLargerThan1200 && overviewImageUrl.length > 0 && (
+      {isLargerThan1200 && overviewImageUrl.length > 1 && (
         <>
           <SummaryRightIcon
             direction="left"

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 (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="md"
+      isCentered>
+      <ModalOverlay
+        bg="blackAlpha.300"
+        backdropFilter="blur(10px) hue-rotate(90deg)"
+      />
+      <ModalContent>
+        <ModalHeader fontSize="md">정말로 삭제하시겠습니까?</ModalHeader>
+        <ModalCloseButton />
+        <Text p="2rem">삭제된 게시물은 복구할 수 없습니다!</Text>
+        <ModalFooter>
+          <Button
+            h="2.5rem"
+            fontSize="md"
+            color="white"
+            bg="blue.100"
+            p="1rem"
+            _hover={{ opacity: 0.5 }}
+            onClick={handleDeleteProject}>
+            삭제하기
+          </Button>
+          <Button
+            h="2.5rem"
+            fontSize="md"
+            color="white"
+            bg="blue.100"
+            p="1rem"
+            ml="1rem"
+            _hover={{ opacity: 0.5 }}
+            onClick={onClose}>
+            취소
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default ProjectDeleteCheckModal

src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControl.tsx

@@ -0,0 +1,70 @@
+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"
+
+interface SummaryControlProps {
+  onOpen: () => void
+}
+
+const SummaryControl = ({ onOpen }: SummaryControlProps) => {
+  const navigate = useNavigate()
+
+  const handleEditProject = () => {
+    navigate("/project/edit")
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <IconButton
+          mr="-1rem"
+          icon={<CiMenuKebab />}
+          aria-label="control"
+          fontSize="3rem"
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        w="100%"
+        height="10rem">
+        <PopoverArrow />
+        <PopoverBody
+          h="100%"
+          p="0">
+          <VStack
+            justifyContent="space-between"
+            h="100%"
+            w="100%">
+            <Button
+              p="1rem"
+              flex="50%"
+              onClick={handleEditProject}
+              _hover={{ opacity: 0.5, bg: "grey.200" }}
+              fontSize="lg">
+              수정하기
+            </Button>
+            <Button
+              p="1rem"
+              flex="50%"
+              onClick={onOpen}
+              _hover={{ opacity: 0.5, bg: "grey.200" }}
+              fontSize="lg">
+              삭제하기
+            </Button>
+          </VStack>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default SummaryControl

src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryControlButton.tsx

@@ -0,0 +1,3 @@
+const SummaryControlButton = () => {}
+
+export default SummaryControlButton