@ure0126/basic-ui-components

Next.js + React + SCSS 구조 가이드

1. 기본 구조

1. app 디렉토리 중심 구조
2. 중첩 레이아웃 지원 (페이지마다 layout)


  /src
        /app
          layout.jsx               // 공통 레이아웃
          page.jsx                 // 인덱스페이지
          /layout
            skipNav.jsx            // 접근성 건너뛰기 링크
            /header
              logo.jsx
              SearchInput.jsx
            /sidebar
              navMenu.jsx
              menuItem.jsx
              notice.jsx
            footer.jsx
        /components                // 공통 UI 컴포넌트
        /styles                    // SCSS
        /[router]
          /page
            content.jsx            // 예시 페이지
      /lib                         // 유틸, API, hooks
      /public                      //정적 자원
      /styles
        /abstracts
          _variables.scss          // 색상, 폰트, 여백 등 변수 정의
          _mixins.scss             // 반복되는 스타일 구조 (ex. flex 정렬)
          _functions.scss          // 간단한 SCSS 함수
          _media.scss              // 반응형 유틸 (ex. media query mixin)
        /base
          _normalize.scss             // 리셋
          _typography.scss        // 기본 폰트 스타일
          _animations.scss        // 공통 애니메이션
        /components
          _button.scss            // Button 컴포넌트 전용 스타일
          _input.scss
        /layout
          _header.scss            // Header 레이아웃
          _footer.scss
          _grid.scss
        /pages
          _home.scss              // 페이지별 스타일
          _about.scss
        /themes
          _light.scss             // 다크모드/라이트모드 테마 변수 분리
          _dark.scss
        main.scss                 // 전역 SCSS