[FEAT] 마감기한 공통컴포넌트 퍼블리싱 #39
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
Kjiw0n
force-pushed
the
feat/#29-deadline-component
branch
2 times, most recently
from
eff2ad8
to
491ec35
Compare
wrryu09
reviewed
Jul 7, 2024
src/components/commons/BtnDate.tsx
Outdated
| display: flex; | ||
| width: 1.4rem; | ||
| height: 1.4rem; | ||
| justify-content: center;s |
wrryu09
reviewed
Jul 7, 2024
src/components/commons/BtnDate.tsx
Outdated
| display: flex; | ||
| width: fit-content; | ||
| min-width: 18rem; | ||
| padding: ${({ size }) => (size === 'big' ? '0.5rem 1rem' : '0.5rem 1rem')}; |
There was a problem hiding this comment.
여기 big 일 경우 아닌 경우 패딩값 동일한 것 같습니다!!
There was a problem hiding this comment.
헉 근데 이 내용 디자인측에서 size에 대한 패딩값 고정해주셔서 삭제했습니다!!!
Kjiw0n
force-pushed
the
feat/#29-deadline-component
branch
from
491ec35
to
196612e
Compare
seong-hui
reviewed
Jul 7, 2024
src/components/commons/BtnDate.tsx
Outdated
| align-items: center; | ||
| `; | ||
|
|
||
| const LineIcon = styled(Icons.Icn_line, { target: 'LineIcon' })<{ size: string }>` |
src/components/commons/BtnDate.tsx
Outdated
|
|
||
| const XIcon = styled((props: React.SVGProps<SVGSVGElement> & { isClicked: boolean }) => { | ||
| const { isClicked, ...rest } = props; | ||
| return <Icons.Icn_xCricle {...rest} />; |
There was a problem hiding this comment.
해당 부분에 Imported JSX component Icn_xCricle must be in PascalCase or SCREAMING_SNAKE_CASE라는 lint에러가 나서 해당 부분 네이밍 변경해주시면 좋을 것 같습니당!
Kjiw0n
force-pushed
the
feat/#29-deadline-component
branch
2 times, most recently
from
e5d9b15
to
5d1ede0
Compare
Kjiw0n
force-pushed
the
feat/#29-deadline-component
branch
from
5d1ede0
to
5e60c84
Compare
wrryu09
reviewed
Jul 7, 2024
src/components/commons/BtnDate.tsx
Outdated
Comment on lines
39
to
51
| <BtnDateContainer> | ||
| <CalanderIcon /> | ||
| <TextWrapper isDefault={isDefaultDate} size={size}> | ||
| {date} | ||
| </TextWrapper> | ||
| </BtnDateContainer> | ||
| <LineIcon size={size} /> | ||
| <BtnDateContainer> | ||
| <ClockIcon /> | ||
| <TextWrapper isDefault={isDefaultTime} size={size}> | ||
| {time} | ||
| </TextWrapper> | ||
| </BtnDateContainer> |
There was a problem hiding this comment.
여기 BtnDateContainer 로 감싼 아이콘, date, time 정도만 달라지는 부분이 있는데 컴포넌트로 따로 빼면 코드 중복 줄일 수 있을 것 같습니다! 코드 길이도 짧아져서 가독성에도 더 좋을 것 같아요!
seong-hui
reviewed
Jul 7, 2024
src/assets/svg/index.ts
Outdated
| @@ -5,9 +5,18 @@ import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; | |||
| import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; | |||
| import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; | |||
|
|
|||
| import Icn_calander from '../../assets/svg/calendar-minus-01.svg?react'; | |||
wrryu09
approved these changes
Jul 7, 2024
seong-hui
approved these changes
Jul 7, 2024
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.
작업 내용 🧑💻
BtnDate.tsxBtnStagingDate.tsx알게된 점 🚀
hover 시 다른 요소의 속성을 설정할 때 에러가 나는 경우,
target설정을 통해 해결 가능하다.svg를 커스텀 할 때(색상 변경 등), 적용이 안된다면 각 속성이 포함된 태그를 잘 확인하는 것이 필요하다.
예를 들어, stroke 속성이
<path>태그 내에 있다면stroke: black;이 아닌 다음과 같이 적용할 수 있다.pressed 일 때의 스타일을
active를 통해 적용하고자 하였는데, pressed와 clicked의 구분이 안된다는 문제가 있었습니다.하여
isPressed와 같은 상태를 추가하여 구분하였다.리뷰 요구사항 💬
관련 이슈
close #29
스크린샷 (선택)
2024-07-07.16.27.18.mov