chore: 말줄임 & 더보기 추가

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

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/src/components/feed/main/feedCard/FeedCard.stories.tsx b/src/components/feed/main/feedCard/FeedCard.stories.tsx
@@ -43,7 +43,7 @@ export const Default = {
 export const 익명 = {
   args: {
     ...Default.args,
-    isAnonymous: true,
+    isBlindWriter: true,
   },
 } satisfies Story;
 
@@ -119,3 +119,14 @@ export const 제목없을때 = {
     title: '',
   },
 } satisfies Story;
+
+export const 내용겁나길때 = {
+  args: {
+    ...Default.args,
+    title:
+      '제목이 겁나 길어서 두 줄로 줄바꿈 될 뿐만 아니라, 말줄임표까지 생기게 하는게 제 목표에요. 당근이는 귀엽지만, 그래도 춘식이에 비하면 그냥 토끼옷을 입은 강아지일 뿐이에요.',
+    content: `내용도 겁나 길어서 두 줄로 줄바꿈 될 뿐만 아니라, 말줄임표까지 생기게 하는게 제 목표에요. 당근이는 귀엽지만, 그래도 춘식이에 비하면 그냥 토끼옷을 입은 강아지일 뿐이에요.\n
+제목이 겁나 길어서 두 줄로 줄바꿈 될 뿐만 아니라, 말줄임표까지 생기게 하는게 제 목표에요. 당근이는 귀엽지만, 그래도 춘식이에 비하면 그냥 토끼옷을 입은 강아지일 뿐이에요.
+      `,
+  },
+} satisfies Story;
diff --git a/src/components/feed/main/feedCard/FeedCard.tsx b/src/components/feed/main/feedCard/FeedCard.tsx
@@ -12,7 +12,7 @@ interface Comment {
 
 interface FeedCardProps {
   isMyFeed?: boolean;
-  isAnonymous?: boolean;
+  isBlindWriter?: boolean;
   isQuestion?: boolean;
   author: {
     name: string;
@@ -33,7 +33,7 @@ const FeedCard = ({
   isMyFeed = false,
   author,
   lastUpdatedAt,
-  isAnonymous = false,
+  isBlindWriter = false,
   isQuestion = false,
   title,
   content,
@@ -43,10 +43,10 @@ const FeedCard = ({
 }: FeedCardProps) => {
   return (
     <StyeledFeedCard>
-      {isAnonymous ? <IconMember /> : <ProfileImage width={32} height={32} src={author.profileImage} />}
+      {isBlindWriter ? <IconMember /> : <ProfileImage width={32} height={32} src={author.profileImage} />}
       <StyledStack gutter={8}>
         <Flex justify='space-between'>
-          {isAnonymous ? (
+          {isBlindWriter ? (
             <Text typography='SUIT_13_SB'>익명</Text>
           ) : (
             <Stack.Horizontal gutter={4}>
@@ -72,7 +72,7 @@ const FeedCard = ({
           {isQuestion ? <QuestionBadge>질문</QuestionBadge> : null}
           <Title typography='SUIT_16_SB'>{title}</Title>
         </Stack.Horizontal>
-        <Content typography='SUIT_13_R'>{content}</Content>
+        <Content typography='SUIT_14_R'>{renderContent(content)}</Content>
         {images.length > 0 ? (
           <FeedImageWrapper>
             {images.map((image, index) => (
@@ -124,6 +124,7 @@ const StyledStack = styled(Stack.Vertical)`
 
 const Content = styled(Text)`
   line-height: 22px;
+  white-space: pre-wrap;
 `;
 
 const Title = styled(Text)`
@@ -180,6 +181,20 @@ const QuestionBadge = styled.div`
   ${textStyles.SUIT_12_SB};
 `;
 
+const renderContent = (content: string) => {
+  if (content.length > 140) {
+    return (
+      <>
+        {content.slice(0, 140) + '... '}
+        <Text css={{ cursor: 'pointer' }} typography='SUIT_14_R' color={colors.blue400}>
+          더보기
+        </Text>
+      </>
+    );
+  }
+  return content;
+};
+
 const IconMoreHoriz = () => (
   <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path

diff --git a/src/constants/links.ts b/src/constants/links.ts
@@ -26,4 +26,5 @@ export const playgroundLink = {
   sopticleSuccess: () => `/sopticle/success`,
   mentoringDetail: (id: number) => `/mentoring/${id}`,
   wordchain: () => `/wordchain`,
+  feedList: () => `/feed`,
 };