Feat/#37: 게시글 상세 댓글, 좋아요, 스크랩 기능 구현

package.json

@@ -14,7 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.17.19",
     "axios": "^1.5.1",
-    "concept-be-design-system": "^0.4.1",
+    "concept-be-design-system": "^0.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",

src/components/ProfileInfo.tsx

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
 import { Text, TextDivider, Box, Flex } from 'concept-be-design-system';
+import { Fragment } from 'react';
+
+import { DEFAULT_IMAGE_URL } from '../constants';
 
 interface Props {
   imageUrl: string;
@@ -8,7 +11,6 @@ interface Props {
 }
 
 // TODO: 프로필 이미지 사진 오류 시 보여줄 기본 프로필 이미지 사진 URL
-const DEFAULT_IMAGE_URL = '';
 
 const ProfileInfo = ({ imageUrl, nickname, skillList }: Props) => {
   return (
@@ -22,12 +24,12 @@ const ProfileInfo = ({ imageUrl, nickname, skillList }: Props) => {
         </Text>
         <Flex alignItems="center">
           {skillList.map((skill, idx) => (
-            <>
+            <Fragment key={skill}>
               <Text font="suit12r" color="b9">
                 {skill}
               </Text>
               {idx !== skillList.length - 1 && <TextDivider left={6} right={6} color="l2" />}
-            </>
+            </Fragment>
           ))}
         </Flex>
       </Flex>

src/constants/index.ts

@@ -1 +1,6 @@
 export const BASE_URL = 'http://conceptbe.kr:8080';
+
+// 서버 작업으로 인한 임시 상수값
+export const ROOT_COMMENT_ID = '0';
+
+export const DEFAULT_IMAGE_URL = '';

src/pages/FeedDetail/FeedDetail.page.tsx

@@ -1,32 +1,18 @@
-import styled from '@emotion/styled';
-import {
-  Badge,
-  Divider,
-  Header,
-  Spacer,
-  Text,
-  TextDivider,
-  theme,
-  SVGTripleDots,
-  SVGFeedLike,
-  SVGFeedMessage,
-  SVGFeedPencil,
-  SVGFeedUnScrap,
-  SVGCancel,
-  Flex,
-  Box,
-} from 'concept-be-design-system';
-import { useParams } from 'react-router-dom';
+import { Badge, Divider, Header, Spacer, Text, TextDivider, Flex, Box } from 'concept-be-design-system';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import Comments from './components/Comments';
-import useGetFeedDetail from './hooks/useGetFeedDetail';
-import useHandleClickOutside from './hooks/useHandleClickOutside';
+import ModifyDropdown from './components/ModifyDropdown';
+import ReactionBar from './components/ReactionBar';
+import { CommentFocusProvider } from './contexts/CommentFocusContext';
+import useFeedDetailQuery from './hooks/queries/useFeedDetailQuery';
 import ProfileInfo from '../../components/ProfileInfo';
 import Back from '../../layouts/Back';
 import Logo from '../../layouts/Logo';
 import { formatCommentDate } from '../Feed/utils/formatCommentDate';
 
 const FeedDetailPage = () => {
+  const navigate = useNavigate();
   const { id: feedId } = useParams() as { id: string };
   const {
     imageUrl,
@@ -39,47 +25,36 @@ const FeedDetailPage = () => {
     purposeList,
     cooperationWay,
     recruitmentPlace,
-    teamRecruitmentsList,
+    skillCategories,
     likesCount,
     commentsCount,
     bookmarksCount,
     hits,
-    commentParentResponses,
-  } = useGetFeedDetail(feedId);
+    owner,
+    ownerScrap,
+    ownerLike,
+  } = useFeedDetailQuery(feedId);
 
-  const { dropdownRef, isOpenModifyDropdown, toggleModifyDropdown } = useHandleClickOutside();
+  const onModifyFeedDetail = () => {
+    // 게시글 수정 로직 필요
+  };
+
+  const onDeleteFeedDetail = () => {
+    // 게시글 삭제 로직 필요
+    navigate(-1);
+  };
 
   return (
-    <>
+    <CommentFocusProvider>
       <Header main>
         <Back />
         <Logo />
-        <Box position="relative" ref={dropdownRef} cursor="pointer">
-          <SVGTripleDots onClick={toggleModifyDropdown} />
-          {isOpenModifyDropdown && (
-            <DropDownBox>
-              <Flex justifyContent="space-between" alignItems="center">
-                <Text font="suit12r" color="b6">
-                  수정하기
-                </Text>
-                <SVGFeedPencil />
-              </Flex>
-              <Divider color="bg1" height={0.1} />
-              <Flex justifyContent="space-between" alignItems="center">
-                <Text font="suit12r" color="b6">
-                  삭제하기
-                </Text>
-                <SVGCancel />
-              </Flex>
-            </DropDownBox>
-          )}
-        </Box>
+        <ModifyDropdown owner={owner} onEdit={onModifyFeedDetail} onDelete={onDeleteFeedDetail} />
       </Header>
+
       <Box padding="30px 22px 30px 22px" marginTop={48}>
         <ProfileInfo imageUrl={imageUrl} nickname={nickname} skillList={skillList} />
-
         <Spacer size={20} />
-
         <Box>
           <div>
             <Text font="suit14sm" color="c1">
@@ -162,7 +137,7 @@ const FeedDetailPage = () => {
           </Text>
           <Spacer size={12} />
           <Flex wrap="wrap" gap={6}>
-            {teamRecruitmentsList.map((badge) => (
+            {skillCategories.map((badge) => (
               <Badge key={badge} fontColor="b4">
                 {badge}
               </Badge>
@@ -171,60 +146,23 @@ const FeedDetailPage = () => {
         </Box>
 
         <Spacer size={35} />
-
         <Divider color="l3" />
 
-        <Flex justifyContent="space-between" padding="18px 0">
-          <Flex alignItems="center" gap={4}>
-            <SVGFeedMessage />
-            <Text font="suit12r" color="b9">
-              댓글
-            </Text>
-            <Text font="suit12b" color="b9">
-              {commentsCount > 999 ? '999+' : commentsCount}
-            </Text>
-          </Flex>
-          <Flex alignItems="center" gap={4}>
-            <SVGFeedLike />
-            <Text font="suit12r" color="b9">
-              좋아요
-            </Text>
-            <Text font="suit12b" color="b9">
-              {likesCount > 999 ? '999+' : likesCount}
-            </Text>
-          </Flex>
-          <Flex alignItems="center" gap={4}>
-            <SVGFeedUnScrap />
-            <Text font="suit12r" color="b9">
-              스크랩
-            </Text>
-            <Text font="suit12b" color="b9">
-              {bookmarksCount > 999 ? '999+' : bookmarksCount}
-            </Text>
-          </Flex>
-        </Flex>
+        <ReactionBar
+          feedId={feedId}
+          commentsCount={commentsCount}
+          likesCount={likesCount}
+          bookmarksCount={bookmarksCount}
+          ownerScrap={ownerScrap}
+          ownerLike={ownerLike}
+        />
       </Box>
 
       <Divider color="bg1" height={8} />
 
-      <Comments comments={commentParentResponses} />
-    </>
+      <Comments feedId={feedId} />
+    </CommentFocusProvider>
   );
 };
 
 export default FeedDetailPage;
-
-const DropDownBox = styled.div`
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  background-color: ${theme.color.w1};
-  width: 88px;
-  height: 70px;
-  border-radius: 6px;
-  padding: 10px;
-  top: 40px;
-  right: -6px;
-  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.18);
-`;