[Feature/#121/ProjectDetail/error] 댓글/좋아요 요청에 대한 에러처리 / 엣지 케이스 처리 / 반응형 수정

src/constants/endPoints.ts

@@ -5,7 +5,7 @@ export const ENDPOINTS = {
   EMAIL_LOGIN: `${VARIABLE_URL}/auth/login`,
   EMAIL_REFRESH: `${VARIABLE_URL}/auth/reissue`,
   EMAIL_AUTH: `${VARIABLE_URL}/auth/me`,
-  EMAIL_SIGNUP: `${VARIABLE_URL}/users/signup`,
+  EMAIL_SIGNUP: `${VARIABLE_URL}/users`,
   GET_USER_NICKNAME: `${VARIABLE_URL}/users?keyword=`,
   GET_USER_PROFILE: (userId: number) => `${VARIABLE_URL}/users/${userId}`,
   PUT_USER_PROFILE: (userId: number) => `${VARIABLE_URL}/users/${userId}`,

src/pages/ProjectDetailPage/ProjectDetailPage.tsx

@@ -1,4 +1,6 @@
-import { Box, Center, Flex, useMediaQuery } from "@chakra-ui/react"
+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"
@@ -12,7 +14,7 @@ const ProjectDetailPage = ({ projectId }: ProjectIdProps) => {
   const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
 
   if (!projectDetailInfo) {
-    return <Center>Loading...</Center>
+    return <FullScreenSpinner />
   }
 
   return (

src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx

@@ -1,9 +1,17 @@
 // TODO: 익명 처리
-import { useCallback } from "react"
+import { useCallback, useState } from "react"
 import { SubmitHandler, useForm } from "react-hook-form"
 import ResizeTextarea from "react-textarea-autosize"
 
-import { Box, Button, Flex, FormControl, Textarea } from "@chakra-ui/react"
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  FormControl,
+  Textarea,
+} from "@chakra-ui/react"
+import { Stack } from "@chakra-ui/react"
 import { useUserInfoData } from "@services/caches/useUserInfoData"
 
 import { usePostCommentMutation } from "@pages/ProjectDetailPage/hooks/mutations/usePostCommentMutation"
@@ -24,6 +32,8 @@ const CommentsForm = ({
   const { register, reset, handleSubmit } = useForm<CommentFormValues>()
 
   const { sendCommentMutation } = usePostCommentMutation()
+  const [isAnonymous, setIsAnonymous] = useState(false)
+
   const user = useUserInfoData()
 
   const onSubmit: SubmitHandler<CommentFormValues> = useCallback(
@@ -35,49 +45,65 @@ const CommentsForm = ({
       const commentRequestValue = {
         ownerId: user.id,
         projectId: Number(projectId),
-        isAnonymous: false,
+        isAnonymous: isAnonymous,
         parentId: parentId ? parentId : null,
         content: text.content,
       }
-      sendCommentMutation.mutate(commentRequestValue)
+      sendCommentMutation(commentRequestValue)
       reset()
     },
-    [parentId, projectId, reset, user, sendCommentMutation],
+    [parentId, projectId, reset, user, sendCommentMutation, isAnonymous],
   )
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === "Enter" && !e.shiftKey && handleSubmit) {
-        e.preventDefault()
-        handleSubmit(onSubmit)()
-      }
-    },
-    [handleSubmit, onSubmit],
-  )
+  const handleAnonymous = () => {
+    setIsAnonymous(!isAnonymous)
+  }
 
   return (
     <Box w="100%">
       <form onSubmit={handleSubmit(onSubmit)}>
         <FormControl>
           <Flex w="100%">
-            <Textarea
-              size="xs"
-              rows={1}
-              minH="1rem"
-              maxH="10rem"
-              borderTopLeftRadius="0.9rem"
-              borderBottomRadius={isReplyComment ? "0.9rem" : 0}
-              fontSize="lg"
-              p={isReplyComment ? "1rem" : "2rem"}
-              as={ResizeTextarea}
-              placeholder={isReplyComment ? "" : "댓글을 입력하세요"}
-              isRequired={false}
-              resize="none"
-              _hover={{ boxShadow: "none", borderColor: "grey.400" }}
-              _focus={{ boxShadow: "none", borderColor: "grey.400" }}
-              {...register("content", { required: true })}
-              onKeyDown={handleKeyDown}
-            />
+            <Flex
+              w="100%"
+              position="relative">
+              <Box
+                w="100%"
+                border="1px solid #ECECEC"
+                borderTopLeftRadius="0.9rem"
+                borderBottomRadius={isReplyComment ? "0.9rem" : 0}>
+                <Textarea
+                  w="93%"
+                  size="xs"
+                  rows={1}
+                  minH="1rem"
+                  maxH="10rem"
+                  fontSize="lg"
+                  p={isReplyComment ? "1rem" : "2rem"}
+                  as={ResizeTextarea}
+                  placeholder={isReplyComment ? "" : "댓글을 입력하세요"}
+                  isRequired={false}
+                  resize="none"
+                  border="none"
+                  _hover={{ boxShadow: "none", borderColor: "grey.400" }}
+                  _focus={{ boxShadow: "none", borderColor: "grey.400" }}
+                  {...register("content", { required: true })}
+                />
+              </Box>
+              <Stack
+                position="absolute"
+                right="1.5rem"
+                top="30%"
+                direction="row">
+                <Checkbox
+                  isChecked={isAnonymous}
+                  size="lg"
+                  onChange={handleAnonymous}
+                  colorScheme="red">
+                  익명
+                </Checkbox>
+              </Stack>
+            </Flex>
 
             <Button
               p="0"

src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from "react"
 import { UseFormRegisterReturn } from "react-hook-form"
 import ResizeTextarea from "react-textarea-autosize"
 
@@ -19,16 +18,6 @@ const CommentsEditFormText = ({
   const { handleSubmit, onSubmitEdit, editTargetCommentId, isEditing } =
     useCommentContext()
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === "Enter" && !e.shiftKey && handleSubmit) {
-        e.preventDefault()
-        handleSubmit(onSubmitEdit)()
-      }
-    },
-    [handleSubmit, onSubmitEdit],
-  )
-
   if (!handleSubmit) {
     return
   }
@@ -48,7 +37,6 @@ const CommentsEditFormText = ({
               as={ResizeTextarea}
               isRequired={false}
               resize="none"
-              onKeyDown={handleKeyDown}
               {...register}
             />
           ) : (

src/pages/ProjectDetailPage/components/Comments/CommentsList/CommentsList.tsx

@@ -1,4 +1,4 @@
-import { Stack } from "@chakra-ui/react"
+import { Center, Stack, Text } from "@chakra-ui/react"
 import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
@@ -20,17 +20,27 @@ const CommentsList = ({ comments }: CommentsListProps) => {
       w="100%"
       gap="4rem"
       p="2rem">
-      {comments.map((comment) => {
-        return (
-          <CommentsItem
-            register={register("content", { required: true })}
-            key={comment.id}
-            {...{
-              comment,
-            }}
-          />
-        )
-      })}
+      {comments.length > 0 ? (
+        comments.map((comment) => {
+          return (
+            <CommentsItem
+              register={register("content", { required: true })}
+              key={comment.id}
+              {...{
+                comment,
+              }}
+            />
+          )
+        })
+      ) : (
+        <Center>
+          <Text
+            fontSize="2xl"
+            color="grey.500">
+            댓글을 남겨보세요
+          </Text>
+        </Center>
+      )}
     </Stack>
   )
 }

src/pages/ProjectDetailPage/components/Content/Content.tsx

@@ -13,7 +13,7 @@ const Content = ({ projectDetailInfo }: getProjectDetailResponseType) => {
     <VStack
       alignItems="flex-start"
       divider={<StackDivider borderColor="grey.300" />}
-      spacing={10}
+      spacing={30}
       w="100%"
       margin="0 auto">
       <TechStacks techStacks={techStacks} />

src/pages/ProjectDetailPage/components/Content/Date/Date.tsx

@@ -9,15 +9,21 @@ interface DateProps {
 
 const Date = ({ startDate, endDate }: DateProps) => {
   return (
-    <HStack
-      spacing="6rem"
-      h="10rem">
+    <HStack spacing="3rem">
       <Text
         fontSize="2xl"
         fontFamily="SCDream_Bold">
         프로젝트 기간
       </Text>
-      <Text fontSize="xl">{changeDateForm(startDate, endDate)}</Text>
+      {startDate && endDate ? (
+        <Text fontSize="xl">{changeDateForm(startDate, endDate)}</Text>
+      ) : (
+        <Text
+          color="grey.500"
+          fontSize="lg">
+          등록된 프로젝트 기간이 존재하지 않습니다.
+        </Text>
+      )}
     </HStack>
   )
 }

src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx

@@ -1,26 +1,40 @@
 import { Box } from "@chakra-ui/react"
 import MDEditor from "@uiw/react-md-editor"
 
-const ViewStyleParams = {
+const ViewOptions = {
   whiteSpace: "pre-wrap",
   padding: "2rem",
   lineHeight: "1.5",
   fontFamily: "SCDream_Regular",
   fontSize: "1rem",
 }
 
+const ViewNotContentOptions = {
+  fontSize: "2rem",
+  color: "#7a7a7a",
+}
+
 interface ExplanationItemProps {
   content: string
 }
 
+const notContentText = "내용이 존재하지 않습니다."
+
 const ExplanationItem = ({ content }: ExplanationItemProps) => {
   const processedText = content?.replace(/\\n/g, "\n")
   return (
     <Box data-color-mode="light">
-      <MDEditor.Markdown
-        source={processedText}
-        style={{ ...ViewStyleParams }}
-      />
+      {processedText ? (
+        <MDEditor.Markdown
+          source={processedText}
+          style={{ ...ViewOptions }}
+        />
+      ) : (
+        <MDEditor.Markdown
+          source={notContentText}
+          style={{ ...ViewNotContentOptions }}
+        />
+      )}
     </Box>
   )
 }

src/pages/ProjectDetailPage/components/Content/MemberInfo/MemberInfo.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react"
+import { HStack, Stack, Text } from "@chakra-ui/react"
 import { Member } from "api-models"
 
 import membersCategory from "@pages/ProjectDetailPage/utils/membersCategory"
@@ -12,26 +12,34 @@ interface MemberInfoProps {
 const MemberInfo = ({ members }: MemberInfoProps) => {
   const groupedByCategory = membersCategory(members)
   return (
-    <Flex
-      direction="column"
-      gap="2rem">
+    <Stack
+      direction={groupedByCategory.length > 0 ? "column" : "row"}
+      spacing="2rem">
       <Text
         fontSize="2xl"
         fontFamily="SCDream_Bold">
         팀원
       </Text>
-      <Flex
-        gap="1rem"
+      <HStack
+        spacing="1rem"
         flexWrap="wrap">
-        {groupedByCategory.map(([category, members]) => (
-          <MemberList
-            key={category}
-            category={category}
-            members={members}
-          />
-        ))}
-      </Flex>
-    </Flex>
+        {groupedByCategory.length > 0 ? (
+          groupedByCategory.map(([category, members]) => (
+            <MemberList
+              key={category}
+              category={category}
+              members={members}
+            />
+          ))
+        ) : (
+          <Text
+            color="grey.500"
+            fontSize="lg">
+            등록된 멤버가 존재하지 않습니다.
+          </Text>
+        )}
+      </HStack>
+    </Stack>
   )
 }