Layout system #6
Conversation
|
해당 PK에서 작업된 내용은 다음과 같습니다.
|
| children?: ReactNode | ||
| } | ||
|
|
||
| export default function SecondaryLayout({ isDark, children }: SecondaryLayoutProps) { |
There was a problem hiding this comment.
컴포넌트명이 조금 불분명해보여요. 좀더 구체적인 이름이면 좋을 것 같습니다.
There was a problem hiding this comment.
넵.. 급하게 하다보니. ㅠ 변경하도록 하겠습니다.
There was a problem hiding this comment.
해당 레이아웃은 회원가입쪽 에서만 사용되는 것을 확인하여 SignupLayout으로 수정하였습니다.
| export const BodyContentShellCss = css({ | ||
| '--layout-container-side-padding': '32px', | ||
| padding: '20px var(--layout-container-side-padding) 60px', | ||
| margin: '0 auto 15px', | ||
| maxWidth: '978px', | ||
| overflow: 'hidden', | ||
| }) |
There was a problem hiding this comment.
많은 요소가 녹아있어서 너무 힘든 것 같아요.. ㅠ
| return <BaseLayout>{page}</BaseLayout> | ||
| } |
There was a problem hiding this comment.
app.tsx 에서 BaseLayout 컴포넌트로 씌우는 것과 어떤 차이가 있나요?
There was a problem hiding this comment.
_app.tsx에서 바로 씌울경우 다른 페이지에서 nest형식으로 이루어지는 layout의 경우 테마자체가 변경되는 것을 확인하였습니다.
그래서 BaseLayout에는 css의 color속성을 변경할 수 있는 defaultColor를 props로 전달해 주고 있습니다.
추가) BaseLayout의 경우 아직은 fix된 부분은 아닙니다. 임시로 나눠둔것이 더 크다고 보시면 되요.
각 페이지들의 구성을 더 봐야 할것 같습니다.. ㅠ
| } | ||
|
|
||
| function App({ Component, pageProps }: AppPropsWithLayout) { | ||
| const getLayout = Component.getLayout ?? ((page: ReactElement) => page) |
There was a problem hiding this comment.
페이지별로 레이아웃 구성을 다르게 해야할 니즈라면 이 패턴보다는, 레이아웃 패턴과 그 패턴에 속하는 페이지를 상수로 정의하고 App 에서 페이지마다 다른 레이아웃 컴포넌트를 씌워주는 패턴이 더 직관적이고 읽기에 쉬울 것 같습니다.
There was a problem hiding this comment.
위 댓글에 있듯, 다른 페이지들의 레이아웃 구성을 확인해 봐야 할것같습니다.
현재로선 index를 제외한 signup 절차의 경우 SecondaryLayout을 활용하고 있습니다.
추후 레이아웃 시스템에 대한 정립이 이루어지면, 해당 부분도 고려해보도록 하겠습니다. 🙇
|
페이지 단위별 Layout을 설정/활용하기 위해 설정하였습니다.