> ## Documentation Index
> Fetch the complete documentation index at: https://sonamu.cartanova.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 프로젝트 구조

> Sonamu 프로젝트의 디렉토리 구조와 주요 파일

export const FileItem = ({name, description, children}) => {
  const isLeaf = !children;
  const ext = getFileExtension(name);
  const extStyle = ext ? getExtensionStyle(ext) : null;
  return <div style={{
    marginLeft: "30px"
  }}>
      <div style={{
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
        <span style={{
    position: "relative",
    display: "inline-block"
  }}>
          <span className="file-icon">{isLeaf && !name.endsWith("/") ? "📄" : "📁"}</span>
          {ext && <span style={{
    position: "absolute",
    bottom: "2px",
    right: "0px",
    fontSize: "5px",
    fontWeight: "bold",
    padding: "1px",
    borderRadius: "2px",
    lineHeight: "1",
    minWidth: "8px",
    textAlign: "center",
    ...extStyle
  }}>
              {ext}
            </span>}
        </span>
        <code>{name}</code>
        {description && <span className="description"> - {description}</span>}
      </div>
      {children}
    </div>;
};

export const FileTree = ({children}) => {
  return <div className="file-tree" style={{
    margin: "20px",
    marginLeft: "-30px"
  }}>
      {children}
    </div>;
};

Sonamu 프로젝트는 모노레포 구조로 백엔드(api)와 프론트엔드(web)를 함께 관리합니다.

## 전체 구조

<FileTree>
  <FileItem name="myapp/" description="Sonamu 모노레포 루트">
    <FileItem name="node_modules/" />

    <FileItem name="packages/">
      <FileItem name="api/" description="백엔드 API 서버" />

      <FileItem name="web/" description="프론트엔드 웹 애플리케이션" />
    </FileItem>

    <FileItem name=".gitignore" />

    <FileItem name="pnpm-lock.yaml" />

    <FileItem name="pnpm-workspace.yaml" description="워크스페이스 및 의존성 catalog" />

    <FileItem name="README.md" description="프로젝트 문서" />
  </FileItem>
</FileTree>

<Frame caption="VS Code에서 열린 Sonamu 프로젝트 전체 디렉토리 구조">
  <img src="https://mintcdn.com/cartanova-7788888c/mRzLpig-R41-Dqkz/images/projectStructure1.png?fit=max&auto=format&n=mRzLpig-R41-Dqkz&q=85&s=d5c8728e78404d4685e3b6b889acb7c5" alt="프로젝트 전체 구조" style={{ maxWidth: "500px", width: "100%", borderRadius: "0.75rem" }} width="698" height="494" data-path="images/projectStructure1.png" />
</Frame>

### pnpm 워크스페이스

루트의 `pnpm-workspace.yaml`에서 패키지와 공통 의존성 버전을 관리합니다:

```yaml title="pnpm-workspace.yaml" theme={null}
packages:
  - packages/api
  - packages/web

catalog:
  "@tanstack/react-query": ^5.90.12
  "@tanstack/react-router": 1.143.11
  react: ^19.2.3
  vite: 7.3.0
  vitest: 4.0.16
  zod: ^4.1.12
  # ... 기타 공통 의존성
```

## API 디렉토리 (백엔드)

### 루트 파일

<FileTree>
  <FileItem name="packages/api/">
    <FileItem name="src/" description="소스 코드" />

    <FileItem name="database/" description="데이터베이스 관련 파일" />

    <FileItem name="package.json" description="의존성 및 스크립트" />

    <FileItem name="vitest.config.ts" description="테스트 설정" />

    <FileItem name="tsconfig.json" description="TypeScript 설정" />

    <FileItem name="tsconfig.schemas.json" description="스키마 생성용 설정" />

    <FileItem name="tsconfig.types.json" description="타입 생성용 설정" />

    <FileItem name="custom-sequencer.ts" description="테스트 시퀀서" />

    <FileItem name="tsdown.config.ts" description="tsdown용 API 빌드 오버라이드 설정" />

    <FileItem name=".env" description="환경 변수 (자동 생성)" />
  </FileItem>
</FileTree>

<Frame caption="packages/api 디렉토리의 실제 파일 구조">
  <img src="https://mintcdn.com/cartanova-7788888c/mRzLpig-R41-Dqkz/images/projectStructure2.png?fit=max&auto=format&n=mRzLpig-R41-Dqkz&q=85&s=41b321dee49c0336e04de1bd3613331b" alt="packages/api 디렉토리 구조" style={{ maxWidth: "500px", width: "100%", borderRadius: "0.75rem" }} width="770" height="734" data-path="images/projectStructure2.png" />
</Frame>

<Accordion title="주요 파일 설명">
  **package.json**

  * 백엔드 의존성 관리
  * npm 스크립트: `dev`, `build`, `test`, `docker:up/down`, `dump`, `seed` 등

  **vitest.config.ts**

  * Vitest 테스트 설정
  * `getSonamuTestConfig()` 함수로 Sonamu 최적화 설정
  * 커버리지, 리포터, 시퀀서 설정

  **tsconfig.json**

  * 메인 TypeScript 컴파일러 설정
  * `tsconfig.schemas.json`: Zod 스키마 생성 전용
  * `tsconfig.types.json`: 타입 정의 생성 전용

  **.env**

  * 데이터베이스 연결 정보 (DB\_HOST, DB\_PORT, DB\_USER, DB\_PASSWORD)
  * 프로젝트 설정 변수 (DATABASE\_NAME, CONTAINER\_NAME, PROJECT\_NAME)
  * `pnpm create sonamu` 실행 시 자동 생성
</Accordion>

### src/ 디렉토리

<FileTree>
  <FileItem name="packages/api/src/">
    <FileItem name="index.ts" description="서버 진입점" />

    <FileItem name="sonamu.config.ts" description="Sonamu 설정 파일" />

    <FileItem name="application/" description="엔티티별 폴더 (자동 생성)">
      <FileItem name="{entity}/">
        <FileItem name="{entity}.entity.json" description="엔티티 정의" />

        <FileItem name="{entity}.model.ts" description="비즈니스 로직" />

        <FileItem name="{entity}.types.ts" description="타입 + Zod 스키마" />

        <FileItem name="{entity}.model.test.ts" description="테스트 (선택)" />
      </FileItem>

      <FileItem name="sonamu.generated.ts" description="Base 스키마 (자동 생성)" />
    </FileItem>

    <FileItem name="i18n/" description="다국어 설정">
      <FileItem name="ko.ts" description="한국어 번역" />

      <FileItem name="en.ts" description="영어 번역" />
    </FileItem>

    <FileItem name="migrations/" description="DB 마이그레이션 파일" />

    <FileItem name="testing/" description="테스트 설정">
      <FileItem name="global.ts" description="전역 테스트 설정" />

      <FileItem name="fixture.ts" description="Fixture 관리" />

      <FileItem name="setup-mocks.ts" description="Mock 설정" />
    </FileItem>

    <FileItem name="typings/" description="타입 정의">
      <FileItem name="sonamu.d.ts" description="Sonamu 전역 타입" />

      <FileItem name="fastify.d.ts" description="Fastify 확장 타입" />
    </FileItem>

    <FileItem name="utils/" description="유틸리티 함수">
      <FileItem name="subset-loaders.ts" description="Subset 로더" />
    </FileItem>
  </FileItem>
</FileTree>

<Frame caption="packages/api/src 디렉토리 구조 (application 폴더가 펼쳐진 상태)">
  <img src="https://mintcdn.com/cartanova-7788888c/mRzLpig-R41-Dqkz/images/projectStructure3.png?fit=max&auto=format&n=mRzLpig-R41-Dqkz&q=85&s=3ccccbc86fb39b2b8de881e49f0e6e74" alt="packages/api/src 디렉토리 구조" style={{ maxWidth: "500px", width: "100%", borderRadius: "0.75rem" }} width="798" height="900" data-path="images/projectStructure3.png" />
</Frame>

<Note>
  **엔티티 파일 생성 과정**

  `application/{entity}/` 폴더 내의 파일들은 Sonamu UI를 통해 엔티티를 생성하고 스캐폴딩해야 생성됩니다:

  * **{entity}.entity.json**: Sonamu UI에서 엔티티 정의 시 자동 생성
  * **{entity}.model.ts**: `pnpm scaffold model` 또는 Sonamu UI의 Scaffolding 탭에서 생성
  * **{entity}.types.ts**: 엔티티 저장 시 자동 생성
  * **{entity}.model.test.ts**: `pnpm scaffold model_test` 또는 Sonamu UI의 Scaffolding 탭에서 생성 (선택사항)

  처음 프로젝트를 생성했을 때는 `application/` 폴더가 비어 있습니다. 첫 번째 엔티티를 생성하면 해당 폴더가 만들어집니다.
</Note>

<Accordion title="주요 디렉토리 설명">
  **application/**

  * 첫 엔티티 생성 시 자동으로 생성됨
  * 각 엔티티마다 별도 디렉토리 생성
  * 예: `User` 엔티티 → `application/user/` 디렉토리

  **application/{entity}/{entity}.entity.json**

  * 엔티티 정의 파일
  * Sonamu UI에서 작성
  * 데이터베이스 스키마의 소스

  **application/{entity}/{entity}.model.ts**

  * 비즈니스 로직 구현
  * API 엔드포인트 정의 (`@api` 데코레이터)
  * 직접 작성하는 파일

  **application/{entity}/{entity}.types.ts**

  * TypeScript 타입 정의
  * Zod validation 스키마
  * 자동 생성되지만 확장 가능
  * 프론트엔드와 공유

  **application/sonamu.generated.ts**

  * 모든 엔티티의 Base 스키마 자동 생성
  * Enum 타입 및 레이블 정의
  * 직접 수정하지 말 것

  **i18n/**

  * 다국어 번역 파일
  * `ko.ts`: 한국어, `en.ts`: 영어
  * Entity 추가 시 `sd.generated.ts`가 자동 생성됨

  **migrations/**

  * Sonamu UI에서 생성한 DB 마이그레이션 파일
  * `pnpm sonamu migrate run`으로 실행

  **testing/**

  * Vitest 테스트 환경 설정
  * `global.ts`: `export { setup } from "sonamu/test"` 패턴 사용
  * Fixture 데이터 관리
</Accordion>

<Info>
  **더 알아보기 - 엔티티 파일** - [엔티티 정의하기](/ko/core-concepts/entity/defining-entities) -
  entity.json 작성법 - [Model 만들기](/ko/core-concepts/model/creating-models) - model.ts 작성
  가이드 - [타입 시스템](/ko/core-concepts/type-system/entity-types) - types.ts 이해하기 - [자동
  생성되는 것들](/ko/core-concepts/auto-generation/what-gets-generated) - 어떤 파일이 자동
  생성되는지 - [테스트 작성하기](/ko/testing/writing-tests/test-structure) - 테스트 파일 구조
</Info>

### database/ 디렉토리

<FileTree>
  <FileItem name="packages/api/database/">
    <FileItem name="docker-compose.yml" description="PostgreSQL 컨테이너 설정" />

    <FileItem name="fixtures/">
      <FileItem name="init.sh" description="데이터베이스 초기화 스크립트" />
    </FileItem>

    <FileItem name="dumps/" description="데이터 덤프 파일" />

    <FileItem name="scripts/">
      <FileItem name="dump.sh" description="데이터 백업 스크립트" />

      <FileItem name="seed.sh" description="데이터 복원 스크립트" />
    </FileItem>
  </FileItem>
</FileTree>

<Accordion title="주요 파일 설명">
  **docker-compose.yml**

  * PostgreSQL + pgvector 이미지
  * 컨테이너 이름, 포트, 환경 변수 설정
  * `pnpm docker:up`으로 실행

  **fixtures/init.sh**

  * 데이터베이스 초기화 쉘 스크립트
  * pgvector 확장 설치 및 데이터베이스 생성
  * 환경변수로 데이터베이스 이름 지정 (`DATABASE_NAME`, `_fixture`, `_test`)
  * `pnpm create sonamu` 실행 시 자동 생성

  **dumps/**

  * `pnpm dump` 명령으로 생성된 SQL 파일
  * 데이터 백업 저장소

  **scripts/**

  * `dump.sh`: 현재 DB 데이터를 dumps/에 백업
  * `seed.sh`: dumps/의 데이터를 DB에 복원
</Accordion>

<Info>
  **더 알아보기 - 설정 파일** - [sonamu.config.ts
  설정](/ko/configuration/sonamu-config/project-settings) - 프로젝트 전체 설정 - [데이터베이스
  설정](/ko/configuration/sonamu-config/database) - DB 연결 및 설정 - [서버
  설정](/ko/configuration/sonamu-config/server) - Fastify 서버 설정 - [TypeScript
  설정](/ko/configuration/typescript/tsconfig) - 컴파일러 옵션 - [환경
  변수](/ko/configuration/environment-variables/env-setup) - .env 파일 관리
</Info>

## Web 디렉토리 (프론트엔드)

### 루트 파일

<FileTree>
  <FileItem name="packages/web/">
    <FileItem name="src/" description="소스 코드" />

    <FileItem name="index.html" description="HTML 엔트리포인트" />

    <FileItem name="package.json" description="의존성 및 스크립트" />

    <FileItem name="vite.config.ts" description="Vite 설정" />

    <FileItem name="tailwind.config.ts" description="Tailwind CSS 설정" />

    <FileItem name="tsconfig.json" description="TypeScript 설정" />

    <FileItem name="tsconfig.node.json" description="Node 환경 설정" />

    <FileItem name=".sonamu.env" description="환경 변수" />
  </FileItem>
</FileTree>

<Frame caption="packages/web 디렉토리의 실제 파일 구조">
  <img src="https://mintcdn.com/cartanova-7788888c/wk-O_9zBoKGthXNV/images/projectStructure4.png?fit=max&auto=format&n=wk-O_9zBoKGthXNV&q=85&s=d1d95f5795967fae93683d700226e3ae" alt="packages/web 디렉토리 구조" style={{ maxWidth: "500px", width: "100%", borderRadius: "0.75rem" }} width="848" height="644" data-path="images/projectStructure4.png" />
</Frame>

<Accordion title="주요 파일 설명">
  **vite.config.ts**

  * Vite 개발 서버 설정
  * TanStack Router, Tailwind CSS v4, unplugin-icons 플러그인
  * API 프록시 설정 (`/api` → `http://localhost:34900`)
  * SSR 설정 포함

  **tailwind.config.ts**

  * Tailwind CSS v4 설정

  **.sonamu.env**

  * API 서버 연결 정보
  * `API_HOST`, `API_PORT` 설정
</Accordion>

### src/ 디렉토리

<FileTree>
  <FileItem name="packages/web/src/">
    <FileItem name="entry-client.tsx" description="클라이언트 엔트리포인트" />

    <FileItem name="entry-server.generated.tsx" description="SSR 엔트리포인트 (자동 생성)" />

    <FileItem name="App.tsx" description="루트 컴포넌트" />

    <FileItem name="routeTree.gen.ts" description="라우트 트리 (자동 생성)" />

    <FileItem name="routes/" description="TanStack Router 기반 페이지">
      <FileItem name="__root.tsx" description="루트 레이아웃" />

      <FileItem name="index.tsx" description="홈 페이지" />
    </FileItem>

    <FileItem name="services/" description="API 서비스 (자동 생성)">
      <FileItem name="{entity}/" description="엔티티별 서비스">
        <FileItem name="{entity}.service.ts" />
      </FileItem>

      <FileItem name="sonamu.generated.ts" />

      <FileItem name="sonamu.shared.ts" />

      <FileItem name="services.generated.ts" />
    </FileItem>

    <FileItem name="contexts/" description="React Context">
      <FileItem name="SonamuContext.tsx" description="Sonamu Provider" />
    </FileItem>

    <FileItem name="i18n/" description="다국어 설정">
      <FileItem name="ko.ts" />

      <FileItem name="en.ts" />
    </FileItem>

    <FileItem name="admin-common/" description="공통 컴포넌트">
      <FileItem name="ApiLogViewer.tsx" />
    </FileItem>

    <FileItem name="components/" description="UI 컴포넌트" />

    <FileItem name="styles/" description="스타일 파일" />

    <FileItem name="vite-env.d.ts" description="Vite 타입 정의" />
  </FileItem>
</FileTree>

<Accordion title="주요 디렉토리 설명">
  **routes/**

  * TanStack Router 기반 파일 시스템 라우팅
  * `__root.tsx`: 전역 레이아웃
  * 파일명이 URL 경로에 매핑됨

  **services/**

  * API 서버와 통신하는 서비스 레이어
  * 엔티티마다 자동 생성
  * TanStack Query 통합 지원

  **contexts/**

  * React Context Provider
  * SonamuContext: 전역 상태 관리

  **i18n/**

  * 프론트엔드 다국어 번역 파일
  * API의 i18n과 동기화

  **admin-common/**

  * 재사용 가능한 공통 컴포넌트
  * ApiLogViewer 등 디버깅 도구
</Accordion>

<Info>
  **더 알아보기 - 프론트엔드** - [Service 작동
  원리](/ko/frontend-integration/generated-services/how-services-work) - 자동 생성 메커니즘 -
  [Service 사용하기](/ko/frontend-integration/generated-services/using-services) - API 호출 방법 -
  [공유 타입](/ko/frontend-integration/type-safety/shared-types) - 백엔드-프론트엔드 타입 동기화
</Info>

## 엔티티 생성 시 파일 구조 예시

User 엔티티를 생성하면 다음과 같은 구조가 만들어집니다:

<FileTree>
  <FileItem name="packages/api/src/application/">
    <FileItem name="user/">
      <FileItem name="user.entity.json" description="Sonamu UI에서 생성" />

      <FileItem name="user.model.ts" description="직접 작성" />

      <FileItem name="user.types.ts" description="자동 생성 (확장 가능)" />

      <FileItem name="user.model.test.ts" description="직접 작성 (선택)" />
    </FileItem>

    <FileItem name="sonamu.generated.ts" description="자동 업데이트" />
  </FileItem>

  <FileItem name="packages/api/src/migrations/">
    <FileItem name="20250106120000_create_user.sql" description="자동 생성" />
  </FileItem>

  <FileItem name="packages/web/src/services/">
    <FileItem name="user/">
      <FileItem name="user.service.ts" description="자동 생성" />
    </FileItem>
  </FileItem>
</FileTree>

<Frame caption="User 엔티티 생성 후 packages/api/src/application/user 폴더의 실제 파일 구조">
  <div className="grid grid-cols-2 gap-4">
    <img src="https://mintcdn.com/cartanova-7788888c/wk-O_9zBoKGthXNV/images/projectStructure5.png?fit=max&auto=format&n=wk-O_9zBoKGthXNV&q=85&s=0f108de31a0c15a13b4140ab0854b8a7" alt="user 폴더 구조 1" style={{ borderRadius: "0.75rem" }} width="856" height="958" data-path="images/projectStructure5.png" />

    <img src="https://mintcdn.com/cartanova-7788888c/wk-O_9zBoKGthXNV/images/projectStructure6.png?fit=max&auto=format&n=wk-O_9zBoKGthXNV&q=85&s=418803499200af1bc8226514ee0a925a" alt="user 폴더 구조 2" style={{ borderRadius: "0.75rem" }} width="838" height="1108" data-path="images/projectStructure6.png" />
  </div>
</Frame>

### 각 파일의 역할

<CodeGroup>
  ```json title="user.entity.json" theme={null}
  {
    "properties": [
      {
        "name": "id",
        "type": "int",
        "isPrimary": true
      },
      {
        "name": "email",
        "type": "varchar"
      },
      {
        "name": "name",
        "type": "varchar"
      }
    ]
  }
  ```

  ```typescript title="user.model.ts" theme={null}
  // 직접 작성하는 파일
  import { api, BaseModelClass } from "sonamu";

  class UserModelClass extends BaseModelClass {
    @api({ httpMethod: "GET", clients: ["axios", "tanstack-query"] })
    async findById(id: number): Promise<UserSubsetA | null> {
      // 비즈니스 로직
    }
  }

  export const UserModel = new UserModelClass();
  ```

  ```typescript title="user.types.ts" theme={null}
  // 자동 생성 + 확장 가능
  import { z } from "zod";
  import { UserBaseSchema } from "../sonamu.generated";

  // Base 타입 (자동 생성됨)
  export type User = z.infer<typeof UserBaseSchema>;

  // 확장 가능한 커스텀 타입
  export const UserSaveParams = UserBaseSchema.partial({
    id: true,
    created_at: true,
  });
  export type UserSaveParams = z.infer<typeof UserSaveParams>;
  ```

  ```typescript title="sonamu.generated.ts" theme={null}
  // 자동 생성 - 직접 수정 금지
  export const UserBaseSchema = z.object({
    id: z.number(),
    email: z.string(),
    name: z.string(),
    created_at: z.date(),
  });

  export const UserOrderBy = z.enum(["id-desc", "name-asc"]);
  export type UserOrderBy = z.infer<typeof UserOrderBy>;
  ```

  ```typescript title="user.service.ts (web)" theme={null}
  // 자동 생성
  import { useQuery } from "@tanstack/react-query";

  export class UserService {
    static async findById(id: number): Promise<UserSubsetA | null> {
      const res = await axios.get(`/api/user/findById`, { params: { id } });
      return res.data;
    }

    // TanStack Query 훅도 자동 생성
    static useFindById(id: number) {
      return useQuery({
        queryKey: ["User", "findById", id],
        queryFn: () => UserService.findById(id),
      });
    }
  }
  ```
</CodeGroup>

<Frame caption="VS Code에서 user.entity.json, user.model.ts, user.types.ts 파일을 나란히 열어 놓은 화면 (split view)">
  <img src="https://mintcdn.com/cartanova-7788888c/wk-O_9zBoKGthXNV/images/projectStructure7.png?fit=max&auto=format&n=wk-O_9zBoKGthXNV&q=85&s=a2cfa0a6198a19e4c598ff99be14a0a3" alt="VS Code split view" style={{ width: "100%", borderRadius: "0.75rem" }} width="5004" height="1876" data-path="images/projectStructure7.png" />
</Frame>

<Note>
  **자동 생성 vs 직접 작성** - `.entity.json`: Sonamu UI에서 작성 - `.model.ts`: 직접 작성 -
  `.types.ts`: 자동 생성되지만 확장 가능 - `sonamu.generated.ts`: 자동 생성 - 수정 금지 - `{entity}
      .service.ts`: 자동 생성 - 수정 금지
</Note>

<Info>
  **더 알아보기 - 파일별 가이드** - [엔티티 정의하기](/ko/core-concepts/entity/defining-entities) -
  entity.json 작성법 - [@api 데코레이터](/ko/core-concepts/model/api-decorator) - model.ts에서 API
  정의 - [Entity Types](/ko/core-concepts/type-system/entity-types) - types.ts 활용하기 - [Generated
  Types](/ko/core-concepts/type-system/generated-types) - sonamu.generated.ts 이해
</Info>

## 개발 시 주요 작업 위치

| 작업 내용     | 위치                                                             | 방법        |
| --------- | -------------------------------------------------------------- | --------- |
| 엔티티 정의    | `packages/api/src/application/{entity}/{entity}.entity.json`   | Sonamu UI |
| 비즈니스 로직   | `packages/api/src/application/{entity}/{entity}.model.ts`      | 직접 작성     |
| 커스텀 타입    | `packages/api/src/application/{entity}/{entity}.types.ts`      | 직접 확장     |
| API 엔드포인트 | Model 파일에 `@api` 데코레이터                                         | 직접 작성     |
| 데이터베이스 설정 | `packages/api/src/sonamu.config.ts`                            | 직접 작성     |
| 서버 설정     | `packages/api/src/sonamu.config.ts`                            | 직접 작성     |
| 테스트 작성    | `packages/api/src/application/{entity}/{entity}.model.test.ts` | 직접 작성     |
| 페이지 컴포넌트  | `packages/web/src/routes/`                                     | 직접 작성     |
| 공통 컴포넌트   | `packages/web/src/admin-common/`                               | 직접 작성     |

<Warning>
  **자동 생성 파일 주의사항** - `sonamu.generated.ts`: 절대 수정하지 마세요 - `{entity}.service.ts`:
  절대 수정하지 마세요 - `{entity}.types.ts`: 확장은 가능하지만 자동 생성 부분은 수정하지 마세요
</Warning>

## 다음 단계

프로젝트 구조를 이해했다면, 이제 첫 번째 엔티티를 만들어보세요:

<CardGroup cols={2}>
  <Card title="첫 엔티티 만들기" icon="database" href="/ko/getting-started/first-entity">
    Sonamu UI를 사용하여 첫 번째 엔티티를 생성하고 데이터베이스 스키마를 정의하세요.
  </Card>

  <Card title="개발 워크플로우" icon="diagram-project" href="/ko/getting-started/development-workflow">
    Sonamu의 전체 개발 사이클을 이해하고 효율적으로 작업하는 방법을 배워보세요.
  </Card>
</CardGroup>