diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx index 17ba29b2..5ab0c92e 100644 --- a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx +++ b/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%"> @@ -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"> 입력 diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx index 7821e1db..be0b5145 100644 --- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx +++ b/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 ( { )} - {!comment.parentId && - (isReply ? ( - comment.id === replyTargetCommentId && ( - <> - - - - ) - ) : ( - - ))} + diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/ReplyButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/ReplyButton.tsx new file mode 100644 index 00000000..7eeba109 --- /dev/null +++ b/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 && ( + <> + + + + ) + ) : ( + + )) + ) +} + +export default ReplyButton diff --git a/src/pages/ProjectDetailPage/components/Content/Member/Member.tsx b/src/pages/ProjectDetailPage/components/Content/Member/Member.tsx index 0ec99825..f6cc4929 100644 --- a/src/pages/ProjectDetailPage/components/Content/Member/Member.tsx +++ b/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 ( 0 ? "column" : "row"} + direction={members.length > 0 ? "column" : "row"} spacing="2rem"> { - {categorizedMembers.length > 0 ? ( - categorizedMembers.map(({ role, members }) => ( - - )) + {members.length > 0 ? ( + members.map(({ role, userSummary }) => { + const memberList = userSummary as unknown as UserSummary[] + return ( + + ) + }) ) : ( { +const MemberList = ({ category, memberList }: MemberListProps) => { return ( { gap="2rem" p="1rem" alignItems="center"> - {members.map((member) => ( + {memberList.map(({ id, profileImageUrl, nickname }) => ( - + diff --git a/src/pages/ProjectDetailPage/components/Content/TechStacks/TechStacks.tsx b/src/pages/ProjectDetailPage/components/Content/TechStacks/TechStacks.tsx index bfaeea1b..a06f2f44 100644 --- a/src/pages/ProjectDetailPage/components/Content/TechStacks/TechStacks.tsx +++ b/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) => { {techStacks.length > 0 ? ( - {categorizedTechStacks.map( - ({ category, techStacks }: CategoryTechStacks) => ( + {techStacks.map(({ category, skill: skills }) => { + const skillList = skills as unknown as Skill[] + return ( { - {techStacks.map((stack) => ( + {skillList.map((skill, index) => ( } cursor="default" - label={stack.skill.name} - key={stack.skill.id} + label={skill.name} + key={`${skill.id}-${index}`} fontSize="lg" /> ))} - ), - )} + ) + })} ) : ( { - const categorizedMembers = Object.values( - members.reduce>((acc, item) => { - const categoryName = item.role - - if (!acc[categoryName]) { - acc[categoryName] = { - role: categoryName, - members: [], - } - } - - acc[categoryName].members.push({ - id: item.id, - role: categoryName, - userSummary: item.userSummary, - }) - return acc - }, {}), - ) - - return categorizedMembers -} diff --git a/src/utils/categorizeTechStacks.ts b/src/utils/categorizeTechStacks.ts deleted file mode 100644 index f1ed912e..00000000 --- a/src/utils/categorizeTechStacks.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TechStack } from "api-models" - -export interface CategoryTechStacks { - category: string - techStacks: TechStack[] -} - -export const categorizeTechStacks = ( - techsStacks: TechStack[], -): CategoryTechStacks[] => { - const categorizedTechStacks = Object.values( - techsStacks.reduce>((acc, item) => { - const categoryName = item.category - - if (!acc[categoryName]) { - acc[categoryName] = { category: categoryName, techStacks: [] } - } - - acc[categoryName].techStacks.push({ - id: item.id, - category: categoryName, - skill: item.skill, - }) - - return acc - }, {}), - ) - - return categorizedTechStacks -}