Closed jinhyeonkwon closed 1 month ago
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...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
@jinhyeonkwon @predict-woo 허걱 넷틀리파이 빌드 에러 뜨네요 !! 이거 해결해야 할듯?? 아마 별 문제는 아니고 선언했는데 안쓰는 변수 있거나 type 에러거나 사소한 것 아닐까싶네요..??
왼쪽이랑 오른쪽 둘 다 빈 공간이 생기는데.. 이걸 해결할 괜찮은 방법이 없을까요?
Progress Bar는 세로축 기준으로 가운데 정렬인데, 전송 버튼은 아래에 고정되어 있는 것도 조금 부자연스럽게 느껴지는 것 같습니다.
인태님께 디자인 관련 피드백 요청드려도 괜찮을 것 같습니다! 작업 수고하셨습니당
빌드 에러가 아마 Direction을 안 쓰는 것 때문인 것 같은데, 다음 수정 사항에 저 import를 아예 지워보겠습니다!
Summary
It closes #773
140자 길이 제한을 구현하고, 향후 길이 제한을 바꿀 수 있도록 하였으며, react-circular-progressbar를 사용하여 현재 글자 수를 보기 쉽게 나타냅니다.
progressbar의 위치, 크기, margin 등이 과연 적절한가, 전체 리디자인 예정이기는 해도 style 변경 사항이 디자인 시스템의 체계를 너무 갖추지 않은 건 아닌가, state 사용이나 기타 등등 코드의 전체적인 구조와 맞지 않는 점은 없는가, 등을 중점적으로 리뷰해주시면 감사하겠습니다!
앞으로 최대 글자 수를 수정하려면?
chatMsgLength
정규 표현식을 수정합니다.maxChatMsgLength
변수 값도 함께 수정해 줍니다.코드 수정 사항 설명
최신 버전 (2024.07.07.)
props에 대한 변경 사항을 모두 없애고, BodyText.tsx에서만 해결할 수 있도록 수정하였습니다. 리뷰 내용을 적용하면서, Progress Bar가 아랫쪽에 정렬되게 할 방법을 고민한 결과. BodyText.tsx와 index.tsx의 수정사항을 모두 없앤 후에, (정규 표현식 등의 변경 사항은 그대로입니다) 아래의 사항을 적용하였습니다.
chatMsgLength
라는 state와maxChatMsgLength
라는 변수를 BodyText 안에 선언합니다.maxChatMsgLength
를 비교하여, 넘어가면 최대 글자수에 맞게 자릅니다. (연속 입력이나 긴 텍스트 붙여넣기의 경우에도 최대 글자수(현재 140)에 맞게 조정됩니다)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](https://github.com/sparcs-kaist/taxi-front/assets/121283722/349ff609-7fc4-4e9d-b45c-23ee0ff526a6)
(이전 디자인 기준)
아래와 같이 react-circular-progressbar를 사용하여 140자 제한 중 얼마나 사용했는지 보여줍니다.![image](https://github.com/sparcs-kaist/taxi-front/assets/121283722/ccdbd33f-fb72-4602-8cd6-52c7331989e3)
그리고 140자가 넘으면 이렇게 되고 입력이 더이상 되지 않습니다. 140이라는 숫자는 위에 서술한 것과 같이, 바꿀 수 있습니다. 글자수 정책 변경 시, 앞으로는 정규식 외에도 이 부분을 함께 수정해주어야 합니다.![image](https://github.com/sparcs-kaist/taxi-front/assets/121283722/75662f71-b28a-469d-9fe3-547c799273fc)
Further Work