Conversation
| rgb(var(--background-end-rgb)) | ||
| ) | ||
| rgb(var(--background-start-rgb)); | ||
| .max-container { |
There was a problem hiding this comment.
global에 max-container 클래스 두고 필요할때마다 여기저기서 가져다 쓰려고했는데,
이번미션부터 module css를 사용해서.. 약간 아래처럼 사용해야하는 상황인데
className={`${style.xxx} max-container`}
혹시 css모듈에서 글로벌하게 사용하는 좋은방법 있을까요? (:global 어쩌고.. 이렇게 자주 쓰이나요..? 그러면.. 애초에 global.css 도 모듈로 사용해야하는데 일관성잇게 global도 모듈쓰는 방향으로 가는게 좋을까요)
There was a problem hiding this comment.
max-container가 다른 컴포넌트에서 사용되는 경우가 없어서 우선 다른 방법을 쓰시기를 추천드립니다.
css 모듈이 스타일의 중첩을 방지하기 위한 방식이라 global 하게 사용하는 좋은 방식은 없는 것으로 압니다 🥹
말씀해주신 목적을 구현하기 위한 다양한 접근 방식이 있는데, 이중 희진님이 하신 것처럼 globalStyle 파일을 만드시는 것도 포함되어 잇습니다.
다만 어떤것이 더 적절한가는 usage에 따라 다를 것 같습니다.
| export default function Header() { | ||
| return ( | ||
| <header className={styles.header}> | ||
| <div className={`${styles.headerContainer}`}> |
There was a problem hiding this comment.
P3:
단일 클래스라면 아래처럼 하시는 걸 추천드려요~
| <div className={`${styles.headerContainer}`}> | |
| <div className={styles.headerContainer}> |
| aria-label="홈으로 이동" | ||
| /> | ||
| <nav className={styles.nav}> | ||
| <Link href={'/boards'}>자유게시판</Link> |
There was a problem hiding this comment.
P2:
해당 메뉴의 주소일 때 색이 변하게 해주시면 더 좋을 것 같습니다~
참고하실만한 링크 남깁니다
#next Link 태그 문서
https://nextjs.org/docs/app/api-reference/components/link#checking-active-links
| <> | ||
| <Header /> | ||
| <main className={styles.main}> | ||
| <div className={'max-container'}>{children}</div> |
There was a problem hiding this comment.
P3:
멘토링때도 얘기나눴던 사항이지만
max-container 클래스가 단일 컴포넌트에서만 사용되니 globalStyle 파일에서 GlobalLayout.module.css 로 옮기면 좋을 것 같습니다~
|
|
||
| interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { | ||
| children: React.ReactNode; | ||
| className?: string; |
There was a problem hiding this comment.
P2:
ButtonHTMLAttributes<HTMLButtonElement>에 이미 classname 이 정의되어 있으니 아래처럼 하시는걸 추천드려요~
| className?: string; |
|
|
||
| export default function Button({ | ||
| children, | ||
| className, |
There was a problem hiding this comment.
P1:
classname이 undefined일 수 있고 그러면 ${classname}일 때 undefined가 들어갈 수 있으니 빈 문자열로 초기화해주세요~
| className, | |
| className = '', |
| props: { | ||
| boards: list || [], | ||
| }, | ||
| revalidate: 600, // Re-generate the page every 600 seconds (ISR) |
There was a problem hiding this comment.
P3:
적절하게 잘 사용하셨네요! 관련해서 읽어보면 좋을 글이 있어서 첨부합니다~
| interface BestBoardCardProps | ||
| extends Pick< | ||
| Board, | ||
| 'title' | 'image' | 'writer' | 'likeCount' | 'createdAt' | ||
| > {} |
There was a problem hiding this comment.
P2:
추가로 정의할 타입이 있지 않다면 아래처럼 하시는 것을 추천드립니다.
| interface BestBoardCardProps | |
| extends Pick< | |
| Board, | |
| 'title' | 'image' | 'writer' | 'likeCount' | 'createdAt' | |
| > {} | |
| type BestBoardCardProps = Pick< | |
| Board, | |
| 'title' | 'image' | 'writer' | 'likeCount' | 'createdAt' | |
| >; |
요구사항
기본
심화