-
Notifications
You must be signed in to change notification settings - Fork 1
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 & Text & NavigationHeader 구현 #13
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.
고생하셨습니다! 혹시 approve해도 리뷰에 답을 남겨주실 수 있을까요?
import { | ||
BottomNavigationLayout, | ||
PageLayout, | ||
ProtectedLayout, | ||
} from '@/shared/ui'; |
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.
이렇게 하니까 가독성이 좋아지네요
export { default as NavigationHeader } from './NavigationHeader'; | ||
export { default as PrimaryChips } from './Chips'; | ||
export { default as Button } from './Buttons'; | ||
export { default as RouteMove } from './RouteMove'; |
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.
이렇게 index에 한데 모아서 export 하는 이유가 뭘까요?
export const useMoveLocation = (location: RouteInfo['location']) => { | ||
const navigate = useNavigate(); | ||
|
||
const handleMoveLocation = useCallback(() => { | ||
if (location === 'back') { | ||
navigate(-1); | ||
} else { | ||
navigate(location); | ||
} | ||
}, [navigate, location]); |
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.
외부 라이브러리로 부터의 결합성을 낮추는 이런 방식이 있군요!
import clsx from 'clsx'; | ||
|
||
interface TextProps { | ||
as: keyof typeof style; | ||
title: string; | ||
className?: string; | ||
} | ||
|
||
const style = { | ||
title: 'text-black font-extrabold text-[15px] not-italic', | ||
description: 'text-gray font-medium text-[13px] not-italic', | ||
} as const; | ||
|
||
export default function Text({ as, title, className }: TextProps) { | ||
return <p className={clsx(style[as], className)}>{title}</p>; | ||
} |
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.
Text 컴포넌트는 용도가 어떻게 될까요? 스크린샷이 있을까요?
return <div className={clsx(`flex-1`, className)}>{children}</div>; | ||
} | ||
|
||
const Card = Object.assign(Root, { Header, Content, Bottom }); |
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.
이거 배워갑니다. 오픈 소스 라이브러리에서만 보던건데 너무 좋은데요?
이슈 번호
작업한 목록을 작성해 주세요
스크린샷
2025-01-29.12.58.21.mov
pr 포인트나 궁금한 점을 작성해 주세요
연관된 issue: #undefined