[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑧

작업 내용 리뷰

리뷰 길이에 따라 더보기 버튼 생성
기존 Figma 디자인 상에서는 리뷰가 길어지면 3줄 이상이 되었을 때 ...으로 표시하도록 하였는데, 생각해보니 그렇게 하면 리뷰 내용 전체를 아무도 볼 수 없는 UI가 되어버렸다. 이 부분을 modal로 처리할 지, 더보기 버튼을 추가할지 고민하다가 인스타그램을 참고하여 일정 텍스트 길이보다 크면 더보기 버튼이 나타나고, 더보기 버튼을 클릭하면 전체 작성 내용이 표시되도록 수정하였다.

더보기 전

더보기 후

👍시도

// 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)은 한 줄로 나오는 등 문제가 너무 많아 인스타그램을 참고하여 더보기를 누르면 전체 글자가 나오고 접을 수는 없게 처리하였다.

이 전보다는 만족스럽지만 닫기를 제대로 처리할 방법을 알지못해 약간 마음이 찝찝하다. 이 부분은 조금 더 공부를 해서 한글,영어,특수문자와 상관없이 처리할 수 있는 방법을 고민하여 추후에 포스팅 하고 싶다.