feat: 고객센터 페이지 퍼블리싱 #81
Conversation
src/components/Button/index.tsx
Outdated
| @@ -16,6 +16,7 @@ export interface ButtonProps extends ComponentProps<"button"> { | |||
| readonly size?: Size; | |||
| readonly isBlock?: boolean; | |||
| readonly icon?: React.ReactNode; | |||
| readonly className?: string; | |||
There was a problem hiding this comment.
extends ComponentProps<"button">인데 ...props에서 className이 안들어가서 추가된 코드인가요?? 🤔
There was a problem hiding this comment.
엇 그 생각을 못 했네요. 불필요한 코드입니다! 삭제하겠습니다~
src/components/TextArea/style.ts
Outdated
| ${({ warn = false, theme }) => { | ||
| return css` |
There was a problem hiding this comment.
화살표 함수니까 { return ...} 제거하면 깔끔해질 것 같아요 👍
There was a problem hiding this comment.
넵 예전에 작성한 Input 스타일 코드 거의 그대로 가져온 거라 그렇게 됐네요. 두 파일 다 고치겠습니다!
src/components/TextArea/style.ts
Outdated
| ${({ theme }) => { | ||
| return css` |
|
|
||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> |
이메일 입력 필드만
추가 했어야 했던 부분인데 감사합니다
괜찮은 것 같습니다 |
| setInquiryContent(e.target.value); | ||
| }; | ||
|
|
||
| const send = () => { |
There was a problem hiding this comment.
정규식은 적용 안하는 걸까요?
let regex = new RegExp('[a-z0-9]+@[a-z]+.[a-z]{2,3}'); 정도만 적용해도 될 것 같습니다!
There was a problem hiding this comment.
이번 PR은 디자인 위주로 진행해서 이후에 추가하려고 합니다!
default.mp4이렇게 해봤는데 괜찮은가요? |
|
색이 다르다는 게 기본 상태일 때 말씀하시는 걸까요? 현재 기본 색상은 placeholder 및 text와 동일하게 설정했고 focus는 border와 색이 동일합니다. 그리고 이 아이콘 포함한 Input을 HomeDesk에서만 구현을 할까요 아님 기존 TextInput 컴포넌트에 아이콘이 포함될 수 있도록 추가 설정을 해주는 게 좋을까요? |
|
blue-60 보다 조금 밝아보여서요! 근데 코드를 보니까 문제가 없네요. 영상에서 밝아보였나봐요 |
📝 개요
고객센터 페이지 퍼블리싱
helpdesk.mp4
화면 슬라이드 속도가 개발자 도구에서 본 거랑 살짝 다르게 느껴져서 휴대폰으로 테스트한 영상 올립니다.
🚀 변경사항
사파리에서 input, textarea 클릭 시 위와 같이 화면이 확대되는 현상이 있어서
index.tsx viewport meta 태그에 maximum-scale=1.0, user-scalable=0 추가했습니다.
🔗 관련 이슈
#80
➕ 기타
Figma와 다르게 한 부분들이 있어서 의견을 듣고 싶습니다.
두 번째 화면에서 보내는 사람, 받는 사람은 배치하니까 뭔가 애매하기도 하고 전체적으로 갑자기 확 딱딱해지는 느낌이 들어서 일단 빼보았습니다. 타 사이트 고객센터 페이지들도 찾아봤는데 대부분 안내 사항과 작성 폼으로만 이루어져 있어서 이 부분은 없어도 될 것 같다는 생각이 듭니다.
문의 유형은 있어야 할 것 같아서 넣었는데 폰트 사이즈나 배치 등 스타일이 고민이 됩니다. 이쪽 화면의 다른 요소들도 배치가 고민입니다. 의견 주시면 감사하겠습니다.
제가 올린 영상과 사진에서 보시다시피 폰 세로 화면 크기에 따라 밑에 여백이 꽤 남는 경우도 있는데 현재 요소 배치 및 사이즈가 괜찮은지 의견이 궁금합니다.