[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑧
작업 내용 리뷰
리뷰 길이에 따라 더보기 버튼 생성
기존 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)은 한 줄로 나오는 등 문제가 너무 많아 인스타그램을 참고하여 더보기를 누르면 전체 글자가 나오고 접을 수는 없게 처리하였다.
이 전보다는 만족스럽지만 닫기를 제대로 처리할 방법을 알지못해 약간 마음이 찝찝하다. 이 부분은 조금 더 공부를 해서 한글,영어,특수문자와 상관없이 처리할 수 있는 방법을 고민하여 추후에 포스팅 하고 싶다.
Author And Source
이 문제에 관하여([수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑧), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sunkim/수업과제-카우치코딩-팀-프로젝트-리뷰-ve7kxbnu저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)