Getting Started

작업 환경

Astro와 Starlight를 사용합니다.

npm install

npm run dev

npm run build

디렉토리 구조

Directory/
- Directorypublic/
  - Directoryui/
    Directoryfont/
    Directoryfont-name/
    font-name.woff2
    font-name.woff
    font-name.css
    Directorylib/
    Directorylib-name/
    lib-name.js
    lib-name.css
    Directorymw/
    …
    Directorypc/
    …
  - Directorydummy/
    Directoryimages/
    …
    Directoryvideos/
    …
- Directorysrc/
  - Directoryshared/
    Directorystyle/
    _usable.scss
    _base.scss
    _util.scss
    _theme.scss
    _ui.scss
    Directoryui/ 기본 UI 단위 컴포넌트 (예: 버튼, 폼 컨트롤, 모달 레이어 등)
    Directorycomponent-name/
    ComponentName.astro
    _component-name.scss
    component-name.js
    …
    Directorymodule/ 재사용 가능한 UI 패턴 - ui/ 컴포넌트들의 조합 (예: 상품 리스트, 상품 유닛, 헤더, 푸터 등)
    Directorymodule-name/
    ModuleName.astro
    _module-name.scss
    module-name.js
    …
    Directorytemplate/ 전시 템플릿 (예: Product 1, Img + Text 3 등)
    Directorytemplate-name/
    TemplateName.astro
    _template-name.scss
    template-name.js
    …
  - Directorymw/ 모바일
    Directorycommon/
    _theme.scss
    _ui.scss
    common.scss
    Directoryui/
    …
    Directorymodule/
    …
    Directorytemplate/
    …
  - Directorypc/ 데스크탑(PC)
    …
- Directorypages/
  - Directorymw/
    …
  - Directorypc/
    …
- Directorydocs/ Starlight 문서. 내부에 별도 세팅
  - Directorysrc/
    Directorycontent/
    Directorydocs/
    …

이미지

사이즈(width는 필수) 기입할 것 (속도, 과금 이슈)

네이밍 규칙

kebab-case 사용을 기본으로 합니다.
Astro 컴포넌트 파일명은 PascalCase로 작성합니다. (예: ProductList.astro)
Astro 페이지 파일명은 kebab-case로 작성합니다. (예: pages/mo/page-name.astro)
@use로 사용되는 SCSS 파일명은 _로 시작합니다. (예: _product-list.scss)
TODO: _로 시작하지 않는 SCSS 파일은 빌드 시 동일한 이름의 CSS 파일을 생성합니다. (예: mw/common/common.scss → dist/ui/mw/common/common.css)

SCSS -> CSS

CSS 파일은 개발 시(npm run dev)와 산출물 빌드 시(npm run build) 처리 방법이 다릅니다.

빌드 시에는 생성된 CSS 파일의 경로 및 파일명을 제어하기 위하여 별도 처리를 합니다.

하지만, 개발 시에는 빠른 개발을 위하여 Astro가 페이지 HTML 내에 인라인 <style>로 CSS 코드를 삽입하는 방식을 그대로 사용합니다.

이러한 처리를 위해 빌드 시에는 파일이 생성될 경로의 <link>를 삽입해주어야 합니다.

---
// Astro가 해당 파일을 인식하여 처리할 수 있도록 `import`해주어야 합니다.
import "@mw/path/to/style.scss";
---

<Fragment slot="head">
  <!-- 프로덕션 빌드 시에만 <link> 삽입 -->
  {import.meta.env.PROD && <link rel="stylesheet" href="/ui/mw/foo/bar.css" />}
</Fragment>

<!-- 나머지 HTML -->