✨ feat: Notice 컴포넌트 제작 #38 #50
Conversation
sohyun0
added
✨ feat
|
@sohyun0 is attempting to deploy a commit to the projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| <Button | ||
| as={Link} | ||
| href={href} | ||
| size='xs38' | ||
| full | ||
| className='font-bold' | ||
| variant={status !== 'open' ? 'disabled' : 'primary'} | ||
| > | ||
| {status !== 'open' ? '신청 불가' : '신청하기'} | ||
| </Button> |
There was a problem hiding this comment.
조건문을 변수로 사용하는 건 어떨까요? (제안)
const isOpen = status === 'open';
const statusText = isOpen ? '신청하기' : '신청 불가';
const statusVariant = isOpen ? 'primary' : 'disabled';
There was a problem hiding this comment.
아 이부분은 실제로 사용하는건 아니고 사용법을 보여드리기위한 목업컴포넌트라 추후 삭제할 예정입니다 :D
| {variant === 'notice' && ( | ||
| <> | ||
| <NoticeHeader name={name} category={category} /> | ||
| <section className={noticeFrame()}> | ||
| <NoticeImage name={name} imageUrl={imageUrl} /> | ||
| <NoticeInfo variant={variant} value={noticeVariantValue} buttonComponent={children} /> | ||
| </section> | ||
| <section className='flex flex-col gap-3 rounded-xl bg-gray-100 p-8'> | ||
| <h3 className='text-body-l font-bold'>공고 설명</h3> | ||
| <p className='text-body-l'>{description}</p> | ||
| </section> | ||
| </> | ||
| )} | ||
| {variant === 'shop' && ( | ||
| <> | ||
| <h2 className={cardLayout.heading({ size: 'lg' })}>내 가게</h2> | ||
| <section className={cn(noticeFrame(), 'bg-red-100')}> | ||
| <NoticeImage name={name} imageUrl={imageUrl} /> | ||
| <NoticeInfo variant={variant} value={shopVariantValue} buttonComponent={children} /> | ||
| </section> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
JSX 내부보다 함수로 변경해 외부에서 사용하는 건 어떨까요?
ex) {variant === 'notice' ? renderNotice() : renderShop()}
There was a problem hiding this comment.
renderNotice , renderShop 파일로 분리했습니다!
컴포넌트 분리하면서 해당 컴포넌트가 3depth 까지 전파되고 있는데 props drilling 도 문제였는데 타입도 똑같이 drilling 되더라구요 ㅠ 이런점을 나중에좀 생각하면서 리팩토링 해야겠다는 생각 했습니다 ㅎㅎ
There was a problem hiding this comment.
고생하셨습니다! 저도 컴포넌트 분리하거나 리팩토링 할 때 depth 깊어지는 경우가 많더라구요😭
리팩토링도 여러가지 고려해야 하는 부분이 많은 것 같습니다...
2 participants
📝 작업 개요 (필수)
✨ 작업 내용 (필수)
📸 스크린샷
🧐 해결해야 하는 문제
🤔 리뷰어 확인 필요 사항
🔗 관련 이슈
🛠️ 후속 작업
✅ 체크리스트 (필수)