Refactor/#103: 게시글 상세 및 댓글, 답글 세부 스킬에서 대표 스킬로 변경 (#105)

* refactor: 게시글 상세 세부 스킬에서 대표 스킬로 변경 * refactor: 댓글 및 답글 세부 스킬에서 대표스킬로 API 변경 대응 * refactor: 댓글 서버 API 변경사항에 맞게 타입 및 파라미터 수정
ConceptBe · Apr 21, 2024 · 46e7981 · 46e7981
1 parent e811a6c
commit 46e7981
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 42 deletions.
diff --git a/src/components/ProfileInfo.tsx b/src/components/ProfileInfo.tsx
@@ -1,18 +1,17 @@
-import { Text, TextDivider, Box, Flex, ImageView, PNGDefaultProfileInfo36 } from 'concept-be-design-system';
-import { Fragment } from 'react';
+import { Text, Box, Flex, ImageView, PNGDefaultProfileInfo36 } from 'concept-be-design-system';
 
 import useNavigatePage from '../pages/hooks/useNavigatePage';
 
 interface Props {
   memberId: number;
   imageUrl: string;
   nickname: string;
-  skillList: string[];
+  mainSkill: string;
 }
 
 // TODO: 프로필 이미지 사진 오류 시 보여줄 기본 프로필 이미지 사진 URL
 
-const ProfileInfo = ({ memberId, imageUrl, nickname, skillList }: Props) => {
+const ProfileInfo = ({ memberId, imageUrl, nickname, mainSkill }: Props) => {
   const { goProfilePage } = useNavigatePage();
 
   return (
@@ -25,14 +24,9 @@ const ProfileInfo = ({ memberId, imageUrl, nickname, skillList }: Props) => {
           {nickname}
         </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>
-          ))}
+          <Text font="suit12r" color="b9">
+            {mainSkill}
+          </Text>
         </Flex>
       </Flex>
     </Flex>

diff --git a/src/pages/FeedDetail/FeedDetail.page.tsx b/src/pages/FeedDetail/FeedDetail.page.tsx
@@ -22,7 +22,7 @@ const FeedDetailPage = () => {
     memberId,
     imageUrl,
     nickname,
-    skillList,
+    mainSkill,
     title,
     date,
     introduce,
@@ -67,7 +67,7 @@ const FeedDetailPage = () => {
       </Header>
 
       <Box padding="30px 22px 30px 22px" marginTop={48}>
-        <ProfileInfo memberId={memberId} imageUrl={imageUrl} nickname={nickname} skillList={skillList} />
+        <ProfileInfo memberId={memberId} imageUrl={imageUrl} nickname={nickname} mainSkill={mainSkill} />
         <Spacer size={20} />
         <Box>
           <div>

diff --git a/src/pages/FeedDetail/components/Comment.tsx b/src/pages/FeedDetail/components/Comment.tsx
@@ -7,7 +7,6 @@ import ModifyDropdown from './ModifyDropdown';
 import Recomment from './Recomment';
 import WriteRecomment from './WriteRecomment';
 import useConfirm from '../../../hooks/useConfrim';
-import { MemberSkills } from '../../Profile/types';
 import { get999PlusCount } from '../../utils';
 import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment';
 import useFocusEditComment from '../hooks/useFocusEditComment';
@@ -19,7 +18,6 @@ interface Props {
   feedId: string;
   myImageUrl: string;
   myNickname: string;
-  mySkillList: MemberSkills[];
   comment: CommentParentResponse;
 }
 
@@ -33,7 +31,7 @@ const Comment = ({
     nickname,
     profileImageUrl,
     createdAt,
-    memberSkills,
+    memberMainSkill,
     content,
     likesCount,
     commentCount,
@@ -91,7 +89,7 @@ const Comment = ({
               memberId={memberId}
               imageUrl={profileImageUrl}
               nickname={nickname}
-              skillList={memberSkills}
+              mainSkill={memberMainSkill}
               createdAt={createdAt}
               owner={owner}
             />

diff --git a/src/pages/FeedDetail/components/CommentProfileInfo.tsx b/src/pages/FeedDetail/components/CommentProfileInfo.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { Box, Flex, ImageView, PNGDefaultProfileInfo36, Text, TextDivider } from 'concept-be-design-system';
-import { Fragment } from 'react';
 
 import { formatCommentDate } from '../../Feed/utils/formatCommentDate';
 import useNavigatePage from '../../hooks/useNavigatePage';
@@ -9,12 +8,12 @@ interface Props {
   memberId: number;
   imageUrl: string;
   nickname: string;
-  skillList: string[];
+  mainSkill: string;
   createdAt: string;
   owner: boolean;
 }
 
-const CommentProfileInfo = ({ memberId, imageUrl, nickname, skillList, createdAt, owner }: Props) => {
+const CommentProfileInfo = ({ memberId, imageUrl, nickname, mainSkill, createdAt, owner }: Props) => {
   const { goProfilePage } = useNavigatePage();
 
   const onClickProfileImage = () => {
@@ -33,14 +32,10 @@ const CommentProfileInfo = ({ memberId, imageUrl, nickname, skillList, createdAt
           {nickname}
         </Text>
         <Flex wrap="wrap" alignItems="center" gap={4}>
-          {skillList.map((skill) => (
-            <Fragment key={skill}>
-              <FixedSizeText font="suit12r" color="b9">
-                {skill}
-              </FixedSizeText>
-              <TextDivider left={2} right={2} color="l2" />
-            </Fragment>
-          ))}
+          <FixedSizeText font="suit12r" color="b9">
+            {mainSkill}
+          </FixedSizeText>
+          <TextDivider left={2} right={2} color="l2" />
           <Text font="suit12r" color="b9">
             {formatCommentDate(createdAt)}
           </Text>

diff --git a/src/pages/FeedDetail/components/Comments.tsx b/src/pages/FeedDetail/components/Comments.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const Comments = ({ feedId }: Props) => {
   const { comments, fetchNextPage } = useCommentsQuery(feedId);
-  const { profileImageUrl: myImageUrl, nickname: myNickname, skills: mySkillList } = useMemberInfoQuery(getUserId());
+  const { profileImageUrl: myImageUrl, nickname: myNickname } = useMemberInfoQuery(getUserId());
 
   const intersectionRef = useRef(null);
   useCommentInfiniteFetch(intersectionRef, fetchNextPage);
@@ -26,13 +26,7 @@ const Comments = ({ feedId }: Props) => {
       {comments.length > 0 ? (
         comments.map((comment, idx) => (
           <Fragment key={comment.parentCommentId}>
-            <Comment
-              comment={comment}
-              feedId={feedId}
-              myImageUrl={myImageUrl}
-              myNickname={myNickname}
-              mySkillList={mySkillList}
-            />
+            <Comment comment={comment} feedId={feedId} myImageUrl={myImageUrl} myNickname={myNickname} />
             {idx !== comments.length - 1 ? <Divider color="l3" /> : <></>}
           </Fragment>
         ))

diff --git a/src/pages/FeedDetail/components/Recomment.tsx b/src/pages/FeedDetail/components/Recomment.tsx
@@ -27,7 +27,7 @@ const Recomment = ({
     childCommentId,
     profileImageUrl,
     nickname,
-    memberSkills,
+    mainSkill,
     content,
     likesCount,
     owner,
@@ -78,7 +78,7 @@ const Recomment = ({
                 memberId={memberId}
                 imageUrl={profileImageUrl}
                 nickname={nickname}
-                skillList={memberSkills}
+                mainSkill={mainSkill}
                 createdAt={createdAt}
                 owner={owner}
               />

diff --git a/src/pages/FeedDetail/types/index.ts b/src/pages/FeedDetail/types/index.ts
@@ -2,7 +2,7 @@ export interface FeedDetailResponse {
   memberId: number;
   imageUrl: string;
   nickname: string;
-  skillList: string[];
+  mainSkill: string;
   title: string;
   date: string;
   introduce: string;
@@ -25,7 +25,7 @@ export interface CommentParentResponse {
   parentCommentId: string;
   nickname: string;
   profileImageUrl: string;
-  memberSkills: string[];
+  memberMainSkill: string;
   content: string;
   createdAt: string;
   likesCount: number;
@@ -41,7 +41,7 @@ export interface CommentChildResponse {
   childCommentId: string;
   nickname: string;
   profileImageUrl: string;
-  memberSkills: string[];
+  mainSkill: string;
   content: string;
   createdAt: string;
   likesCount: number;