[カリキュラム課題]考奇符号化グループ項目コメント*

仕事内容のコメント
コメントの長さに基づいてより多くのビューボタンを作成
既存のFigmaデザインで、コメントが長すぎると3行を超えるとき…これをマークすると、コメント全体を見ることができるUIになります.このセクションをモードとして処理するか、より多くのビューボタンを追加するかどうかを考慮すると、instagramを参照して、一定のテキスト長より大きい場合は、より多くのビューボタンが表示され、より多くのボタンをクリックすると、合成内容全体が表示されるように変更されます.더보기 전 더보기 후
👍試す

// ReviewsList.jsx

import React, { useState, useEffect } from 'react';
import './ReviewsList.styles.js';

const ReviewsList = ({ reviewData, deleteTask, editTask, clickedPage }) => {
  useEffect(() => {
  	// api에서 받아온 리뷰의 내용길이가 10자 이상일 때
    if (reviewData.content.length > 10) {
      // 10자 이전까지의 텍스트를 sliceFirst 변수에 담아줌
      const sliceFIrst = reviewData.content.substring(0, 9);
      // 10자 이후의 텍스트를 sliceSecond 변수에 담아줌
      const sliceSecond = reviewData.content.substring(9);
      setSliceTextFirst(sliceFIrst);
      setSliceTextSecond(sliceSecond);
      // 10자 이상일 때 더보기 버튼을 표시함
      setisVisibleReadMore(true);
    } else {
    	// 10자 미만일 땐 전체 내용을 표시해줌
      setSliceTextFirst(reviewData.content);
    }
  }, [reviewData.content.length]);

  // 텍스트 펼치기
  const openMoreText = () => {
    setVisibleSecondText(true); // 10자 이후의 글자를 보여준다.
    setisVisibleReadMore(false); // 더보기 버튼을 없앤다.
  };

  return (
  		   <ContentWrap>
            <Content>
              {sliceTextFirst}
              {visibleSecondText && sliceTextSecond}
              {isVisibleReadMore && (
                <ReadMore onClick={openMoreText}> ...더 보기</ReadMore>
              )}
            </Content>
          </ContentWrap>
  );
 };

// ReviewsList.styles.js

const Content = styled(Link)`
${({ isVisibleText }) =>
    isVisibleText
      ? css`
        display: block
        font-family: Roboto;
  		font-style: normal;
  		font-weight: normal;
  		font-size: 14px;
  		line-height: 22px;
  		color: #000000;
       `
      : css`
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          word-break: break-all;
          white-space: normal;
          text-overflow: ellipsis;
          font-family: Roboto;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
          color: #000000;
        `}
`;

👏に感銘を与える
より多くのビューと閉じるのは最初は同時に行われていましたが、この場合、韓国語で英語の場合は特殊文字の場合など、3行を超える場合は...表示と閉じるのは難しいです.特に(dot)単行表示などの問題が多すぎて、instagramを参考にさらにクリックして見ると、整字が出て折り畳めません.
前より満足していたのですが、どうやってクローズするのか分からないので、ちょっと気分が悪くなりました.この部分はもっと勉強して、ハングル、英語、特殊文字に関係のない処理方法を考えて、後で位置づけたいと思います.