[PEAUTY-138] 미용사 리스트 (요청하기) UI #73
Conversation
|
💄 Storybook: https://674ed57ea9f6bd66479b5aba-ifladnzvly.chromatic.com/ |
| height={15} | ||
| color={isSelecting ? "blue100" : "gray300"} | ||
| /> | ||
| <Text typo="subtitle300" color="blue100"> |
There was a problem hiding this comment.
현재 '선택' 이라는 텍스트는 흐름상 약간 어색한 느낌이 있습니다.
장바구니 UI가 생각나는 선택 버튼인데 선택지는 없는 상황처럼 보여서, 미용사들이 선택지라는 것을 알 수 있도록 선택 버튼을 누르기 전에 모든 미용사 앞에 미리 체크박스가 같이 있어야 할 것 같아요
그게 아니라면 예를 들어 '요청할 미용사 선택하기'라는 버튼으로 따로 빼두어야 요청할 미용사를 선택하기 위해 누르는 버튼이구나 하고 알 수 있을 것 같아요
텍스트로 설명이 어려워서,, 혹시나 이에 대한 설명이 조금 더 필요하다면 말씀해주세요!
There was a problem hiding this comment.
그리고 추가적으로 선택 전 버튼은 gray, 선택 후 버튼은 blue로 하여 선택이 된 것과 안 된 상태에 대해서 구분을 명확하게 해주시면 좋을 것 같아요~!
There was a problem hiding this comment.
@ZUITOPIA
유아이 레퍼런스로 번개장터를 참고했습니다.
그냥 하단 GNB 탭 눌러서 들어가는 페이지인데 바로 체크박스가 있는게 더 어색한 것 같습니다.
또한 그렇게 되면 GNB에다가 요청하기 버튼도 하단에 추가해야기 때문에 해당 디자인 변경은 어렵습니다.
There was a problem hiding this comment.
선택과 완료 텍스트 색상은 같은 색으로 통일하겠습니다.
src/router/customer/index.tsx
Outdated
| }, | ||
| { | ||
| path: "signup", | ||
| element: <CustomerSignUp />, | ||
| }, | ||
| { | ||
| path: "signup-complete", | ||
| element: <CustomerSignUpComplete/> | ||
| element: <CustomerSignUpComplete />, |
There was a problem hiding this comment.
변경 사항이 코드 스타일 뿐이라면 그 변경사항은 제외하고 커밋해주세요!
There was a problem hiding this comment.
이 부분은 제가 따로 수정한게 아니고 자동 정렬되어 <CustomerSignComplete />와 같이 뒤에 띄어쓰기가 들어간 것 같습니다.
| <div style={{ display: "flex", alignItems: "center", gap: "5px" }}> | ||
| <Star width={14}/>{" "} | ||
| <Star width={14} />{" "} | ||
| <Text typo="body600" color="gray100"> | ||
| <div style={{ display: "flex", gap: "5px" }}> | ||
| <span>{star}({starCount})</span> | ||
| <span> | ||
| {star}({starCount}) | ||
| </span> | ||
| <span>|</span> |
| {badges?.map((badge, index) => ( | ||
| <Badge | ||
| key={index} | ||
| type={badge.type} | ||
| variant={badge.variant} | ||
| text={badge.text} | ||
| typo={badge.typo} | ||
| /> |
There was a problem hiding this comment.
마이페이지 뱃지 컴포넌트랑 해당 페이지 뱃지 컴포넌트랑 통일해야할 것 같아요! 논의가 필요합니다
[PEAUTY-138] 미용사 리스트 (요청하기) UI
📢 관련 이슈
💻 작업 내용
📷 이미지 첨부
더 자세한 설명을 위해 첨부하실 이미지가 있다면 첨부해주세요.
🧠 PR 체크
완료하셨다면 띄어쓰기 대신 [] 사이에 소문자 x로 표시해주세요.