반응형 디자인 유틸리티 추가. chip 일부 컴포넌트 구현 #5
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
prettierrc.json 추가. 1.탭 스페이스 2칸 2.문자열에 작은 따옴표 사용 3.객체 내에 키:값 쌍 뒤에 콤마 자동생성 안함 eslint 설정 추가. 1. 줄바꿈관련 규칙 x 2. react import 하지 않을 때 오류x 3. prop spread 금지규칙 x
색상코드, 지름, 내부요소 prop을 받아 원을 만들어줍니다. 내부요소는 필수가 아니며, 있을 시 중앙정렬됩니다.
공용 Component 폴더가 복잡해질 것을 우려해서 Chip은 한 곳에 모아두는것이 좋을 것 같습니다.
scss에서 사용할 수 있는 반응형 디자인 유틸입니다. 사용에 관해서는 맨 아래 주석 참고해주세요. 이런게 몇개 더 추가될 수도 있을 것 같아서 일단 utils.scss에 두었습니다. (import시 utils만 import하면 되도록)
화면 가로세로 값을 구하는 커스텀 훅입니다. scss에서 반응형 디자인 시에는 media.scss를 참고해주세요. 사용방법은 코드 맨 밑을 참고해주세요
8px짜리 점이 많이 쓰여서 컴포넌트화하였습니다. color prop만 색상코드로 넘겨서 사용합니다. 이후 useMemo를 통해 같은 색 점은 렌더링을 반복하지 않도록 구현해볼 예정입니다.
객체 마지막 요소 이후 , 붙이는것으로 통일하겠습니다. prettierrc에도 해당내용 적용된상태로 추가했습니다.
eunji-0623
approved these changes
Jun 1, 2024
There was a problem hiding this comment.
반응형 관련 기준이 되는 파일이 있으면 좋겠다고 생각했는데
잘 작성해주신 것 같습니다. 감사합니다!
|
확인했습니다! |
|
반응형 사이즈별 정의 굳인것 같슴다! |
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.
chip 컴포넌트
ColorCircle : {지름, 색상, children}을 지정해 해당 크기, 색상의 원을 보여줍니다.
ColorDot : ColorCircle에서 지름을 8로 고정하고 color만 prop으로 전달받는 컴포넌트입니다. 반복되서 사용되기에 분리했습니다.
반응형 디자인용 유틸리티 추가
media.scss : scss에서 반응형 디자인 코드를 작성할 때 사용합니다.
utils.scss : media같은 유틸리티가 늘어날 것을 대비해서 utils.scss만 불러오면 되도록 해봤습니다...(이후 코드 상황에 따라서 수정하겠습니다.)
useWindowSize.tsx : 화면의 가로, 세로 크기를 가져오는 커스텀 훅입니다. tsx에서 반응형으로 배치가 변경될 경우 사용할 수 있습니다.