Feat : 포즈픽 페이지 구현 #9
Conversation
| function CountItem({ isSelected, count, onClick }: CountItemProps) { | ||
| return ( | ||
| <div | ||
| className={`flex grow cursor-pointer items-center justify-center first:rounded-l-8 last:rounded-r-8 ${ |
| @@ -14,6 +14,10 @@ | |||
| display: none; | |||
| } | |||
|
|
|||
| html { | |||
| font-size: 4vw; | |||
There was a problem hiding this comment.
4vw는 어떻게 나온 기준일까요 ?!
(관용적으로 많이 쓰이는 값인지, 저희 프로젝트에만 적용된건지 ? 궁금합니당)
There was a problem hiding this comment.
이 폰트사이즈는 아래에 있는 @media(min-width:420px){ }의 범위가 아닌, 즉 440px보다 작을 경우에 적용이 됩니다.
너비가 440px일 때 16px이고, 그 이후로는 vw, 즉 뷰포트 너비에 맞게 font-size또한 작아져야 합니다.
이야기하면서 생각난건데, 정확한 수치는 4vw가 아니겠네요.
440px * x = 16
x = 16/440px = 약 0.036..
이네요. calc를 이용하면 font-size: calc(16vw / 440 * 100);로 표현할 수 있겠네요. 이렇게 수정해서 다음 PR에 올리겠습니다 !
| @@ -47,7 +47,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) | |||
| return ( | |||
| <html lang="ko"> | |||
| <body className="flex h-[100dvh] w-screen touch-none justify-center bg-slate-100 py-px"> | |||
There was a problem hiding this comment.
전 PR에서 루트 레이아웃에 변경사항이 있었는데 혹시 머지중에 충돌난다면 규성님이 쓰신걸루 해주세요!
| props?: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>; | ||
| } | ||
|
|
||
| export default function Button({ text, type = 'button', className, ...props }: ButtonProps) { |
There was a problem hiding this comment.
저희 버튼도 종류가 많아서.. Primary Button으로 따로 이름을 붙이는건 어떨까요?
There was a problem hiding this comment.
음 그것도 좋은 방법이 될 거 같아요.
버튼이 다양해서 각 도메인에서 버튼을 커스텀하여 만드는 방법을 생각했지만, 자주 쓰는 primary button은 만들면 좋을 거 같네요.
| "divider": COLOR.gray[100], | ||
| // bg | ||
| white: COLOR.white, | ||
| 'sub-white': COLOR.gray[50], |
There was a problem hiding this comment.
큰 상관은 없긴 한데, 요 파일 프리티어로 자동 적용 된 것 같네요..!
💡 왜 PR을 올렸나요?
💁 무엇이 어떻게 바뀌나요?
className을 전달하여 색을 설정할 수 있도록 확장성을 열어두었습니다.📆 작업 예정인 것이 있나요 ?
💬 리뷰어분들께
h6를 추가하여 구현하였는데, 선영님 PR 머지 후에 다시 수정하도록 하겠습니다.