2024-01-08 본 캠프 67일차 / 86일차 TIL (next.js pages router styled-components setting)

2024-01-08 본 캠프 65일차 / 85일차 TIL

 

주요진행사항

- 최종프로젝트 2차 스크럼 (디자이너님과)

- styled components 세팅

 

최종프로젝트 2차 스크럼

프로젝트 구조 구체화

1. 홈 (헤더 레이아웃)
- 로그인/ 회원가입 모달 창 토글
- 로그인 시 대시보드로 이동
- 로그인 시 대시보드 버튼 조건부 생성

2. 대시보드 (헤더 레이아웃)
- 스페이스 생성 (프리셋 2~3개) 모달
- 현재 유저가 참여한 모든 스페이스 리스트화(초대링크(복사버튼))
- 각 스페이스 마다 유저 정보 수정 (이름 수정), 나가기,  모달 , 스페이스 입장은 따로

3. 스페이스
- 메뉴(스페이스나가기, 토글 버튼, 키 설명)
- 하단 바, 영상/화상/마이크/채팅 
- 우측 카드 리스트 (화상/화면공유) 

 

user flow

 

 

styled components 세팅

이번 프로젝트간 styled components를 통해서 컴포넌트를 스타일링을 하기로 하였다.

공식문서에서는 css 모듈 또는 tailwind를 권장하고 있지만 다음 styled-components를 사용하는 이유는

익숙한 기술이며, 프로젝트간 다른 부분에서 러닝 커브가 높기 때문에 스타일링 부분에서는 배웠던 기술을 사용하는데 목적을 두었다. 또한 inline에 코드를 작성하는 tailwind 보다 더 높은 가독성을 가져가고 싶었다.

 

pages 컴포넌트에서 세팅 과정은 다음과 같다.

 

1. styled-components 설치

yarn add styled-compnents

 

2. _document.tsx 세팅 코드 추가

import Document, {
  DocumentContext,
  Head,
  Html,
  Main,
  NextScript,
} from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: [initialProps.styles, sheet.getStyleElement()],
      };
    } finally {
      sheet.seal();
    }
  }
  
}