@ure0126/basic-ui-components

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

1. 기본 구조

  1. 1. app 디렉토리 중심 구조
  2. 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

2. 디자인 규칙

  1. 1. 반응형 사이즈 지정 : mo 768 / tab 1024 / pc 1280
  2. 2. Spacing : padding, margin은 4px 단위
  3. 3. Font : NotoSans

3. 클래스 규칙

  1. 1. is-open
  2. 2. has-child
  3. 3. is-active : 버튼 클릭시 추가 클래스

4. SCSS스타일 : BEM

5. 컴포넌트 목록