feat: createdAt relative time 추가

sopt-makers · Oct 28, 2023 · abdf424 · abdf424
1 parent beaf8f7
commit abdf424
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/src/components/feed/main/feedCard/FeedCard.stories.tsx b/src/components/feed/main/feedCard/FeedCard.stories.tsx
@@ -11,31 +11,34 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    author: {
+    member: {
       name: '이준호',
       info: 'Frontend Developer @Toss',
       profileImage:
         'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/f7ca1cbd-87e4-4dd3-92cf-e2420afee237-IMG_9435.JPG',
     },
-    lastUpdatedAt: '14분 전',
+    createdAt: '2023.10.23.11:00:11',
     title: '다음주 일요일에 클라이밍하러가실 분',
     content:
       '처음해봐도 괜찮으니까 편하게 오세요! 장소는 클라이밍파크 신논현점 생각하고 있어요. 2시쯤 만나서 하고, 끝나고 같이 고기 먹어요~',
     comments: [
       {
+        id: 1,
         name: '주수한',
         comment: '저도 같이 가고 싶어요!',
       },
       {
+        id: 2,
         name: '이정연',
         comment: '도요 도요 저도요!',
       },
       {
+        id: 3,
         name: '남부장',
         comment: '어허, 나는 왜 빼려고 하는가 허허',
       },
     ],
-    views: 23,
+    hits: 23,
     images: [],
   },
 } satisfies Story;
@@ -55,11 +58,13 @@ export const 질문 = {
     isQuestion: true,
     comments: [
       {
+        id: 1,
         name: '박건영',
         comment:
           'flexbox의 자식 컴포넌트의 기본 min-width값은 min-width: auto 에요. 따라서 컨테이너의 width를 넘어가지 않을 것으로 예상되지만, flex-basis: auto보다 min-width: auto가 먼저 적용되어 자식 컴포넌트가 옆으로 길어질 경우 컨테이너의 너비를 초과하게 돼요. 이를 해결하려면 min-width: 0 을 주어야 해요!',
       },
       {
+        id: 2,
         name: '남부장',
         comment: '커사원 잘했네.',
       },
@@ -72,6 +77,7 @@ export const 댓글한개 = {
     ...Default.args,
     comments: [
       {
+        id: 1,
         name: 'Evan Kim',
         comment: 'LGTM!',
       },
@@ -93,10 +99,12 @@ export const 이미지 = {
     content: '너무 귀엽지 않나요? 당근이 배경화면 공유합니다',
     comments: [
       {
+        id: 1,
         name: '이화정',
         comment: '너무 귀여워요!! 당근 너무 좋아요',
       },
       {
+        id: 2,
         name: '민솔',
         comment: '배고파요...',
       },

diff --git a/src/components/feed/main/feedCard/FeedCard.tsx b/src/components/feed/main/feedCard/FeedCard.tsx
@@ -3,9 +3,11 @@ import { colors } from '@sopt-makers/colors';
 import { Flex, Stack } from '@toss/emotion-utils';
 
 import Text from '@/components/common/Text';
+import { getRelativeTime } from '@/components/feed/utils';
 import { textStyles } from '@/styles/typography';
 
 interface Comment {
+  id: number;
   name: string;
   comment: string;
 }
@@ -14,54 +16,51 @@ interface FeedCardProps {
   isMyFeed?: boolean;
   isBlindWriter?: boolean;
   isQuestion?: boolean;
-  author: {
+  member: {
     name: string;
     profileImage: string;
     info: string; // api interface 들어오면 확정짓기
   };
-  // date로 변경되면 바꾸기
-  lastUpdatedAt: string;
+  createdAt: string;
   title: string;
   content: string;
   comments: Comment[];
-  views: number;
+  hits: number;
   images: string[];
 }
 
-// desktop
 const FeedCard = ({
-  isMyFeed = false,
-  author,
-  lastUpdatedAt,
+  member,
+  createdAt,
   isBlindWriter = false,
   isQuestion = false,
   title,
   content,
   comments,
-  views,
+  hits,
   images,
 }: FeedCardProps) => {
   return (
     <StyeledFeedCard>
-      {isBlindWriter ? <IconMember /> : <ProfileImage width={32} height={32} src={author.profileImage} />}
+      {isBlindWriter ? <IconMember /> : <ProfileImage width={32} height={32} src={member.profileImage} />}
       <StyledStack gutter={8}>
         <Flex justify='space-between'>
           {isBlindWriter ? (
             <Text typography='SUIT_13_SB'>익명</Text>
           ) : (
             <Stack.Horizontal gutter={4}>
-              <Text typography='SUIT_13_SB'>{author.name}</Text>
+              <Text typography='SUIT_13_SB'>{member.name}</Text>
               <Text typography='SUIT_13_R' color={colors.gray400}>
                 ∙
               </Text>
               <Text typography='SUIT_13_R' color={colors.gray400}>
-                {author.info}
+                {member.info}
               </Text>
             </Stack.Horizontal>
           )}
           <Stack.Horizontal gutter={4}>
             <Text typography='SUIT_14_R' color={colors.gray400}>
-              {lastUpdatedAt}
+              {getRelativeTime(createdAt)}
             </Text>
             <button type='button'>
               <IconMoreHoriz />
@@ -82,8 +81,8 @@ const FeedCard = ({
         ) : null}
         {comments.length > 0 ? (
           <CommentWrapper>
-            {comments.map((comment, index) => (
-              <Comment key={index}>
+            {comments.map((comment) => (
+              <Comment key={comment.id}>
                 <Text color={colors.gray10}>{comment.name}</Text>
                 <Text color={colors.gray300}>{comment.comment}</Text>
               </Comment>
@@ -93,7 +92,7 @@ const FeedCard = ({
         <Bottom gutter={2}>
           <Text>{`댓글 ${comments.length}개`}</Text>
           <Text>∙</Text>
-          <Text>{`조회수 ${views}회`}</Text>
+          <Text>{`조회수 ${hits}회`}</Text>
         </Bottom>
       </StyledStack>
     </StyeledFeedCard>

diff --git a/src/components/feed/utils.ts b/src/components/feed/utils.ts
@@ -0,0 +1,11 @@
+import 'dayjs/locale/ko';
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.locale('ko');
+dayjs.extend(relativeTime);
+
+export const getRelativeTime = (date: string) => {
+  return dayjs(date).fromNow();
+};