[Feat/#32] Input 공통 컴포넌트 제작 #47
Merged
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
maxLength 초과 입력 불가
|
PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶 |
pepperdad
requested changes
Jul 7, 2024
There was a problem hiding this comment.
채현이 고생해써 ~~ !!!
스토리북도 했네 ㅎㅎㅎ
근데 우리가 컴포넌트를 만드는 거니까 state를 컴포넌트 내부에 선언하는 게 아니라 밖에서 선언하고 값을 가질 수 있게 구조를 바꿔야할 것 같아!
관련해서 작성했으니까 확인하고 수정해봐!
https://jiwoothejay.notion.site/Input-21c0e54982644c3e9286178eee1f2527?pvs=25
Comment on lines
12
to
33
| export const TextFieldInput = styled.input` | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| height: 4.8rem; | ||
| padding: 0 1.6rem; | ||
|
|
||
| color: ${({ theme }) => theme.colors.gray_0}; | ||
|
|
||
| background: ${({ theme }) => theme.colors.gray_800}; | ||
| border: none; | ||
| border-radius: 0.6rem; | ||
|
|
||
| ${({ theme }) => theme.fonts["body2-normal-medi"]}; | ||
|
|
||
| &::placeholder { | ||
| color: ${({ theme }) => theme.colors.gray_600}; | ||
| } | ||
|
|
||
| &:focus { | ||
| border: 1px solid ${({ theme }) => theme.colors.gray_0}; | ||
| } | ||
| `; |
There was a problem hiding this comment.
https://github.com/TEAM-BEAT/BEAT-Client/assets/58854041/b781699d-4782-4ea7-9eb5-fee13d3e303c
p2) 지금 위 영상처럼 focus 됐을 경우에 border 때문에 input이 조금 밀리고 있어요!
이 부분은 border 색상에 transparent 주면 될 것 같습니다! 그리고 전체 태그들이 이미 border-box라서 이 부분은 필요없어 보여요!
TextArea도 똑같은 문제가 발생해서 따로 리뷰는 안 달게요! 수정 부탁드립니다 ㅎㅎ
Suggested change
| export const TextFieldInput = styled.input` | |
| box-sizing: border-box; | |
| width: 100%; | |
| height: 4.8rem; | |
| padding: 0 1.6rem; | |
| color: ${({ theme }) => theme.colors.gray_0}; | |
| background: ${({ theme }) => theme.colors.gray_800}; | |
| border: none; | |
| border-radius: 0.6rem; | |
| ${({ theme }) => theme.fonts["body2-normal-medi"]}; | |
| &::placeholder { | |
| color: ${({ theme }) => theme.colors.gray_600}; | |
| } | |
| &:focus { | |
| border: 1px solid ${({ theme }) => theme.colors.gray_0}; | |
| } | |
| `; | |
| export const TextFieldInput = styled.input` | |
| width: 100%; | |
| height: 4.8rem; | |
| padding: 0 1.6rem; | |
| color: ${({ theme }) => theme.colors.gray_0}; | |
| background: ${({ theme }) => theme.colors.gray_800}; | |
| border: 1px solid transparent; | |
| border-radius: 0.6rem; | |
| ${({ theme }) => theme.fonts["body2-normal-medi"]}; | |
| &::placeholder { | |
| color: ${({ theme }) => theme.colors.gray_600}; | |
| } | |
| &:focus { | |
| border: 1px solid ${({ theme }) => theme.colors.gray_0}; | |
| } | |
| `; |
Comment on lines
18
to
24
| <S.TextAreaWrapper> | ||
| <S.TextAreaInput | ||
| value={inputValue} | ||
| onChange={handleOnInput} | ||
| maxLength={maxLength} | ||
| placeholder={placeholder} | ||
| ></S.TextAreaInput> |
There was a problem hiding this comment.
p4) 여기 안에 들어가는 content가 없어서 self closing 태그로 바꾸면 좋을 것 같아요! Input도 마찬가지로!
Suggested change
| <S.TextAreaWrapper> | |
| <S.TextAreaInput | |
| value={inputValue} | |
| onChange={handleOnInput} | |
| maxLength={maxLength} | |
| placeholder={placeholder} | |
| ></S.TextAreaInput> | |
| <S.TextAreaWrapper> | |
| <S.TextAreaInput | |
| value={inputValue} | |
| onChange={handleOnInput} | |
| maxLength={maxLength} | |
| placeholder={placeholder} | |
| /> |
| maxLength?: number; | ||
| placeholder: string; | ||
| narrow?: false | true; | ||
| unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "원" |
Comment on lines
5
to
12
| export const TextFieldLayout = styled.section<{ narrow?: false | true }>` | ||
| position: relative; | ||
| width: ${({ narrow }) => (narrow ? "13.6rem" : "32.7rem")}; | ||
| `; | ||
| export const TextFieldWrapper = styled.article` | ||
| ${Generators.flexGenerator("row", "center", "center")} | ||
| `; | ||
| export const TextFieldInput = styled.input` |
There was a problem hiding this comment.
p4) 여기 가독성 좋게 한 칸씩 띄어서 써주면 좋을 것 같아요!
Suggested change
| export const TextFieldLayout = styled.section<{ narrow?: false | true }>` | |
| position: relative; | |
| width: ${({ narrow }) => (narrow ? "13.6rem" : "32.7rem")}; | |
| `; | |
| export const TextFieldWrapper = styled.article` | |
| ${Generators.flexGenerator("row", "center", "center")} | |
| `; | |
| export const TextFieldInput = styled.input` | |
| export const TextFieldLayout = styled.section<{ narrow?: false | true }>` | |
| position: relative; | |
| width: ${({ narrow }) => (narrow ? "13.6rem" : "32.7rem")}; | |
| `; | |
| export const TextFieldWrapper = styled.article` | |
| ${Generators.flexGenerator("row", "center", "center")} | |
| `; | |
| export const TextFieldInput = styled.input` |
src/utils/useInputFiter.ts
Outdated
There was a problem hiding this comment.
p4) 유틸함수까지!!! 파일명 useInputFilter로 바꿔줘!
…to feat/#32/CommonInput ; Conflicts: ; src/pages/test/TestPage.tsx
|
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.
📌 관련 이슈번호
🎟️ PR 유형
어떤 변경 사항이 있나요?
✅ Key Changes
📢 To Reviewers
📸 스크린샷
스토리 설명하자면
리뷰에 올라오는 스토리북 사이트 들어가서 테스트하고 이슈 알려주세요!!
이건 테스트 페이지 화면 개발환경입니다.
🔗 참고 자료
✨스토리북 전역 theme 설정 트슈 작성했어요