-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[feat] : Card 컴포넌트 기능 보완 #25
[feat] : Card 컴포넌트 기능 보완 #25
Conversation
- 중앙 매칭완료 문구 추가 필요 - 매칭 여부에 따라 배경색, 마감기한 색상, 화살표 색상, 마우스 커서 모양 동적으로 변경
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Card 컴포넌트 너무 야무지네요.. 수고하셨어요!!!! 👍🏻👍🏻👍🏻
<div className="w-80 h-20 rounded-xl border-[#8B8B8B] border my-4 py-2 px-3 flex justify-between"> | ||
<div | ||
className={`w-80 h-20 rounded-xl border-[#8B8B8B] border m-auto my-[15px] | ||
${match ? 'bg-[#000000]/50' : ''}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#000000
은 그냥 bg-black
으로 해도 잘 들어갈 것 같아요~! 그 외의 색상들도 tailwind.config.js에 지정해둬서 쓰면 편리할 것 같습니다!! 🙂🙂
className={`w-80 h-20 rounded-xl border-[#8B8B8B] border m-auto my-[15px] | ||
${match ? 'bg-[#000000]/50' : ''}`} | ||
> | ||
<Link to={match ? './' : to} className={`flex justify-between py-2 px-3 ${match ? 'cursor-default' : ''}`}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
match
가 true일 때 아무것도 렌더링하고 싶지 않은 걸 의도하신 걸까요?
그걸 의도한 게 아니고 한 값이 ''
이런 식이라면 삼항연산자 대신 &&
로 해도 좋을 것 같아요..!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
match
가 true
일 때는 시각적으로 '아 이 공고는 매칭됬구나' 를 알리기 위해 bg-[#000000]
을 적용했고, false
일 경우에는 아무것도 적용시키지 않기 위해서 ''
형태로 남겨두었습니다!
<div> | ||
<div className="flex items-center"> | ||
<MdOutlineLocationOn className="mr-1" style={{ color: '#0075FF' }} /> | ||
{orderLocation} | ||
</div> | ||
<BsArrowDown style={{ color: '8B8B8B' }} /> | ||
<BsArrowDown style={arrowColor} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍🏻미리 선언하고 match 여부에 따라 쓰니 깔끔하네요~! 배워갑니다...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
리뷰 코멘트 읽다보니 위에 공고글 전체 배경색을 match에 따라 동적으로 넣는 부분도 이런식으로 변경하면 좋겠다는 생각이 문득 들었네요!! 나중에 한 번 고쳐보도록 하겠습니다 :)
PR 타입(하나 이상의 PR 타입을 선택해주세요)
작업 사항
관련 이슈