Skip to content
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

Merged
merged 4 commits into from
Oct 8, 2023

Conversation

rktdnjs
Copy link
Contributor

@rktdnjs rktdnjs commented Oct 5, 2023

PR 타입(하나 이상의 PR 타입을 선택해주세요)

  • 기능 추가
  • 기능 삭제
  • 버그 수정
  • CSS등 UI 수정
  • 의존성, 환경 변수, 빌드 관련 코드 업데이트

작업 사항

  • match prop 상태에 따라 매칭완료 & 일반 공고가 각각 렌더링 되도록 코드 구현

chrome-capture-2023-9-6

관련 이슈

- 중앙 매칭완료 문구 추가 필요
- 매칭 여부에 따라 배경색, 마감기한 색상, 화살표 색상, 마우스 커서 모양 동적으로 변경
@rktdnjs rktdnjs added the ✨ feature This feature will be developed label Oct 5, 2023
@rktdnjs rktdnjs self-assigned this Oct 5, 2023
Copy link
Contributor

@baegyeong baegyeong left a 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' : ''}`}
Copy link
Contributor

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' : ''}`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

match가 true일 때 아무것도 렌더링하고 싶지 않은 걸 의도하신 걸까요?
그걸 의도한 게 아니고 한 값이 '' 이런 식이라면 삼항연산자 대신 &&로 해도 좋을 것 같아요..!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

matchtrue일 때는 시각적으로 '아 이 공고는 매칭됬구나' 를 알리기 위해 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} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻미리 선언하고 match 여부에 따라 쓰니 깔끔하네요~! 배워갑니다...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰 코멘트 읽다보니 위에 공고글 전체 배경색을 match에 따라 동적으로 넣는 부분도 이런식으로 변경하면 좋겠다는 생각이 문득 들었네요!! 나중에 한 번 고쳐보도록 하겠습니다 :)

@rktdnjs rktdnjs merged commit 4617317 into Step3-kakao-tech-campus:weekly-5 Oct 8, 2023
@rktdnjs rktdnjs mentioned this pull request Oct 8, 2023
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ feature This feature will be developed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants