[정태원] 기능구현 챌린지 #6
Open
+15,536
−157
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
gyeong3un2
reviewed
May 15, 2024
| <button | ||
| type={type} | ||
| onClick={onClick} | ||
| className={`${customStyle ? customStyle : baseStyle} ${buttonStyle}`} |
There was a problem hiding this comment.
css 클래스 이름을 조건부로 적용할 수 있는 라이브러리 중에서 clsx가 있는데,
이게 npm trends에서 보면 classnames과 같은 유사한 라이브러리 중에서도 상위권에 속해서 말씀드려용!
clsx는 다양한 조건부 연산자를 지원해서 잘 사용한다면 유용하게 사용할 수도 있을 거 같아요!
제가 사용해봤을 때도 사용 안했을 때 보다 더 가독성이 좋아지는 것 같기도 해요 ㅎㅎ 😄
import clsx from 'clsx';
<button
className={clsx(customStyle ? customStyle : baseStyle, buttonStyle)}
>
// ...
</button>
There was a problem hiding this comment.
확실히 코드가 더 깔끔해지는 것 같네요!
좋은 정보 감사합니다ㅎㅎ
dmswn1004
reviewed
May 18, 2024
Comment on lines
+10
to
+14
| <button | ||
| onClick={onClick} | ||
| aria-pressed={checked} | ||
| className="p-2 bg-white border-none cursor-pointer focus:outline-none" | ||
| > |
There was a problem hiding this comment.
aria-pressed 속성을 사용하여 웹 접근성을 고려한 점이 정말 좋은 것 같아요👍
Comment on lines
+6
to
+8
| const fontSize = "text-sm"; | ||
| const height = "h-6"; | ||
| const chipClass = `flex p-4 items-center bg-lightGray justify-center text-black rounded-full ${fontSize} ${height}`; |
There was a problem hiding this comment.
Tailwind CSS 클래스를 변수화해서 사용하는 부분이 인상적이네요.
이렇게 하면 코드의 가독성이 높아지고 유지 보수도 용이할 것 같아요!!
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.
필수 구현 사항
https://clinicaltrialskorea.com/studies/{검색어ID}링크로 이동console.info("calling api")출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정추가 구현 사항
선택 구현 사항