search

sparcs-kaist / taxi-front

KAIST Taxi Party Matching Web Service
https://taxi.kaist.ac.kr
MIT License
14 stars 2 forks source link

#773 채팅 140자 넘으면 입력 막기 & 글자 수 circular progress bar로 표시 #777

Closed jinhyeonkwon closed 1 month ago

jinhyeonkwon commented 5 months ago

Summary

It closes #773

140자 길이 제한을 구현하고, 향후 길이 제한을 바꿀 수 있도록 하였으며, react-circular-progressbar를 사용하여 현재 글자 수를 보기 쉽게 나타냅니다.

progressbar의 위치, 크기, margin 등이 과연 적절한가, 전체 리디자인 예정이기는 해도 style 변경 사항이 디자인 시스템의 체계를 너무 갖추지 않은 건 아닌가, state 사용이나 기타 등등 코드의 전체적인 구조와 맞지 않는 점은 없는가, 등을 중점적으로 리뷰해주시면 감사하겠습니다!

앞으로 최대 글자 수를 수정하려면?

  1. packages/web/src/tools/regExpTest.js 의 chatMsgLength 정규 표현식을 수정합니다.
  2. 이에 더해, packages/web/src/components/Chat/MessageForm/InputText/BodyText.tsx 의 maxChatMsgLength 변수 값도 함께 수정해 줍니다.

코드 수정 사항 설명

최신 버전 (2024.07.07.)

props에 대한 변경 사항을 모두 없애고, BodyText.tsx에서만 해결할 수 있도록 수정하였습니다. 리뷰 내용을 적용하면서, Progress Bar가 아랫쪽에 정렬되게 할 방법을 고민한 결과. BodyText.tsx와 index.tsx의 수정사항을 모두 없앤 후에, (정규 표현식 등의 변경 사항은 그대로입니다) 아래의 사항을 적용하였습니다.

  1. chatMsgLength라는 state와 maxChatMsgLength라는 변수를 BodyText 안에 선언합니다.
  2. CircularProgressBar를 BodyText에서 사용합니다. 즉 이제 BodyText 안에 CircularProgressBar, 입력 칸, ButtonSend가 함께 들어있게 된 것입니다. CircularProgressBar를 여기 넣게 되면서, Style 수정이 일부 들어갔습니다. 새롭게 디자인한 style들은 모두 css-in-js를 적용하도록 맞추었습니다.
  3. onChange에서 현재 글자 수와 maxChatMsgLength를 비교하여, 넘어가면 최대 글자수에 맞게 자릅니다. (연속 입력이나 긴 텍스트 붙여넣기의 경우에도 최대 글자수(현재 140)에 맞게 조정됩니다)
  4. CircularProgressBar는 chatMsgLength state 값에 따라 그림을 그립니다.

(이전 버전 (~봄학기))

packages/web/src/components/Chat/MessageForm/InputText/index.tsx 의 InputText 안에 정의된 maxChatMsgLength 길이를 넘지 못하도록 합니다. 이를 구현하기 위해, BodyText의 BodyTextProps를 변경하여, 부모가 자식인 BodyText에게 본인의 함수를 넘겨줌으로써 textarea 안의 내용이 변경될 때마다 부모 안에 정의된 progress bar가 바뀌도록 하였습니다. 또한 BodyText에서 props로 max 길이를 전달 받아, index.tsx에서의 maxChatMsgLength 변경만으로 모든 로직에 max 길이의 변경 사항이 반영되도록 하였습니다.

index.tsx의 style 구조를 조금 많이 바꿨습니다. flexbox를 사용하여 progress bar와 입력 칸이 가로로 배치되도록 하는 과정에서 변화가 있었습니다

Images or Screenshots

최신 디자인

(네이비색 점은 제 크롬 확장 프로그램 때문이라 무시하셔도 됩니다) 학기 중 회의 결과 (bar 두께 줄이기, 아래로 정렬, 글자 수 표시하지 않기) 반영 image image

(이전 디자인 기준)

아래와 같이 react-circular-progressbar를 사용하여 140자 제한 중 얼마나 사용했는지 보여줍니다. image

그리고 140자가 넘으면 이렇게 되고 입력이 더이상 되지 않습니다. 140이라는 숫자는 위에 서술한 것과 같이, 바꿀 수 있습니다. 글자수 정책 변경 시, 앞으로는 정규식 외에도 이 부분을 함께 수정해주어야 합니다. image

Further Work

netlify[bot] commented 5 months ago

Deploy Preview for taxi-dev-preview ready!

Name Link
Latest commit 20526aaad9073661479dcaf78828ead90f9b715a
Latest deploy log https://app.netlify.com/sites/taxi-dev-preview/deploys/668a2b4d568d0700081a4a2a
Deploy Preview https://deploy-preview-777--taxi-dev-preview.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

GKim67 commented 5 months ago

@jinhyeonkwon @predict-woo 허걱 넷틀리파이 빌드 에러 뜨네요 !! 이거 해결해야 할듯?? 아마 별 문제는 아니고 선언했는데 안쓰는 변수 있거나 type 에러거나 사소한 것 아닐까싶네요..??

kmc7468 commented 5 months ago

왼쪽이랑 오른쪽 둘 다 빈 공간이 생기는데.. 이걸 해결할 괜찮은 방법이 없을까요?

Progress Bar는 세로축 기준으로 가운데 정렬인데, 전송 버튼은 아래에 고정되어 있는 것도 조금 부자연스럽게 느껴지는 것 같습니다.

인태님께 디자인 관련 피드백 요청드려도 괜찮을 것 같습니다! 작업 수고하셨습니당

jinhyeonkwon commented 5 months ago

빌드 에러가 아마 Direction을 안 쓰는 것 때문인 것 같은데, 다음 수정 사항에 저 import를 아예 지워보겠습니다!