Merge pull request #181 from side-peek/refactor/#174/ProjectDetail

[Reafctor/projectDetail] �members/techstacks 데이터 형식 변경에 따른 수정

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

@@ -82,6 +82,7 @@ const CommentsForm = ({
                 mr="5.5rem"
                 as={ResizeTextarea}
                 border="none"
+                disabled={isSubmitting || !user}
                 _focus={{ boxShadow: "none" }}
                 {...register("content", {
                   required: true,
@@ -97,9 +98,10 @@ const CommentsForm = ({
                 right="1rem"
                 top="28%">
                 <Checkbox
+                  disabled={isSubmitting || !user}
                   isChecked={isAnonymous}
                   size="lg"
-                  _hover={{ opacity: 0.5 }}
+                  _hover={user ? { opacity: 0.5 } : {}}
                   onChange={handleAnonymous}
                   color={isAnonymous ? "red.200" : "grey.500"}
                   colorScheme="red">
@@ -119,7 +121,7 @@ const CommentsForm = ({
             opacity={!isSubmitting && isValid ? "1" : "0.3"}
             color="white"
             fontSize="xl"
-            disabled={isSubmitting}
+            disabled={isSubmitting || !user}
             cursor={!isSubmitting && isValid ? "pointer" : "default"}
             type="submit">
             입력

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

@@ -1,15 +1,15 @@
 import { useNavigate } from "react-router-dom"
 
-import { Box, Button, HStack, Stack, useMediaQuery } from "@chakra-ui/react"
+import { Box, HStack, Stack, useMediaQuery } from "@chakra-ui/react"
 import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
 
-import CommentsForm from "../CommentsForm/CommentsForm"
 import CommentTitle from "./components/CommentTitle"
 import CommentsAvatar from "./components/CommentsAvatar"
 import CommentsEditForm from "./components/CommentsEditForm"
 import CommentsText from "./components/CommentsText"
+import ReplyButton from "./components/ReplyButton"
 import ReplyComment from "./components/ReplyComment"
 
 interface CommentsItemProps {
@@ -24,14 +24,7 @@ const CommentsItem = ({ comment }: CommentsItemProps) => {
     navigate(`/profile/${userId}`)
   }
 
-  const {
-    replyTargetCommentId,
-    isReply,
-    handleOnReply,
-    handleOffReply,
-    editTargetCommentId,
-    isEditing,
-  } = useCommentContext()
+  const { editTargetCommentId, isEditing } = useCommentContext()
 
   return (
     <Stack
@@ -65,32 +58,10 @@ const CommentsItem = ({ comment }: CommentsItemProps) => {
                 <CommentsText text={comment.content} />
               )}
 
-              {!comment.parentId &&
-                (isReply ? (
-                  comment.id === replyTargetCommentId && (
-                    <>
-                      <CommentsForm
-                        parentId={replyTargetCommentId}
-                        isReplyComment
-                      />
-                      <Button
-                        p="0"
-                        _hover={{ opacity: "0.5" }}
-                        fontSize={isLargerThan768 ? "md" : "sm"}
-                        onClick={handleOffReply}>
-                        취소
-                      </Button>
-                    </>
-                  )
-                ) : (
-                  <Button
-                    size={isLargerThan768 ? "md" : "sm"}
-                    onClick={() => handleOnReply(comment.id)}
-                    _hover={{ opacity: 0.5 }}
-                    p="0">
-                    답글달기
-                  </Button>
-                ))}
+              <ReplyButton
+                parentId={comment.parentId}
+                commentId={comment.id}
+              />
             </Stack>
           </HStack>
         </Box>

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

@@ -0,0 +1,47 @@
+import { Button, useMediaQuery } from "@chakra-ui/react"
+
+import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
+
+import CommentsForm from "../../CommentsForm/CommentsForm"
+
+interface ReplyButtonProps {
+  parentId?: number
+  commentId: number
+}
+
+const ReplyButton = ({ parentId, commentId }: ReplyButtonProps) => {
+  const { replyTargetCommentId, isReply, handleOnReply, handleOffReply } =
+    useCommentContext()
+  const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
+
+  return (
+    !parentId &&
+    (isReply ? (
+      commentId === replyTargetCommentId && (
+        <>
+          <CommentsForm
+            parentId={replyTargetCommentId}
+            isReplyComment
+          />
+          <Button
+            p="0"
+            _hover={{ opacity: "0.5" }}
+            fontSize={isLargerThan768 ? "md" : "sm"}
+            onClick={handleOffReply}>
+            취소
+          </Button>
+        </>
+      )
+    ) : (
+      <Button
+        size={isLargerThan768 ? "md" : "sm"}
+        onClick={() => handleOnReply(commentId)}
+        _hover={{ opacity: 0.5 }}
+        p="0">
+        답글달기
+      </Button>
+    ))
+  )
+}
+
+export default ReplyButton

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

@@ -1,22 +1,16 @@
 import { HStack, Stack, Text } from "@chakra-ui/react"
-import { Member } from "api-models"
-
-import { categorizeMembers } from "@utils/categorizeMembers"
+import { Member, UserSummary } from "api-models"
 
 import MemberList from "./MemberList/MemberList"
 
-categorizeMembers
-
 interface MemberInfoProps {
   members: Member[]
 }
 
 const MemberInfo = ({ members }: MemberInfoProps) => {
-  const categorizedMembers = categorizeMembers(members)
-
   return (
     <Stack
-      direction={categorizedMembers.length > 0 ? "column" : "row"}
+      direction={members.length > 0 ? "column" : "row"}
       spacing="2rem">
       <Text
         fontSize="2xl"
@@ -26,14 +20,17 @@ const MemberInfo = ({ members }: MemberInfoProps) => {
       <HStack
         spacing="1rem"
         flexWrap="wrap">
-        {categorizedMembers.length > 0 ? (
-          categorizedMembers.map(({ role, members }) => (
-            <MemberList
-              key={role}
-              category={role}
-              members={members}
-            />
-          ))
+        {members.length > 0 ? (
+          members.map(({ role, userSummary }) => {
+            const memberList = userSummary as unknown as UserSummary[]
+            return (
+              <MemberList
+                key={userSummary.nickname}
+                category={role}
+                memberList={memberList}
+              />
+            )
+          })
         ) : (
           <Text
             color="grey.500"

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

@@ -1,14 +1,14 @@
 import { Flex, Text } from "@chakra-ui/react"
-import { Member } from "api-models"
+import { UserSummary } from "api-models"
 
 import AvatarCard from "@components/AvatarCard/AvatarCard"
 
 interface MemberListProps {
-  members: Member[]
+  memberList: UserSummary[]
   category: string
 }
 
-const MemberList = ({ category, members }: MemberListProps) => {
+const MemberList = ({ category, memberList }: MemberListProps) => {
   return (
     <Flex
       direction="column"
@@ -22,17 +22,15 @@ const MemberList = ({ category, members }: MemberListProps) => {
         gap="2rem"
         p="1rem"
         alignItems="center">
-        {members.map((member) => (
+        {memberList.map(({ id, profileImageUrl, nickname }) => (
           <AvatarCard
-            key={member.id}
+            key={`${id}-${nickname}`}
             flexDir="column"
             border="none"
             gap="2rem">
-            <AvatarCard.Image
-              src={member.userSummary.profileImageUrl ?? undefined}
-            />
+            <AvatarCard.Image src={profileImageUrl ?? undefined} />
             <AvatarCard.Content
-              text={member.userSummary.nickname}
+              text={nickname}
               fontSize="2rem"
               display="block"
             />

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

@@ -1,18 +1,12 @@
 import { HStack, Image, Stack, Text, useMediaQuery } from "@chakra-ui/react"
-import { TechStack } from "api-models"
+import { Skill, TechStack } from "api-models"
 
 import CommonTag from "@components/Tag/components/CommonTag"
 
-import {
-  CategoryTechStacks,
-  categorizeTechStacks,
-} from "@utils/categorizeTechStacks"
-
 interface TechStacksProps {
   techStacks: TechStack[]
 }
 const TechStacks = ({ techStacks }: TechStacksProps) => {
-  const categorizedTechStacks = categorizeTechStacks(techStacks)
   const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
 
   return (
@@ -27,8 +21,9 @@ const TechStacks = ({ techStacks }: TechStacksProps) => {
       </Text>
       {techStacks.length > 0 ? (
         <Stack spacing="3rem">
-          {categorizedTechStacks.map(
-            ({ category, techStacks }: CategoryTechStacks) => (
+          {techStacks.map(({ category, skill: skills }) => {
+            const skillList = skills as unknown as Skill[]
+            return (
               <Stack
                 key={category}
                 direction={isLargerThan768 ? "row" : "column"}
@@ -42,25 +37,25 @@ const TechStacks = ({ techStacks }: TechStacksProps) => {
                 <HStack
                   spacing="1rem"
                   flexWrap="wrap">
-                  {techStacks.map((stack) => (
+                  {skillList.map((skill, index) => (
                     <CommonTag
                       leftElement={
                         <Image
-                          src={stack.skill.iconImageUrl}
+                          src={skill.iconImageUrl}
                           w="2rem"
                           h="2rem"
                         />
                       }
                       cursor="default"
-                      label={stack.skill.name}
-                      key={stack.skill.id}
+                      label={skill.name}
+                      key={`${skill.id}-${index}`}
                       fontSize="lg"
                     />
                   ))}
                 </HStack>
               </Stack>
-            ),
-          )}
+            )
+          })}
         </Stack>
       ) : (
         <Text

src/types/domain/apiDomain.d.ts

@@ -123,7 +123,7 @@ declare module "api-models" {
   export type Comment = {
     id: number
     user: userSummary | null
-    parentId: number | null
+    parentId?: number
     isOwner: boolean
     isAnonymous: boolean
     content: string