[FE] refactor: 리뷰 폼 웹 접근성 개선 #843
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
xodms0309
reviewed
Nov 15, 2023
| @@ -18,6 +18,7 @@ const ReviewTagItem = ({ id, name, variant, isSelected }: ReviewTagItemProps) => | |||
|
|
|||
| const handleReviewTag = () => { | |||
| handleReviewFormValue({ target: 'tagIds', value: id, isSelected }); | |||
| console.log({ target: 'tagIds', value: id, isSelected }); | |||
|
|
||
| const handleReviewFormValue = ({ target, value, isSelected }: ReviewFormActionParams) => { | ||
| setReviewFormValue((prev) => { | ||
| const targetValue = prev[target]; | ||
|
|
||
| if (Array.isArray(targetValue)) { | ||
| if (targetValue.length >= MIN_DISPLAYED_TAGS_LENGTH && !isSelected) { | ||
| toast.success(`태그는 ${MIN_DISPLAYED_TAGS_LENGTH}까지 선택할 수 있습니다`); |
There was a problem hiding this comment.
toast.success toast.info toast.error 이런식으로 나눠야 하려나요 🤔 뭔가 이게 success도 아니고 error도 아니라서 애매하네여
There was a problem hiding this comment.
전 나누는거 좋아요! 근데 나누게 되면, 색상 분리를 어떻게 하는게 좋을까요?
제 생각으로는 success의 색상이 바껴야할 거 같은데 어떤 색으로 해야할 지 고민이네용
에러일 때처럼 디자인 시스템에 있는
여기 success 색상 그대로 가져다 쓰는건 어떤가요?
근데 흰색 글씨가 잘 보일지 모르겠군여 🤔
| @@ -98,7 +98,6 @@ const Form = styled.form` | |||
| const CommentTextarea = styled(Textarea)` | |||
| height: 50px; | |||
| padding: 8px; | |||
| font-size: 1.4rem; | |||
There was a problem hiding this comment.
요거 위에 리드미에 작성했는데 우리 모바일에서 댓글 input 누르면 확대되는 요상한 오류 있었잖아요?
그거 해결 방법인 거 같아서 시도해봤어요!
자세한 내용은 리드미에 있슴당~~
|
해당 PR은 fun eat client로 이관하여 close 하겠습니다. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
✨ 구현한 기능
키보드만으로 리뷰 작성이 가능한지 테스트 통과
태그를 일부 숨기는 화살표 버튼을 삭제했습니다
태그 최대 개수 이상을 클릭하면 토스트가 뜨도록 할 예정입니다.
(근데 마구 갈기면 사라지는게 좀 구리긴 함)
2023-11-09.9.59.09.mov
꿀조합 댓글 input 클릭 시 확대되는 현상 기억 나시나요?
그게 웹 접근성적인 측면으로 글씨가 14px인가? 이하이면 확대되는 기능이 있다고 합니다!
아마 글씨가 너무 작아서 안보이니까 그런 기능이 있는 거 같아요.
물론 우리는 1.4rem이긴 했는데 이거랑 연관된 현상인 거 같아 font-size를 삭제했어요.
요정도 크기입니다!
그리고 디자인 시스템에서 text area 유효성 로직 붙으면 error 상태일 때 같이 통과 못하게 로직 여기에 더 추가할 예정~
📢 논의하고 싶은 내용
x
🎸 기타
x
⏰ 일정